verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

feat: CustomerSample to VnTable

This commit is contained in:
Javier Segarra 2024-09-10 15:17:10 +02:00
parent bcfa67baec
commit 622afca9be
13 changed files with 93 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LeftMenuItem.vue
View File

@ -36,7 +36,7 @@ const itemComputed = computed(() => {
<QItemSection> <QItemSection>
{{ t(itemComputed.title) }} {{ t(itemComputed.title) }}
<QTooltip> <QTooltip>
{{ 'Ctrl + Alt + ' + item.keyBinding.toUpperCase() }} {{ 'Ctrl + Alt + ' + item?.keyBinding?.toUpperCase() }}
</QTooltip> </QTooltip>
</QItemSection> </QItemSection>
<QItemSection side> <QItemSection side>

6
src/components/VnTable/VnTable.vue
View File

@ -363,7 +363,7 @@ function handleOnDataSaved(_, res) {
<!-- class in div to fix warn--> <!-- class in div to fix warn-->
<CrudModel <CrudModel
v-bind="$attrs" v-bind="$attrs"
:class="$attrs['class']" :class="$attrs['class'] ?? 'q-px-md'"
:limit="$attrs['limit'] ?? 20" :limit="$attrs['limit'] ?? 20"
ref="CrudModelRef" ref="CrudModelRef"
@on-fetch="(...args) => emit('onFetch', ...args)" @on-fetch="(...args) => emit('onFetch', ...args)"
@ -638,7 +638,7 @@ function handleOnDataSaved(_, res) {
</QTable> </QTable>
</template> </template>
</CrudModel> </CrudModel>
<QPageSticky :offset="[20, 20]" style="z-index: 2"> <QPageSticky v-if="$props.create" :offset="[20, 20]" style="z-index: 2">
<QBtn <QBtn
@click=" @click="
() => () =>
@ -650,7 +650,7 @@ function handleOnDataSaved(_, res) {
shortcut="+" shortcut="+"
/> />
<QTooltip> <QTooltip>
{{ createForm.title }} {{ createForm?.title }}
</QTooltip> </QTooltip>
</QPageSticky> </QPageSticky>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale"> <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">

4
src/pages/Customer/Card/CustomerBillingData.vue
View File

@ -31,8 +31,8 @@ const getBankEntities = (data, formData) => {
</script> </script>
<template> <template>
<fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" /> <FetchData @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
<fetch-data <FetchData
ref="bankEntitiesRef" ref="bankEntitiesRef"
@on-fetch="(data) => (bankEntitiesOptions = data)" @on-fetch="(data) => (bankEntitiesOptions = data)"
:filter="filter" :filter="filter"

1
src/pages/Customer/Card/CustomerGreuges.vue
View File

@ -47,7 +47,6 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
// name: 'userFk',
label: t('Created by'), label: t('Created by'),
component: 'userLink', component: 'userLink',
attrs: ({ row }) => { attrs: ({ row }) => {

80
src/pages/Customer/Card/CustomerSamples.vue
View File

@ -3,18 +3,18 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { QBtn } from 'quasar'; import { QBtn, useQuasar } from 'quasar';
import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import { toDateTimeFormat } from 'src/filters/date'; import { toDateTimeFormat } from 'src/filters/date';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { dashIfEmpty } from 'src/filters';
import CustomerSamplesCreate from '../components/CustomerSamplesCreate.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const rows = ref([]);
const filter = { const filter = {
include: [ include: [
{ relation: 'type', scope: { fields: ['code', 'description'] } }, { relation: 'type', scope: { fields: ['code', 'description'] } },
@ -26,91 +26,67 @@ const filter = {
limit: 20, limit: 20,
}; };
const basicSpan = {
component: 'span',
props: () => {},
event: () => {},
};
const tableColumnComponents = {
sent: basicSpan,
description: basicSpan,
worker: {
component: 'span',
props: () => ({ class: 'link' }),
event: () => {},
},
company: basicSpan,
};
const columns = computed(() => [ const columns = computed(() => [
{ {
align: 'left', align: 'left',
field: 'created', name: 'created',
label: t('Sent'), label: t('Sent'),
name: 'sent', format: ({ created }) => toDateTimeFormat(created),
format: (value) => toDateTimeFormat(value),
}, },
{ {
align: 'left', align: 'left',
field: (value) => value.type.description, format: (row) => row.type.description,
label: t('Description'), label: t('Description'),
name: 'description', name: 'description',
}, },
{ {
align: 'left', align: 'left',
field: (value) => value.user.name,
label: t('Worker'), label: t('Worker'),
name: 'worker', name: 'worker',
}, },
{ {
align: 'left', align: 'left',
field: (value) => value.company?.code, format: ({ company }) => company?.code ?? dashIfEmpty(company),
label: t('Company'), label: t('Company'),
name: 'company', name: 'company',
}, },
]); ]);
const quasar = useQuasar();
const toCustomerSamplesCreate = () => { const toCustomerSamplesCreate = () => {
router.push({ name: 'CustomerSamplesCreate' }); quasar
.dialog({
component: CustomerSamplesCreate,
})
.onOk(() => tableRef.value.reload());
}; };
const tableRef = ref();
</script> </script>
<template> <template>
<FetchData <VnTable
:filter="filter" ref="tableRef"
@on-fetch="(data) => (rows = data)" data-key="ClientSamples"
auto-load auto-load
:filter="filter"
url="ClientSamples" url="ClientSamples"
/>
<QTable
:columns="columns" :columns="columns"
:pagination="{ rowsPerPage: 12 }" :pagination="{ rowsPerPage: 12 }"
:disable-option="{ card: true }"
:rows="rows" :rows="rows"
class="full-width q-mt-md" class="full-width q-mt-md"
row-key="id" row-key="id"
:create="false"
:no-data-label="t('globals.noResults')" :no-data-label="t('globals.noResults')"
> >
<template #body-cell="props"> <template #column-worker="{ row }">
<QTd auto-width :props="props"> <div v-if="row.user">
<span :props="props" class="cursor-pointer"> <span class="link">{{ row.user?.name }}</span
<component ><WorkerDescriptorProxy :id="row.userFk" />
:is="tableColumnComponents[props.col.name].component" </div>
class="col-content" <span v-else>{{ dashIfEmpty(row.user) }}</span>
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
:title="props.value"
>
{{ props.value }}
<WorkerDescriptorProxy
:id="props.row.userFk"
v-if="props.col.name === 'worker'"
/>
</component>
</span>
</QTd>
</template> </template>
</QTable> </VnTable>
<QPageSticky :offset="[18, 18]"> <QPageSticky :offset="[18, 18]">
<QBtn @click.stop="toCustomerSamplesCreate()" color="primary" fab icon="add" /> <QBtn @click.stop="toCustomerSamplesCreate()" color="primary" fab icon="add" />

4
src/pages/Customer/components/CustomerAddressCreate.vue
View File

@ -57,12 +57,12 @@ function handleLocation(data, location) {
</script> </script>
<template> <template>
<fetch-data <FetchData
@on-fetch="(data) => (agencyModes = data)" @on-fetch="(data) => (agencyModes = data)"
auto-load auto-load
url="AgencyModes/isActive" url="AgencyModes/isActive"
/> />
<fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" /> <FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
<FormModel <FormModel
:form-initial-data="formInitialData" :form-initial-data="formInitialData"

8
src/pages/Customer/components/CustomerAddressEdit.vue
View File

@ -113,18 +113,18 @@ function handleLocation(data, location) {
</script> </script>
<template> <template>
<fetch-data <FetchData
@on-fetch="(data) => (agencyModes = data)" @on-fetch="(data) => (agencyModes = data)"
auto-load auto-load
url="AgencyModes/isActive" url="AgencyModes/isActive"
/> />
<fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" /> <FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
<fetch-data <FetchData
@on-fetch="(data) => (customsAgents = data)" @on-fetch="(data) => (customsAgents = data)"
auto-load auto-load
url="CustomsAgents" url="CustomsAgents"
/> />
<fetch-data @on-fetch="getData" auto-load url="ObservationTypes" /> <FetchData @on-fetch="getData" auto-load url="ObservationTypes" />
<FormModel <FormModel
:observe-form-changes="false" :observe-form-changes="false"

12
src/pages/Customer/components/CustomerFileManagementCreate.vue
View File

@ -83,35 +83,35 @@ const toCustomerFileManagement = () => {
</script> </script>
<template> <template>
<fetch-data <FetchData
@on-fetch="(data) => (client = data)" @on-fetch="(data) => (client = data)"
auto-load auto-load
:url="`Clients/${route.params.id}/getCard`" :url="`Clients/${route.params.id}/getCard`"
/> />
<fetch-data <FetchData
:filter="filterFindOne" :filter="filterFindOne"
@on-fetch="(data) => (findOne = data)" @on-fetch="(data) => (findOne = data)"
auto-load auto-load
url="DmsTypes/findOne" url="DmsTypes/findOne"
/> />
<fetch-data <FetchData
@on-fetch="(data) => (allowedContentTypes = data)" @on-fetch="(data) => (allowedContentTypes = data)"
auto-load auto-load
url="DmsContainers/allowedContentTypes" url="DmsContainers/allowedContentTypes"
/> />
<fetch-data <FetchData
:filter="filterCompanies" :filter="filterCompanies"
@on-fetch="(data) => (optionsCompanies = data)" @on-fetch="(data) => (optionsCompanies = data)"
auto-load auto-load
url="Companies" url="Companies"
/> />
<fetch-data <FetchData
:filter="filterWarehouses" :filter="filterWarehouses"
@on-fetch="(data) => (optionsWarehouses = data)" @on-fetch="(data) => (optionsWarehouses = data)"
auto-load auto-load
url="Warehouses" url="Warehouses"
/> />
<fetch-data <FetchData
:filter="filterWarehouses" :filter="filterWarehouses"
@on-fetch="(data) => (optionsDmsTypes = data)" @on-fetch="(data) => (optionsDmsTypes = data)"
auto-load auto-load

10
src/pages/Customer/components/CustomerFileManagementEdit.vue
View File

@ -69,25 +69,25 @@ const toCustomerFileManagement = () => {
</script> </script>
<template> <template>
<fetch-data :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load /> <FetchData :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load />
<fetch-data <FetchData
@on-fetch="(data) => (allowedContentTypes = data)" @on-fetch="(data) => (allowedContentTypes = data)"
auto-load auto-load
url="DmsContainers/allowedContentTypes" url="DmsContainers/allowedContentTypes"
/> />
<fetch-data <FetchData
:filter="filterCompanies" :filter="filterCompanies"
@on-fetch="(data) => (optionsCompanies = data)" @on-fetch="(data) => (optionsCompanies = data)"
auto-load auto-load
url="Companies" url="Companies"
/> />
<fetch-data <FetchData
:filter="filterWarehouses" :filter="filterWarehouses"
@on-fetch="(data) => (optionsWarehouses = data)" @on-fetch="(data) => (optionsWarehouses = data)"
auto-load auto-load
url="Warehouses" url="Warehouses"
/> />
<fetch-data <FetchData
:filter="filterWarehouses" :filter="filterWarehouses"
@on-fetch="(data) => (optionsDmsTypes = data)" @on-fetch="(data) => (optionsDmsTypes = data)"
auto-load auto-load

64
src/pages/Customer/components/CustomerSamplesCreate.vue
View File

@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import { usePrintService } from 'composables/usePrintService'; import { usePrintService } from 'composables/usePrintService';
import { useQuasar } from 'quasar'; import { useDialogPluginComponent, useQuasar } from 'quasar';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator'; import { useValidator } from 'src/composables/useValidator';
@ -18,6 +18,10 @@ import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
import CustomerSamplesPreview from 'src/pages/Customer/components/CustomerSamplesPreview.vue'; import CustomerSamplesPreview from 'src/pages/Customer/components/CustomerSamplesPreview.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import FormPopup from 'src/components/FormPopup.vue';
defineEmits(['confirm', ...useDialogPluginComponent.emits]);
const { dialogRef, onDialogOK } = useDialogPluginComponent();
const { notify } = useNotify(); const { notify } = useNotify();
const { t } = useI18n(); const { t } = useI18n();
@ -181,6 +185,7 @@ const onDataSaved = async () => {
const samplesData = await getSamples(); const samplesData = await getSamples();
const path = `${samplesData.model}/${route.params.id}/${samplesData.code}-email`; const path = `${samplesData.model}/${route.params.id}/${samplesData.code}-email`;
await sendEmail(path, params); await sendEmail(path, params);
onDialogOK(params);
} catch (error) { } catch (error) {
notify('errors.create', 'negative'); notify('errors.create', 'negative');
} }
@ -197,40 +202,38 @@ const toCustomerSamples = () => {
</script> </script>
<template> <template>
<fetch-data <FetchData
:filter="filterEmailUsers" :filter="filterEmailUsers"
@on-fetch="setEmailUser" @on-fetch="setEmailUser"
auto-load auto-load
url="EmailUsers" url="EmailUsers"
/> />
<fetch-data <FetchData
:filter="filterClientsAddresses" :filter="filterClientsAddresses"
:url="`Clients/${route.params.id}/addresses`" :url="`Clients/${route.params.id}/addresses`"
@on-fetch="setClientsAddresses" @on-fetch="setClientsAddresses"
auto-load auto-load
/> />
<fetch-data <FetchData
:filter="filterCompanies" :filter="filterCompanies"
@on-fetch="(data) => (optionsCompanies = data)" @on-fetch="(data) => (optionsCompanies = data)"
auto-load auto-load
url="Companies" url="Companies"
/> />
<fetch-data <FetchData
:filter="filterSamplesVisible" :filter="filterSamplesVisible"
@on-fetch="(data) => (optionsSamplesVisible = data)" @on-fetch="(data) => (optionsSamplesVisible = data)"
auto-load auto-load
url="Samples/visible" url="Samples/visible"
/> />
<Teleport v-if="stateStore?.isSubToolbarShown()" to="#st-actions"> <QDialog ref="dialogRef">
<QBtnGroup push class="q-gutter-x-sm"> <FormPopup
<QBtn :default-cancel-button="false"
:label="t('globals.cancel')" :default-submit-button="false"
@click="toCustomerSamples" @on-submit="onSubmit()"
color="primary" >
flat <template #custom-buttons>
icon="close"
/>
<QBtn <QBtn
:disabled="isLoading || !sampleType?.hasPreview" :disabled="isLoading || !sampleType?.hasPreview"
:label="t('Preview')" :label="t('Preview')"
@ -238,32 +241,15 @@ const toCustomerSamples = () => {
@click.stop="getPreview()" @click.stop="getPreview()"
color="primary" color="primary"
flat flat
icon="preview" icon="preview" /><QBtn
/>
<QBtn
:disabled="!hasChanged"
:label="t('globals.reset')"
:loading="isLoading"
@click="setInitialData"
color="primary"
flat
icon="restart_alt"
type="reset"
/>
<QBtn
:disabled="!hasChanged" :disabled="!hasChanged"
:label="t('globals.save')" :label="t('globals.save')"
:loading="isLoading" :loading="isLoading"
@click="onSubmit" @click="onSubmit"
color="primary" color="primary"
icon="save" icon="save"
/> /></template>
</QBtnGroup> <template #form-inputs>
</Teleport>
<div class="full-width flex justify-center">
<QCard class="card-width q-pa-lg">
<QForm>
<div class="col"> <div class="col">
<VnSelect <VnSelect
:label="t('Sample')" :label="t('Sample')"
@ -371,15 +357,15 @@ const toCustomerSamples = () => {
required="true" required="true"
v-model="initialData.from" v-model="initialData.from"
/> />
</div> </div> </VnRow
</VnRow> ></template>
</QForm> </FormPopup>
</QCard> </QDialog>
</div>
</template> </template>
<i18n> <i18n>
es: es:
New sample: Crear plantilla
Sample: Plantilla Sample: Plantilla
Recipient: Destinatario Recipient: Destinatario
Reply to: Responder a Reply to: Responder a

1
src/pages/Customer/components/CustomerSummaryTable.vue
View File

@ -150,6 +150,7 @@ const setShippedColor = (date) => {
order="shipped DESC, id" order="shipped DESC, id"
:disable-option="{ card: true, table: true }" :disable-option="{ card: true, table: true }"
limit="5" limit="5"
class="full-width"
> >
<template #column-nickname="{ row }"> <template #column-nickname="{ row }">
<span class="link"> <span class="link">

2
src/pages/Dashboard/DashboardMain.vue
View File

@ -60,7 +60,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
<QTooltip> <QTooltip>
{{ {{
'Ctrl + Alt + ' + 'Ctrl + Alt + ' +
item.keyBinding.toUpperCase() item?.keyBinding?.toUpperCase()
}} }}
</QTooltip> </QTooltip>
</div> </div>

4
src/pages/Department/Card/DepartmentBasicData.vue
View File

@ -16,12 +16,12 @@ const workersOptions = ref([]);
const clientsOptions = ref([]); const clientsOptions = ref([]);
</script> </script>
<template> <template>
<fetch-data <FetchData
url="Workers/search" url="Workers/search"
@on-fetch="(data) => (workersOptions = data)" @on-fetch="(data) => (workersOptions = data)"
auto-load auto-load
/> />
<fetch-data url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load /> <FetchData url="Clients" @on-fetch="(data) => (clientsOptions = data)" auto-load />
<FormModel <FormModel
:url="`Departments/${route.params.id}`" :url="`Departments/${route.params.id}`"
model="department" model="department"