wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge pull request '7773-testToMaster_2430' (!561) from 7773-testToMaster_2430 into master 

Reviewed-on: verdnatura/salix-front#561
Reviewed-by: Guillermo Bonet <guillermo@verdnatura.es>
This commit is contained in:
Alex Moreno 2024-07-23 06:24:04 +00:00
parent 50c8b3c672 a421c96e85
commit 53d59ee75c
180 changed files with 6937 additions and 5058 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -14,5 +14,5 @@
"[vue]": { "[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" "editor.defaultFormatter": "esbenp.prettier-vscode"
}, },
"cSpell.words": ["axios"] "cSpell.words": ["axios", "composables"]
} }

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "salix-front", "name": "salix-front",
"version": "24.28.1", "version": "24.30.1",
"description": "Salix frontend", "description": "Salix frontend",
"productName": "Salix", "productName": "Salix",
"author": "Verdnatura", "author": "Verdnatura",

4
src/boot/axios.js
View File

@ -55,10 +55,10 @@ const onResponseError = (error) => {
} }
if (session.isLoggedIn() && response?.status === 401) { if (session.isLoggedIn() && response?.status === 401) {
session.destroy(); session.destroy(false);
const hash = window.location.hash; const hash = window.location.hash;
const url = hash.slice(1); const url = hash.slice(1);
Router.push({ path: url }); Router.push(`/login?redirect=${url}`);
} else if (!session.isLoggedIn()) { } else if (!session.isLoggedIn()) {
return Promise.reject(error); return Promise.reject(error);
} }

25
src/components/CreateManualInvoiceForm.vue
View File

@ -46,22 +46,6 @@ const onDataSaved = async (formData, requestResponse) => {
@on-fetch="(data) => (taxAreasOptions = data)" @on-fetch="(data) => (taxAreasOptions = data)"
auto-load auto-load
/> />
<FetchData
url="Tickets"
:filter="{
fields: ['id', 'nickname'],
where: { refFk: null },
order: 'shipped DESC',
}"
@on-fetch="(data) => (ticketsOptions = data)"
auto-load
/>
<FetchData
url="Clients"
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
@on-fetch="(data) => (clientsOptions = data)"
auto-load
/>
<FormModelPopup <FormModelPopup
ref="formModelPopupRef" ref="formModelPopupRef"
:title="t('Create manual invoice')" :title="t('Create manual invoice')"
@ -84,6 +68,10 @@ const onDataSaved = async (formData, requestResponse) => {
option-value="id" option-value="id"
v-model="data.ticketFk" v-model="data.ticketFk"
@update:model-value="data.clientFk = null" @update:model-value="data.clientFk = null"
url="Tickets"
:where="{ refFk: null }"
:fields="['id', 'nickname']"
:filter-options="{ order: 'shipped DESC' }"
> >
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem v-bind="scope.itemProps">
@ -105,6 +93,9 @@ const onDataSaved = async (formData, requestResponse) => {
option-value="id" option-value="id"
v-model="data.clientFk" v-model="data.clientFk"
@update:model-value="data.ticketFk = null" @update:model-value="data.ticketFk = null"
url="Clients"
:fields="['id', 'name']"
:filter-options="{ order: 'name ASC' }"
/> />
<VnInputDate :label="t('Max date')" v-model="data.maxShipped" /> <VnInputDate :label="t('Max date')" v-model="data.maxShipped" />
</VnRow> </VnRow>
@ -116,7 +107,6 @@ const onDataSaved = async (formData, requestResponse) => {
option-label="description" option-label="description"
option-value="code" option-value="code"
v-model="data.serial" v-model="data.serial"
:required="true"
/> />
<VnSelect <VnSelect
:label="t('Area')" :label="t('Area')"
@ -125,7 +115,6 @@ const onDataSaved = async (formData, requestResponse) => {
option-label="code" option-label="code"
option-value="code" option-value="code"
v-model="data.taxArea" v-model="data.taxArea"
:required="true"
/> />
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">

21
src/components/CrudModel.vue
View File

@ -67,7 +67,7 @@ const $props = defineProps({
default: '', default: '',
description: 'It is used for redirect on click "save and continue"', description: 'It is used for redirect on click "save and continue"',
}, },
hasSubtoolbar: { hasSubToolbar: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
@ -98,19 +98,17 @@ defineExpose({
}); });
async function fetch(data) { async function fetch(data) {
if (data && Array.isArray(data)) {
let $index = 0;
data.map((d) => (d.$index = $index++));
}
resetData(data); resetData(data);
emit('onFetch', data); emit('onFetch', data);
return data; return data;
} }
function resetData(data) { function resetData(data) {
if (!data) return; if (!data) return;
if (data && Array.isArray(data)) {
let $index = 0;
data.map((d) => (d.$index = $index++));
}
originalData.value = JSON.parse(JSON.stringify(data)); originalData.value = JSON.parse(JSON.stringify(data));
formData.value = JSON.parse(JSON.stringify(data)); formData.value = JSON.parse(JSON.stringify(data));
@ -299,7 +297,7 @@ watch(formUrl, async () => {
:url="url" :url="url"
:limit="limit" :limit="limit"
@on-fetch="fetch" @on-fetch="fetch"
@on-change="resetData" @on-change="fetch"
:skeleton="false" :skeleton="false"
ref="vnPaginateRef" ref="vnPaginateRef"
v-bind="$attrs" v-bind="$attrs"
@ -313,8 +311,11 @@ watch(formUrl, async () => {
></slot> ></slot>
</template> </template>
</VnPaginate> </VnPaginate>
<SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" /> <SkeletonTable
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubtoolbar"> v-if="!formData && $attrs.autoLoad"
:columns="$attrs.columns?.length"
/>
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubToolbar">
<QBtnGroup push style="column-gap: 10px"> <QBtnGroup push style="column-gap: 10px">
<slot name="moreBeforeActions" /> <slot name="moreBeforeActions" />
<QBtn <QBtn

126
src/components/FormModel.vue
View File

@ -206,11 +206,11 @@ async function save() {
updateAndEmit('onDataSaved', formData.value, response?.data); updateAndEmit('onDataSaved', formData.value, response?.data);
if ($props.reload) await arrayData.fetch({}); if ($props.reload) await arrayData.fetch({});
hasChanges.value = false;
} catch (err) { } catch (err) {
console.error(err); console.error(err);
notify('errors.writeRequest', 'negative'); notify('errors.writeRequest', 'negative');
} finally { } finally {
hasChanges.value = false;
isLoading.value = false; isLoading.value = false;
} }
} }
@ -261,13 +261,7 @@ defineExpose({
</script> </script>
<template> <template>
<div class="column items-center full-width"> <div class="column items-center full-width">
<QForm <QForm @submit="save" @reset="reset" class="q-pa-md" id="formModel">
@submit="save"
@reset="reset"
class="q-pa-md"
id="formModel"
>
<QCard> <QCard>
<slot <slot
v-if="formData" v-if="formData"
@ -276,70 +270,72 @@ defineExpose({
:validate="validate" :validate="validate"
:filter="filter" :filter="filter"
/> />
<SkeletonForm v-else/> <SkeletonForm v-else />
</QCard> </QCard>
</QForm> </QForm>
</div> </div>
<Teleport <Teleport
to="#st-actions" to="#st-actions"
v-if="stateStore?.isSubToolbarShown() && componentIsRendered" v-if="
$props.defaultActions &&
stateStore?.isSubToolbarShown() &&
componentIsRendered
"
> >
<div v-if="$props.defaultActions"> <QBtnGroup push class="q-gutter-x-sm">
<QBtnGroup push class="q-gutter-x-sm"> <slot name="moreActions" />
<slot name="moreActions" /> <QBtn
<QBtn :label="tMobile(defaultButtons.reset.label)"
:label="tMobile(defaultButtons.reset.label)" :color="defaultButtons.reset.color"
:color="defaultButtons.reset.color" :icon="defaultButtons.reset.icon"
:icon="defaultButtons.reset.icon" flat
flat @click="reset"
@click="reset" :disable="!hasChanges"
:disable="!hasChanges" :title="t(defaultButtons.reset.label)"
:title="t(defaultButtons.reset.label)" />
/> <QBtnDropdown
<QBtnDropdown v-if="$props.goTo"
v-if="$props.goTo" @click="saveAndGo"
@click="saveAndGo" :label="tMobile('globals.saveAndContinue')"
:label="tMobile('globals.saveAndContinue')" :title="t('globals.saveAndContinue')"
:title="t('globals.saveAndContinue')" :disable="!hasChanges"
:disable="!hasChanges" color="primary"
color="primary" icon="save"
icon="save" split
split >
> <QList>
<QList> <QItem
<QItem clickable
clickable v-close-popup
v-close-popup @click="save"
@click="save" :title="t('globals.save')"
:title="t('globals.save')" >
> <QItemSection>
<QItemSection> <QItemLabel>
<QItemLabel> <QIcon
<QIcon name="save"
name="save" color="white"
color="white" class="q-mr-sm"
class="q-mr-sm" size="sm"
size="sm" />
/> {{ t('globals.save').toUpperCase() }}
{{ t('globals.save').toUpperCase() }} </QItemLabel>
</QItemLabel> </QItemSection>
</QItemSection> </QItem>
</QItem> </QList>
</QList> </QBtnDropdown>
</QBtnDropdown> <QBtn
<QBtn v-else
v-else :label="tMobile('globals.save')"
:label="tMobile('globals.save')" color="primary"
color="primary" icon="save"
icon="save" @click="save"
@click="save" :disable="!hasChanges"
:disable="!hasChanges" :title="t(defaultButtons.save.label)"
:title="t(defaultButtons.save.label)" />
/> </QBtnGroup>
</QBtnGroup>
</div>
</Teleport> </Teleport>
<QInnerLoading <QInnerLoading
:showing="isLoading" :showing="isLoading"
:label="t('globals.pleaseWait')" :label="t('globals.pleaseWait')"

7
src/components/FormModelPopup.vue
View File

@ -23,18 +23,15 @@ const formModelRef = ref(null);
const closeButton = ref(null); const closeButton = ref(null);
const onDataSaved = (formData, requestResponse) => { const onDataSaved = (formData, requestResponse) => {
closeForm(); if (closeButton.value) closeButton.value.click();
emit('onDataSaved', formData, requestResponse); emit('onDataSaved', formData, requestResponse);
}; };
const isLoading = computed(() => formModelRef.value?.isLoading); const isLoading = computed(() => formModelRef.value?.isLoading);
const closeForm = async () => {
if (closeButton.value) closeButton.value.click();
};
defineExpose({ defineExpose({
isLoading, isLoading,
onDataSaved,
}); });
</script> </script>

1
src/components/LeftMenu.vue
View File

@ -58,6 +58,7 @@ function addChildren(module, route, parent) {
} }
const items = ref([]); const items = ref([]);
function getRoutes() { function getRoutes() {
if (props.source === 'main') { if (props.source === 'main') {
const modules = Object.assign([], navigation.getModules().value); const modules = Object.assign([], navigation.getModules().value);

164
src/components/TransferInvoiceForm.vue
View File

@ -8,7 +8,7 @@ import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
import FormPopup from './FormPopup.vue'; import FormPopup from './FormPopup.vue';
import { useDialogPluginComponent } from 'quasar';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
@ -18,7 +18,7 @@ const $props = defineProps({
default: () => {}, default: () => {},
}, },
}); });
const { dialogRef } = useDialogPluginComponent();
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter(); const router = useRouter();
@ -116,90 +116,92 @@ const makeInvoice = async () => {
@on-fetch="(data) => (invoiceCorrectionTypesOptions = data)" @on-fetch="(data) => (invoiceCorrectionTypesOptions = data)"
auto-load auto-load
/> />
<FormPopup <QDialog ref="dialogRef">
<FormPopup
@on-submit="makeInvoice()" @on-submit="makeInvoice()"
:title="t('Transfer invoice')" :title="t('Transfer invoice')"
:custom-submit-button-label="t('Transfer client')" :custom-submit-button-label="t('Transfer client')"
:default-cancel-button="false" :default-cancel-button="false"
> >
<template #form-inputs> <template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('Client')" :label="t('Client')"
:options="clientsOptions" :options="clientsOptions"
hide-selected hide-selected
option-label="name" option-label="name"
option-value="id" option-value="id"
v-model="transferInvoiceParams.newClientFk" v-model="transferInvoiceParams.newClientFk"
:required="true" :required="true"
url="Clients" url="Clients"
:fields="['id', 'name', 'hasToInvoiceByAddress']" :fields="['id', 'name', 'hasToInvoiceByAddress']"
auto-load auto-load
> >
<template #option="scope"> <template #option="scope">
<QItem <QItem
v-bind="scope.itemProps" v-bind="scope.itemProps"
@click="selectedClient(scope.opt)" @click="selectedClient(scope.opt)"
> >
<QItemSection> <QItemSection>
<QItemLabel> <QItemLabel>
#{{ scope.opt?.id }} - {{ scope.opt?.name }} #{{ scope.opt?.id }} - {{ scope.opt?.name }}
</QItemLabel> </QItemLabel>
</QItemSection> </QItemSection>
</QItem> </QItem>
</template> </template>
</VnSelect> </VnSelect>
<VnSelect <VnSelect
:label="t('Rectificative type')" :label="t('Rectificative type')"
:options="rectificativeTypeOptions" :options="rectificativeTypeOptions"
hide-selected hide-selected
option-label="description" option-label="description"
option-value="id" option-value="id"
v-model="transferInvoiceParams.cplusRectificationTypeFk" v-model="transferInvoiceParams.cplusRectificationTypeFk"
:required="true" :required="true"
/> />
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('Class')" :label="t('Class')"
:options="siiTypeInvoiceOutsOptions" :options="siiTypeInvoiceOutsOptions"
hide-selected hide-selected
option-label="description" option-label="description"
option-value="id" option-value="id"
v-model="transferInvoiceParams.siiTypeInvoiceOutFk" v-model="transferInvoiceParams.siiTypeInvoiceOutFk"
:required="true" :required="true"
> >
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem v-bind="scope.itemProps">
<QItemSection> <QItemSection>
<QItemLabel> <QItemLabel>
{{ scope.opt?.code }} - {{ scope.opt?.code }} -
{{ scope.opt?.description }} {{ scope.opt?.description }}
</QItemLabel> </QItemLabel>
</QItemSection> </QItemSection>
</QItem> </QItem>
</template> </template>
</VnSelect> </VnSelect>
<VnSelect <VnSelect
:label="t('Type')" :label="t('Type')"
:options="invoiceCorrectionTypesOptions" :options="invoiceCorrectionTypesOptions"
hide-selected hide-selected
option-label="description" option-label="description"
option-value="id" option-value="id"
v-model="transferInvoiceParams.invoiceCorrectionTypeFk" v-model="transferInvoiceParams.invoiceCorrectionTypeFk"
:required="true" :required="true"
/> />
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div> <div>
<QCheckbox :label="t('Bill destination client')" v-model="checked" /> <QCheckbox :label="t('Bill destination client')" v-model="checked" />
<QIcon name="info" class="cursor-info q-ml-sm" size="sm"> <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
<QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip> <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
</QIcon> </QIcon>
</div> </div>
</VnRow> </VnRow>
</template> </template>
</FormPopup> </FormPopup>
</QDialog>
</template> </template>
<i18n> <i18n>

1
src/components/UserPanel.vue
View File

@ -19,6 +19,7 @@ const session = useSession();
const router = useRouter(); const router = useRouter();
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const { copyText } = useClipboard(); const { copyText } = useClipboard();
const userLocale = computed({ const userLocale = computed({
get() { get() {
return locale.value; return locale.value;

42
src/components/VnTable/VnColumn.vue
View File

@ -5,8 +5,10 @@ import { dashIfEmpty } from 'src/filters';
/* basic input */ /* basic input */
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
import VnSelectCache from 'components/common/VnSelectCache.vue';
import VnInput from 'components/common/VnInput.vue'; import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnComponent from 'components/common/VnComponent.vue'; import VnComponent from 'components/common/VnComponent.vue';
const model = defineModel(undefined, { required: true }); const model = defineModel(undefined, { required: true });
@ -41,11 +43,23 @@ const $props = defineProps({
}, },
}); });
const defaultSelect = {
attrs: {
row: $props.row,
disable: !$props.isEditable,
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
};
const defaultComponents = { const defaultComponents = {
input: { input: {
component: markRaw(VnInput), component: markRaw(VnInput),
attrs: { attrs: {
disable: !$props.isEditable, disable: !$props.isEditable,
class: 'fit',
}, },
forceAttrs: { forceAttrs: {
label: $props.showLabel && $props.column.label, label: $props.showLabel && $props.column.label,
@ -55,6 +69,7 @@ const defaultComponents = {
component: markRaw(VnInput), component: markRaw(VnInput),
attrs: { attrs: {
disable: !$props.isEditable, disable: !$props.isEditable,
class: 'fit',
}, },
forceAttrs: { forceAttrs: {
label: $props.showLabel && $props.column.label, label: $props.showLabel && $props.column.label,
@ -63,9 +78,19 @@ const defaultComponents = {
date: { date: {
component: markRaw(VnInputDate), component: markRaw(VnInputDate),
attrs: { attrs: {
readonly: true, readonly: !$props.isEditable,
disable: !$props.isEditable, disable: !$props.isEditable,
style: 'min-width: 125px', style: 'min-width: 125px',
class: 'fit',
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
time: {
component: markRaw(VnInputTime),
attrs: {
disable: !$props.isEditable,
}, },
forceAttrs: { forceAttrs: {
label: $props.showLabel && $props.column.label, label: $props.showLabel && $props.column.label,
@ -77,7 +102,7 @@ const defaultComponents = {
const defaultAttrs = { const defaultAttrs = {
disable: !$props.isEditable, disable: !$props.isEditable,
'model-value': Boolean(prop), 'model-value': Boolean(prop),
class: 'no-padding', class: 'no-padding fit',
}; };
if (typeof prop == 'number') { if (typeof prop == 'number') {
@ -91,13 +116,12 @@ const defaultComponents = {
}, },
}, },
select: { select: {
component: markRaw(VnSelectCache),
...defaultSelect,
},
rawSelect: {
component: markRaw(VnSelect), component: markRaw(VnSelect),
attrs: { ...defaultSelect,
disable: !$props.isEditable,
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
}, },
icon: { icon: {
component: markRaw(QIcon), component: markRaw(QIcon),
@ -134,7 +158,7 @@ const col = computed(() => {
const components = computed(() => $props.components ?? defaultComponents); const components = computed(() => $props.components ?? defaultComponents);
</script> </script>
<template> <template>
<div class="row no-wrap fit"> <div class="row no-wrap">
<VnComponent <VnComponent
v-if="col.before" v-if="col.before"
:prop="col.before" :prop="col.before"

50
src/components/VnTable/VnFilter.vue
View File

@ -7,6 +7,7 @@ import { useArrayData } from 'composables/useArrayData';
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'components/common/VnInput.vue'; import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue'; import VnTableColumn from 'components/VnTable/VnColumn.vue';
const $props = defineProps({ const $props = defineProps({
@ -39,7 +40,7 @@ const enterEvent = {
const defaultAttrs = { const defaultAttrs = {
filled: !$props.showTitle, filled: !$props.showTitle,
class: 'q-px-sm q-pb-xs q-pt-none', class: 'q-px-xs q-pb-xs q-pt-none fit',
dense: true, dense: true,
}; };
@ -47,6 +48,17 @@ const forceAttrs = {
label: $props.showTitle ? '' : $props.column.label, label: $props.showTitle ? '' : $props.column.label,
}; };
const selectComponent = {
component: markRaw(VnSelect),
event: updateEvent,
attrs: {
class: 'q-px-sm q-pb-xs q-pt-none fit',
dense: true,
filled: !$props.showTitle,
},
forceAttrs,
};
const components = { const components = {
input: { input: {
component: markRaw(VnInput), component: markRaw(VnInput),
@ -75,26 +87,29 @@ const components = {
}, },
forceAttrs, forceAttrs,
}, },
time: {
component: markRaw(VnInputTime),
event: updateEvent,
attrs: {
...defaultAttrs,
disable: !$props.isEditable,
},
forceAttrs: {
label: $props.showLabel && $props.column.label,
},
},
checkbox: { checkbox: {
component: markRaw(QCheckbox), component: markRaw(QCheckbox),
event: updateEvent, event: updateEvent,
attrs: { attrs: {
dense: true, dense: true,
class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs', class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs fit',
'toggle-indeterminate': true, 'toggle-indeterminate': true,
}, },
forceAttrs, forceAttrs,
}, },
select: { select: selectComponent,
component: markRaw(VnSelect), rawSelect: selectComponent,
event: updateEvent,
attrs: {
class: 'q-px-md q-pb-xs q-pt-none',
dense: true,
filled: !$props.showTitle,
},
forceAttrs,
},
}; };
async function addFilter(value) { async function addFilter(value) {
@ -127,14 +142,11 @@ const showFilter = computed(
</script> </script>
<template> <template>
<div <div
v-if="showTitle" v-if="showFilter"
class="q-pt-sm q-px-sm ellipsis" class="full-width"
:class="`text-${column?.align ?? 'left'}`" :class="alignRow()"
:style="!showFilter ? { 'min-height': 72 + 'px' } : ''" style="max-height: 45px; overflow: hidden"
> >
{{ column?.label }}
</div>
<div v-if="showFilter" class="full-width" :class="alignRow()">
<VnTableColumn <VnTableColumn
:column="$props.column" :column="$props.column"
default="input" default="input"

95
src/components/VnTable/VnOrder.vue Normal file
View File

@ -0,0 +1,95 @@
<script setup>
import { ref } from 'vue';
import { useArrayData } from 'composables/useArrayData';
const model = defineModel({ type: Object, required: true });
const $props = defineProps({
name: {
type: String,
default: '',
},
label: {
type: String,
default: undefined,
},
dataKey: {
type: String,
required: true,
},
searchUrl: {
type: String,
default: 'params',
},
vertical: {
type: Boolean,
default: false,
},
});
const hover = ref();
const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
async function orderBy(name, direction) {
if (!name) return;
switch (direction) {
case 'DESC':
direction = undefined;
break;
case undefined:
direction = 'ASC';
break;
case 'ASC':
direction = 'DESC';
break;
}
if (!direction) return await arrayData.deleteOrder(name);
await arrayData.addOrder(name, direction);
}
defineExpose({ orderBy });
</script>
<template>
<div
@mouseenter="hover = true"
@mouseleave="hover = false"
@click="orderBy(name, model?.direction)"
class="row items-center no-wrap cursor-pointer"
>
<span :title="label">{{ label }}</span>
<QChip
v-if="name"
:label="!vertical && model?.index"
:icon="
(model?.index || hover) && !vertical
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: undefined
"
:size="vertical ? '' : 'sm'"
:class="[
model?.index ? 'color-vn-text' : 'bg-transparent',
vertical ? 'q-px-none' : '',
]"
class="no-box-shadow"
:clickable="true"
style="min-width: 40px"
>
<div
class="column flex-center"
v-if="vertical"
:style="!model?.index && 'color: #5d5d5d'"
>
{{ model?.index }}
<QIcon
:name="
model?.index
? model?.direction == 'DESC'
? 'arrow_downward'
: 'arrow_upward'
: 'swap_vert'
"
size="xs"
/>
</div>
</QChip>
</div>
</template>

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

@ -1,18 +1,20 @@
<script setup> <script setup>
import { ref, onMounted, computed, watch } from 'vue'; import { ref, onBeforeMount, onMounted, computed, watch } 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 { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import FormModelPopup from 'components/FormModelPopup.vue';
import CrudModel from 'src/components/CrudModel.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnLv from 'components/ui/VnLv.vue';
import CrudModel from 'src/components/CrudModel.vue';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnTableColumn from 'components/VnTable/VnColumn.vue'; import VnTableColumn from 'components/VnTable/VnColumn.vue';
import VnTableFilter from 'components/VnTable/VnFilter.vue'; import VnTableFilter from 'components/VnTable/VnFilter.vue';
import VnTableChip from 'components/VnTable/VnChip.vue'; import VnTableChip from 'components/VnTable/VnChip.vue';
import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
const $props = defineProps({ const $props = defineProps({
columns: { columns: {
@ -21,7 +23,7 @@ const $props = defineProps({
}, },
defaultMode: { defaultMode: {
type: String, type: String,
default: 'card', // 'table', 'card' default: 'table', // 'table', 'card'
}, },
columnSearch: { columnSearch: {
type: Boolean, type: Boolean,
@ -32,7 +34,7 @@ const $props = defineProps({
default: true, default: true,
}, },
rowClick: { rowClick: {
type: Function, type: [Function, Boolean],
default: null, default: null,
}, },
redirect: { redirect: {
@ -59,6 +61,30 @@ const $props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
hasSubToolbar: {
type: Boolean,
default: true,
},
disableOption: {
type: Object,
default: () => ({ card: false, table: false }),
},
withoutHeader: {
type: Boolean,
default: false,
},
tableCode: {
type: String,
default: null,
},
table: {
type: Object,
default: () => ({}),
},
tableHeight: {
type: String,
default: '90vh',
},
}); });
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore(); const stateStore = useStateStore();
@ -70,28 +96,42 @@ const DEFAULT_MODE = 'card';
const TABLE_MODE = 'table'; const TABLE_MODE = 'table';
const mode = ref(DEFAULT_MODE); const mode = ref(DEFAULT_MODE);
const selected = ref([]); const selected = ref([]);
const hasParams = ref(false);
const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}'); const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
const params = ref({ ...routeQuery, ...routeQuery.filter?.where }); const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
const orders = ref(parseOrder(routeQuery.filter?.order));
const CrudModelRef = ref({}); const CrudModelRef = ref({});
const showForm = ref(false); const showForm = ref(false);
const splittedColumns = ref({ columns: [] }); const splittedColumns = ref({ columns: [] });
const columnsVisibilitySkiped = ref();
const tableModes = [ const tableModes = [
{ {
icon: 'view_column', icon: 'view_column',
title: t('table view'), title: t('table view'),
value: TABLE_MODE, value: TABLE_MODE,
disable: $props.disableOption?.table,
}, },
{ {
icon: 'grid_view', icon: 'grid_view',
title: t('grid view'), title: t('grid view'),
value: DEFAULT_MODE, value: DEFAULT_MODE,
disable: $props.disableOption?.card,
}, },
]; ];
onBeforeMount(() => {
setUserParams(route.query[$props.searchUrl]);
hasParams.value = Object.keys(params.value).length !== 0;
});
onMounted(() => { onMounted(() => {
mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode; mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
setUserParams(route.query[$props.searchUrl]); columnsVisibilitySkiped.value = [
...splittedColumns.value.columns
.filter((c) => c.visible == false)
.map((c) => c.name),
...['tableActions'],
];
}); });
watch( watch(
@ -105,14 +145,21 @@ watch(
(val) => setUserParams(val) (val) => setUserParams(val)
); );
const isTableMode = computed(() => mode.value == TABLE_MODE);
function setUserParams(watchedParams) { function setUserParams(watchedParams) {
if (!watchedParams) return; if (!watchedParams) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams); if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
const where = JSON.parse(watchedParams?.filter)?.where; const filter = JSON.parse(watchedParams?.filter);
const where = filter?.where;
const order = filter?.order;
watchedParams = { ...watchedParams, ...where }; watchedParams = { ...watchedParams, ...where };
delete watchedParams.filter; delete watchedParams.filter;
delete params.value?.filter;
params.value = { ...params.value, ...watchedParams }; params.value = { ...params.value, ...watchedParams };
orders.value = parseOrder(order);
} }
function splitColumns(columns) { function splitColumns(columns) {
@ -120,7 +167,7 @@ function splitColumns(columns) {
columns: [], columns: [],
chips: [], chips: [],
create: [], create: [],
visible: [], cardVisible: [],
}; };
for (const col of columns) { for (const col of columns) {
@ -128,9 +175,10 @@ function splitColumns(columns) {
if (col.chip) splittedColumns.value.chips.push(col); if (col.chip) splittedColumns.value.chips.push(col);
if (col.isTitle) splittedColumns.value.title = col; if (col.isTitle) splittedColumns.value.title = col;
if (col.create) splittedColumns.value.create.push(col); if (col.create) splittedColumns.value.create.push(col);
if (col.cardVisible) splittedColumns.value.visible.push(col); if (col.cardVisible) splittedColumns.value.cardVisible.push(col);
if ($props.isEditable && col.disable == null) col.disable = false; if ($props.isEditable && col.disable == null) col.disable = false;
if ($props.useModel) col.columnFilter = { ...col.columnFilter, inWhere: true }; if ($props.useModel && col.columnFilter != false)
col.columnFilter = { ...col.columnFilter, inWhere: true };
splittedColumns.value.columns.push(col); splittedColumns.value.columns.push(col);
} }
// Status column // Status column
@ -144,12 +192,13 @@ function splitColumns(columns) {
label: t('status'), label: t('status'),
name: 'tableStatus', name: 'tableStatus',
columnFilter: false, columnFilter: false,
orderBy: false,
}); });
} }
} }
const rowClickFunction = computed(() => { const rowClickFunction = computed(() => {
if ($props.rowClick) return $props.rowClick; if ($props.rowClick != undefined) return $props.rowClick;
if ($props.redirect) return ({ id }) => redirectFn(id); if ($props.redirect) return ({ id }) => redirectFn(id);
return () => {}; return () => {};
}); });
@ -177,9 +226,23 @@ function columnName(col) {
function getColAlign(col) { function getColAlign(col) {
return 'text-' + (col.align ?? 'left'); return 'text-' + (col.align ?? 'left');
} }
function parseOrder(urlOrders) {
const orderObject = {};
if (!urlOrders) return orderObject;
if (typeof urlOrders == 'string') urlOrders = [urlOrders];
for (const [index, orders] of urlOrders.entries()) {
const [name, direction] = orders.split(' ');
orderObject[name] = { direction, index: index + 1 };
}
return orderObject;
}
const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
defineExpose({ defineExpose({
reload, reload,
redirect: redirectFn, redirect: redirectFn,
selected,
}); });
</script> </script>
<template> <template>
@ -195,17 +258,37 @@ defineExpose({
:data-key="$attrs['data-key']" :data-key="$attrs['data-key']"
:search-button="true" :search-button="true"
v-model="params" v-model="params"
:disable-submit-event="true"
:search-url="searchUrl" :search-url="searchUrl"
:redirect="!!redirect"
> >
<template #body> <template #body>
<VnTableFilter <div
:column="col" class="row no-wrap flex-center"
:data-key="$attrs['data-key']"
v-for="col of splittedColumns.columns" v-for="col of splittedColumns.columns"
:key="col.id" :key="col.id"
v-model="params[columnName(col)]" >
:search-url="searchUrl" <VnTableFilter
:column="col"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
<VnTableOrder
v-if="
col?.columnFilter !== false &&
col?.name !== 'tableActions'
"
v-model="orders[col.name]"
:name="col.orderBy ?? col.name"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
:vertical="true"
/>
</div>
<slot
name="moreFilterPanel"
:params="params"
:columns="splittedColumns.columns"
/> />
<slot <slot
name="moreFilterPanel" name="moreFilterPanel"
@ -223,41 +306,49 @@ defineExpose({
:limit="20" :limit="20"
ref="CrudModelRef" ref="CrudModelRef"
:search-url="searchUrl" :search-url="searchUrl"
:disable-infinite-scroll="mode == TABLE_MODE" :disable-infinite-scroll="isTableMode"
@save-changes="reload" @save-changes="reload"
:has-subtoolbar="isEditable" :has-sub-toolbar="$attrs['hasSubToolbar'] ?? isEditable"
:auto-load="hasParams || $attrs['auto-load']"
> >
<template
v-for="(_, slotName) in $slots"
#[slotName]="slotData"
:key="slotName"
>
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
<template #body="{ rows }"> <template #body="{ rows }">
<QTable <QTable
v-bind="$attrs['QTable']" v-bind="table"
class="vnTable" class="vnTable"
:columns="splittedColumns.columns" :columns="splittedColumns.columns"
:rows="rows" :rows="rows"
v-model:selected="selected" v-model:selected="selected"
:grid="mode != TABLE_MODE" :grid="!isTableMode"
table-header-class="bg-header" table-header-class="bg-header"
card-container-class="grid-three" card-container-class="grid-three"
flat flat
:style="mode == TABLE_MODE && 'max-height: 90vh'" :style="isTableMode && `max-height: ${tableHeight}`"
virtual-scroll virtual-scroll
@virtual-scroll=" @virtual-scroll="
(event) => (event) =>
event.index > rows.length - 2 && event.index > rows.length - 2 &&
CrudModelRef.vnPaginateRef.paginate() CrudModelRef.vnPaginateRef.paginate()
" "
@row-click="(_, row) => rowClickFunction(row)" @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)"
> >
<template #top-left> <template #top-left v-if="!$props.withoutHeader">
<slot name="top-left"></slot> <slot name="top-left"></slot>
</template> </template>
<template #top-right> <template #top-right>
<!-- <QBtn <VnVisibleColumn
icon="visibility" v-if="isTableMode"
title="asd" v-model="splittedColumns.columns"
class="bg-vn-section-color q-mr-md" :table-code="tableCode ?? route.name"
dense :skip="columnsVisibilitySkiped"
v-if="mode == 'table'" />
/> -->
<QBtnToggle <QBtnToggle
v-model="mode" v-model="mode"
toggle-color="primary" toggle-color="primary"
@ -266,6 +357,7 @@ defineExpose({
:options="tableModes" :options="tableModes"
/> />
<QBtn <QBtn
v-if="$props.rightSearch"
icon="filter_alt" icon="filter_alt"
title="asd" title="asd"
class="bg-vn-section-color q-ml-md" class="bg-vn-section-color q-ml-md"
@ -274,18 +366,33 @@ defineExpose({
/> />
</template> </template>
<template #header-cell="{ col }"> <template #header-cell="{ col }">
<QTh <QTh v-if="col.visible ?? true" auto-width>
auto-width <div
style="min-width: 100px" class="column self-start q-ml-xs ellipsis"
v-if="$props.columnSearch" :class="`text-${col?.align ?? 'left'}`"
> style="height: 75px"
<VnTableFilter >
:column="col" <div
:show-title="true" class="row items-center no-wrap"
:data-key="$attrs['data-key']" style="height: 30px"
v-model="params[columnName(col)]" >
:search-url="searchUrl" <VnTableOrder
/> v-model="orders[col.name]"
:name="col.orderBy ?? col.name"
:label="col?.label"
:data-key="$attrs['data-key']"
:search-url="searchUrl"
/>
</div>
<VnTableFilter
v-if="$props.columnSearch"
:column="col"
:show-title="true"
:data-key="$attrs['data-key']"
v-model="params[columnName(col)]"
:search-url="searchUrl"
/>
</div>
</QTh> </QTh>
</template> </template>
<template #header-cell-tableActions> <template #header-cell-tableActions>
@ -308,15 +415,18 @@ defineExpose({
<QTd <QTd
auto-width auto-width
class="no-margin q-px-xs" class="no-margin q-px-xs"
:class="getColAlign(col)" :class="[getColAlign(col), col.class, col.columnField?.class]"
v-if="col.visible ?? true"
> >
<VnTableColumn <slot :name="`column-${col.name}`" :col="col" :row="row">
:column="col" <VnTableColumn
:row="row" :column="col"
:is-editable="false" :row="row"
v-model="row[col.name]" :is-editable="col.isEditable ?? isEditable"
component-prop="columnField" v-model="row[col.name]"
/> component-prop="columnField"
/>
</slot>
</QTd> </QTd>
</template> </template>
<template #body-cell-tableActions="{ col, row }"> <template #body-cell-tableActions="{ col, row }">
@ -395,15 +505,15 @@ defineExpose({
:class="$props.cardClass" :class="$props.cardClass"
> >
<div <div
v-for="col of splittedColumns.visible" v-for="col of splittedColumns.cardVisible"
:key="col.name" :key="col.name"
class="fields" class="fields"
> >
<VnLv <VnLv
:label=" :label="
!col.component && !col.component && col.label
col.label && ? `${col.label}:`
`${col.label}:` : ''
" "
> >
<template #value> <template #value>
@ -412,14 +522,20 @@ defineExpose({
stopEventPropagation($event) stopEventPropagation($event)
" "
> >
<VnTableColumn <slot
:column="col" :name="`column-${col.name}`"
:col="col"
:row="row" :row="row"
:is-editable="false" >
v-model="row[col.name]" <VnTableColumn
component-prop="columnField" :column="col"
:show-label="true" :row="row"
/> :is-editable="false"
v-model="row[col.name]"
component-prop="columnField"
:show-label="true"
/>
</slot>
</span> </span>
</template> </template>
</VnLv> </VnLv>
@ -477,6 +593,7 @@ defineExpose({
default="input" default="input"
v-model="data[column.name]" v-model="data[column.name]"
:show-label="true" :show-label="true"
component-prop="columnCreate"
/> />
<slot name="more-create-dialog" :data="data" /> <slot name="more-create-dialog" :data="data" />
</div> </div>
@ -487,8 +604,12 @@ defineExpose({
<i18n> <i18n>
en: en:
status: Status status: Status
table view: Table view
grid view: Grid view
es: es:
status: Estados status: Estados
table view: Vista en tabla
grid view: Vista en cuadrícula
</i18n> </i18n>
<style lang="scss"> <style lang="scss">
@ -498,7 +619,11 @@ es:
} }
.bg-header { .bg-header {
background-color: #5d5d5d; background-color: var(--vn-header-color);
color: var(--vn-text-color);
}
.color-vn-text {
color: var(--vn-text-color); color: var(--vn-text-color);
} }
@ -507,7 +632,7 @@ es:
.q-table--dark tr, .q-table--dark tr,
.q-table--dark th, .q-table--dark th,
.q-table--dark td { .q-table--dark td {
border-color: #222222; border-color: var(--vn-section-color);
} }
.q-table__container > div:first-child { .q-table__container > div:first-child {
@ -577,7 +702,7 @@ es:
right: 0; right: 0;
} }
td.sticky { td.sticky {
background-color: var(--q-dark); background-color: var(--vn-section-color);
z-index: 1; z-index: 1;
} }
} }

189
src/components/VnTable/VnVisibleColumn.vue Normal file
View File

@ -0,0 +1,189 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const columns = defineModel({ type: Object, default: [] });
const $props = defineProps({
tableCode: {
type: String,
default: '',
},
skip: {
type: Array,
default: () => [],
},
});
const { notify } = useNotify();
const { t } = useI18n();
const state = useState();
const user = state.getUser();
const popupProxyRef = ref();
const initialUserConfigViewData = ref();
const localColumns = ref([]);
const areAllChecksMarked = computed(() => {
return localColumns.value.every((col) => col.visible);
});
function setUserConfigViewData(data, isLocal) {
if (!data) return;
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
if (!isLocal) localColumns.value = [];
// Array to Object
const skippeds = $props.skip.reduce((a, v) => ({ ...a, [v]: v }), {});
for (let column of columns.value) {
const { label, name } = column;
if (skippeds[name]) continue;
column.visible = data[name] ?? true;
if (!isLocal) localColumns.value.push({ name, label, visible: column.visible });
}
}
function toggleMarkAll(val) {
localColumns.value.forEach((col) => (col.visible = val));
}
async function getConfig(url, filter) {
const response = await axios.get(url, {
params: { filter: filter },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
}
async function fetchViewConfigData() {
try {
const defaultFilter = {
where: { tableCode: $props.tableCode },
};
const userConfig = await getConfig('UserConfigViews', {
where: {
...defaultFilter.where,
...{ userFk: user.id },
},
});
if (userConfig) {
initialUserConfigViewData.value = userConfig;
setUserConfigViewData(userConfig.configuration);
return;
}
const defaultConfig = await getConfig('DefaultViewConfigs', defaultFilter);
if (defaultConfig) {
setUserConfigViewData(defaultConfig.columns);
return;
}
} catch (err) {
console.err('Error fetching config view data', err);
}
}
async function saveConfig() {
const configuration = {};
for (const { name, visible } of localColumns.value)
configuration[name] = visible ?? true;
setUserConfigViewData(configuration, true);
if (!$props.tableCode) return popupProxyRef.value.hide();
try {
const params = {};
// Si existe una view config del usuario hacemos un update si no la creamos
if (initialUserConfigViewData.value) {
params.updates = [
{
data: {
configuration,
},
where: {
id: initialUserConfigViewData.value.id,
},
},
];
} else {
params.creates = [
{
userFk: user.value.id,
tableCode: $props.tableCode,
tableConfig: $props.tableCode,
configuration,
},
];
}
const response = await axios.post('UserConfigViews/crud', params);
if (response.data && response.data[0]) {
initialUserConfigViewData.value = response.data[0];
}
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config', err);
notify('errors.writeRequest', 'negative');
}
}
onMounted(async () => {
setUserConfigViewData({});
await fetchViewConfigData();
});
</script>
<template>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon">
<QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
</QIcon>
<span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
<QCheckbox
:label="t('Tick all')"
:model-value="areAllChecksMarked"
@update:model-value="toggleMarkAll($event)"
class="q-mb-sm"
/>
<div v-if="columns.length > 0" class="checks-layout">
<QCheckbox
v-for="col in localColumns"
:key="col.name"
:label="col.label"
v-model="col.visible"
/>
</div>
<QBtn
class="full-width q-mt-md"
color="primary"
@click="saveConfig()"
:label="t('globals.save')"
/>
</QCard>
</QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn>
</template>
<style lang="scss" scoped>
.info-icon {
position: absolute;
top: 20px;
right: 20px;
}
.checks-layout {
display: grid;
grid-template-columns: repeat(3, 200px);
}
</style>
<i18n>
es:
Check the columns you want to see: Marca las columnas que quieres ver
Visible columns: Columnas visibles
Tick all: Marcar todas
</i18n>

10
src/components/common/TableVisibleColumns.vue
View File

@ -52,7 +52,7 @@ const toggleMarkAll = (val) => {
const getConfig = async (url, filter) => { const getConfig = async (url, filter) => {
const response = await axios.get(url, { const response = await axios.get(url, {
params: { filter: filter }, params: { filter: JSON.stringify(filter) },
}); });
return response.data && response.data.length > 0 ? response.data[0] : null; return response.data && response.data.length > 0 ? response.data[0] : null;
}; };
@ -60,7 +60,7 @@ const getConfig = async (url, filter) => {
const fetchViewConfigData = async () => { const fetchViewConfigData = async () => {
try { try {
const userConfigFilter = { const userConfigFilter = {
where: { tableCode: $props.tableCode, userFk: user.id }, where: { tableCode: $props.tableCode, userFk: user.value.id },
}; };
const userConfig = await getConfig('UserConfigViews', userConfigFilter); const userConfig = await getConfig('UserConfigViews', userConfigFilter);
@ -74,8 +74,14 @@ const fetchViewConfigData = async () => {
const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter); const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
if (defaultConfig) { if (defaultConfig) {
// Si el backend devuelve una configuración por defecto la usamos
setUserConfigViewData(defaultConfig.columns); setUserConfigViewData(defaultConfig.columns);
return; return;
} else {
// Si no hay configuración por defecto mostramos todas las columnas
const defaultColumns = {};
$props.allColumns.forEach((col) => (defaultColumns[col] = true));
setUserConfigViewData(defaultColumns);
} }
} catch (err) { } catch (err) {
console.err('Error fetching config view data', err); console.err('Error fetching config view data', err);

2
src/components/common/VnBreadcrumbs.vue
View File

@ -18,7 +18,7 @@ watchEffect(() => {
(matched) => Object.keys(matched.meta).length (matched) => Object.keys(matched.meta).length
); );
breadcrumbs.value.length = 0; breadcrumbs.value.length = 0;
if (!matched.value[0]) return;
if (matched.value[0].name != 'Dashboard') { if (matched.value[0].name != 'Dashboard') {
root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase()); root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());

13
src/components/common/VnCard.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onBeforeMount, computed } from 'vue'; import { onBeforeMount, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData'; import { useArrayData } from 'src/composables/useArrayData';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import useCardSize from 'src/composables/useCardSize'; import useCardSize from 'src/composables/useCardSize';
@ -39,8 +39,17 @@ const arrayData = useArrayData(props.dataKey, {
onBeforeMount(async () => { onBeforeMount(async () => {
if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id }; if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false, updateRouter: false });
}); });
if (props.baseUrl) {
onBeforeRouteUpdate(async (to, from) => {
if (to.params.id !== from.params.id) {
arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
await arrayData.fetch({ append: false, updateRouter: false });
}
});
}
</script> </script>
<template> <template>
<QDrawer <QDrawer

3
src/components/common/VnComponent.vue
View File

@ -12,7 +12,7 @@ const $props = defineProps({
default: () => {}, default: () => {},
}, },
value: { value: {
type: [Object, Number, String], type: [Object, Number, String, Boolean],
default: () => {}, default: () => {},
}, },
}); });
@ -54,7 +54,6 @@ function toValueAttrs(attrs) {
v-bind="mix(toComponent).attrs" v-bind="mix(toComponent).attrs"
v-on="mix(toComponent).event ?? {}" v-on="mix(toComponent).event ?? {}"
v-model="model" v-model="model"
class="fit"
/> />
</span> </span>
</template> </template>

11
src/components/common/VnDmsList.vue
View File

@ -273,6 +273,10 @@ function shouldRenderButton(button, isExternal = false) {
if (button.name == 'download') return true; if (button.name == 'download') return true;
return button.external === isExternal; return button.external === isExternal;
} }
defineExpose({
dmsRef,
});
</script> </script>
<template> <template>
<VnPaginate <VnPaginate
@ -374,7 +378,11 @@ function shouldRenderButton(button, isExternal = false) {
/> />
</QDialog> </QDialog>
<QPageSticky position="bottom-right" :offset="[25, 25]"> <QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn fab color="primary" icon="add" @click="showFormDialog()" /> <QBtn fab color="primary" icon="add" @click="showFormDialog()" class="fill-icon">
<QTooltip>
{{ t('Upload file') }}
</QTooltip>
</QBtn>
</QPageSticky> </QPageSticky>
</template> </template>
<style scoped> <style scoped>
@ -392,4 +400,5 @@ en:
es: es:
contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes} contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
Generate identifier for original file: Generar identificador para archivo original Generate identifier for original file: Generar identificador para archivo original
Upload file: Subir fichero
</i18n> </i18n>

7
src/components/common/VnInput.vue
View File

@ -93,7 +93,12 @@ const inputRules = [
name="close" name="close"
size="xs" size="xs"
v-if="hover && value && !$attrs.disabled && $props.clearable" v-if="hover && value && !$attrs.disabled && $props.clearable"
@click="value = null" @click="
() => {
value = null;
emit('remove');
}
"
></QIcon> ></QIcon>
<QIcon v-if="info" name="info"> <QIcon v-if="info" name="info">
<QTooltip max-width="350px"> <QTooltip max-width="350px">

193
src/components/common/VnInputDate.vue
View File

@ -1,84 +1,31 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { onMounted, watch, computed, ref } from 'vue';
import { date } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import isValidDate from 'filters/isValidDate';
const props = defineProps({ const model = defineModel({ type: String });
modelValue: { const $props = defineProps({
type: String,
default: null,
},
readonly: {
type: Boolean,
default: false,
},
isOutlined: { isOutlined: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
emitDateFormat: {
type: Boolean,
default: false,
},
}); });
const hover = ref(false);
const emit = defineEmits(['update:modelValue']);
const { t } = useI18n(); const { t } = useI18n();
const requiredFieldRule = (val) => !!val || t('globals.fieldRequired'); const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
const joinDateAndTime = (date, time) => { const dateFormat = 'DD/MM/YYYY';
if (!date) { const isPopupOpen = ref();
return null; const hover = ref();
} const mask = ref();
if (!time) {
return new Date(date).toISOString();
}
const [year, month, day] = date.split('/');
return new Date(`${year}-${month}-${day}T${time}`).toISOString();
};
const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null)); onMounted(() => {
const value = computed({ // fix quasar bug
get() { mask.value = '##/##/####';
return props.modelValue;
},
set(value) {
emit(
'update:modelValue',
props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
);
},
}); });
const isPopupOpen = ref(false);
const onDateUpdate = (date) => {
value.value = date;
isPopupOpen.value = false;
};
const padDate = (value) => value.toString().padStart(2, '0');
const formatDate = (dateString) => {
const date = new Date(dateString || '');
return `${date.getFullYear()}/${padDate(date.getMonth() + 1)}/${padDate(
date.getDate()
)}`;
};
const displayDate = (dateString) => {
if (!dateString || !isValidDate(dateString)) {
return '';
}
return new Date(dateString).toLocaleDateString([], {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
};
const styleAttrs = computed(() => { const styleAttrs = computed(() => {
return props.isOutlined return $props.isOutlined
? { ? {
dense: true, dense: true,
outlined: true, outlined: true,
@ -86,46 +33,114 @@ const styleAttrs = computed(() => {
} }
: {}; : {};
}); });
const formattedDate = computed({
get() {
if (!model.value) return model.value;
return date.formatDate(new Date(model.value), dateFormat);
},
set(value) {
if (value == model.value) return;
let newDate;
if (value) {
// parse input
if (value.includes('/')) {
if (value.length == 6) value = value + new Date().getFullYear();
if (value.length >= 10) {
if (value.at(2) == '/') value = value.split('/').reverse().join('/');
value = date.formatDate(
new Date(value).toISOString(),
'YYYY-MM-DDTHH:mm:ss.SSSZ'
);
}
}
const [year, month, day] = value.split('-').map((e) => parseInt(e));
newDate = new Date(year, month - 1, day);
if (model.value) {
const orgDate =
model.value instanceof Date ? model.value : new Date(model.value);
newDate.setHours(
orgDate.getHours(),
orgDate.getMinutes(),
orgDate.getSeconds(),
orgDate.getMilliseconds()
);
}
}
if (!isNaN(newDate)) model.value = newDate.toISOString();
},
});
const popupDate = computed(() =>
model.value ? date.formatDate(new Date(model.value), 'YYYY/MM/DD') : model.value
);
watch(
() => model.value,
(val) => (formattedDate.value = val),
{ immediate: true }
);
</script> </script>
<template> <template>
<div @mouseover="hover = true" @mouseleave="hover = false"> <div @mouseover="hover = true" @mouseleave="hover = false">
<QInput <QInput
v-model="formattedDate"
class="vn-input-date" class="vn-input-date"
readonly :mask="mask"
:model-value="displayDate(value)" placeholder="dd/mm/aaaa"
v-bind="{ ...$attrs, ...styleAttrs }" v-bind="{ ...$attrs, ...styleAttrs }"
:class="{ required: $attrs.required }" :class="{ required: $attrs.required }"
:rules="$attrs.required ? [requiredFieldRule] : null" :rules="$attrs.required ? [requiredFieldRule] : null"
@click="isPopupOpen = true" :clearable="false"
> >
<template #append> <template #append>
<QIcon <QIcon
name="close" name="close"
size="xs" size="xs"
v-if="hover && value && !readonly" v-if="
@click="onDateUpdate(null)" ($attrs.clearable == undefined || $attrs.clearable) &&
></QIcon> hover &&
<QIcon name="event" class="cursor-pointer"> model &&
<QPopupProxy !$attrs.disable
v-model="isPopupOpen" "
cover @click="
transition-show="scale" model = null;
transition-hide="scale" isPopupOpen = false;
:no-parent-event="props.readonly" "
> />
<QDate <QIcon
:today-btn="true" name="event"
:model-value="formatDate(value)" class="cursor-pointer"
@update:model-value="onDateUpdate" @click="isPopupOpen = !isPopupOpen"
/> :title="t('Open date')"
</QPopupProxy> />
</QIcon>
</template> </template>
<QMenu
transition-show="scale"
transition-hide="scale"
v-model="isPopupOpen"
anchor="bottom left"
self="top start"
:no-focus="true"
:no-parent-event="true"
>
<QDate
v-model="popupDate"
:landscape="true"
:today-btn="true"
@update:model-value="
(date) => {
formattedDate = date;
isPopupOpen = false;
}
"
/>
</QMenu>
</QInput> </QInput>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before { .vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid; border-bottom-style: solid;
@ -135,3 +150,7 @@ const styleAttrs = computed(() => {
border-style: solid; border-style: solid;
} }
</style> </style>
<i18n>
es:
Open date: Abrir fecha
</i18n>

204
src/components/common/VnInputTime.vue
View File

@ -1,14 +1,11 @@
<script setup> <script setup>
import { computed, ref } from 'vue'; import { watch, computed, ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import isValidDate from 'filters/isValidDate'; import { date } from 'quasar';
const model = defineModel({ type: String });
const props = defineProps({ const props = defineProps({
modelValue: { timeOnly: {
type: String,
default: null,
},
readonly: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@ -17,43 +14,13 @@ const props = defineProps({
default: false, default: false,
}, },
}); });
const emit = defineEmits(['update:modelValue']);
const { t } = useI18n(); const { t } = useI18n();
const requiredFieldRule = (val) => !!val || t('globals.fieldRequired'); const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
const value = computed({ const dateFormat = 'HH:mm';
get() { const isPopupOpen = ref();
return props.modelValue; const hover = ref();
}, const inputRef = ref();
set(value) {
const [hours, minutes] = value.split(':');
const date = new Date(props.modelValue);
date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
emit('update:modelValue', value ? date.toISOString() : null);
},
});
const isPopupOpen = ref(false);
const onDateUpdate = (date) => {
internalValue.value = date;
};
const save = () => {
value.value = internalValue.value;
};
const formatTime = (dateString) => {
if (!dateString || !isValidDate(dateString)) {
return '';
}
const date = new Date(dateString || '');
return date.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
});
};
const internalValue = ref(formatTime(value));
const styleAttrs = computed(() => { const styleAttrs = computed(() => {
return props.isOutlined return props.isOutlined
@ -64,54 +31,115 @@ const styleAttrs = computed(() => {
} }
: {}; : {};
}); });
const formattedTime = computed({
get() {
if (!model.value || model.value?.length <= 5) return model.value;
return dateToTime(model.value);
},
set(value) {
if (value == model.value) return;
let time = value;
if (time) {
if (time?.length > 5) time = dateToTime(time);
else {
if (time.length == 1 && parseInt(time) > 2) time = time.padStart(2, '0');
time = time.padEnd(5, '0');
if (!time.includes(':'))
time = time.substring(0, 2) + ':' + time.substring(3, 5);
}
if (!props.timeOnly) {
const [hh, mm] = time.split(':');
const date = new Date(model.value ? model.value : null);
date.setHours(hh, mm, 0);
time = date?.toISOString();
}
}
model.value = time;
},
});
function dateToTime(newDate) {
return date.formatDate(new Date(newDate), dateFormat);
}
watch(
() => model.value,
(val) => (formattedTime.value = val),
{ immediate: true }
);
watch(
() => formattedTime.value,
async (val) => {
let position = 3;
const input = inputRef.value?.getNativeElement();
if (!val || !input) return;
let [hh, mm] = val.split(':');
hh = parseInt(hh);
if (hh >= 10 || mm != '00') return;
await nextTick();
await nextTick();
if (!hh) position = 0;
input.setSelectionRange(position, position);
},
{ immediate: true }
);
</script> </script>
<template> <template>
<QInput <div @mouseover="hover = true" @mouseleave="hover = false">
class="vn-input-time" <QInput
readonly ref="inputRef"
:model-value="formatTime(value)" class="vn-input-time"
v-bind="{ ...$attrs, ...styleAttrs }" mask="##:##"
:class="{ required: $attrs.required }" placeholder="--:--"
:rules="$attrs.required ? [requiredFieldRule] : null" v-model="formattedTime"
@click="isPopupOpen = true" v-bind="{ ...$attrs, ...styleAttrs }"
> :class="{ required: $attrs.required }"
<template #append> style="min-width: 100px"
<QIcon name="Schedule" class="cursor-pointer"> :rules="$attrs.required ? [requiredFieldRule] : null"
<QPopupProxy @click="isPopupOpen = false"
v-model="isPopupOpen" @focus="inputRef.getNativeElement().setSelectionRange(0, 0)"
cover >
transition-show="scale" <template #append>
transition-hide="scale" <QIcon
:no-parent-event="props.readonly" name="close"
> size="xs"
<QTime v-if="
:format24h="false" ($attrs.clearable == undefined || $attrs.clearable) &&
:model-value="formatTime(value)" hover &&
@update:model-value="onDateUpdate" model &&
> !$attrs.disable
<div class="row items-center justify-end q-gutter-sm"> "
<QBtn @click="
:label="t('Cancel')" model = null;
color="primary" isPopupOpen = false;
flat "
v-close-popup />
/> <QIcon
<QBtn name="Schedule"
label="Ok" class="cursor-pointer"
color="primary" @click="isPopupOpen = !isPopupOpen"
flat :title="t('Open time')"
@click="save" />
v-close-popup </template>
/> <QMenu
</div> transition-show="scale"
</QTime> transition-hide="scale"
</QPopupProxy> v-model="isPopupOpen"
</QIcon> anchor="bottom left"
</template> self="top start"
</QInput> :no-focus="true"
:no-parent-event="true"
>
<QTime v-model="formattedTime" mask="HH:mm" landscape now-btn />
</QMenu>
</QInput>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before { .vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
border-bottom-style: solid; border-bottom-style: solid;
@ -121,8 +149,8 @@ const styleAttrs = computed(() => {
border-style: solid; border-style: solid;
} }
</style> </style>
<i18n> <i18n>
es: es:
Cancel: Cancelar Open time: Abrir tiempo
</i18n> </i18n>
, nextTick

7
src/components/common/VnLog.vue
View File

@ -49,6 +49,7 @@ const filter = {
'changedModelId', 'changedModelId',
'changedModelValue', 'changedModelValue',
'description', 'description',
'summaryId',
], ],
include: [ include: [
{ {
@ -459,12 +460,12 @@ onUnmounted(() => {
:style="{ :style="{
backgroundColor: useColor(modelLog.model), backgroundColor: useColor(modelLog.model),
}" }"
:title="modelLog.model" :title="`${modelLog.model} #${modelLog.id}`"
> >
{{ t(modelLog.modelI18n) }} {{ t(modelLog.modelI18n) }}
</QChip> </QChip>
<span class="model-id" v-if="modelLog.id" <span class="model-id" v-if="modelLog.summaryId"
>#{{ modelLog.id }}</span >#{{ modelLog.summaryId }}</span
> >
<span class="model-value" :title="modelLog.showValue"> <span class="model-value" :title="modelLog.showValue">
{{ modelLog.showValue }} {{ modelLog.showValue }}

63
src/components/common/VnSelect.vue
View File

@ -61,6 +61,10 @@ const $props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
useLike: {
type: Boolean,
default: true,
},
}); });
const { t } = useI18n(); const { t } = useI18n();
@ -71,6 +75,7 @@ const myOptions = ref([]);
const myOptionsOriginal = ref([]); const myOptionsOriginal = ref([]);
const vnSelectRef = ref(); const vnSelectRef = ref();
const dataRef = ref(); const dataRef = ref();
const lastVal = ref();
const value = computed({ const value = computed({
get() { get() {
@ -81,14 +86,31 @@ const value = computed({
}, },
}); });
watch(options, (newValue) => {
setOptions(newValue);
});
watch(modelValue, (newValue) => {
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
fetchFilter(newValue);
});
onMounted(() => {
setOptions(options.value);
if ($props.url && $props.modelValue && !findKeyInOptions())
fetchFilter($props.modelValue);
if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
});
function findKeyInOptions() {
if (!$props.options) return;
return filter($props.modelValue, $props.options)?.length;
}
function setOptions(data) { function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data)); myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data)); myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
} }
onMounted(() => {
setOptions(options.value);
if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
});
function filter(val, options) { function filter(val, options) {
const search = val.toString().toLowerCase(); const search = val.toString().toLowerCase();
@ -103,7 +125,8 @@ function filter(val, options) {
}); });
} }
const id = row.id; if (!row) return;
const id = row[$props.optionValue];
const optionLabel = String(row[$props.optionLabel]).toLowerCase(); const optionLabel = String(row[$props.optionLabel]).toLowerCase();
return id == search || optionLabel.includes(search); return id == search || optionLabel.includes(search);
@ -114,19 +137,28 @@ async function fetchFilter(val) {
if (!$props.url || !dataRef.value) return; if (!$props.url || !dataRef.value) return;
const { fields, sortBy, limit } = $props; const { fields, sortBy, limit } = $props;
let key = optionLabel.value; let key = optionFilter.value ?? optionLabel.value;
if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value; if (new RegExp(/\d/g).test(val)) key = optionValue.value;
const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where }; const defaultWhere = $props.useLike
? { [key]: { like: `%${val}%` } }
: { [key]: val };
const where = { ...(val ? defaultWhere : {}), ...$props.where };
const fetchOptions = { where, order: sortBy, limit }; const fetchOptions = { where, order: sortBy, limit };
if (fields) fetchOptions.fields = fields; if (fields) fetchOptions.fields = fields;
return dataRef.value.fetch(fetchOptions); return dataRef.value.fetch(fetchOptions);
} }
async function filterHandler(val, update) { async function filterHandler(val, update) {
if (!$props.defaultFilter) return update(); if (!val && lastVal.value === val) {
lastVal.value = val;
return update();
}
lastVal.value = val;
let newOptions; let newOptions;
if (!$props.defaultFilter) return update();
if ($props.url) { if ($props.url) {
newOptions = await fetchFilter(val); newOptions = await fetchFilter(val);
} else newOptions = filter(val, myOptionsOriginal.value); } else newOptions = filter(val, myOptionsOriginal.value);
@ -142,19 +174,6 @@ async function filterHandler(val, update) {
} }
); );
} }
watch(options, (newValue) => {
setOptions(newValue);
});
watch(modelValue, (newValue) => {
if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
fetchFilter(newValue);
});
onMounted(async () => {
if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
});
</script> </script>
<template> <template>

38
src/components/common/VnSelectCache.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup>
import { ref, onBeforeMount, useAttrs } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const $props = defineProps({
row: {
type: [Object],
default: null,
},
find: {
type: [String, Object],
default: null,
},
});
const options = ref([]);
onBeforeMount(async () => {
const { url, optionValue, optionLabel } = useAttrs();
const findBy = $props.find ?? url?.charAt(0)?.toLocaleLowerCase() + url?.slice(1, -1);
if (!findBy || !$props.row) return;
// is object
if (typeof findBy == 'object') {
const { value, label } = findBy;
if (!$props.row[value] || !$props.row[label]) return;
return (options.value = [
{
[optionValue ?? 'id']: $props.row[value],
[optionLabel ?? 'name']: $props.row[label],
},
]);
}
// is string
if ($props.row[findBy]) options.value = [$props.row[findBy]];
});
</script>
<template>
<VnSelect v-bind="$attrs" :options="$attrs.options ?? options" />
</template>

63
src/components/ui/CardDescriptor.vue
View File

@ -46,7 +46,7 @@ let arrayData;
let store; let store;
let entity; let entity;
const isLoading = ref(false); const isLoading = ref(false);
const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
defineExpose({ getData }); defineExpose({ getData });
onBeforeMount(async () => { onBeforeMount(async () => {
@ -56,12 +56,19 @@ onBeforeMount(async () => {
skip: 0, skip: 0,
}); });
store = arrayData.store; store = arrayData.store;
entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data)); entity = computed(() => {
const data = (Array.isArray(store.data) ? store.data[0] : store.data) ?? {};
if (data) emit('onFetch', data);
return data;
});
// It enables to load data only once if the module is the same as the dataKey // It enables to load data only once if the module is the same as the dataKey
if ($props.dataKey !== route.meta.moduleName || !route.params.id) await getData(); if (!isSameDataKey.value || !route.params.id) await getData();
watch( watch(
() => [$props.url, $props.filter], () => [$props.url, $props.filter],
async () => await getData() async () => {
if (!isSameDataKey.value) await getData();
}
); );
}); });
@ -77,14 +84,50 @@ async function getData() {
isLoading.value = false; isLoading.value = false;
} }
} }
function getValueFromPath(path) {
if (!path) return;
const keys = path.toString().split('.');
let current = entity.value;
for (const key of keys) {
if (current[key] === undefined) return undefined;
else current = current[key];
}
return current;
}
const emit = defineEmits(['onFetch']); const emit = defineEmits(['onFetch']);
const iconModule = computed(() => route.matched[1].meta.icon);
const toModule = computed(() =>
route.matched[1].path.split('/').length > 2
? route.matched[1].redirect
: route.matched[1].children[0].redirect
);
</script> </script>
<template> <template>
<div class="descriptor"> <div class="descriptor">
<template v-if="entity && !isLoading"> <template v-if="entity && !isLoading">
<div class="header bg-primary q-pa-sm justify-between"> <div class="header bg-primary q-pa-sm justify-between">
<slot name="header-extra-action" /> <slot name="header-extra-action"
><QBtn
round
flat
dense
size="md"
:icon="iconModule"
color="white"
class="link"
:to="toModule"
>
<QTooltip>
{{ t('globals.goToModuleIndex') }}
</QTooltip>
</QBtn></slot
>
<QBtn <QBtn
@click.stop="viewSummary(entity.id, $props.summary)" @click.stop="viewSummary(entity.id, $props.summary)"
round round
@ -127,9 +170,9 @@ const emit = defineEmits(['onFetch']);
<QTooltip> <QTooltip>
{{ t('components.cardDescriptor.moreOptions') }} {{ t('components.cardDescriptor.moreOptions') }}
</QTooltip> </QTooltip>
<QMenu> <QMenu ref="menuRef">
<QList> <QList>
<slot name="menu" :entity="entity" /> <slot name="menu" :entity="entity" :menu-ref="menuRef" />
</QList> </QList>
</QMenu> </QMenu>
</QBtn> </QBtn>
@ -139,8 +182,8 @@ const emit = defineEmits(['onFetch']);
<QList dense> <QList dense>
<QItemLabel header class="ellipsis text-h5" :lines="1"> <QItemLabel header class="ellipsis text-h5" :lines="1">
<div class="title"> <div class="title">
<span v-if="$props.title" :title="$props.title"> <span v-if="$props.title" :title="getValueFromPath(title)">
{{ entity[title] ?? $props.title }} {{ getValueFromPath(title) ?? $props.title }}
</span> </span>
<slot v-else name="description" :entity="entity"> <slot v-else name="description" :entity="entity">
<span :title="entity.name"> <span :title="entity.name">
@ -151,7 +194,7 @@ const emit = defineEmits(['onFetch']);
</QItemLabel> </QItemLabel>
<QItem dense> <QItem dense>
<QItemLabel class="subtitle" caption> <QItemLabel class="subtitle" caption>
#{{ $props.subtitle ?? entity.id }} #{{ getValueFromPath(subtitle) ?? entity.id }}
</QItemLabel> </QItemLabel>
</QItem> </QItem>
</QList> </QList>

24
src/pages/Order/Card/OrderCatalogItem.vue → src/components/ui/CatalogItem.vue
View File

@ -7,7 +7,7 @@ import VnImg from 'src/components/ui/VnImg.vue';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue'; import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import toCurrency from '../../../filters/toCurrency'; import { toCurrency } from 'filters/index';
const DEFAULT_PRICE_KG = 0; const DEFAULT_PRICE_KG = 0;
@ -18,6 +18,10 @@ defineProps({
type: Object, type: Object,
required: true, required: true,
}, },
isCatalog: {
type: Boolean,
default: false,
},
}); });
const dialog = ref(null); const dialog = ref(null);
@ -27,8 +31,8 @@ const dialog = ref(null);
<div class="container order-catalog-item overflow-hidden"> <div class="container order-catalog-item overflow-hidden">
<QCard class="card shadow-6"> <QCard class="card shadow-6">
<div class="img-wrapper"> <div class="img-wrapper">
<VnImg :id="item.id" class="image" /> <VnImg :id="item.id" zoom-size="lg" class="image" />
<div v-if="item.hex" class="item-color-container"> <div v-if="item.hex && isCatalog" class="item-color-container">
<div <div
class="item-color" class="item-color"
:style="{ backgroundColor: `#${item.hex}` }" :style="{ backgroundColor: `#${item.hex}` }"
@ -48,13 +52,18 @@ const dialog = ref(null);
:value="item?.[`value${index + 4}`]" :value="item?.[`value${index + 4}`]"
/> />
</template> </template>
<div v-if="item.minQuantity" class="min-quantity">
<QIcon name="production_quantity_limits" size="xs" />
{{ item.minQuantity }}
</div>
<div class="footer"> <div class="footer">
<div class="price"> <div class="price">
<p> <p v-if="isCatalog">
{{ item.available }} {{ t('to') }} {{ item.available }} {{ t('to') }}
{{ toCurrency(item.price) }} {{ toCurrency(item.price) }}
</p> </p>
<QIcon name="add_circle" class="icon"> <slot name="price" />
<QIcon v-if="isCatalog" name="add_circle" class="icon">
<QTooltip>{{ t('globals.add') }}</QTooltip> <QTooltip>{{ t('globals.add') }}</QTooltip>
<QPopupProxy ref="dialog"> <QPopupProxy ref="dialog">
<OrderCatalogItemDialog <OrderCatalogItemDialog
@ -128,6 +137,11 @@ const dialog = ref(null);
} }
} }
.min-quantity {
text-align: right;
color: $negative !important;
}
.footer { .footer {
.price { .price {
overflow: hidden; overflow: hidden;

56
src/components/ui/VnFilterPanel.vue
View File

@ -18,19 +18,18 @@ const $props = defineProps({
}, },
searchButton: { searchButton: {
type: Boolean, type: Boolean,
required: false,
default: false, default: false,
}, },
showAll: { showAll: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
unremovableParams: { unRemovableParams: {
type: Array, type: Array,
required: false, required: false,
default: () => [], default: () => [],
description: description: `Some filters come with default search parameters and require a value.
'Algunos filtros vienen con parametros de búsqueda por default y necesitan tener si o si un valor, por eso de ser necesario, esta prop nos sirve para saber que filtros podemos remover y cuales no', This prop helps us determine which filters can be removed and which cannot.`,
}, },
exprBuilder: { exprBuilder: {
type: Function, type: Function,
@ -58,7 +57,15 @@ const $props = defineProps({
}, },
}); });
const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']); defineExpose({ search });
const emit = defineEmits([
'update:modelValue',
'refresh',
'clear',
'search',
'init',
'remove',
]);
const arrayData = useArrayData($props.dataKey, { const arrayData = useArrayData($props.dataKey, {
exprBuilder: $props.exprBuilder, exprBuilder: $props.exprBuilder,
@ -105,8 +112,6 @@ async function search(evt) {
isLoading.value = true; isLoading.value = true;
const filter = { ...userParams.value }; const filter = { ...userParams.value };
store.userParamsChanged = true; store.userParamsChanged = true;
store.filter.skip = 0;
store.skip = 0;
const { params: newParams } = await arrayData.addFilter({ params: userParams.value }); const { params: newParams } = await arrayData.addFilter({ params: userParams.value });
userParams.value = newParams; userParams.value = newParams;
@ -119,7 +124,8 @@ async function search(evt) {
async function reload() { async function reload() {
isLoading.value = true; isLoading.value = true;
const params = Object.values(userParams.value).filter((param) => param); const params = Object.values(userParams.value).filter((param) => param);
store.skip = 0;
store.page = 1;
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!$props.showAll && !params.length) store.data = []; if (!$props.showAll && !params.length) store.data = [];
isLoading.value = false; isLoading.value = false;
@ -129,11 +135,10 @@ async function reload() {
async function clearFilters() { async function clearFilters() {
isLoading.value = true; isLoading.value = true;
store.userParamsChanged = true; store.userParamsChanged = true;
store.filter.skip = 0; arrayData.reset(['skip', 'filter.skip', 'page']);
store.skip = 0;
// Filtrar los params no removibles // Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) => const removableFilters = Object.keys(userParams.value).filter((param) =>
$props.unremovableParams.includes(param) $props.unRemovableParams.includes(param)
); );
const newParams = {}; const newParams = {};
// Conservar solo los params que no son removibles // Conservar solo los params que no son removibles
@ -150,6 +155,7 @@ async function clearFilters() {
isLoading.value = false; isLoading.value = false;
emit('clear'); emit('clear');
emit('update:modelValue', userParams.value);
} }
const tagsList = computed(() => { const tagsList = computed(() => {
@ -173,6 +179,7 @@ async function remove(key) {
userParams.value[key] = undefined; userParams.value[key] = undefined;
search(); search();
emit('remove', key); emit('remove', key);
emit('update:modelValue', userParams.value);
} }
function formatValue(value) { function formatValue(value) {
@ -184,6 +191,14 @@ function formatValue(value) {
</script> </script>
<template> <template>
<QBtn
class="q-mt-lg q-mr-xs q-mb-lg"
round
color="primary"
style="position: fixed; z-index: 1; right: 0; bottom: 0"
icon="search"
@click="search()"
></QBtn>
<QForm @submit="search" id="filterPanelForm"> <QForm @submit="search" id="filterPanelForm">
<QList dense> <QList dense>
<QItem class="q-mt-xs"> <QItem class="q-mt-xs">
@ -232,7 +247,7 @@ function formatValue(value) {
<VnFilterPanelChip <VnFilterPanelChip
v-for="chip of tags" v-for="chip of tags"
:key="chip.label" :key="chip.label"
:removable="!unremovableParams.includes(chip.label)" :removable="!unRemovableParams.includes(chip.label)"
@remove="remove(chip.label)" @remove="remove(chip.label)"
> >
<slot name="tags" :tag="chip" :format-fn="formatValue"> <slot name="tags" :tag="chip" :format-fn="formatValue">
@ -257,23 +272,6 @@ function formatValue(value) {
<QList dense class="list q-gutter-y-sm q-mt-sm"> <QList dense class="list q-gutter-y-sm q-mt-sm">
<slot name="body" :params="userParams" :search-fn="search"></slot> <slot name="body" :params="userParams" :search-fn="search"></slot>
</QList> </QList>
<template v-if="$props.searchButton">
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
:type="disableSubmitEvent ? 'button' : 'submit'"
unelevated
/>
</QItemSection>
</QItem>
<QSeparator />
</template>
</QForm> </QForm>
<QInnerLoading <QInnerLoading
:label="t('globals.pleaseWait')" :label="t('globals.pleaseWait')"

12
src/components/ui/VnPaginate.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, ref, watch } from 'vue'; import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
@ -26,6 +26,10 @@ const props = defineProps({
type: Object, type: Object,
default: null, default: null,
}, },
userFilter: {
type: Object,
default: null,
},
where: { where: {
type: Object, type: Object,
default: null, default: null,
@ -80,6 +84,7 @@ const pagination = ref({
const arrayData = useArrayData(props.dataKey, { const arrayData = useArrayData(props.dataKey, {
url: props.url, url: props.url,
filter: props.filter, filter: props.filter,
userFilter: props.userFilter,
where: props.where, where: props.where,
limit: props.limit, limit: props.limit,
order: props.order, order: props.order,
@ -95,6 +100,8 @@ onMounted(async () => {
mounted.value = true; mounted.value = true;
}); });
onBeforeUnmount(() => arrayData.reset());
watch( watch(
() => props.data, () => props.data,
() => { () => {
@ -118,8 +125,7 @@ const addFilter = async (filter, params) => {
async function fetch(params) { async function fetch(params) {
useArrayData(props.dataKey, params); useArrayData(props.dataKey, params);
store.filter.skip = 0; arrayData.reset(['filter.skip', 'skip']);
store.skip = 0;
await arrayData.fetch({ append: false }); await arrayData.fetch({ append: false });
if (!store.hasMoreData) { if (!store.hasMoreData) {
isLoading.value = false; isLoading.value = false;

2
src/components/ui/VnSearchbar.vue
View File

@ -103,7 +103,7 @@ async function search() {
const staticParams = Object.entries(store.userParams).filter( const staticParams = Object.entries(store.userParams).filter(
([key, value]) => value && (props.staticParams || []).includes(key) ([key, value]) => value && (props.staticParams || []).includes(key)
); );
store.skip = 0; arrayData.reset(['skip', 'page']);
if (props.makeFetch) if (props.makeFetch)
await arrayData.applyFilter({ await arrayData.applyFilter({

8
src/components/ui/VnSubToolbar.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onBeforeUnmount, ref } from 'vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore(); const stateStore = useStateStore();
const actions = ref(null); const actions = ref(null);
const data = ref(null); const data = ref(null);
@ -24,13 +25,12 @@ onMounted(() => {
if (data.value) observer.observe(data.value, opts); if (data.value) observer.observe(data.value, opts);
}); });
onUnmounted(() => { onBeforeUnmount(() => stateStore.toggleSubToolbar());
stateStore.toggleSubToolbar();
});
</script> </script>
<template> <template>
<QToolbar <QToolbar
id="subToolbar"
class="justify-end sticky" class="justify-end sticky"
v-show="hasContent || $slots['st-actions'] || $slots['st-data']" v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
> >

101
src/composables/useArrayData.js
View File

@ -1,4 +1,4 @@
import { onMounted, ref, computed } from 'vue'; import { onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import { useArrayDataStore } from 'stores/useArrayDataStore'; import { useArrayDataStore } from 'stores/useArrayDataStore';
@ -16,20 +16,19 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
const router = useRouter(); const router = useRouter();
let canceller = null; let canceller = null;
const page = ref(1);
onMounted(() => { onMounted(() => {
setOptions(); setOptions();
store.skip = 0; reset(['skip']);
const query = route.query; const query = route.query;
const searchUrl = store.searchUrl; const searchUrl = store.searchUrl;
if (query[searchUrl]) { if (query[searchUrl]) {
const params = JSON.parse(query[searchUrl]); const params = JSON.parse(query[searchUrl]);
const filter = params?.filter; const filter = params?.filter && JSON.parse(params?.filter ?? '{}');
delete params.filter; delete params.filter;
store.userParams = { ...params, ...store.userParams }; store.userParams = { ...params, ...store.userParams };
store.userFilter = { ...JSON.parse(filter ?? '{}'), ...store.userFilter }; store.userFilter = { ...filter, ...store.userFilter };
if (filter.order) store.order = filter.order;
} }
}); });
@ -71,7 +70,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
canceller = new AbortController(); canceller = new AbortController();
const filter = { const filter = {
order: store.order,
limit: store.limit, limit: store.limit,
}; };
@ -87,13 +85,19 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
} }
Object.assign(filter, store.userFilter, exprFilter); Object.assign(filter, store.userFilter, exprFilter);
Object.assign(store.filter, { ...filter, skip: store.skip }); let where;
const params = { if (filter?.where || store.filter?.where)
filter: JSON.stringify(store.filter), where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
}; Object.assign(filter, store.filter);
filter.where = where;
const params = { filter };
Object.assign(params, userParams); Object.assign(params, userParams);
params.filter.skip = store.skip;
if (store.order && store.order.length) params.filter.order = store.order;
else delete params.filter.order;
params.filter = JSON.stringify(params.filter);
store.currentFilter = params; store.currentFilter = params;
store.isLoading = true; store.isLoading = true;
const response = await axios.get(store.url, { const response = await axios.get(store.url, {
@ -129,6 +133,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
delete store[option]; delete store[option];
} }
function reset(opts = []) {
if (arrayDataStore.get(key)) arrayDataStore.reset(key, opts);
}
function cancelRequest() { function cancelRequest() {
if (canceller) { if (canceller) {
canceller.abort(); canceller.abort();
@ -141,42 +149,82 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
store.filter = {}; store.filter = {};
if (params) store.userParams = { ...params }; if (params) store.userParams = { ...params };
const response = await fetch({ append: false }); const response = await fetch({});
return response; return response;
} }
async function addFilter({ filter, params }) { async function addFilter({ filter, params }) {
if (filter) store.userFilter = Object.assign(store.userFilter, filter); if (filter) store.filter = filter;
let userParams = { ...store.userParams, ...params }; let userParams = { ...store.userParams, ...params };
userParams = sanitizerParams(userParams, store?.exprBuilder); userParams = sanitizerParams(userParams, store?.exprBuilder);
store.userParams = userParams; store.userParams = userParams;
store.skip = 0; reset(['skip', 'filter.skip', 'page']);
store.filter.skip = 0;
page.value = 1;
await fetch({ append: false }); await fetch({});
return { filter, params }; return { filter, params };
} }
async function addFilterWhere(where) { async function addFilterWhere(where) {
const storedFilter = { ...store.userFilter }; const storedFilter = { ...store.filter };
if (!storedFilter?.where) storedFilter.where = {}; if (!storedFilter?.where) storedFilter.where = {};
where = { ...storedFilter.where, ...where }; where = { ...storedFilter.where, ...where };
await addFilter({ filter: { where } }); await addFilter({ filter: { where } });
} }
async function addOrder(field, direction = 'ASC') {
const newOrder = field + ' ' + direction;
let order = store.order || [];
if (typeof order == 'string') order = [order];
let index = order.findIndex((o) => o.split(' ')[0] === field);
if (index > -1) {
order[index] = newOrder;
} else {
index = order.length;
order.push(newOrder);
}
store.order = order;
reset(['skip', 'filter.skip', 'page']);
fetch({});
index++;
return { index, order };
}
async function deleteOrder(field) {
let order = store.order ?? [];
if (typeof order == 'string') order = [order];
const index = order.findIndex((o) => o.split(' ')[0] === field);
if (index > -1) order.splice(index, 1);
store.order = order;
fetch({});
}
function sanitizerParams(params, exprBuilder) { function sanitizerParams(params, exprBuilder) {
for (const param in params) { for (const param in params) {
if (params[param] === '' || params[param] === null) { if (params[param] === '' || params[param] === null) {
delete store.userParams[param]; delete store.userParams[param];
delete params[param]; delete params[param];
if (store.filter?.where) { if (store.filter?.where) {
const key = Object.keys(exprBuilder ? exprBuilder(param) : param); let key;
if (key[0]) delete store.filter.where[key[0]]; if (exprBuilder) {
if (Object.keys(store.filter.where).length === 0) { const result = exprBuilder(param);
delete store.filter.where; if (result !== undefined && result !== null)
key = Object.keys(result);
} else {
if (typeof param === 'object' && param !== null)
key = Object.keys(param);
}
if (key && key[0]) {
delete store.filter.where[key[0]];
if (Object.keys(store.filter.where).length === 0) {
delete store.filter.where;
}
} }
} }
} }
@ -187,14 +235,14 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
async function loadMore() { async function loadMore() {
if (!store.hasMoreData) return; if (!store.hasMoreData) return;
store.skip = store.limit * page.value; store.skip = store.limit * store.page;
page.value += 1; store.page += 1;
await fetch({ append: true }); await fetch({ append: true });
} }
async function refresh() { async function refresh() {
if (Object.values(store.userParams).length) await fetch({ append: false }); if (Object.values(store.userParams).length) await fetch({});
} }
function updateStateParams() { function updateStateParams() {
@ -236,6 +284,8 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
applyFilter, applyFilter,
addFilter, addFilter,
addFilterWhere, addFilterWhere,
addOrder,
deleteOrder,
refresh, refresh,
destroy, destroy,
loadMore, loadMore,
@ -244,5 +294,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
updateStateParams, updateStateParams,
isLoading, isLoading,
deleteOption, deleteOption,
reset,
}; };
} }

42
src/composables/useSession.js
View File

@ -58,31 +58,37 @@ export function useSession() {
} }
} }
} }
async function destroy() { async function destroy(destroyTokens = true) {
const tokens = { const tokens = {
tokenMultimedia: 'Accounts/logout', tokenMultimedia: 'Accounts/logout',
token: 'VnUsers/logout', token: 'VnUsers/logout',
}; };
const storage = keepLogin() ? localStorage : sessionStorage; const storage = keepLogin() ? localStorage : sessionStorage;
let destroyTokenPromises = [];
try {
if (destroyTokens) {
const { data: isValidToken } = await axios.get('VnUsers/validateToken');
if (isValidToken)
destroyTokenPromises = Object.entries(tokens).map(([key, url]) =>
destroyToken(url, storage, key)
);
}
} finally {
localStorage.clear();
sessionStorage.clear();
await Promise.allSettled(destroyTokenPromises);
const { setUser } = useState();
for (const [key, url] of Object.entries(tokens)) { setUser({
await destroyToken(url, storage, key); id: 0,
name: '',
nickname: '',
lang: '',
darkMode: null,
});
stopRenewer();
} }
localStorage.clear();
sessionStorage.clear();
const { setUser } = useState();
setUser({
id: 0,
name: '',
nickname: '',
lang: '',
darkMode: null,
});
stopRenewer();
} }
async function login(data) { async function login(data) {

39
src/css/app.scss
View File

@ -4,8 +4,10 @@
body.body--light { body.body--light {
--font-color: black; --font-color: black;
--vn-section-color: #e0e0e0; --vn-header-color: #cecece;
--vn-page-color: #ffffff; --vn-page-color: #ffffff;
--vn-section-color: #e0e0e0;
--vn-section-hover-color: #b9b9b9;
--vn-text-color: var(--font-color); --vn-text-color: var(--font-color);
--vn-label-color: #5f5f5f; --vn-label-color: #5f5f5f;
--vn-accent-color: #e7e3e3; --vn-accent-color: #e7e3e3;
@ -17,8 +19,10 @@ body.body--light {
} }
} }
body.body--dark { body.body--dark {
--vn-header-color: #5d5d5d;
--vn-page-color: #222; --vn-page-color: #222;
--vn-section-color: #3d3d3d; --vn-section-color: #3d3d3d;
--vn-section-hover-color: #747474;
--vn-text-color: white; --vn-text-color: white;
--vn-label-color: #a8a8a8; --vn-label-color: #a8a8a8;
--vn-accent-color: #424242; --vn-accent-color: #424242;
@ -71,8 +75,9 @@ select:-webkit-autofill {
.bg-vn-section-color { .bg-vn-section-color {
background-color: var(--vn-section-color); background-color: var(--vn-section-color);
} }
.bg-hover {
background-color: #666666; .bg-vn-hover {
background-color: var(--vn-section-hover-color);
} }
.color-vn-label { .color-vn-label {
@ -183,8 +188,6 @@ select:-webkit-autofill {
justify-content: center; justify-content: center;
} }
/* q-notification row items-stretch q-notification--standard bg-negative text-white */
.q-card, .q-card,
.q-table, .q-table,
.q-table__bottom, .q-table__bottom,
@ -228,3 +231,29 @@ input::-webkit-inner-spin-button {
*::-webkit-scrollbar-track { *::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
.q-table {
thead,
tbody {
th {
.q-select {
max-width: 120px;
}
}
td {
padding: 1px 10px 1px 10px;
max-width: 100px;
div span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.expand {
max-width: 400px;
}
}
}

473
src/i18n/locale/en.yml
View File

@ -91,6 +91,7 @@ globals:
send: Send send: Send
code: Code code: Code
pageTitles: pageTitles:
logIn: Login
summary: Summary summary: Summary
basicData: Basic data basicData: Basic data
log: Logs log: Logs
@ -101,14 +102,150 @@ globals:
modes: Modes modes: Modes
zones: Zones zones: Zones
zonesList: Zones zonesList: Zones
deliveryList: Delivery days deliveryDays: Delivery days
upcomingList: Upcoming deliveries upcomingDeliveries: Upcoming deliveries
role: Role role: Role
alias: Alias alias: Alias
aliasUsers: Users aliasUsers: Users
subRoles: Subroles subRoles: Subroles
inheritedRoles: Inherited Roles inheritedRoles: Inherited Roles
customers: Customers
list: List
webPayments: Web Payments
extendedList: Extended list
notifications: Notifications
defaulter: Defaulter
customerCreate: New customer
fiscalData: Fiscal data
billingData: Billing data
consignees: Consignees
notes: Notes
credits: Credits
greuges: Greuges
balance: Balance
recoveries: Recoveries
webAccess: Web access
sms: Sms
creditManagement: Credit management
creditContracts: Credit contracts
creditOpinion: Credit opinion
others: Others
samples: Samples
consumption: Consumption
mandates: Mandates
contacts: Contacts
webPayment: Web payment
fileManagement: File management
unpaid: Unpaid
entries: Entries
buys: Buys
dms: File management
entryCreate: New entry
latestBuys: Latest buys
tickets: Tickets
ticketCreate: New Tickets
boxing: Boxing
sale: Sale
claims: Claims
claimCreate: New claim
lines: Lines
photos: Photos
development: Development
action: Action
invoiceOuts: Invoice out
negativeBases: Negative Bases
globalInvoicing: Global invoicing
invoiceOutCreate: Create invoice out
shelving: Shelving
shelvingList: Shelving List
shelvingCreate: New shelving
invoiceIns: Invoices In
invoiceInCreate: Create invoice in
vat: VAT
dueDay: Due day
intrastat: Intrastat
corrective: Corrective
order: Orders
orderList: List
orderCreate: New order
catalog: Catalog
volume: Volume
workers: Workers
workerCreate: New worker
department: Department
pda: PDA
pbx: Private Branch Exchange
calendar: Calendar
timeControl: Time control
locker: Locker
wagons: Wagons
wagonsList: Wagons List
wagonCreate: Create wagon
wagonEdit: Edit wagon
typesList: Types List
typeCreate: Create type
typeEdit: Edit type
wagonCounter: Trolley counter
roadmap: Roadmap
stops: Stops
routes: Routes
cmrsList: CMRs list
RouteList: List
routeCreate: New route
RouteRoadmap: Roadmaps
RouteRoadmapCreate: Create roadmap
autonomous: Autonomous
suppliers: Suppliers
supplier: Supplier
expedition: Expedition
services: Service
components: Components
pictures: Pictures
packages: Packages
tracking: Tracking
labeler: Labeler labeler: Labeler
supplierCreate: New supplier
accounts: Accounts
addresses: Addresses
agencyTerm: Agency agreement
travel: Travels
extraCommunity: Extra community
travelCreate: New travel
history: Log
thermographs: Thermograph
items: Items
diary: Diary
tags: Tags
create: Create
buyRequest: Buy requests
fixedPrice: Fixed prices
wasteBreakdown: Waste breakdown
itemCreate: New item
barcode: Barcodes
tax: Tax
botanical: Botanical
itemTypeCreate: New item type
family: Item Type
lastEntries: Last entries
itemType: Item type
monitors: Monitors
dashboard: Dashboard
users: Users
createTicket: Create ticket
ticketAdvance: Advance tickets
futureTickets: Future tickets
purchaseRequest: Purchase request
weeklyTickets: Weekly tickets
formation: Formation
locations: Locations
warehouses: Warehouses
saleTracking: Sale tracking
roles: Roles
connections: Connections
acls: ACLs
mailForwarding: Mail forwarding
mailAlias: Mail alias
privileges: Privileges
created: Created created: Created
worker: Worker worker: Worker
now: Now now: Now
@ -116,6 +253,7 @@ globals:
new: New new: New
comment: Comment comment: Comment
observations: Observations observations: Observations
goToModuleIndex: Go to module index
errors: errors:
statusUnauthorized: Access denied statusUnauthorized: Access denied
statusInternalServerError: An internal server error has ocurred statusInternalServerError: An internal server error has ocurred
@ -134,8 +272,6 @@ login:
loginError: Invalid username or password loginError: Invalid username or password
fieldRequired: This field is required fieldRequired: This field is required
twoFactorRequired: Two-factor verification required twoFactorRequired: Two-factor verification required
pageTitles:
logIn: Login
twoFactor: twoFactor:
code: Code code: Code
validate: Validate validate: Validate
@ -150,40 +286,8 @@ verifyEmail:
verifyEmail: Email verification verifyEmail: Email verification
dashboard: dashboard:
pageTitles: pageTitles:
dashboard: Dashboard
customer: customer:
pageTitles:
customers: Customers
list: List
webPayments: Web Payments
extendedList: Extended list
notifications: Notifications
defaulter: Defaulter
customerCreate: New customer
summary: Summary
basicData: Basic data
fiscalData: Fiscal data
billingData: Billing data
consignees: Consignees
notes: Notes
credits: Credits
greuges: Greuges
balance: Balance
recoveries: Recoveries
webAccess: Web access
log: Log
sms: Sms
creditManagement: Credit management
creditContracts: Credit contracts
creditOpinion: Credit opinion
others: Others
samples: Samples
consumption: Consumption
mandates: Mandates
contacts: Contacts
webPayment: Web payment
fileManagement: File management
unpaid: Unpaid
list: list:
phone: Phone phone: Phone
email: Email email: Email
@ -313,17 +417,6 @@ customer:
hasCoreVnl: VNL core received hasCoreVnl: VNL core received
hasSepaVnl: VNL B2B received hasSepaVnl: VNL B2B received
entry: entry:
pageTitles:
entries: Entries
list: List
summary: Summary
basicData: Basic data
buys: Buys
notes: Notes
dms: File management
log: Log
entryCreate: New entry
latestBuys: Latest buys
list: list:
newEntry: New entry newEntry: New entry
landed: Landed landed: Landed
@ -332,6 +425,18 @@ entry:
booked: Booked booked: Booked
confirmed: Confirmed confirmed: Confirmed
ordered: Ordered ordered: Ordered
tableVisibleColumns:
id: Id
reference: Reference
created: Creation
supplierFk: Supplier
isBooked: Booked
isConfirmed: Confirmed
isOrdered: Ordered
companyFk: Company
travelFk: Travel
isExcludedFromAvailable: Inventory
isRaid: Raid
summary: summary:
commission: Commission commission: Commission
currency: Currency currency: Currency
@ -407,34 +512,37 @@ entry:
landed: Landed landed: Landed
warehouseOut: Warehouse Out warehouseOut: Warehouse Out
latestBuys: latestBuys:
picture: Picture tableVisibleColumns:
itemFk: Item ID image: Picture
packing: Packing itemFk: Item ID
grouping: Grouping packing: Packing
quantity: Quantity grouping: Grouping
size: Size quantity: Quantity
tags: Tags size: Size
type: Type tags: Tags
intrastat: Intrastat type: Type
origin: Origin intrastat: Intrastat
weightByPiece: Weight/Piece origin: Origin
isActive: Active weightByPiece: Weight/Piece
family: Family isActive: Active
entryFk: Entry family: Family
buyingValue: Buying value entryFk: Entry
freightValue: Freight value buyingValue: Buying value
comissionValue: Commission value freightValue: Freight value
description: Description comissionValue: Commission value
packageValue: Package value description: Description
isIgnored: Is ignored packageValue: Package value
price2: Grouping isIgnored: Is ignored
price3: Packing price2: Grouping
minPrice: Min price3: Packing
ektFk: Ekt minPrice: Min
weight: Weight ektFk: Ekt
packagingFk: Package weight: Weight
packingOut: Package out packagingFk: Package
landing: Landing packingOut: Package out
landing: Landing
isExcludedFromAvailable: Es inventory
isRaid: Raid
ticket: ticket:
pageTitles: pageTitles:
tickets: Tickets tickets: Tickets
@ -446,14 +554,13 @@ ticket:
sms: Sms sms: Sms
notes: Notes notes: Notes
sale: Sale sale: Sale
dms: File management
volume: Volume volume: Volume
observation: Notes observation: Notes
ticketAdvance: Advance tickets ticketAdvance: Advance tickets
futureTickets: Future tickets futureTickets: Future tickets
purchaseRequest: Purchase request purchaseRequest: Purchase request
weeklyTickets: Weekly tickets weeklyTickets: Weekly tickets
services: Service
tracking: Tracking
list: list:
nickname: Nickname nickname: Nickname
state: State state: State
@ -527,90 +634,7 @@ ticket:
landed: Landed landed: Landed
warehouse: Warehouse warehouse: Warehouse
agency: Agency agency: Agency
claim:
pageTitles:
claims: Claims
list: List
claimCreate: New claim
summary: Summary
basicData: Basic Data
lines: Lines
photos: Photos
development: Development
log: Audit logs
notes: Notes
action: Action
list:
customer: Customer
assignedTo: Assigned
created: Created
state: State
rmaList:
code: Code
records: records
card:
claimId: Claim ID
attendedBy: Attended by
created: Created
state: State
ticketId: Ticket ID
customerSummary: Customer summary
claimedTicket: Claimed ticket
saleTracking: Sale tracking
ticketTracking: Ticket tracking
commercial: Commercial
province: Province
zone: Zone
customerId: client ID
summary:
customer: Customer
assignedTo: Assigned
attendedBy: Attended by
created: Created
state: State
details: Details
item: Item
landed: Landed
quantity: Quantity
claimed: Claimed
price: Price
discount: Discount
total: Total
actions: Actions
responsibility: Responsibility
company: Company
person: Employee/Customer
notes: Notes
photos: Photos
development: Development
reason: Reason
result: Result
responsible: Responsible
worker: Worker
redelivery: Redelivery
changeState: Change state
basicData:
customer: Customer
assignedTo: Assigned
created: Created
state: State
pickup: Pick up
null: No
agency: Agency
delivery: Delivery
photo:
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
noData: 'There are no images/videos, click here or drag and drop the file'
dragDrop: Drag and drop it here
invoiceOut: invoiceOut:
pageTitles:
invoiceOuts: Invoice out
list: List
negativeBases: Negative Bases
globalInvoicing: Global invoicing
invoiceOutCreate: Create invoice out
summary: Summary
basicData: Basic Data
list: list:
ref: Reference ref: Reference
issued: Issued issued: Issued
@ -678,13 +702,6 @@ invoiceOut:
errors: errors:
downloadCsvFailed: CSV download failed downloadCsvFailed: CSV download failed
shelving: shelving:
pageTitles:
shelving: Shelving
shelvingList: Shelving List
shelvingCreate: New shelving
summary: Summary
basicData: Basic Data
log: Logs
list: list:
parking: Parking parking: Parking
priority: Priority priority: Priority
@ -711,17 +728,6 @@ parking:
info: You can search by parking code info: You can search by parking code
label: Search parking... label: Search parking...
invoiceIn: invoiceIn:
pageTitles:
invoiceIns: Invoices In
list: List
invoiceInCreate: Create invoice in
summary: Summary
basicData: Basic data
vat: VAT
dueDay: Due day
intrastat: Intrastat
corrective: Corrective
log: Logs
list: list:
ref: Reference ref: Reference
supplier: Supplier supplier: Supplier
@ -772,15 +778,6 @@ invoiceIn:
stems: Stems stems: Stems
country: Country country: Country
order: order:
pageTitles:
order: Orders
orderList: List
orderCreate: New order
summary: Summary
basicData: Basic Data
catalog: Catalog
volume: Volume
lines: Lines
field: field:
salesPersonFk: Sales Person salesPersonFk: Sales Person
clientFk: Client clientFk: Client
@ -856,7 +853,6 @@ worker:
timeControl: Time control timeControl: Time control
locker: Locker locker: Locker
balance: Balance balance: Balance
formation: Formation
list: list:
name: Name name: Name
email: Email email: Email
@ -945,15 +941,6 @@ worker:
credit: Have credit: Have
concept: Concept concept: Concept
wagon: wagon:
pageTitles:
wagons: Wagons
wagonsList: Wagons List
wagonCreate: Create wagon
wagonEdit: Edit wagon
typesList: Types List
typeCreate: Create type
typeEdit: Edit type
wagonCounter: Trolley counter
type: type:
name: Name name: Name
submit: Submit submit: Submit
@ -982,20 +969,9 @@ wagon:
minHeightBetweenTrays: 'The minimum height between trays is ' minHeightBetweenTrays: 'The minimum height between trays is '
maxWagonHeight: 'The maximum height of the wagon is ' maxWagonHeight: 'The maximum height of the wagon is '
uncompleteTrays: There are incomplete trays uncompleteTrays: There are incomplete trays
route/roadmap:
pageTitles:
roadmap: Roadmap
summary: Summary
basicData: Basic Data
stops: Stops
roadmap:
pageTitles:
roadmap: Roadmap
summary: Summary
basicData: Basic Data
stops: Stops
route: route:
pageTitles: pageTitles:
agency: Agency List
routes: Routes routes: Routes
cmrsList: CMRs list cmrsList: CMRs list
RouteList: List RouteList: List
@ -1034,28 +1010,20 @@ route:
volume: Volume volume: Volume
finished: Finished finished: Finished
supplier: supplier:
pageTitles:
suppliers: Suppliers
supplier: Supplier
list: List
supplierCreate: New supplier
summary: Summary
basicData: Basic data
fiscalData: Fiscal data
billingData: Billing data
log: Log
accounts: Accounts
contacts: Contacts
addresses: Addresses
consumption: Consumption
agencyTerm: Agency agreement
dms: File management
list: list:
payMethod: Pay method payMethod: Pay method
payDeadline: Pay deadline payDeadline: Pay deadline
payDay: Pay day payDay: Pay day
account: Account account: Account
newSupplier: New supplier newSupplier: New supplier
tableVisibleColumns:
id: Id
name: Name
nif: NIF/CIF
nickname: Alias
account: Account
payMethod: Pay Method
payDay: Pay Day
summary: summary:
responsible: Responsible responsible: Responsible
notes: Notes notes: Notes
@ -1141,15 +1109,16 @@ supplier:
date: Date date: Date
reference: Reference reference: Reference
travel: travel:
pageTitles: travelList:
travel: Travels tableVisibleColumns:
list: List id: Id
summary: Summary ref: Reference
extraCommunity: Extra community agency: Agency
travelCreate: New travel shipped: Shipped
basicData: Basic data landed: Landed
history: Log warehouseIn: Warehouse in
thermographs: Thermograph warehouseOut: Warehouse out
totalEntries: Total entries
summary: summary:
confirmed: Confirmed confirmed: Confirmed
entryId: Entry Id entryId: Entry Id
@ -1196,24 +1165,6 @@ travel:
travelFileDescription: 'Travel id { travelId }' travelFileDescription: 'Travel id { travelId }'
file: File file: File
item: item:
pageTitles:
items: Items
list: List
diary: Diary
tags: Tags
create: Create
buyRequest: Buy requests
fixedPrice: Fixed prices
wasteBreakdown: Waste breakdown
itemCreate: New item
barcode: Barcodes
tax: Tax
log: Log
botanical: Botanical
shelving: Shelving
itemTypeCreate: New item type
family: Item Type
lastEntries: Last entries
descriptor: descriptor:
item: Item item: Item
buyer: Buyer buyer: Buyer
@ -1299,22 +1250,6 @@ item:
minSalesQuantity: 'Cantidad mínima de venta' minSalesQuantity: 'Cantidad mínima de venta'
genus: 'Genus' genus: 'Genus'
specie: 'Specie' specie: 'Specie'
item/itemType:
pageTitles:
itemType: Item type
basicData: Basic data
summary: Summary
monitor:
pageTitles:
monitors: Monitors
list: List
zone:
pageTitles:
zones: Zones
zonesList: Zones
deliveryList: Delivery days
upcomingList: Upcoming deliveries
components: components:
topbar: {} topbar: {}
itemsFilterPanel: itemsFilterPanel:

499
src/i18n/locale/es.yml
View File

@ -91,6 +91,7 @@ globals:
send: Enviar send: Enviar
code: Código code: Código
pageTitles: pageTitles:
logIn: Inicio de sesión
summary: Resumen summary: Resumen
basicData: Datos básicos basicData: Datos básicos
log: Historial log: Historial
@ -101,15 +102,152 @@ globals:
modes: Modos modes: Modos
zones: Zonas zones: Zonas
zonesList: Zonas zonesList: Zonas
deliveryList: Días de entrega deliveryDays: Días de entrega
upcomingList: Próximos repartos upcomingDeliveries: Próximos repartos
role: Role role: Role
alias: Alias alias: Alias
aliasUsers: Usuarios aliasUsers: Usuarios
subRoles: Subroles subRoles: Subroles
inheritedRoles: Roles heredados inheritedRoles: Roles heredados
workers: Trabajadores customers: Clientes
customerCreate: Nuevo cliente
list: Listado
webPayments: Pagos Web
extendedList: Listado extendido
notifications: Notificaciones
defaulter: Morosos
createCustomer: Crear cliente
fiscalData: Datos fiscales
billingData: Forma de pago
consignees: Consignatarios
notes: Notas
credits: Créditos
greuges: Greuges
balance: Balance
recoveries: Recobros
webAccess: Acceso web
sms: Sms
creditManagement: Gestión de crédito
creditContracts: Contratos de crédito
creditOpinion: Opinión de crédito
others: Otros
samples: Plantillas
consumption: Consumo
mandates: Mandatos
contacts: Contactos
webPayment: Pago web
fileManagement: Gestión documental
unpaid: Impago
entries: Entradas
buys: Compras
dms: Gestión documental
entryCreate: Nueva entrada
latestBuys: Últimas compras
tickets: Tickets
ticketCreate: Nuevo ticket
boxing: Encajado
sale: Lineas del pedido
claims: Reclamaciones
claimCreate: Crear reclamación
lines: Líneas
development: Trazabilidad
photos: Fotos
action: Acción
invoiceOuts: Fact. emitidas
negativeBases: Bases Negativas
globalInvoicing: Facturación global
invoiceOutCreate: Crear fact. emitida
order: Cesta
orderList: Listado
orderCreate: Nueva orden
catalog: Catálogo
volume: Volumen
shelving: Carros
shelvingList: Listado de carros
shelvingCreate: Nuevo carro
invoiceIns: Fact. recibidas
invoiceInCreate: Crear fact. recibida
vat: IVA
labeler: Etiquetas labeler: Etiquetas
dueDay: Vencimiento
intrastat: Intrastat
corrective: Rectificativa
workers: Trabajadores
workerCreate: Nuevo trabajador
department: Departamentos
pda: PDA
pbx: Centralita
calendar: Calendario
timeControl: Control de horario
locker: Taquilla
wagons: Vagones
wagonsList: Listado vagones
wagonCreate: Crear tipo
wagonEdit: Editar tipo
typesList: Listado tipos
typeCreate: Crear tipo
typeEdit: Editar tipo
wagonCounter: Contador de carros
roadmap: Troncales
stops: Paradas
routes: Rutas
cmrsList: Listado de CMRs
RouteList: Listado
routeCreate: Nueva ruta
RouteRoadmap: Troncales
RouteRoadmapCreate: Crear troncal
autonomous: Autónomos
suppliers: Proveedores
supplier: Proveedor
supplierCreate: Nuevo proveedor
accounts: Cuentas
addresses: Direcciones
agencyTerm: Acuerdo agencia
travel: Envíos
create: Crear
extraCommunity: Extra comunitarios
travelCreate: Nuevo envío
history: Historial
thermographs: Termógrafos
items: Artículos
diary: Histórico
tags: Etiquetas
fixedPrice: Precios fijados
buyRequest: Peticiones de compra
wasteBreakdown: Deglose de mermas
itemCreate: Nuevo artículo
tax: 'IVA'
botanical: 'Botánico'
barcode: 'Código de barras'
itemTypeCreate: Nueva familia
family: Familia
lastEntries: Últimas entradas
itemType: Familia
monitors: Monitores
dashboard: Tablón
users: Usuarios
createTicket: Crear ticket
ticketAdvance: Adelantar tickets
futureTickets: Tickets a futuro
purchaseRequest: Petición de compra
weeklyTickets: Tickets programados
formation: Formación
locations: Ubicaciones
warehouses: Almacenes
roles: Roles
connections: Conexiones
acls: ACLs
mailForwarding: Reenvío de correo
mailAlias: Alias de correo
privileges: Privilegios
observation: Notas
expedition: Expedición
saleTracking: Líneas preparadas
services: Servicios
tracking: Estados
components: Componentes
pictures: Fotos
packages: Bultos
created: Fecha creación created: Fecha creación
worker: Trabajador worker: Trabajador
now: Ahora now: Ahora
@ -117,6 +255,7 @@ globals:
new: Nuevo new: Nuevo
comment: Comentario comment: Comentario
observations: Observaciones observations: Observaciones
goToModuleIndex: Ir al índice del módulo
errors: errors:
statusUnauthorized: Acceso denegado statusUnauthorized: Acceso denegado
statusInternalServerError: Ha ocurrido un error interno del servidor statusInternalServerError: Ha ocurrido un error interno del servidor
@ -135,8 +274,6 @@ login:
loginError: Nombre de usuario o contraseña incorrectos loginError: Nombre de usuario o contraseña incorrectos
fieldRequired: Este campo es obligatorio fieldRequired: Este campo es obligatorio
twoFactorRequired: Verificación de doble factor requerida twoFactorRequired: Verificación de doble factor requerida
pageTitles:
logIn: Inicio de sesión
twoFactor: twoFactor:
code: Código code: Código
validate: Validar validate: Validar
@ -149,41 +286,8 @@ verifyEmail:
verifyEmail: Verificación de correo verifyEmail: Verificación de correo
dashboard: dashboard:
pageTitles: pageTitles:
dashboard: Tablón
customer: customer:
pageTitles:
customers: Clientes
customerCreate: Nuevo cliente
list: Listado
webPayments: Pagos Web
extendedList: Listado extendido
notifications: Notificaciones
defaulter: Morosos
createCustomer: Crear cliente
summary: Resumen
basicData: Datos básicos
fiscalData: Datos fiscales
billingData: Forma de pago
consignees: Consignatarios
notes: Notas
credits: Créditos
greuges: Greuges
balance: Balance
recoveries: Recobros
webAccess: Acceso web
log: Historial
sms: Sms
creditManagement: Gestión de crédito
creditContracts: Contratos de crédito
creditOpinion: Opinión de crédito
others: Otros
samples: Plantillas
consumption: Consumo
mandates: Mandatos
contacts: Contactos
webPayment: Pago web
fileManagement: Gestión documental
unpaid: Impago
list: list:
phone: Teléfono phone: Teléfono
email: Email email: Email
@ -312,17 +416,6 @@ customer:
hasCoreVnl: Recibido core VNL hasCoreVnl: Recibido core VNL
hasSepaVnl: Recibido B2B VNL hasSepaVnl: Recibido B2B VNL
entry: entry:
pageTitles:
entries: Entradas
list: Listado
summary: Resumen
basicData: Datos básicos
buys: Compras
notes: Notas
dms: Gestión documental
log: Historial
entryCreate: Nueva entrada
latestBuys: Últimas compras
list: list:
newEntry: Nueva entrada newEntry: Nueva entrada
landed: F. entrega landed: F. entrega
@ -331,6 +424,18 @@ entry:
booked: Asentado booked: Asentado
confirmed: Confirmado confirmed: Confirmado
ordered: Pedida ordered: Pedida
tableVisibleColumns:
id: Id
reference: Referencia
created: Creación
supplierFk: Proveedor
isBooked: Asentado
isConfirmed: Confirmado
isOrdered: Pedida
companyFk: Empresa
travelFk: Envio
isExcludedFromAvailable: Inventario
isRaid: Redada
summary: summary:
commission: Comisión commission: Comisión
currency: Moneda currency: Moneda
@ -406,34 +511,37 @@ entry:
landed: F. entrega landed: F. entrega
warehouseOut: Alm. salida warehouseOut: Alm. salida
latestBuys: latestBuys:
picture: Foto tableVisibleColumns:
itemFk: ID Artículo image: Foto
packing: Packing itemFk: Id Artículo
grouping: Grouping packing: packing
quantity: Cantidad grouping: Grouping
size: Medida quantity: Cantidad
tags: Etiquetas size: Medida
type: Tipo tags: Etiquetas
intrastat: Intrastat type: Tipo
origin: Origen intrastat: Intrastat
weightByPiece: Peso (gramos)/tallo origin: Origen
isActive: Activo weightByPiece: Peso (gramos)/tallo
family: Familia isActive: Activo
entryFk: Entrada family: Familia
buyingValue: Coste entryFk: Entrada
freightValue: Porte buyingValue: Coste
comissionValue: Comisión freightValue: Porte
description: Descripción comissionValue: Comisión
packageValue: Embalaje description: Descripción
isIgnored: Ignorado packageValue: Embalaje
price2: Grouping isIgnored: Ignorado
price3: Packing price2: Grouping
minPrice: Min price3: Packing
ektFk: Ekt minPrice: Min
weight: Peso ektFk: Ekt
packagingFk: Embalaje weight: Peso
packingOut: Embalaje envíos packagingFk: Embalaje
landing: Llegada packingOut: Embalaje envíos
landing: Llegada
isExcludedFromAvailable: Es inventario
isRaid: Redada
ticket: ticket:
pageTitles: pageTitles:
tickets: Tickets tickets: Tickets
@ -445,14 +553,20 @@ ticket:
sms: Sms sms: Sms
notes: Notas notes: Notas
sale: Lineas del pedido sale: Lineas del pedido
dms: Gestión documental
volume: Volumen volume: Volumen
observation: Notas observation: Notas
ticketAdvance: Adelantar tickets ticketAdvance: Adelantar tickets
futureTickets: Tickets a futuro futureTickets: Tickets a futuro
expedition: Expedición
purchaseRequest: Petición de compra purchaseRequest: Petición de compra
weeklyTickets: Tickets programados weeklyTickets: Tickets programados
saleTracking: Líneas preparadas
services: Servicios services: Servicios
tracking: Estados tracking: Estados
components: Componentes
pictures: Fotos
packages: Bultos
list: list:
nickname: Alias nickname: Alias
state: Estado state: Estado
@ -526,90 +640,7 @@ ticket:
landed: F. entrega landed: F. entrega
warehouse: Almacén warehouse: Almacén
agency: Agencia agency: Agencia
claim:
pageTitles:
claims: Reclamaciones
list: Listado
claimCreate: Crear reclamación
summary: Resumen
basicData: Datos básicos
lines: Líneas
development: Trazabilidad
photos: Fotos
log: Historial
notes: Notas
action: Acción
list:
customer: Cliente
assignedTo: Asignada a
created: Creada
state: Estado
rmaList:
code: Código
records: registros
card:
claimId: ID reclamación
attendedBy: Atendida por
created: Creada
state: Estado
ticketId: ID ticket
customerSummary: Resumen del cliente
claimedTicket: Ticket reclamado
saleTracking: Líneas preparadas
ticketTracking: Estados del ticket
commercial: Comercial
province: Provincia
zone: Zona
customerId: ID del cliente
summary:
customer: Cliente
assignedTo: Asignada a
attendedBy: Atendida por
created: Creada
state: Estado
details: Detalles
item: Artículo
landed: Entregado
quantity: Cantidad
claimed: Reclamado
price: Precio
discount: Descuento
total: Total
actions: Acciones
responsibility: Responsabilidad
company: Empresa
person: Comercial/Cliente
notes: Observaciones
photos: Fotos
development: Trazabilidad
reason: Motivo
result: Consecuencias
responsible: Responsable
worker: Trabajador
redelivery: Devolución
changeState: Cambiar estado
basicData:
customer: Cliente
assignedTo: Asignada a
created: Creada
state: Estado
pickup: Recogida
null: No
agency: Agencia
delivery: Reparto
photo:
fileDescription: 'Reclamacion ID {claimId} del cliente {clientName} id {clientId}'
noData: No hay imágenes/videos haz click aquí o arrastra y suelta el archivo
dragDrop: Arrástralo y sueltalo aquí
invoiceOut: invoiceOut:
pageTitles:
invoiceOuts: Fact. emitidas
list: Listado
negativeBases: Bases Negativas
globalInvoicing: Facturación global
invoiceOutCreate: Crear fact. emitida
summary: Resumen
basicData: Datos básicos
list: list:
ref: Referencia ref: Referencia
issued: Fecha emisión issued: Fecha emisión
@ -677,15 +708,6 @@ invoiceOut:
errors: errors:
downloadCsvFailed: Error al descargar CSV downloadCsvFailed: Error al descargar CSV
order: order:
pageTitles:
order: Cesta
orderList: Listado
orderCreate: Nueva orden
summary: Resumen
basicData: Datos básicos
catalog: Catálogo
volume: Volumen
lines: Líneas
field: field:
salesPersonFk: Comercial salesPersonFk: Comercial
clientFk: Cliente clientFk: Cliente
@ -727,13 +749,6 @@ order:
price: Precio price: Precio
amount: Monto amount: Monto
shelving: shelving:
pageTitles:
shelving: Carros
shelvingList: Listado de carros
shelvingCreate: Nuevo carro
summary: Resumen
basicData: Datos básicos
log: Historial
list: list:
parking: Parking parking: Parking
priority: Prioridad priority: Prioridad
@ -759,17 +774,6 @@ parking:
info: Puedes buscar por código de parking info: Puedes buscar por código de parking
label: Buscar parking... label: Buscar parking...
invoiceIn: invoiceIn:
pageTitles:
invoiceIns: Fact. recibidas
list: Listado
invoiceInCreate: Crear fact. recibida
summary: Resumen
basicData: Datos básicos
vat: IVA
dueDay: Vencimiento
intrastat: Intrastat
corrective: Rectificativa
log: Historial
list: list:
ref: Referencia ref: Referencia
supplier: Proveedor supplier: Proveedor
@ -852,7 +856,6 @@ worker:
timeControl: Control de horario timeControl: Control de horario
locker: Taquilla locker: Taquilla
balance: Balance balance: Balance
formation: Formación
list: list:
name: Nombre name: Nombre
email: Email email: Email
@ -932,15 +935,6 @@ worker:
credit: Haber credit: Haber
concept: Concepto concept: Concepto
wagon: wagon:
pageTitles:
wagons: Vagones
wagonsList: Listado vagones
wagonCreate: Crear tipo
wagonEdit: Editar tipo
typesList: Listado tipos
typeCreate: Crear tipo
typeEdit: Editar tipo
wagonCounter: Contador de carros
type: type:
name: Nombre name: Nombre
submit: Guardar submit: Guardar
@ -969,36 +963,12 @@ wagon:
minHeightBetweenTrays: 'La distancia mínima entre bandejas es ' minHeightBetweenTrays: 'La distancia mínima entre bandejas es '
maxWagonHeight: 'La altura máxima del vagón es ' maxWagonHeight: 'La altura máxima del vagón es '
uncompleteTrays: Hay bandejas sin completar uncompleteTrays: Hay bandejas sin completar
route/roadmap:
pageTitles:
roadmap: Troncales
summary: Resumen
basicData: Datos básicos
stops: Paradas
roadmap:
pageTitles:
roadmap: Troncales
summary: Resumen
basicData: Datos básicos
stops: Paradas
route: route:
pageTitles:
routes: Rutas
cmrsList: Listado de CMRs
RouteList: Listado
routeCreate: Nueva ruta
basicData: Datos básicos
summary: Resumen
RouteRoadmap: Troncales
RouteRoadmapCreate: Crear troncal
tickets: Tickets
log: Historial
autonomous: Autónomos
cmr: cmr:
list: list:
results: resultados results: resultados
cmrFk: Id CMR cmrFk: Id CMR
hasCmrDms: Adjuntado en gestdoc hasCmrDms: Gestdoc
'true': Sí 'true': Sí
'false': 'No' 'false': 'No'
ticketFk: Id ticket ticketFk: Id ticket
@ -1021,28 +991,20 @@ route:
volume: Volumen volume: Volumen
finished: Finalizada finished: Finalizada
supplier: supplier:
pageTitles:
suppliers: Proveedores
supplier: Proveedor
list: Listado
supplierCreate: Nuevo proveedor
summary: Resumen
basicData: Datos básicos
fiscalData: Datos fiscales
billingData: Forma de pago
log: Historial
accounts: Cuentas
contacts: Contactos
addresses: Direcciones
consumption: Consumo
agencyTerm: Acuerdo agencia
dms: Gestión documental
list: list:
payMethod: Método de pago payMethod: Método de pago
payDeadline: Plazo de pago payDeadline: Plazo de pago
payDay: Día de pago payDay: Día de pago
account: Cuenta account: Cuenta
newSupplier: Nuevo proveedor newSupplier: Nuevo proveedor
tableVisibleColumns:
id: Id
name: Nombre
nif: NIF/CIF
nickname: Alias
account: Cuenta
payMethod: Método de pago
payDay: Dia de pago
summary: summary:
responsible: Responsable responsible: Responsable
notes: Notas notes: Notas
@ -1128,16 +1090,16 @@ supplier:
date: Fecha date: Fecha
reference: Referencia reference: Referencia
travel: travel:
pageTitles: travelList:
travel: Envíos tableVisibleColumns:
list: Listado id: Id
create: Crear ref: Referencia
summary: Resumen agency: Agencia
extraCommunity: Extra comunitarios shipped: Enviado
travelCreate: Nuevo envío landed: Llegada
basicData: Datos básicos warehouseIn: Almacén de salida
history: Historial warehouseOut: Almacén de entrada
thermographs: Termógrafos totalEntries: Total de entradas
summary: summary:
confirmed: Confirmado confirmed: Confirmado
entryId: Id entrada entryId: Id entrada
@ -1184,24 +1146,6 @@ travel:
travelFileDescription: 'Id envío { travelId }' travelFileDescription: 'Id envío { travelId }'
file: Fichero file: Fichero
item: item:
pageTitles:
items: Artículos
list: Listado
diary: Histórico
tags: Etiquetas
fixedPrice: Precios fijados
buyRequest: Peticiones de compra
wasteBreakdown: Deglose de mermas
itemCreate: Nuevo artículo
basicData: 'Datos básicos'
tax: 'IVA'
botanical: 'Botánico'
barcode: 'Código de barras'
log: Historial
shelving: Carros
itemTypeCreate: Nueva familia
family: Familia
lastEntries: Últimas entradas
descriptor: descriptor:
item: Artículo item: Artículo
buyer: Comprador buyer: Comprador
@ -1287,27 +1231,6 @@ item:
achieved: 'Conseguido' achieved: 'Conseguido'
concept: 'Concepto' concept: 'Concepto'
state: 'Estado' state: 'Estado'
item/itemType:
pageTitles:
itemType: Familia
basicData: Datos básicos
summary: Resumen
zone:
pageTitles:
zones: Zonas
list: Zonas
deliveryList: Días de entrega
upcomingList: Próximos repartos
role:
pageTitles:
zones: Zonas
list: Zonas
deliveryList: Días de entrega
upcomingList: Próximos repartos
monitor:
pageTitles:
monitors: Monitores
list: Listado
components: components:
topbar: {} topbar: {}
itemsFilterPanel: itemsFilterPanel:

14
src/pages/Account/Card/AccountDescriptor.vue
View File

@ -49,20 +49,6 @@ const hasAccount = ref(false);
:title="data.title" :title="data.title"
:subtitle="data.subtitle" :subtitle="data.subtitle"
> >
<template #header-extra-action>
<QBtn
round
flat
size="md"
color="white"
icon="face"
:to="{ name: 'AccountList' }"
>
<QTooltip>
{{ t('Go to module index') }}
</QTooltip>
</QBtn>
</template>
<template #menu> <template #menu>
<AccountDescriptorMenu :has-account="hasAccount" /> <AccountDescriptorMenu :has-account="hasAccount" />
</template> </template>

72
src/pages/Agency/AgencyList.vue
View File

@ -1,72 +0,0 @@
<script setup>
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
function navigate(id) {
router.push({ path: `/agency/${id}` });
}
function exprBuilder(param, value) {
if (!value) return;
if (param !== 'search') return;
if (!isNaN(value)) return { id: value };
return { name: { like: `%${value}%` } };
}
</script>
<template>
<VnSearchbar
:info="t('You can search by name')"
:label="t('Search agency')"
data-key="AgencyList"
url="Agencies"
/>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="AgencyList"
url="Agencies"
order="name"
:expr-builder="exprBuilder"
>
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.name"
@click="navigate(row.id)"
v-for="row of rows"
>
<template #list-items>
<QCheckbox
:label="t('isOwn')"
v-model="row.isOwn"
:disable="true"
/>
<QCheckbox
:label="t('isAnyVolumeAllowed')"
v-model="row.isAnyVolumeAllowed"
:disable="true"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
</template>
<i18n>
es:
isOwn: Tiene propietario
isAnyVolumeAllowed: Permite cualquier volumen
Search agency: Buscar agencia
You can search by name: Puedes buscar por nombre
en:
isOwn: Has owner
isAnyVolumeAllowed: Allows any volume
</i18n>

8
src/pages/Claim/Card/ClaimAction.vue
View File

@ -33,8 +33,8 @@ const DEFAULT_MAX_RESPONSABILITY = 5;
const DEFAULT_MIN_RESPONSABILITY = 1; const DEFAULT_MIN_RESPONSABILITY = 1;
const arrayData = useArrayData('claimData'); const arrayData = useArrayData('claimData');
const marker_labels = [ const marker_labels = [
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') }, { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') }, { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },
]; ];
const multiplicatorValue = ref(); const multiplicatorValue = ref();
const loading = ref(false); const loading = ref(false);
@ -209,12 +209,12 @@ async function post(query, params) {
<QItem class="justify-between"> <QItem class="justify-between">
<QItemLabel class="slider-container"> <QItemLabel class="slider-container">
<p class="text-primary"> <p class="text-primary">
{{ t('claim.summary.actions') }} {{ t('claim.actions') }}
</p> </p>
<QSlider <QSlider
class="responsibility { 'background-color:primary': quasar.platform.is.mobile }" class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
v-model="claim.responsibility" v-model="claim.responsibility"
:label-value="t('claim.summary.responsibility')" :label-value="t('claim.responsibility')"
@change="(value) => save({ responsibility: value })" @change="(value) => save({ responsibility: value })"
label-always label-always
color="primary" color="primary"

17
src/pages/Claim/Card/ClaimBasicData.vue
View File

@ -30,7 +30,7 @@ function setClaimStates(data) {
} }
async function getEnumValues() { async function getEnumValues() {
optionsList.value = [{ id: null, description: t('claim.basicData.null') }]; optionsList.value = [{ id: null, description: t('claim.null') }];
const { data } = await axios.get(`Applications/get-enum-values`, { const { data } = await axios.get(`Applications/get-enum-values`, {
params: { params: {
schema: 'vn', schema: 'vn',
@ -39,7 +39,7 @@ async function getEnumValues() {
}, },
}); });
for (let value of data) for (let value of data)
optionsList.value.push({ id: value, description: t(`claim.basicData.${value}`) }); optionsList.value.push({ id: value, description: t(`claim.${value}`) });
} }
getEnumValues(); getEnumValues();
@ -77,17 +77,14 @@ const statesFilter = {
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
v-model="data.client.name" v-model="data.client.name"
:label="t('claim.basicData.customer')" :label="t('claim.customer')"
disable disable
/> />
<VnInputDate <VnInputDate v-model="data.created" :label="t('claim.created')" />
v-model="data.created"
:label="t('claim.basicData.created')"
/>
</VnRow> </VnRow>
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
:label="t('claim.basicData.assignedTo')" :label="t('claim.assignedTo')"
v-model="data.workerFk" v-model="data.workerFk"
:options="workersOptions" :options="workersOptions"
option-value="id" option-value="id"
@ -114,7 +111,7 @@ const statesFilter = {
option-value="id" option-value="id"
option-label="description" option-label="description"
emit-value emit-value
:label="t('claim.basicData.state')" :label="t('claim.state')"
map-options map-options
use-input use-input
@filter="(value, update) => filter(value, update, statesFilter)" @filter="(value, update) => filter(value, update, statesFilter)"
@ -136,7 +133,7 @@ const statesFilter = {
option-value="id" option-value="id"
option-label="description" option-label="description"
emit-value emit-value
:label="t('claim.basicData.pickup')" :label="t('claim.pickup')"
map-options map-options
use-input use-input
:input-debounce="0" :input-debounce="0"

32
src/pages/Claim/Card/ClaimDescriptor.vue
View File

@ -2,7 +2,7 @@
import { ref, computed, onMounted } from 'vue'; import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toDate, toPercentage } from 'src/filters'; import { toDateHourMinSec, toPercentage } from 'src/filters';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue'; import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
@ -42,7 +42,7 @@ function stateColor(code) {
const data = ref(useCardDescription()); const data = ref(useCardDescription());
const setData = (entity) => { const setData = (entity) => {
if (!entity) return; if (!entity) return;
data.value = useCardDescription(entity.client.name, entity.id); data.value = useCardDescription(entity?.client?.name, entity.id);
state.set('ClaimDescriptor', entity); state.set('ClaimDescriptor', entity);
}; };
onMounted(async () => { onMounted(async () => {
@ -52,12 +52,10 @@ onMounted(async () => {
<template> <template>
<CardDescriptor <CardDescriptor
ref="descriptor"
:url="`Claims/${entityId}`" :url="`Claims/${entityId}`"
:filter="filter" :filter="filter"
module="Claim" module="Claim"
:title="data.title" title="client.name"
:subtitle="data.subtitle"
@on-fetch="setData" @on-fetch="setData"
data-key="Claim" data-key="Claim"
> >
@ -65,7 +63,7 @@ onMounted(async () => {
<ClaimDescriptorMenu :claim="entity" /> <ClaimDescriptorMenu :claim="entity" />
</template> </template>
<template #body="{ entity }"> <template #body="{ entity }">
<VnLv v-if="entity.claimState" :label="t('claim.card.state')"> <VnLv v-if="entity.claimState" :label="t('claim.state')">
<template #value> <template #value>
<QBadge <QBadge
:color="stateColor(entity.claimState.code)" :color="stateColor(entity.claimState.code)"
@ -76,8 +74,8 @@ onMounted(async () => {
</QBadge> </QBadge>
</template> </template>
</VnLv> </VnLv>
<VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" /> <VnLv :label="t('claim.created')" :value="toDateHourMinSec(entity.created)" />
<VnLv :label="t('claim.card.commercial')"> <VnLv :label="t('claim.commercial')">
<template #value> <template #value>
<VnUserLink <VnUserLink
:name="entity.client?.salesPersonUser?.name" :name="entity.client?.salesPersonUser?.name"
@ -87,17 +85,17 @@ onMounted(async () => {
</VnLv> </VnLv>
<VnLv <VnLv
v-if="entity.worker" v-if="entity.worker"
:label="t('claim.card.attendedBy')" :label="t('claim.attendedBy')"
:value="entity.worker.user.name" :value="entity.worker.user.name"
> >
<template #value> <template #value>
<VnUserLink <VnUserLink
:name="entity.worker.user.nickname" :name="entity.worker.user.name"
:worker-id="entity.worker.id" :worker-id="entity.worker.id"
/> />
</template> </template>
</VnLv> </VnLv>
<VnLv :label="t('claim.card.zone')"> <VnLv :label="t('claim.zone')">
<template #value> <template #value>
<span class="link"> <span class="link">
{{ entity.ticket?.zone?.name }} {{ entity.ticket?.zone?.name }}
@ -106,10 +104,10 @@ onMounted(async () => {
</template> </template>
</VnLv> </VnLv>
<VnLv <VnLv
:label="t('claim.card.province')" :label="t('claim.province')"
:value="entity.ticket?.address?.province?.name" :value="entity.ticket?.address?.province?.name"
/> />
<VnLv :label="t('claim.card.ticketId')"> <VnLv :label="t('claim.ticketId')">
<template #value> <template #value>
<span class="link"> <span class="link">
{{ entity.ticketFk }} {{ entity.ticketFk }}
@ -131,7 +129,7 @@ onMounted(async () => {
color="primary" color="primary"
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }" :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
> >
<QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip> <QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn
size="md" size="md"
@ -139,7 +137,7 @@ onMounted(async () => {
color="primary" color="primary"
:to="{ name: 'TicketCard', params: { id: entity.ticketFk } }" :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
> >
<QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip> <QTooltip>{{ t('claim.claimedTicket') }}</QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn
size="md" size="md"
@ -147,7 +145,7 @@ onMounted(async () => {
color="primary" color="primary"
:href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'" :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
> >
<QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip> <QTooltip>{{ t('claim.saleTracking') }}</QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn
size="md" size="md"
@ -155,7 +153,7 @@ onMounted(async () => {
color="primary" color="primary"
:href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'" :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
> >
<QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip> <QTooltip>{{ t('claim.ticketTracking') }}</QTooltip>
</QBtn> </QBtn>
</QCardActions> </QCardActions>
</template> </template>

2
src/pages/Claim/Card/ClaimNotes.vue
View File

@ -9,7 +9,7 @@ const state = useState();
const user = state.getUser(); const user = state.getUser();
const $props = defineProps({ const $props = defineProps({
id: { type: Number, default: null }, id: { type: [Number, String], default: null },
addNote: { type: Boolean, default: true }, addNote: { type: Boolean, default: true },
}); });
const claimId = computed(() => $props.id || route.params.id); const claimId = computed(() => $props.id || route.params.id);

8
src/pages/Claim/Card/ClaimPhoto.vue
View File

@ -18,7 +18,7 @@ const claimId = computed(() => router.currentRoute.value.params.id);
const claimDms = ref([ const claimDms = ref([
{ {
dmsFk: 1, dmsFk: claimId,
}, },
]); ]);
const client = ref({}); const client = ref({});
@ -113,7 +113,7 @@ async function create() {
warehouseId: config.value.warehouseFk, warehouseId: config.value.warehouseFk,
companyId: config.value.companyFk, companyId: config.value.companyFk,
dmsTypeId: dmsType.value.id, dmsTypeId: dmsType.value.id,
description: t('claim.photo.fileDescription', { description: t('claim.fileDescription', {
claimId: claimId.value, claimId: claimId.value,
clientName: client.value.name, clientName: client.value.name,
clientId: client.value.id, clientId: client.value.id,
@ -177,7 +177,7 @@ function onDrag() {
> >
<QIcon size="xl" name="file_download" /> <QIcon size="xl" name="file_download" />
<h5> <h5>
{{ t('claim.photo.dragDrop') }} {{ t('claim.dragDrop') }}
</h5> </h5>
</div> </div>
<div <div
@ -188,7 +188,7 @@ function onDrag() {
<QIcon size="xl" name="image"></QIcon> <QIcon size="xl" name="image"></QIcon>
<QIcon size="xl" name="movie"></QIcon> <QIcon size="xl" name="movie"></QIcon>
<h5> <h5>
{{ t('claim.photo.noData') }} {{ t('claim.noData') }}
</h5> </h5>
</div> </div>
<div class="multimediaParent bg-transparent" v-if="claimDms?.length && !dragFile"> <div class="multimediaParent bg-transparent" v-if="claimDms?.length && !dragFile">

211
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -1,20 +1,25 @@
<script setup> <script setup>
import axios from 'axios';
import { onMounted, ref, computed } from 'vue'; import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { toDate, toCurrency } from 'src/filters'; import { toDate, toCurrency } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue'; import dashIfEmpty from 'src/filters/dashIfEmpty';
import FetchData from 'components/FetchData.vue';
import { getUrl } from 'src/composables/getUrl'; import { getUrl } from 'src/composables/getUrl';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnTitle from 'src/components/common/VnTitle.vue'; import VnTitle from 'src/components/common/VnTitle.vue';
import FetchData from 'components/FetchData.vue';
import CardSummary from 'components/ui/CardSummary.vue';
import ClaimSummaryAction from 'src/pages/Claim/Card/ClaimSummaryAction.vue';
import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import axios from 'axios'; import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import dashIfEmpty from 'src/filters/dashIfEmpty';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -34,6 +39,9 @@ const ClaimStates = ref([]);
const claimUrl = ref(); const claimUrl = ref();
const salixUrl = ref(); const salixUrl = ref();
const claimDmsRef = ref(); const claimDmsRef = ref();
const claimDms = ref([]);
const multimediaDialog = ref();
const multimediaSlide = ref();
const claimDmsFilter = ref({ const claimDmsFilter = ref({
include: [ include: [
{ {
@ -42,34 +50,29 @@ const claimDmsFilter = ref({
], ],
}); });
onMounted(async () => {
salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
const detailsColumns = ref([ const detailsColumns = ref([
{ {
name: 'item', name: 'item',
label: 'claim.summary.item', label: 'claim.item',
field: (row) => row.sale.itemFk, field: (row) => row.sale.itemFk,
sortable: true, sortable: true,
}, },
{ {
name: 'landed', name: 'landed',
label: 'claim.summary.landed', label: 'claim.landed',
field: (row) => row.sale.ticket.landed, field: (row) => row.sale.ticket.landed,
format: (value) => toDate(value), format: (value) => toDate(value),
sortable: true, sortable: true,
}, },
{ {
name: 'quantity', name: 'quantity',
label: 'claim.summary.quantity', label: 'claim.quantity',
field: (row) => row.sale.quantity, field: (row) => row.sale.quantity,
sortable: true, sortable: true,
}, },
{ {
name: 'claimed', name: 'claimed',
label: 'claim.summary.claimed', label: 'claim.claimed',
field: (row) => row.quantity, field: (row) => row.quantity,
sortable: true, sortable: true,
}, },
@ -80,32 +83,38 @@ const detailsColumns = ref([
}, },
{ {
name: 'price', name: 'price',
label: 'claim.summary.price', label: 'claim.price',
field: (row) => row.sale.price, field: (row) => row.sale.price,
sortable: true, sortable: true,
}, },
{ {
name: 'discount', name: 'discount',
label: 'claim.summary.discount', label: 'claim.discount',
field: (row) => row.sale.discount, field: (row) => row.sale.discount,
format: (value) => `${value} %`, format: (value) => `${value} %`,
sortable: true, sortable: true,
}, },
{ {
name: 'total', name: 'total',
label: 'claim.summary.total', label: 'claim.total',
field: ({ sale }) => field: ({ sale }) =>
toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)), toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
sortable: true, sortable: true,
}, },
]); ]);
const markerLabels = [
{ value: 1, label: t('claim.company') },
{ value: 5, label: t('claim.person') },
];
const STATE_COLOR = { const STATE_COLOR = {
pending: 'warning', pending: 'warning',
incomplete: 'info', incomplete: 'info',
resolved: 'positive', resolved: 'positive',
canceled: 'negative', canceled: 'negative',
}; };
function stateColor(code) { function stateColor(code) {
return STATE_COLOR[code]; return STATE_COLOR[code];
} }
@ -113,38 +122,40 @@ function stateColor(code) {
const developmentColumns = ref([ const developmentColumns = ref([
{ {
name: 'claimReason', name: 'claimReason',
label: 'claim.summary.reason', label: 'claim.reason',
field: (row) => row.claimReason.description, field: (row) => row.claimReason.description,
sortable: true, sortable: true,
}, },
{ {
name: 'claimResult', name: 'claimResult',
label: 'claim.summary.result', label: 'claim.result',
field: (row) => row.claimResult.description, field: (row) => row.claimResult.description,
sortable: true, sortable: true,
}, },
{ {
name: 'claimResponsible', name: 'claimResponsible',
label: 'claim.summary.responsible', label: 'claim.responsible',
field: (row) => row.claimResponsible.description, field: (row) => row.claimResponsible.description,
sortable: true, sortable: true,
}, },
{ {
name: 'worker', name: 'worker',
label: 'claim.summary.worker', label: 'claim.worker',
field: (row) => row.worker?.user.nickname, field: (row) => row.worker?.user.nickname,
sortable: true, sortable: true,
}, },
{ {
name: 'claimRedelivery', name: 'claimRedelivery',
label: 'claim.summary.redelivery', label: 'claim.redelivery',
field: (row) => row.claimRedelivery.description, field: (row) => row.claimRedelivery.description,
sortable: true, sortable: true,
}, },
]); ]);
const claimDms = ref([]);
const multimediaDialog = ref(); onMounted(async () => {
const multimediaSlide = ref(); salixUrl.value = await getUrl('');
claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
});
async function getClaimDms() { async function getClaimDms() {
claimDmsFilter.value.where = { claimFk: entityId.value }; claimDmsFilter.value.where = { claimFk: entityId.value };
@ -200,7 +211,7 @@ async function changeState(value) {
> >
<QList> <QList>
<QVirtualScroll <QVirtualScroll
style="max-height: 300px" class="max-container-height"
:items="ClaimStates" :items="ClaimStates"
separator separator
v-slot="{ item, index }" v-slot="{ item, index }"
@ -221,16 +232,13 @@ async function changeState(value) {
</QBtnDropdown> </QBtnDropdown>
</template> </template>
<template #body="{ entity: { claim, salesClaimed, developments } }"> <template #body="{ entity: { claim, salesClaimed, developments } }">
<QCard class="vn-one"> <QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
<VnTitle <VnTitle
:url="`#/claim/${entityId}/basic-data`" :url="`#/claim/${entityId}/basic-data`"
:text="t('claim.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
<VnLv <VnLv :label="t('claim.created')" :value="toDate(claim.created)" />
:label="t('claim.summary.created')" <VnLv :label="t('claim.state')">
:value="toDate(claim.created)"
/>
<VnLv :label="t('claim.summary.state')">
<template #value> <template #value>
<QChip :color="stateColor(claim.claimState.code)" dense> <QChip :color="stateColor(claim.claimState.code)" dense>
{{ claim.claimState.description }} {{ claim.claimState.description }}
@ -245,7 +253,7 @@ async function changeState(value) {
/> />
</template> </template>
</VnLv> </VnLv>
<VnLv :label="t('claim.summary.attendedBy')"> <VnLv :label="t('claim.attendedBy')">
<template #value> <template #value>
<VnUserLink <VnUserLink
:name="claim.worker?.user?.nickname" :name="claim.worker?.user?.nickname"
@ -253,7 +261,7 @@ async function changeState(value) {
/> />
</template> </template>
</VnLv> </VnLv>
<VnLv :label="t('claim.summary.customer')"> <VnLv :label="t('claim.customer')">
<template #value> <template #value>
<span class="link cursor-pointer"> <span class="link cursor-pointer">
{{ claim.client?.name }} {{ claim.client?.name }}
@ -262,27 +270,63 @@ async function changeState(value) {
</template> </template>
</VnLv> </VnLv>
<VnLv <VnLv
:label="t('claim.basicData.pickup')" :label="t('claim.pickup')"
:value="`${dashIfEmpty(claim.pickup)}`" :value="`${dashIfEmpty(claim.pickup)}`"
/> />
</QCard> </QCard>
<QCard class="vn-three"> <QCard class="vn-two">
<VnTitle <VnTitle :url="`#/claim/${entityId}/notes`" :text="t('claim.notes')" />
:url="`#/claim/${entityId}/notes`"
:text="t('claim.summary.notes')"
/>
<ClaimNotes <ClaimNotes
:id="entityId" :id="entityId"
:add-note="false" :add-note="false"
style="max-height: 300px" class="max-container-height"
order="created ASC" order="created ASC"
/> />
</QCard> </QCard>
<QCard class="vn-two" v-if="salesClaimed.length > 0"> <QCard class="vn-two" v-if="claimDms?.length">
<VnTitle <VnTitle :url="`#/claim/${entityId}/photos`" :text="t('claim.photos')" />
:url="`#/claim/${entityId}/lines`" <div class="container max-container-height" style="overflow: auto">
:text="t('claim.summary.details')" <div
/> class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard
class="multimedia relative-position"
style="max-height: 128px"
>
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-max" v-if="salesClaimed.length > 0">
<VnTitle :url="`#/claim/${entityId}/lines`" :text="t('claim.details')" />
<QTable <QTable
:columns="detailsColumns" :columns="detailsColumns"
:rows="salesClaimed" :rows="salesClaimed"
@ -320,53 +364,8 @@ async function changeState(value) {
</template> </template>
</QTable> </QTable>
</QCard> </QCard>
<QCard class="vn-two" v-if="claimDms.length > 0"> <QCard class="vn-max" v-if="developments.length > 0">
<VnTitle <VnTitle :url="claimUrl + 'development'" :text="t('claim.development')" />
:url="`#/claim/${entityId}/photos`"
:text="t('claim.summary.photos')"
/>
<div class="container">
<div
class="multimedia-container"
v-for="(media, index) of claimDms"
:key="index"
>
<div class="relative-position">
<QIcon
name="play_circle"
color="primary"
size="xl"
class="absolute-center zindex"
v-if="media.isVideo"
@click.stop="openDialog(media.dmsFk)"
>
<QTooltip>Video</QTooltip>
</QIcon>
<QCard class="multimedia relative-position">
<QImg
:src="media.url"
class="rounded-borders cursor-pointer fit"
@click="openDialog(media.dmsFk)"
v-if="!media.isVideo"
>
</QImg>
<video
:src="media.url"
class="rounded-borders cursor-pointer fit"
muted="muted"
v-if="media.isVideo"
@click="openDialog(media.dmsFk)"
/>
</QCard>
</div>
</div>
</div>
</QCard>
<QCard class="vn-two" v-if="developments.length > 0">
<VnTitle
:url="claimUrl + 'development'"
:text="t('claim.summary.development')"
/>
<QTable <QTable
:columns="developmentColumns" :columns="developmentColumns"
:rows="developments" :rows="developments"
@ -382,27 +381,31 @@ async function changeState(value) {
</QTh> </QTh>
</QTr> </QTr>
</template> </template>
<template #body-cell-worker="props">
<QTd :props="props" class="link">
{{ props.value }}
<WorkerDescriptorProxy :id="props.row.worker.id" />
</QTd>
</template>
</QTable> </QTable>
</QCard> </QCard>
<QCard class="vn-max"> <QCard class="vn-max">
<VnTitle :url="claimUrl + 'action'" :text="t('claim.summary.actions')" /> <VnTitle :url="claimUrl + 'action'" :text="t('claim.actions')" />
<div id="slider-container" class="q-px-xl q-py-md"> <div id="slider-container" class="q-px-xl q-py-md">
<QSlider <QSlider
v-model="claim.responsibility" v-model="claim.responsibility"
label label
:label-value="t('claim.summary.responsibility')" :label-value="t('claim.responsibility')"
label-always label-always
color="var()" color="var()"
markers markers
:marker-labels="[ :marker-labels="markerLabels"
{ value: 1, label: t('claim.summary.company') },
{ value: 5, label: t('claim.summary.person') },
]"
:min="1" :min="1"
:max="5" :max="5"
readonly readonly
/> />
</div> </div>
<ClaimSummaryAction :id="entityId" />
</QCard> </QCard>
<QDialog <QDialog
v-model="multimediaDialog" v-model="multimediaDialog"
@ -458,7 +461,7 @@ async function changeState(value) {
gap: 15px; gap: 15px;
} }
.multimedia-container { .multimedia-container {
flex: 1 0 21%; flex: 0 0 128px;
} }
.multimedia { .multimedia {
transition: all 0.5s; transition: all 0.5s;
@ -491,4 +494,8 @@ async function changeState(value) {
.change-state { .change-state {
width: 10%; width: 10%;
} }
.max-container-height {
max-height: 300px;
}
</style> </style>

97
src/pages/Claim/Card/ClaimSummaryAction.vue Normal file
View File

@ -0,0 +1,97 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { toDate, toPercentage } from 'filters/index';
import VnTable from 'src/components/VnTable/VnTable.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
const { t } = useI18n();
const $props = defineProps({
id: {
type: [Number, String],
required: true,
},
});
const columns = [
{
name: 'itemFk',
label: t('Id item'),
columnFilter: false,
align: 'left',
},
{
name: 'ticketFk',
label: t('Ticket'),
columnFilter: false,
align: 'left',
},
{
name: 'claimDestinationFk',
label: t('Destination'),
columnFilter: false,
align: 'left',
},
{
name: 'landed',
label: t('Landed'),
format: (row) => toDate(row.landed),
align: 'left',
},
{
name: 'quantity',
label: t('Quantity'),
align: 'left',
},
{
name: 'concept',
label: t('Description'),
align: 'left',
},
{
name: 'price',
label: t('Price'),
align: 'left',
},
{
name: 'discount',
label: t('Discount'),
format: ({ discount }) => toPercentage(discount / 100),
align: 'left',
},
{
name: 'total',
label: t('Total'),
align: 'left',
},
];
</script>
<template>
<VnTable
data-key="ClaimEndsTable"
url="ClaimEnds/filter"
:right-search="false"
:column-search="false"
:disable-option="{ card: true, table: true }"
search-url="actions"
:filter="{ where: { claimFk: $props.id } }"
:columns="columns"
:limit="0"
:without-header="true"
auto-load
>
<template #column-itemFk="{ row }">
<span class="link">
{{ row.itemFk }}
<ItemDescriptorProxy :id="row.itemFk" />
</span>
</template>
<template #column-ticketFk="{ row }">
<span class="link">
{{ row.ticketFk }}
<TicketDescriptorProxy :id="row.ticketFk" />
</span>
</template>
</VnTable>
</template>

279
src/pages/Claim/ClaimFilter.vue
View File

@ -16,19 +16,14 @@ const props = defineProps({
}, },
}); });
const workers = ref(); const states = ref([]);
const states = ref();
defineExpose({ states });
</script> </script>
<template> <template>
<FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load /> <FetchData url="ClaimStates" @on-fetch="(data) => (states = data)" auto-load />
<FetchData <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
url="Workers/activeWithInheritedRole"
:filter="{ where: { role: 'salesPerson' } }"
@on-fetch="(data) => (workers = data)"
auto-load
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<template #tags="{ tag, formatFn }"> <template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs"> <div class="q-gutter-x-xs">
<strong>{{ t(`params.${tag.label}`) }}: </strong> <strong>{{ t(`params.${tag.label}`) }}: </strong>
@ -36,156 +31,110 @@ const states = ref();
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params, searchFn }">
<QItem class="q-my-sm"> <div class="q-pa-sm q-gutter-y-sm">
<QItemSection> <VnInput
<VnInput :label="t('claim.customerId')"
:label="t('Customer ID')" v-model="params.clientFk"
v-model="params.clientFk" lazy-rules
lazy-rules is-outlined
is-outlined >
> <template #prepend> <QIcon name="badge" size="xs" /></template>
<template #prepend> </VnInput>
<QIcon name="badge" size="xs"></QIcon> </template <VnInput
></VnInput> :label="t('Client Name')"
</QItemSection> v-model="params.clientName"
</QItem> lazy-rules
<QItem class="q-mb-sm"> is-outlined
<QItemSection> />
<VnInput <VnSelect
:label="t('Client Name')" :label="t('Salesperson')"
v-model="params.clientName" v-model="params.salesPersonFk"
lazy-rules @update:model-value="searchFn()"
is-outlined url="Workers/activeWithInheritedRole"
/> :filter="{ where: { role: 'salesPerson' } }"
</QItemSection> :use-like="false"
</QItem> option-value="id"
<QItem class="q-mb-sm"> option-label="name"
<QItemSection v-if="!workers"> option-filter="firstName"
<QSkeleton type="QInput" class="full-width" /> dense
</QItemSection> outlined
<QItemSection v-if="workers"> rounded
<VnSelect />
:label="t('Salesperson')" <VnSelect
v-model="params.salesPersonFk" :label="t('claim.attendedBy')"
@update:model-value="searchFn()" v-model="params.attenderFk"
:options="workers" @update:model-value="searchFn()"
option-value="id" url="Workers/activeWithInheritedRole"
option-label="name" :filter="{ where: { role: 'salesPerson' } }"
emit-value :use-like="false"
map-options option-value="id"
use-input option-label="name"
hide-selected option-filter="firstName"
dense dense
outlined outlined
rounded rounded
:input-debounce="0" />
/> <VnSelect
</QItemSection> :label="t('claim.state')"
</QItem> v-model="params.claimStateFk"
<QItem class="q-mb-sm"> @update:model-value="searchFn()"
<QItemSection v-if="!workers"> :options="states"
<QSkeleton type="QInput" class="full-width" /> option-value="id"
</QItemSection> option-label="description"
<QItemSection v-if="workers"> dense
<VnSelect outlined
:label="t('Attender')" rounded
v-model="params.attenderFk" />
@update:model-value="searchFn()" <VnInputDate
:options="workers" v-model="params.created"
option-value="id" @update:model-value="searchFn()"
option-label="name" :label="t('claim.created')"
emit-value outlined
map-options rounded
use-input dense
hide-selected />
dense <VnSelect
outlined :label="t('Item')"
rounded v-model="params.itemFk"
:input-debounce="0" @update:model-value="searchFn()"
/> url="Items/withName"
</QItemSection> option-value="id"
</QItem> option-label="name"
<QItem class="q-mb-sm"> sort-by="id DESC"
<QItemSection v-if="!workers"> outlined
<QSkeleton type="QInput" class="full-width" /> rounded
</QItemSection> dense
<QItemSection v-if="workers"> >
<VnSelect <template #option="scope">
:label="t('Responsible')" <QItem v-bind="scope.itemProps">
v-model="params.claimResponsibleFk" <QItemSection>
@update:model-value="searchFn()" <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
:options="workers" <QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
option-value="id" </QItemSection>
option-label="name" </QItem>
emit-value </template>
map-options </VnSelect>
use-input <VnSelect
hide-selected :label="t('claim.responsible')"
dense v-model="params.claimResponsibleFk"
outlined @update:model-value="searchFn()"
rounded url="Workers/activeWithInheritedRole"
:input-debounce="0" :filter="{ where: { role: 'salesPerson' } }"
/> :use-like="false"
</QItemSection> option-value="id"
</QItem> option-label="name"
<QItem class="q-mb-sm"> option-filter="firstName"
<QItemSection v-if="!states"> dense
<QSkeleton type="QInput" class="full-width" /> outlined
</QItemSection> rounded
<QItemSection v-if="states"> />
<VnSelect <QCheckbox
:label="t('State')" v-model="params.myTeam"
v-model="params.claimStateFk" :label="t('params.myTeam')"
@update:model-value="searchFn()" @update:model-value="searchFn()"
:options="states" toggle-indeterminate
option-value="id" />
option-label="description" </div>
emit-value
map-options
hide-selected
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QSeparator />
<QExpansionItem :label="t('More options')" expand-separator>
<!-- <QItem>
<QItemSection>
<qSelect
:label="t('Item')"
v-model="params.itemFk"
:options="items"
:loading="loading"
@filter="filterFn"
@virtual-scroll="onScroll"
option-value="id"
option-label="name"
emit-value
map-options
/>
</QItemSection>
</QItem> -->
<QItem>
<QItemSection>
<VnInputDate
v-model="params.created"
:label="t('Created')"
is-outlined
/>
</QItemSection>
</QItem>
</QExpansionItem>
</template> </template>
</VnFilterPanel> </VnFilterPanel>
</template> </template>
@ -201,7 +150,8 @@ en:
claimResponsibleFk: Responsible claimResponsibleFk: Responsible
claimStateFk: State claimStateFk: State
created: Created created: Created
myTeam: My team myTeam: My team
itemFk: Item
es: es:
params: params:
search: Contiene search: Contiene
@ -212,14 +162,9 @@ es:
claimResponsibleFk: Responsable claimResponsibleFk: Responsable
claimStateFk: Estado claimStateFk: Estado
created: Creada created: Creada
Customer ID: ID cliente myTeam: Mi equipo
itemFk: Artículo
Client Name: Nombre del cliente Client Name: Nombre del cliente
Salesperson: Comercial Salesperson: Comercial
Attender: Asistente
Responsible: Responsable
State: Estado
Item: Artículo Item: Artículo
Created: Creada
More options: Más opciones
myTeam: Mi equipo
</i18n> </i18n>

214
src/pages/Claim/ClaimList.vue
View File

@ -1,38 +1,114 @@
<script setup> <script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { toDate } from 'filters/index'; import { toDate } from 'filters/index';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue'; import VnSearchbar from 'components/ui/VnSearchbar.vue';
import ClaimFilter from './ClaimFilter.vue'; import ClaimFilter from './ClaimFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue'; import VnUserLink from 'src/components/ui/VnUserLink.vue';
import ClaimSummary from './Card/ClaimSummary.vue'; import ClaimSummary from './Card/ClaimSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue'; import RightMenu from 'src/components/common/RightMenu.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const claimFilterRef = ref();
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'clientName',
isTitle: true,
visible: false,
},
{
align: 'left',
label: t('claim.customer'),
name: 'clientFk',
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
},
class: 'expand',
},
{
align: 'left',
label: t('claim.attendedBy'),
name: 'attendedBy',
cardVisible: true,
columnFilter: {
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
useLike: false,
optionValue: 'id',
optionLabel: 'name',
optionFilter: 'firstName',
},
},
},
{
align: 'left',
label: t('claim.created'),
name: 'created',
format: ({ created }) => toDate(created),
cardVisible: true,
columnFilter: {
component: 'date',
},
},
{
align: 'left',
label: t('claim.state'),
name: 'stateCode',
chip: {
condition: () => true,
color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
},
columnFilter: {
name: 'claimStateFk',
component: 'select',
attrs: {
options: claimFilterRef.value?.states,
optionLabel: 'description',
},
},
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Client ticket list'),
icon: 'preview',
action: (row) => viewSummary(row.id, ClaimSummary),
},
],
},
]);
const STATE_COLOR = { const STATE_COLOR = {
pending: 'warning', pending: 'bg-warning',
managed: 'info', managed: 'bg-info',
resolved: 'positive', resolved: 'bg-positive',
}; };
function getApiUrl() {
return new URL(window.location).origin;
}
function stateColor(code) {
return STATE_COLOR[code];
}
function navigate(event, id) {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/claim/${id}/summary`);
router.push({ path: `/claim/${id}` });
}
</script> </script>
<template> <template>
@ -43,85 +119,39 @@ function navigate(event, id) {
/> />
<RightMenu> <RightMenu>
<template #right-panel> <template #right-panel>
<ClaimFilter data-key="ClaimList" /> <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
</template> </template>
</RightMenu> </RightMenu>
<QPage class="column items-center q-pa-md"> <VnTable
<div class="vn-card-list"> data-key="ClaimList"
<VnPaginate url="Claims/filter"
data-key="ClaimList" :order="['priority ASC', 'created DESC']"
url="Claims/filter" :columns="columns"
:order="['priority ASC', 'created DESC']" redirect="claim"
auto-load :right-search="false"
> auto-load
<template #body="{ rows }"> >
<CardList <template #column-clientFk="{ row }">
:id="row.id" <span class="link" @click.stop>
:key="row.id" {{ row.clientName }}
:title="row.clientName" <CustomerDescriptorProxy :id="row.clientFk" />
@click="navigate($event, row.id)" </span>
v-for="row of rows" </template>
> <template #column-attendedBy="{ row }">
<template #list-items> <span @click.stop>
<VnLv :label="t('claim.list.customer')"> <VnUserLink :name="row.workerName" :worker-id="row.workerFk" />
<template #value> </span>
<span class="link" @click.stop> </template>
{{ row.clientName }} </VnTable>
<CustomerDescriptorProxy :id="row.clientFk" />
</span>
</template>
</VnLv>
<VnLv :label="t('claim.list.assignedTo')">
<template #value>
<span @click.stop>
<VnUserLink
:name="row.workerName"
:worker-id="row.workerFk"
/>
</span>
</template>
</VnLv>
<VnLv
:label="t('claim.list.created')"
:value="toDate(row.created)"
/>
<VnLv :label="t('claim.list.state')">
<template #value>
<QBadge
text-color="black"
:color="stateColor(row.stateCode)"
dense
>
{{ row.stateDescription }}
</QBadge>
</template>
</VnLv>
</template>
<template #actions>
<QBtn
:label="t('globals.description')"
@click.stop
outline
style="margin-top: 15px"
>
<CustomerDescriptorProxy :id="row.clientFk" />
</QBtn>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, ClaimSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
</template> </template>
<i18n> <i18n>
es: es:
Search claim: Buscar reclamación Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
params:
stateCode: Estado
en:
params:
stateCode: State
</i18n> </i18n>

46
src/pages/Claim/locale/en.yml Normal file
View File

@ -0,0 +1,46 @@
claim:
customer: Customer
code: Code
records: records
claimId: Claim ID
attendedBy: Attended by
ticketId: Ticket ID
customerSummary: Customer summary
claimedTicket: Claimed ticket
saleTracking: Sale tracking
ticketTracking: Ticket tracking
commercial: Commercial
province: Province
zone: Zone
customerId: client ID
assignedTo: Assigned
created: Created
details: Details
item: Item
landed: Landed
quantity: Quantity
claimed: Claimed
price: Price
discount: Discount
total: Total
actions: Actions
responsibility: Responsibility
company: Company
person: Employee/Customer
notes: Notes
photos: Photos
development: Development
reason: Reason
result: Result
responsible: Responsible
worker: Worker
redelivery: Redelivery
changeState: Change state
state: State
pickup: Pick up
null: No
agency: Agency
delivery: Delivery
fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}'
noData: 'There are no images/videos, click here or drag and drop the file'
dragDrop: Drag and drop it here

46
src/pages/Claim/locale/es.yml
View File

@ -1,2 +1,48 @@
Search claim: Buscar reclamación Search claim: Buscar reclamación
You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
claim:
customer: Cliente
code: Código
records: Registros
claimId: ID de reclamación
attendedBy: Atendido por
ticketId: ID de ticket
customerSummary: Resumen del cliente
claimedTicket: Ticket reclamado
saleTracking: Seguimiento de ventas
ticketTracking: Seguimiento de tickets
commercial: Comercial
province: Provincia
zone: Zona
customerId: ID de cliente
assignedTo: Asignado a
created: Creado
details: Detalles
item: Artículo
landed: Llegado
quantity: Cantidad
claimed: Reclamado
price: Precio
discount: Descuento
total: Total
actions: Acciones
responsibility: Responsabilidad
company: Empresa
person: Empleado/Cliente
notes: Notas
photos: Fotos
development: Trazabilidad
reason: Razón
result: Resultado
responsible: Responsable
worker: Trabajador
redelivery: Reentrega
changeState: Cambiar estado
state: Estado
pickup: Recoger
null: No
agency: Agencia
delivery: Entrega
fileDescription: 'ID de reclamación {claimId} del cliente {clientName} con ID {clientId}'
noData: 'No hay imágenes/videos, haz clic aquí o arrastra y suelta el archivo'
dragDrop: Arrastra y suelta aquí

2
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -69,7 +69,7 @@ const filterOptions = {
<template #form="{ data, validate, filter }"> <template #form="{ data, validate, filter }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnInput <VnInput
:label="t('Comercial name')" :label="t('globals.name')"
:rules="validate('client.socialName')" :rules="validate('client.socialName')"
autofocus autofocus
clearable clearable

16
src/pages/Customer/Card/CustomerDescriptor.vue
View File

@ -32,7 +32,7 @@ const entityId = computed(() => {
}); });
const data = ref(useCardDescription()); const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id)); const setData = (entity) => (data.value = useCardDescription(entity?.name, entity?.id));
</script> </script>
<template> <template>
@ -45,20 +45,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
:summary="$props.summary" :summary="$props.summary"
data-key="customerData" data-key="customerData"
> >
<template #header-extra-action>
<QBtn
round
flat
size="sm"
icon="vn:Person"
color="white"
:to="{ name: 'CustomerList' }"
>
<QTooltip>
{{ t('Go to module index') }}
</QTooltip>
</QBtn>
</template>
<template #menu="{ entity }"> <template #menu="{ entity }">
<CustomerDescriptorMenu :customer="entity" /> <CustomerDescriptorMenu :customer="entity" />
</template> </template>

2
src/pages/Customer/Card/CustomerFiscalData.vue
View File

@ -147,6 +147,7 @@ function handleLocation(data, location) {
:label="t('Electronic invoice')" :label="t('Electronic invoice')"
v-model="data.hasElectronicInvoice" v-model="data.hasElectronicInvoice"
/> />
<QCheckbox :label="t('Daily invoice')" v-model="data.hasDailyInvoice" />
</VnRow> </VnRow>
</template> </template>
</FormModel> </FormModel>
@ -176,6 +177,7 @@ es:
onlyLetters: Sólo se pueden usar letras, números y espacios onlyLetters: Sólo se pueden usar letras, números y espacios
whenActivatingIt: Al activarlo, no informar el código del país en el campo nif whenActivatingIt: Al activarlo, no informar el código del país en el campo nif
inOrderToInvoice: Para facturar no se consulta este campo, sino el RE de consignatario. Al modificar este campo si no esta marcada la casilla Facturar por consignatario, se propagará automaticamente el cambio a todos lo consignatarios, en caso contrario preguntará al usuario si quiere o no propagar inOrderToInvoice: Para facturar no se consulta este campo, sino el RE de consignatario. Al modificar este campo si no esta marcada la casilla Facturar por consignatario, se propagará automaticamente el cambio a todos lo consignatarios, en caso contrario preguntará al usuario si quiere o no propagar
Daily invoice: Facturación diaria
en: en:
onlyLetters: Only letters, numbers and spaces can be used onlyLetters: Only letters, numbers and spaces can be used
whenActivatingIt: When activating it, do not enter the country code in the ID field whenActivatingIt: When activating it, do not enter the country code in the ID field

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

@ -13,7 +13,7 @@ const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const stateStore = computed(() => useStateStore()); const stateStore = computed(() => useStateStore());
const rows = ref([]); const rows = ref([]);
const totalAmount = ref(0); const totalAmount = ref();
const filter = { const filter = {
include: [ include: [
@ -75,7 +75,7 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
field: (value) => value.user.name, field: (value) => value?.user?.name,
label: t('Created by'), label: t('Created by'),
name: 'createdBy', name: 'createdBy',
}, },
@ -87,7 +87,7 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
field: (value) => value.greugeType.name, field: (value) => value?.greugeType?.name,
label: t('Type'), label: t('Type'),
name: 'type', name: 'type',
}, },
@ -108,26 +108,9 @@ const setRows = (data) => {
<template> <template>
<FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" /> <FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" />
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
icon="menu"
>
<QTooltip bottom anchor="bottom right">
{{ t('globals.collapseMenu') }}
</QTooltip>
</QBtn>
</div>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
<QCard class="full-width q-pa-sm"> <QCard class="full-width q-pa-sm">
<h6 class="flex justify-end q-my-lg q-pr-lg" v-if="totalAmount"> <h6 class="flex justify-end q-my-lg q-pr-lg" v-if="totalAmount !== undefined">
<span class="color-vn-label q-mr-md">{{ t('Total') }}:</span> <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
{{ toCurrency(totalAmount) }} {{ toCurrency(totalAmount) }}
</h6> </h6>

2
src/pages/Customer/Card/CustomerSummary.vue
View File

@ -73,7 +73,7 @@ const creditWarning = computed(() => {
:text="t('customer.summary.basicData')" :text="t('customer.summary.basicData')"
/> />
<VnLv :label="t('customer.summary.customerId')" :value="entity.id" /> <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
<VnLv :label="t('customer.summary.name')" :value="entity.name" /> <VnLv :label="t('globals.name')" :value="entity.name" />
<VnLv :label="t('customer.summary.contact')" :value="entity.contact" /> <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
<VnLv :value="entity.phone"> <VnLv :value="entity.phone">
<template #label> <template #label>

20
src/pages/Customer/CustomerList.vue
View File

@ -38,10 +38,13 @@ const columns = computed(() => [
}, },
{ {
align: 'left', align: 'left',
label: t('customer.extendedList.tableVisibleColumns.name'), label: t('globals.name'),
name: 'name', name: 'name',
isTitle: true, isTitle: true,
create: true, create: true,
columnField: {
class: 'expand',
},
}, },
{ {
align: 'left', align: 'left',
@ -49,6 +52,9 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.socialName'), label: t('customer.extendedList.tableVisibleColumns.socialName'),
isTitle: true, isTitle: true,
create: true, create: true,
columnField: {
class: 'expand',
},
}, },
{ {
align: 'left', align: 'left',
@ -65,6 +71,8 @@ const columns = computed(() => [
url: 'Workers/activeWithInheritedRole', url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'], fields: ['id', 'name'],
where: { role: 'salesPerson' }, where: { role: 'salesPerson' },
optionFilter: 'firstName',
useLike: false,
}, },
create: true, create: true,
columnField: { columnField: {
@ -76,8 +84,8 @@ const columns = computed(() => [
align: 'left', align: 'left',
label: t('customer.extendedList.tableVisibleColumns.credit'), label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit', name: 'credit',
component: 'number',
columnFilter: { columnFilter: {
component: 'number',
inWhere: true, inWhere: true,
}, },
}, },
@ -85,8 +93,8 @@ const columns = computed(() => [
align: 'left', align: 'left',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'), label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance', name: 'creditInsurance',
component: 'number',
columnFilter: { columnFilter: {
component: 'number',
inWhere: true, inWhere: true,
}, },
}, },
@ -128,6 +136,9 @@ const columns = computed(() => [
columnFilter: { columnFilter: {
inWhere: true, inWhere: true,
}, },
columnField: {
class: 'expand',
},
}, },
{ {
align: 'left', align: 'left',
@ -177,8 +188,8 @@ const columns = computed(() => [
label: t('customer.extendedList.tableVisibleColumns.created'), label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created', name: 'created',
format: ({ created }) => toDate(created), format: ({ created }) => toDate(created),
component: 'date',
columnFilter: { columnFilter: {
component: 'date',
alias: 'c', alias: 'c',
inWhere: true, inWhere: true,
}, },
@ -403,7 +414,6 @@ function handleLocation(data, location) {
}" }"
order="id DESC" order="id DESC"
:columns="columns" :columns="columns"
default-mode="table"
redirect="customer" redirect="customer"
auto-load auto-load
> >

14
src/pages/Entry/Card/EntryDescriptor.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, computed, watch } from 'vue'; import { ref, computed, watch, onMounted } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
import { usePrintService } from 'composables/usePrintService'; import { usePrintService } from 'composables/usePrintService';
import { getUrl } from 'src/composables/getUrl';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -17,10 +18,6 @@ const $props = defineProps({
required: false, required: false,
default: null, default: null,
}, },
summary: {
type: Object,
default: null,
},
}); });
const route = useRoute(); const route = useRoute();
@ -28,6 +25,7 @@ const { t } = useI18n();
const { openReport } = usePrintService(); const { openReport } = usePrintService();
const state = useState(); const state = useState();
const entryDescriptorRef = ref(null); const entryDescriptorRef = ref(null);
const url = ref();
const entryFilter = { const entryFilter = {
include: [ include: [
@ -69,10 +67,13 @@ const entryFilter = {
const entityId = computed(() => { const entityId = computed(() => {
return $props.id || route.params.id; return $props.id || route.params.id;
}); });
onMounted(async () => {
url.value = await getUrl('');
});
const data = ref(useCardDescription()); const data = ref(useCardDescription());
const setData = (entity) => const setData = (entity) =>
(data.value = useCardDescription(entity.supplier.nickname, entity.id)); (data.value = useCardDescription(entity.supplier?.nickname, entity.id));
const currentEntry = computed(() => state.get('entry')); const currentEntry = computed(() => state.get('entry'));
@ -114,6 +115,7 @@ watch;
:subtitle="data.subtitle" :subtitle="data.subtitle"
@on-fetch="setData" @on-fetch="setData"
data-key="entry" data-key="entry"
:summary="$attrs"
> >
<template #menu="{ entity }"> <template #menu="{ entity }">
<QItem v-ripple clickable @click="showEntryReport(entity)"> <QItem v-ripple clickable @click="showEntryReport(entity)">

3
src/pages/Entry/Card/EntryDescriptorProxy.vue
View File

@ -1,5 +1,6 @@
<script setup> <script setup>
import EntryDescriptor from './EntryDescriptor.vue'; import EntryDescriptor from './EntryDescriptor.vue';
import EntrySummary from './EntrySummary.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -11,6 +12,6 @@ const $props = defineProps({
<template> <template>
<QPopupProxy> <QPopupProxy>
<EntryDescriptor v-if="$props.id" :id="$props.id" /> <EntryDescriptor v-if="$props.id" :id="$props.id" :summary="EntrySummary" />
</QPopupProxy> </QPopupProxy>
</template> </template>

744
src/pages/Entry/EntryLatestBuys.vue
View File

@ -1,759 +1,199 @@
<script setup> <script setup>
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useStateStore } from 'stores/useStateStore';
import { toDate, toCurrency } from 'src/filters';
// import { useSession } from 'composables/useSession';
import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue'; import RightMenu from 'src/components/common/RightMenu.vue';
import VnImg from 'src/components/ui/VnImg.vue'; import VnTable from 'components/VnTable/VnTable.vue';
import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
const router = useRouter(); import { useStateStore } from 'stores/useStateStore';
// const { getTokenMultimedia } = useSession();
// const token = getTokenMultimedia();
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
import { toDate } from 'src/filters';
import VnImg from 'src/components/ui/VnImg.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const rowsFetchDataRef = ref(null); const columns = [
const itemTypesOptions = ref([]);
const originsOptions = ref([]);
const itemFamiliesOptions = ref([]);
const intrastatOptions = ref([]);
const packagingsOptions = ref([]);
const editTableCellDialogRef = ref(null);
const visibleColumns = ref([]);
const allColumnNames = ref([]);
const exprBuilder = (param, value) => {
switch (param) {
case 'id':
case 'size':
case 'weightByPiece':
case 'isActive':
case 'family':
case 'minPrice':
case 'packingOut':
return { [`i.${param}`]: value };
case 'name':
case 'description':
return { [`i.${param}`]: { like: `%${value}%` } };
case 'code':
return { 'it.code': value };
case 'intrastat':
return { 'intr.description': value };
case 'origin':
return { 'ori.code': value };
case 'landing':
return { [`lb.${param}`]: value };
case 'packing':
case 'grouping':
case 'quantity':
case 'entryFk':
case 'buyingValue':
case 'freightValue':
case 'comissionValue':
case 'packageValue':
case 'isIgnored':
case 'price2':
case 'price3':
case 'ektFk':
case 'weight':
case 'packagingFk':
return { [`b.${param}`]: value };
}
};
const params = reactive({});
const arrayData = useArrayData('EntryLatestBuys', {
url: 'Buys/latestBuysFilter',
order: ['itemFk DESC'],
exprBuilder: exprBuilder,
});
const store = arrayData.store;
const rows = computed(() => store.data);
const rowsSelected = ref([]);
const getInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const columns = computed(() => [
{ {
label: t('entry.latestBuys.picture'), align: 'center',
name: 'picture', label: t('entry.latestBuys.tableVisibleColumns.image'),
align: 'left', name: 'image',
columnField: {
component: VnImg,
attrs: (id) => {
return {
id,
width: '50px',
};
},
},
columnFilter: false,
}, },
{ {
label: t('entry.latestBuys.itemFk'), align: 'left',
label: t('entry.latestBuys.tableVisibleColumns.itemFk'),
name: 'itemFk', name: 'itemFk',
field: 'itemFk', isTitle: true,
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.packing'), align: 'left',
field: 'packing', label: t('entry.latestBuys.tableVisibleColumns.packing'),
name: 'packing', name: 'packing',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.grouping'), align: 'left',
field: 'grouping', label: t('entry.latestBuys.tableVisibleColumns.grouping'),
name: 'grouping', name: 'grouping',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.quantity'), align: 'left',
field: 'quantity', label: t('entry.latestBuys.tableVisibleColumns.quantity'),
name: 'quantity', name: 'quantity',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.description'), align: 'left',
field: 'description', label: t('entry.latestBuys.tableVisibleColumns.description'),
name: 'description', name: 'description',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.size'), align: 'left',
field: 'size', label: t('entry.latestBuys.tableVisibleColumns.size'),
name: 'size', name: 'size',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.tags'), align: 'left',
label: t('entry.latestBuys.tableVisibleColumns.tags'),
name: 'tags', name: 'tags',
align: 'left',
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.type'), align: 'left',
field: 'code', label: t('entry.latestBuys.tableVisibleColumns.type'),
name: 'type', name: 'type',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemTypesOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.intrastat'), align: 'left',
field: 'intrastat', label: t('entry.latestBuys.tableVisibleColumns.intrastat'),
name: 'intrastat', name: 'intrastat',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: intrastatOptions.value,
'option-value': 'description',
'option-label': 'description',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.origin'), align: 'left',
field: 'origin', label: t('entry.latestBuys.tableVisibleColumns.origin'),
name: 'origin', name: 'origin',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: originsOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.weightByPiece'), align: 'left',
field: 'weightByPiece', label: t('entry.latestBuys.tableVisibleColumns.weightByPiece'),
name: 'weightByPiece', name: 'weightByPiece',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.isActive'), align: 'left',
field: 'isActive', label: t('entry.latestBuys.tableVisibleColumns.isActive'),
name: 'isActive', name: 'isActive',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.family'), align: 'left',
field: 'family', label: t('entry.latestBuys.tableVisibleColumns.family'),
name: 'family', name: 'family',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemFamiliesOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.entryFk'), align: 'left',
field: 'entryFk', label: t('entry.latestBuys.tableVisibleColumns.entryFk'),
name: 'entryFk', name: 'entryFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.buyingValue'), align: 'left',
field: 'buyingValue', label: t('entry.latestBuys.tableVisibleColumns.buyingValue'),
name: 'buyingValue', name: 'buyingValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.freightValue'), align: 'left',
field: 'freightValue', label: t('entry.latestBuys.tableVisibleColumns.freightValue'),
name: 'freightValue', name: 'freightValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.comissionValue'), align: 'left',
field: 'comissionValue', label: t('entry.latestBuys.tableVisibleColumns.comissionValue'),
name: 'comissionValue', name: 'comissionValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.packageValue'), align: 'left',
field: 'packageValue', label: t('entry.latestBuys.tableVisibleColumns.packageValue'),
name: 'packageValue', name: 'packageValue',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.isIgnored'), align: 'left',
field: 'isIgnored', label: t('entry.latestBuys.tableVisibleColumns.isIgnored'),
name: 'isIgnored', name: 'isIgnored',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.price2'), align: 'left',
field: 'price2', label: t('entry.latestBuys.tableVisibleColumns.price2'),
name: 'price2', name: 'price2',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.price3'), align: 'left',
field: 'price3', label: t('entry.latestBuys.tableVisibleColumns.price3'),
name: 'price3', name: 'price3',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.minPrice'), align: 'left',
field: 'minPrice', label: t('entry.latestBuys.tableVisibleColumns.minPrice'),
name: 'minPrice', name: 'minPrice',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
}, },
{ {
label: t('entry.latestBuys.ektFk'), align: 'left',
field: 'ektFk', label: t('entry.latestBuys.tableVisibleColumns.ektFk'),
name: 'ektFk', name: 'ektFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.weight'), align: 'left',
field: 'weight', label: t('entry.latestBuys.tableVisibleColumns.weight'),
name: 'weight', name: 'weight',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.packagingFk'), align: 'left',
field: 'packagingFk', label: t('entry.latestBuys.tableVisibleColumns.packagingFk'),
name: 'packagingFk', name: 'packagingFk',
align: 'left',
sortable: true,
columnFilter: {
component: VnSelect,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: packagingsOptions.value,
'option-value': 'id',
'option-label': 'id',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.packingOut'), align: 'left',
field: 'packingOut', label: t('entry.latestBuys.tableVisibleColumns.packingOut'),
name: 'packingOut', name: 'packingOut',
align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
}, },
{ {
label: t('entry.latestBuys.landing'),
field: 'landing',
name: 'landing',
align: 'left', align: 'left',
sortable: true, label: t('entry.latestBuys.tableVisibleColumns.landing'),
columnFilter: { name: 'landing',
component: VnInput, component: 'date',
type: 'text', columnField: {
filterValue: null, component: null,
event: getInputEvents,
attrs: {
dense: true,
},
}, },
format: (val) => toDate(val), format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landing)),
}, },
]);
const editTableCellFormFieldsOptions = [
{ field: 'packing', label: t('entry.latestBuys.packing') },
{ field: 'grouping', label: t('entry.latestBuys.grouping') },
{ field: 'packageValue', label: t('entry.latestBuys.packageValue') },
{ field: 'weight', label: t('entry.latestBuys.weight') },
{ field: 'description', label: t('globals.description') },
{ field: 'size', label: t('entry.latestBuys.size') },
{ field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
{ field: 'packingOut', label: t('entry.latestBuys.packingOut') },
{ field: 'landing', label: t('entry.latestBuys.landing') },
]; ];
const openEditTableCellDialog = () => {
editTableCellDialogRef.value.show();
};
const onEditCellDataSaved = async () => {
rowsSelected.value = [];
await rowsFetchDataRef.value.fetch();
};
const redirectToEntryBuys = (entryFk) => {
router.push({ name: 'EntryBuys', params: { id: entryFk } });
};
const applyColumnFilter = async (col) => {
try {
params[col.field] = col.columnFilter.filterValue;
await arrayData.addFilter({ params });
} catch (err) {
console.error('Error applying column filter', err);
}
};
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
allColumnNames.value = filteredColumns.map((col) => col.name);
await arrayData.fetch({ append: false });
}); });
onUnmounted(() => (stateStore.rightDrawer = false)); onUnmounted(() => (stateStore.rightDrawer = false));
</script> </script>
<template> <template>
<FetchData
url="ItemTypes"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (itemTypesOptions = data)"
/>
<FetchData
url="Origins"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (originsOptions = data)"
/>
<FetchData
url="ItemFamilies"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (itemFamiliesOptions = data)"
/>
<FetchData
url="Packagings"
:filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (packagingsOptions = data)"
/>
<FetchData
url="Intrastats"
:filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (intrastatOptions = data)"
/>
<VnSubToolbar>
<template #st-data>
<TableVisibleColumns
:all-columns="allColumnNames"
table-code="latestBuys"
labels-traductions-path="entry.latestBuys"
@on-config-saved="visibleColumns = ['picture', ...$event]"
/>
</template>
</VnSubToolbar>
<RightMenu> <RightMenu>
<template #right-panel> <template #right-panel>
<EntryLatestBuysFilter data-key="EntryLatestBuys" /> <EntryLatestBuysFilter data-key="LatestBuys" />
</template> </template>
</RightMenu> </RightMenu>
<Teleport to="#actions-append"> <VnSubToolbar />
<div class="row q-gutter-x-sm"> <VnTable
<QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu"> ref="tableRef"
<QTooltip bottom anchor="bottom right"> data-key="LatestBuys"
{{ t('globals.collapseMenu') }} url="Buys/latestBuysFilter"
</QTooltip> order="id DESC"
</QBtn> :columns="columns"
</div> redirect="entry"
</Teleport> auto-load
<QPage class="column items-center q-pa-md"> :right-search="false"
<QTable />
:rows="rows"
:columns="columns"
selection="multiple"
row-key="id"
class="full-width q-mt-md"
:visible-columns="visibleColumns"
v-model:selected="rowsSelected"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
>
<template #top-row="{ cols }">
<QTr>
<QTd />
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<component
:is="col.columnFilter.component"
v-if="col.name !== 'picture'"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-picture="{ row }">
<QTd>
<VnImg :id="row.itemFk" size="50x50" class="image" />
</QTd>
</template>
<template #body-cell-itemFk="{ row }">
<QTd @click.stop>
<QBtn flat color="primary">
{{ row.itemFk }}
</QBtn>
<ItemDescriptorProxy :id="row.itemFk" />
</QTd>
</template>
<template #body-cell-tags="{ row }">
<QTd>
<FetchedTags :item="row" :max-length="6" />
</QTd>
</template>
<template #body-cell-entryFk="{ row }">
<QTd @click.stop>
<QBtn flat color="primary">
<EntryDescriptorProxy :id="row.entryFk" />
{{ row.entryFk }}
</QBtn>
</QTd>
</template>
<template #body-cell-isIgnored="{ row }">
<QTd>
<QIcon
:name="row.isIgnored ? `check` : `close`"
:color="row.isIgnored ? `positive` : `negative`"
size="sm"
/>
</QTd>
</template>
<template #body-cell-isActive="{ row }">
<QTd>
<QIcon
:name="row.isActive ? `check` : `close`"
:color="row.isActive ? `positive` : `negative`"
size="sm"
/>
</QTd>
</template>
</QTable>
<QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
<QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
<QTooltip>
{{ t('Edit buy(s)') }}
</QTooltip>
</QPageSticky>
<QDialog ref="editTableCellDialogRef">
<EditTableCellValueForm
edit-url="Buys/editLatestBuys"
:rows="rowsSelected"
:fields-options="editTableCellFormFieldsOptions"
@on-data-saved="onEditCellDataSaved()"
/>
</QDialog>
</QPage>
</template> </template>
<i18n> <i18n>

269
src/pages/Entry/EntryList.vue
View File

@ -1,31 +1,174 @@
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import EntrySummary from './Card/EntrySummary.vue';
import EntryFilter from './EntryFilter.vue'; import EntryFilter from './EntryFilter.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters/index'; import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue'; import RightMenu from 'src/components/common/RightMenu.vue';
import { toDate } from 'src/filters';
const stateStore = useStateStore(); const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const tableRef = ref();
function navigate(id) { const entryFilter = {
router.push({ path: `/entry/${id}` }); include: [
} {
relation: 'suppliers',
const redirectToCreateView = () => { scope: {
router.push({ name: 'EntryCreate' }); fields: ['id', 'name'],
},
},
{
relation: 'travels',
scope: {
fields: ['id', 'ref'],
},
},
{
relation: 'companies',
scope: {
fields: ['id', 'code'],
},
},
],
}; };
const columns = computed(() => [
{
align: 'left',
label: t('entry.list.tableVisibleColumns.id'),
name: 'id',
isTitle: true,
cardVisible: true,
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.reference'),
name: 'reference',
isTitle: true,
component: 'input',
columnField: {
component: null,
},
create: true,
cardVisible: true,
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.created'),
name: 'created',
create: true,
cardVisible: true,
component: 'date',
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.created)),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.supplierFk'),
name: 'supplierFk',
create: true,
cardVisible: true,
component: 'select',
attrs: {
url: 'suppliers',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isBooked'),
name: 'isBooked',
cardVisible: true,
create: true,
component: 'checkbox',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isConfirmed'),
name: 'isConfirmed',
cardVisible: true,
create: true,
component: 'checkbox',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isOrdered'),
name: 'isOrdered',
cardVisible: true,
create: true,
component: 'checkbox',
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.companyFk'),
name: 'companyFk',
component: 'select',
attrs: {
url: 'companies',
fields: ['id', 'code'],
optionLabel: 'code',
optionValue: 'id',
},
columnField: {
component: null,
},
create: true,
format: (row, dashIfEmpty) => dashIfEmpty(row.companyCode),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.travelFk'),
name: 'travelFk',
component: 'select',
attrs: {
url: 'travels',
fields: ['id', 'ref'],
optionLabel: 'ref',
optionValue: 'id',
},
columnField: {
component: null,
},
create: true,
format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
name: 'isExcludedFromAvailable',
chip: {
color: null,
condition: (value) => value,
icon: 'vn:inventory',
},
columnFilter: {
inWhere: true,
},
},
{
align: 'left',
label: t('entry.list.tableVisibleColumns.isRaid'),
name: 'isRaid',
chip: {
color: null,
condition: (value) => value,
icon: 'vn:net',
},
columnFilter: {
inWhere: true,
},
},
]);
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
}); });
@ -42,83 +185,23 @@ onMounted(async () => {
<EntryFilter data-key="EntryList" /> <EntryFilter data-key="EntryList" />
</template> </template>
</RightMenu> </RightMenu>
<QPage class="column items-center q-pa-md"> <VnTable
<div class="vn-card-list"> ref="tableRef"
<VnPaginate data-key="EntryList"
data-key="EntryList" url="Entries/filter"
url="Entries/filter" :filter="entryFilter"
:order="['landed DESC', 'id DESC']" :create="{
auto-load urlCreate: 'Entries',
> title: 'Create entry',
<template #body="{ rows }"> onDataSaved: ({ id }) => tableRef.redirect(id),
<CardList formInitialData: {},
v-for="row of rows" }"
:key="row.id" order="id DESC"
:title="row.reference" :columns="columns"
@click="navigate(row.id)" redirect="entry"
:id="row.id" auto-load
:has-info-icons="!!row.isExcludedFromAvailable || !!row.isRaid" :right-search="false"
> />
<template #info-icons>
<QIcon
v-if="row.isExcludedFromAvailable"
name="vn:inventory"
color="primary"
size="xs"
>
<QTooltip>{{ t('Inventory entry') }}</QTooltip>
</QIcon>
<QIcon
v-if="row.isRaid"
name="vn:net"
color="primary"
size="xs"
>
<QTooltip>{{ t('Virtual entry') }}</QTooltip>
</QIcon>
</template>
<template #list-items>
<VnLv :label="t('landed')" :value="toDate(row.landed)" />
<VnLv
:label="t('entry.list.booked')"
:value="!!row.isBooked"
/>
<VnLv
:label="t('entry.list.invoiceNumber')"
:value="row.invoiceNumber"
/>
<VnLv
:label="t('entry.list.confirmed')"
:value="!!row.isConfirmed"
/>
<VnLv
:label="t('entry.list.supplier')"
:value="row.supplierName"
/>
<VnLv
:label="t('entry.list.ordered')"
:value="!!row.isOrdered"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, EntrySummary)"
color="primary"
type="submit"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
</QPage>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
<QTooltip>
{{ t('entry.list.newEntry') }}
</QTooltip>
</QPageSticky>
</template> </template>
<i18n> <i18n>

9
src/pages/InvoiceIn/Card/InvoiceInDescriptorProxy.vue
View File

@ -1,5 +1,6 @@
<script setup> <script setup>
import InvoiceInDescriptor from "pages/InvoiceIn/Card/InvoiceInDescriptor.vue"; import InvoiceInDescriptor from 'pages/InvoiceIn/Card/InvoiceInDescriptor.vue';
import InvoiceInSummary from './InvoiceInSummary.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -10,6 +11,10 @@ const $props = defineProps({
</script> </script>
<template> <template>
<QPopupProxy> <QPopupProxy>
<InvoiceInDescriptor v-if="$props.id" :id="$props.id" /> <InvoiceInDescriptor
v-if="$props.id"
:id="$props.id"
:summary="InvoiceInSummary"
/>
</QPopupProxy> </QPopupProxy>
</template> </template>

8
src/pages/InvoiceIn/Card/InvoiceInSummary.vue
View File

@ -209,7 +209,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">
<VnTitle <VnTitle
:url="getLink('basic-data')" :url="getLink('basic-data')"
:text="t('invoiceIn.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
</QCardSection> </QCardSection>
<VnLv <VnLv
@ -240,7 +240,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">
<VnTitle <VnTitle
:url="getLink('basic-data')" :url="getLink('basic-data')"
:text="t('invoiceIn.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
</QCardSection> </QCardSection>
<VnLv <VnLv
@ -265,7 +265,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">
<VnTitle <VnTitle
:url="getLink('basic-data')" :url="getLink('basic-data')"
:text="t('invoiceIn.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
</QCardSection> </QCardSection>
<VnLv <VnLv
@ -289,7 +289,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">
<VnTitle <VnTitle
:url="getLink('basic-data')" :url="getLink('basic-data')"
:text="t('invoiceIn.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
</QCardSection> </QCardSection>
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">

4
src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
View File

@ -63,8 +63,8 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
@on-fetch="setData" @on-fetch="setData"
data-key="invoiceOutData" data-key="invoiceOutData"
> >
<template #menu="{ entity }"> <template #menu="{ entity, menuRef }">
<InvoiceOutDescriptorMenu :invoice-out-data="entity" /> <InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />
</template> </template>
<template #body="{ entity }"> <template #body="{ entity }">
<VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" /> <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />

32
src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref, onBeforeMount } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
@ -11,13 +11,20 @@ import useNotify from 'src/composables/useNotify';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import { usePrintService } from 'composables/usePrintService'; import { usePrintService } from 'composables/usePrintService';
import { useVnConfirm } from 'composables/useVnConfirm'; import { useVnConfirm } from 'composables/useVnConfirm';
import { getUrl } from 'src/composables/getUrl';
import axios from 'axios'; import axios from 'axios';
onBeforeMount(async () => (salixUrl.value = await getUrl('')));
const $props = defineProps({ const $props = defineProps({
invoiceOutData: { invoiceOutData: {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
menuRef: {
type: Object,
default: () => {},
},
}); });
const { notify } = useNotify(); const { notify } = useNotify();
@ -28,8 +35,7 @@ const { t } = useI18n();
const { openReport, sendEmail } = usePrintService(); const { openReport, sendEmail } = usePrintService();
const { openConfirmationModal } = useVnConfirm(); const { openConfirmationModal } = useVnConfirm();
const quasar = useQuasar(); const quasar = useQuasar();
const salixUrl = ref();
const transferInvoiceDialogRef = ref();
const invoiceFormType = ref('pdf'); const invoiceFormType = ref('pdf');
const defaultEmailAddress = ref($props.invoiceOutData.client?.email); const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
@ -115,6 +121,7 @@ const refundInvoice = async (withWarehouse) => {
try { try {
const params = { ref: $props.invoiceOutData.ref, withWarehouse: withWarehouse }; const params = { ref: $props.invoiceOutData.ref, withWarehouse: withWarehouse };
const { data } = await axios.post('InvoiceOuts/refund', params); const { data } = await axios.post('InvoiceOuts/refund', params);
location.href = window.origin + `/#/ticket/${data[0].id}/sale`;
notify( notify(
t('refundInvoiceSuccessMessage', { t('refundInvoiceSuccessMessage', {
refundTicket: data[0].id, refundTicket: data[0].id,
@ -125,11 +132,22 @@ const refundInvoice = async (withWarehouse) => {
console.error('Error generating invoice out pdf', err); console.error('Error generating invoice out pdf', err);
} }
}; };
const showTransferInvoiceForm = async () => {
quasar.dialog({
component: TransferInvoiceForm,
componentProps: {
invoiceOutData: $props.invoiceOutData,
},
});
};
</script> </script>
<template> <template>
<QItem v-ripple clickable @click="transferInvoiceDialogRef.show()"> <QItem v-ripple clickable>
<QItemSection>{{ t('Transfer invoice to...') }}</QItemSection> <QItemSection @click="showTransferInvoiceForm()">{{
t('Transfer invoice to...')
}}</QItemSection>
</QItem> </QItem>
<QItem v-ripple clickable> <QItem v-ripple clickable>
<QItemSection>{{ t('Show invoice...') }}</QItemSection> <QItemSection>{{ t('Show invoice...') }}</QItemSection>
@ -222,10 +240,6 @@ const refundInvoice = async (withWarehouse) => {
{{ t('Create a single ticket with all the content of the current invoice') }} {{ t('Create a single ticket with all the content of the current invoice') }}
</QTooltip> </QTooltip>
</QItem> </QItem>
<QDialog ref="transferInvoiceDialogRef">
<TransferInvoiceForm :invoice-out-data="invoiceOutData" />
</QDialog>
</template> </template>
<i18n> <i18n>

10
src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
View File

@ -3,7 +3,7 @@ import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios'; import axios from 'axios';
import { toCurrency, toDate } from 'src/filters'; import { toCurrency, toDate, toPercentage } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue'; import VnLv from 'src/components/ui/VnLv.vue';
import { getUrl } from 'src/composables/getUrl'; import { getUrl } from 'src/composables/getUrl';
@ -57,12 +57,14 @@ const taxColumns = ref([
name: 'quantity', name: 'quantity',
label: 'invoiceOut.summary.rate', label: 'invoiceOut.summary.rate',
field: (row) => row.rate, field: (row) => row.rate,
format: (value) => toPercentage(value / 100),
sortable: true, sortable: true,
}, },
{ {
name: 'invoiceOuted', name: 'invoiceOuted',
label: 'invoiceOut.summary.fee', label: 'invoiceOut.summary.fee',
field: (row) => row.vat, field: (row) => row.vat,
format: (value) => toCurrency(value),
sortable: true, sortable: true,
}, },
]); ]);
@ -113,7 +115,7 @@ const ticketsColumns = ref([
</template> </template>
<template #body="{ entity: { invoiceOut } }"> <template #body="{ entity: { invoiceOut } }">
<QCard class="vn-one"> <QCard class="vn-one">
<VnTitle :text="t('invoiceOut.pageTitles.basicData')" /> <VnTitle :text="t('globals.pageTitles.basicData')" />
<VnLv <VnLv
:label="t('invoiceOut.summary.issued')" :label="t('invoiceOut.summary.issued')"
:value="toDate(invoiceOut.issued)" :value="toDate(invoiceOut.issued)"
@ -164,7 +166,7 @@ const ticketsColumns = ref([
</template> </template>
<template #body-cell-item="{ value }"> <template #body-cell-item="{ value }">
<QTd> <QTd>
<QBtn flat color="primary"> <QBtn flat class="link">
{{ value }} {{ value }}
<TicketDescriptorProxy :id="value" /> <TicketDescriptorProxy :id="value" />
</QBtn> </QBtn>
@ -172,7 +174,7 @@ const ticketsColumns = ref([
</template> </template>
<template #body-cell-quantity="{ value, row }"> <template #body-cell-quantity="{ value, row }">
<QTd> <QTd>
<QBtn class="no-uppercase" flat color="primary" dense> <QBtn class="no-uppercase link" flat dense>
{{ value }} {{ value }}
<CustomerDescriptorProxy :id="row.id" /> <CustomerDescriptorProxy :id="row.id" />
</QBtn> </QBtn>

3
src/pages/InvoiceOut/InvoiceOutFilter.vue
View File

@ -41,7 +41,7 @@ function setWorkers(data) {
<span>{{ formatFn(tag.value) }}</span> <span>{{ formatFn(tag.value) }}</span>
</div> </div>
</template> </template>
<template #body="{ params, searchFn }"> <template #body="{ params }">
<QItem> <QItem>
<QItemSection> <QItemSection>
<VnInput <VnInput
@ -93,7 +93,6 @@ function setWorkers(data) {
<QItemSection> <QItemSection>
<QCheckbox <QCheckbox
:label="t('Has PDF')" :label="t('Has PDF')"
@update:model-value="searchFn()"
toggle-indeterminate toggle-indeterminate
v-model="params.hasPdf" v-model="params.hasPdf"
/> />

9
src/pages/InvoiceOut/InvoiceOutGlobal.vue
View File

@ -30,7 +30,7 @@ const selectedCustomerId = ref(null);
const tableColumnComponents = { const tableColumnComponents = {
clientId: { clientId: {
component: QBtn, component: QBtn,
props: { flat: true, color: 'blue' }, props: { flat: true, class: 'link' },
event: (prop) => selectCustomerId(prop.value), event: (prop) => selectCustomerId(prop.value),
}, },
clientName: { clientName: {
@ -52,7 +52,12 @@ const tableColumnComponents = {
}; };
const columns = computed(() => [ const columns = computed(() => [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' }, {
align: 'left',
name: 'clientId',
label: 'Id',
field: 'clientId',
},
{ {
label: t('invoiceOut.globalInvoices.table.client'), label: t('invoiceOut.globalInvoices.table.client'),
field: 'clientName', field: 'clientName',

2
src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
View File

@ -48,7 +48,7 @@ const getStatus = computed({
onMounted(async () => { onMounted(async () => {
await invoiceOutGlobalStore.init(); await invoiceOutGlobalStore.init();
formData.value = { ...formInitialData.value }; formData.value = formInitialData.value.invoiceDate;
}); });
</script> </script>

389
src/pages/InvoiceOut/InvoiceOutList.vue
View File

@ -1,96 +1,177 @@
<script setup> <script setup>
import { onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onUnmounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
import CreateManualInvoiceForm from 'src/components/CreateManualInvoiceForm.vue';
import InvoiceOutFilter from './InvoiceOutFilter.vue';
import { toDate, toCurrency } from 'src/filters/index';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useSession } from 'src/composables/useSession'; import { usePrintService } from 'composables/usePrintService';
import RightMenu from 'src/components/common/RightMenu.vue'; import VnTable from 'components/VnTable/VnTable.vue';
import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
import { toCurrency, toDate } from 'src/filters/index';
import { useStateStore } from 'stores/useStateStore';
import { QBtn } from 'quasar';
import { watchEffect } from 'vue';
const { t } = useI18n(); const { t } = useI18n();
const router = useRouter();
const stateStore = useStateStore(); const stateStore = useStateStore();
const session = useSession();
const tokenMultimedia = session.getTokenMultimedia();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const invoiceOutSerialsOptions = ref([]);
const ticketsOptions = ref([]);
const customerOptions = ref([]);
const selectedRows = ref([]);
const hasSelectedCards = computed(() => selectedRows.value.length > 0);
const MODEL = 'InvoiceOuts';
const { openReport } = usePrintService();
const manualInvoiceDialogRef = ref(null); const columns = computed(() => [
const selectedCards = ref(new Map()); {
align: 'left',
name: 'id',
label: t('invoiceOutList.tableVisibleColumns.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'ref',
label: t('invoiceOutList.tableVisibleColumns.ref'),
isTitle: true,
component: 'select',
attrs: {
url: MODEL,
optionLabel: 'ref',
optionValue: 'id',
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'Issued',
label: t('invoiceOutList.tableVisibleColumns.issued'),
component: 'date',
format: (row) => toDate(row.issued),
columnField: {
component: null,
},
},
{
align: 'left',
name: 'clientSocialName',
label: t('invoiceOutModule.customer'),
cardVisible: true,
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'companyCode',
label: t('invoiceOutModule.company'),
cardVisible: true,
component: 'select',
attrs: {
url: 'Companies',
optionLabel: 'code',
optionValue: 'id',
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'amount',
label: t('invoiceOutModule.amount'),
cardVisible: true,
format: (row) => toCurrency(row.amount),
},
{
align: 'left',
name: 'created',
label: t('invoiceOutList.tableVisibleColumns.created'),
component: 'date',
columnField: {
component: null,
},
format: (row) => toDate(row.created),
},
{
align: 'left',
name: 'dued',
label: t('invoiceOutList.tableVisibleColumns.dueDate'),
component: 'date',
columnField: {
component: null,
},
format: (row) => toDate(row.dued),
},
{
align: 'right',
name: 'tableActions',
actions: [
{
title: t('InvoiceOutSummary'),
icon: 'preview',
action: (row) => viewSummary(row.id, InvoiceOutSummary),
},
{
title: t('DownloadPdf'),
icon: 'vn:ticket',
isPrimary: true,
action: (row) => openPdf(row.id),
},
],
},
]);
onMounted(() => (stateStore.rightDrawer = true)); onMounted(() => (stateStore.rightDrawer = true));
onUnmounted(() => (stateStore.rightDrawer = false)); onUnmounted(() => (stateStore.rightDrawer = false));
function navigate(id) { function openPdf(id) {
router.push({ path: `/invoice-out/${id}` }); try {
openReport(`${MODEL}/${id}/download`);
} catch (err) {
console.error('Error opening PDF', err);
}
} }
const toggleIndividualCard = (cardData) => { function downloadPdf() {
if (selectedCards.value.has(cardData.id)) {
selectedCards.value.delete(cardData.id);
return;
}
selectedCards.value.set(cardData.id, cardData);
};
const toggleAllCards = (cardsData) => {
const allSelected = selectedCards.value.size === cardsData.length;
if (!allSelected) {
// Si no todas las tarjetas están seleccionadas, selecciónalas todas
cardsData.forEach((data) => {
if (!selectedCards.value.has(data.id)) {
selectedCards.value.set(data.id, data);
}
});
} else {
// Si todas las tarjetas están seleccionadas, deselecciónalas todas
selectedCards.value.clear();
}
};
const openPdf = () => {
try { try {
if (selectedCards.value.size === 0) return; if (selectedRows.value.size === 0) return;
const selectedCardsArray = Array.from(selectedCards.value.values()); const selectedCardsArray = Array.from(selectedRows.value.values());
if (selectedCards.value.size === 1) { if (selectedRows.value.size === 1) {
const [invoiceOut] = selectedCardsArray; const [invoiceOut] = selectedCardsArray;
const url = `api/InvoiceOuts/${invoiceOut.id}/download?access_token=${tokenMultimedia}`; openPdf(invoiceOut.id);
window.open(url, '_blank');
} else { } else {
const invoiceOutIdsArray = selectedCardsArray.map( const invoiceOutIdsArray = selectedCardsArray.map(
(invoiceOut) => invoiceOut.id (invoiceOut) => invoiceOut.id
); );
const invoiceOutIds = invoiceOutIdsArray.join(','); const invoiceOutIds = invoiceOutIdsArray.join(',');
const params = new URLSearchParams({ const params = {
access_token: tokenMultimedia,
ids: invoiceOutIds, ids: invoiceOutIds,
}); };
const url = `api/InvoiceOuts/downloadZip?${params}`; openReport(`${MODEL}/downloadZip`, params);
window.open(url, '_blank');
} }
} catch (err) { } catch (err) {
console.error('Error opening PDF'); console.error('Error opening PDF');
} }
}; }
const openCreateInvoiceModal = () => { watchEffect(selectedRows);
manualInvoiceDialogRef.value.show();
};
</script> </script>
<template> <template>
@ -99,115 +180,83 @@ const openCreateInvoiceModal = () => {
:label="t('searchInvoice')" :label="t('searchInvoice')"
data-key="InvoiceOutList" data-key="InvoiceOutList"
/> />
<RightMenu> <VnSubToolbar>
<template #right-panel> <template #st-actions>
<InvoiceOutFilter data-key="InvoiceOutList" /> <QBtn
color="primary"
icon-right="cloud_download"
@click="downloadPdf()"
:disable="!hasSelectedCards"
>
<QTooltip>{{ t('globals.downloadPdf') }}</QTooltip>
</QBtn>
</template> </template>
</RightMenu> </VnSubToolbar>
<QPage> <VnTable
<VnPaginate ref="tableRef"
auto-load data-key="invoiceOut"
data-key="InvoiceOutList" :url="`${MODEL}/filter`"
:order="['issued DESC', 'id DESC']" :create="{
url="InvoiceOuts/filter" urlCreate: 'InvoiceOuts/createManualInvoice',
> title: t('Create Manual Invoice'),
<template #body="{ rows }"> onDataSaved: ({ id }) => tableRef.redirect(id),
<VnSubToolbar class="justify-end"> formInitialData: {
<template #st-actions> active: true,
<QBtn },
@click="openPdf()" }"
class="q-mr-md" v-model:selected="selectedRows"
color="primary" order="id DESC"
icon="cloud_download" :columns="columns"
:disable="selectedCards.size === 0" redirect="invoice-out"
> auto-load
<QTooltip>{{ t('globals.downloadPdf') }}</QTooltip> :table="{
</QBtn> 'row-key': 'id',
<QCheckbox selection: 'multiple',
left-label }"
:label="t('globals.markAll')" >
@click="toggleAllCards(rows)" <template #more-create-dialog="{ data }">
:model-value="selectedCards.size === rows.length" <VnSelect
class="q-mr-md" url="Tickets"
/> v-model="data.ticketFk"
</template> :label="t('invoiceOutList.tableVisibleColumns.ticket')"
</VnSubToolbar> :options="ticketsOptions"
<div class="flex flex-center q-pa-md"> option-label="nickname"
<div class="vn-card-list"> option-value="id"
<CardList />
:element="row" <VnSelect
:id="row.id" url="Clients"
:show-checkbox="true" v-model="data.clientFk"
:is-selected="selectedCards.has(row.id)" :label="t('invoiceOutModule.customer')"
:key="row.id" :options="customerOptions"
:title="row.ref" option-label="name"
@click="navigate(row.id)" option-value="id"
@toggle-card-check="toggleIndividualCard(row)" />
v-for="row of rows" <VnInputDate
> :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
<template #list-items> v-model="data.maxShipped"
<VnLv />
:label="t('invoiceOut.list.issued')" <VnSelect
:value="toDate(row.issued)" url="InvoiceOutSerials"
/> v-model="data.invoiceOutSerial"
<VnLv :label="t('invoiceOutList.tableVisibleColumns.invoiceOutSerial')"
:label="t('invoiceOut.list.amount')" :options="invoiceOutSerialsOptions"
:value="toCurrency(row.amount)" option-label="description"
/> option-value="code"
<VnLv :label="t('invoiceOut.list.client')"> />
<template #value> <VnSelect
<span class="link" @click.stop> url="TaxAreas"
{{ row?.clientSocialName }} v-model="data.area"
<CustomerDescriptorProxy :label="t('invoiceOutList.tableVisibleColumns.taxArea')"
:id="row?.clientFk" :options="taxAreasOptions"
/> option-label="code"
</span> option-value="code"
</template> />
</VnLv> <QInput
<VnLv v-model="data.reference"
:label="t('invoiceOut.list.shortCreated')" :label="t('invoiceOutList.tableVisibleColumns.ref')"
:title-label="t('invoiceOut.list.created')" />
:value="toDate(row.created)" </template>
/> </VnTable>
<VnLv
:label="t('invoiceOut.list.company')"
:value="row.companyCode"
/>
<VnLv
:label="t('invoiceOut.list.shortDued')"
:title-label="t('invoiceOut.list.dued')"
:value="toDate(row.dued)"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, InvoiceOutSummary)"
color="primary"
style="margin-top: 15px"
type="submit"
/>
</template>
</CardList>
</div>
</div>
</template>
</VnPaginate>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="openCreateInvoiceModal()" />
<QTooltip>
{{ t('createInvoice') }}
</QTooltip>
</QPageSticky>
<QDialog
ref="manualInvoiceDialogRef"
transition-show="scale"
transition-hide="scale"
>
<CreateManualInvoiceForm />
</QDialog>
</QPage>
</template> </template>
<i18n> <i18n>

238
src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
View File

@ -1,200 +1,176 @@
<script setup> <script setup>
import { computed, onBeforeMount } from 'vue'; import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js'; import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
import { useStateStore } from 'stores/useStateStore'; import { useArrayData } from 'src/composables/useArrayData';
import { useArrayData } from 'composables/useArrayData';
import RightMenu from 'src/components/common/RightMenu.vue';
const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const tableRef = ref();
const arrayData = useArrayData('InvoiceOutNegative', { const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
url: 'InvoiceOuts/negativeBases', const userParams = {
limit: 0, from: Date.vnFirstDayOfMonth().toISOString(),
userParams: { to: Date.vnLastDayOfMonth().toISOString(),
from: Date.vnFirstDayOfMonth().toISOString(), };
to: Date.vnLastDayOfMonth().toISOString(), useArrayData('InvoiceOutNegative', { userParams });
},
exprBuilder: (param, value) => {
switch (param) {
case 'from':
case 'to':
return;
default:
return { [param]: value };
}
},
});
onBeforeMount(async () => {
await arrayData.fetch({ append: false });
stateStore.rightDrawer = true;
});
const columns = computed(() => [ const columns = computed(() => [
{ {
label: t('invoiceOut.negativeBases.company'), align: 'left',
field: 'company',
name: 'company', name: 'company',
align: 'left', label: t('invoiceOutModule.company'),
component: 'select',
cardVisible: true,
attrs: {
url: 'Companies',
optionLabel: 'code',
optionValue: 'id',
},
columnField: {
component: null,
},
}, },
{ {
label: t('invoiceOut.negativeBases.country'), align: 'left',
field: 'country',
name: 'country', name: 'country',
align: 'left', label: t('negativeBases.country'),
component: 'select',
attrs: {
url: 'Countries',
optionLabel: 'name',
optionValue: 'id',
},
columnField: {
component: null,
},
}, },
{ {
label: t('invoiceOut.negativeBases.clientId'), align: 'left',
field: 'clientId',
name: 'clientId', name: 'clientId',
align: 'left', label: t('negativeBases.clientId'),
cardVisible: true,
}, },
{ {
label: t('invoiceOut.negativeBases.client'),
field: 'clientSocialName',
name: 'client',
align: 'left', align: 'left',
name: 'clientSocialName',
label: t('invoiceOutModule.customer'),
component: 'select',
isTitle: true,
cardVisible: true,
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
}, },
{ {
label: t('invoiceOut.negativeBases.amount'), align: 'left',
field: 'amount',
name: 'amount', name: 'amount',
align: 'left', label: t('invoiceOutModule.amount'),
format: (value) => toCurrency(value), format: (row) => toCurrency(row.amount),
cardVisible: true,
}, },
{ {
label: t('invoiceOut.negativeBases.base'),
field: 'taxableBase',
name: 'base',
align: 'left', align: 'left',
name: 'taxableBase',
label: t('negativeBases.base'),
}, },
{ {
label: t('invoiceOut.negativeBases.ticketId'),
field: 'ticketFk',
name: 'ticketId',
align: 'left', align: 'left',
name: 'ticketFk',
label: t('negativeBases.ticketId'),
cardVisible: true,
}, },
{ {
label: t('invoiceOut.negativeBases.active'),
field: 'isActive',
name: 'active',
align: 'left', align: 'left',
name: 'isActive',
label: t('negativeBases.active'),
}, },
{ {
label: t('invoiceOut.negativeBases.hasToInvoice'), align: 'left',
field: 'hasToInvoice',
name: 'hasToInvoice', name: 'hasToInvoice',
align: 'left', label: t('negativeBases.hasToInvoice'),
}, },
{ {
label: t('invoiceOut.negativeBases.verifiedData'),
field: 'isTaxDataChecked',
name: 'verifiedData',
align: 'left', align: 'left',
name: 'hasVerifiedData',
label: t('negativeBases.verifiedData'),
}, },
{ {
label: t('invoiceOut.negativeBases.comercial'),
field: 'workerName',
name: 'worker',
align: 'left', align: 'left',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'workerName',
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
},
columnField: {
component: null,
},
format: (row, dashIfEmpty) => dashIfEmpty(row.workerName),
}, },
]); ]);
const downloadCSV = async () => { const downloadCSV = async () => {
const params = {}; // filter.value;
const filterParams = { const filterParams = {
limit: 20, limit: 20,
where: { where: {
and: [], and: [],
}, },
}; };
for (const param in params) {
if (params[param]) filterParams.where.and.push({ [param]: params[param] }); for (const [key, value] of Object.entries(userParams)) {
if (value) {
filterParams.where.and.push({ [key]: value });
}
} }
await invoiceOutGlobalStore.getNegativeBasesCsv( await invoiceOutGlobalStore.getNegativeBasesCsv(
arrayData.value.store.userParams.from, userParams.from,
arrayData.value.store.userParams.to, userParams.to,
params filterParams
); );
}; };
</script> </script>
<template> <template>
<VnSubToolbar> <VnSubToolbar>
<template #st-actions> <template #st-actions>
<QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()"> <QBtn color="primary" icon-right="download" @click="downloadCSV()">
<QTooltip>{{ t('Download as CSV') }}</QTooltip> <QTooltip>{{ t('Download as CSV') }}</QTooltip>
</QBtn> </QBtn>
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<RightMenu> <VnTable
<template #right-panel> ref="tableRef"
<InvoiceOutNegativeFilter data-key="InvoiceOutNegative" /> data-key="negativeFilter"
</template> url="InvoiceOuts/negativeBases"
</RightMenu> :user-params="userParams"
<QPage class="column items-center q-pa-md"> :expr-builder="
<QTable (param, value) => {
:columns="columns" switch (param) {
:rows="arrayData.store.data" case 'from':
row-key="clientId" case 'to':
class="full-width q-mt-md" return;
> default:
<template #body-cell-clientId="{ row }"> return { [param]: value };
<QTd> }
<QBtn flat dense class="link"> {{ row.clientId }}</QBtn> }
<CustomerDescriptorProxy :id="row.clientId" /> "
</QTd> :limit="0"
</template> :columns="columns"
<template #body-cell-ticketId="{ row }"> auto-load
<QTd> :is-editable="false"
<QBtn flat dense class="link"> {{ row.ticketFk }}</QBtn> :use-model="true"
<TicketDescriptorProxy :id="row.ticketFk" /> >
</QTd> </VnTable>
</template>
<template #body-cell-worker="{ row }">
<QTd>
<QBtn class="no-uppercase link" flat dense>{{ row.workerName }}</QBtn>
<WorkerDescriptorProxy :id="row.comercialId" />
</QTd>
</template>
<template #body-cell-active="{ row }">
<QTd>
<QCheckbox :model-value="!!row.isActive" disable />
</QTd>
</template>
<template #body-cell-hasToInvoice="{ row }">
<QTd>
<QCheckbox :model-value="!!row.hasToInvoice" disable />
</QTd>
</template>
<template #body-cell-verifiedData="{ row }">
<QTd>
<QCheckbox :model-value="!!row.isTaxDataChecked" disable />
</QTd>
</template>
</QTable>
</QPage>
</template> </template>
<style lang="scss" scoped>
.col-content {
border-radius: 4px;
padding: 6px;
}
.no-uppercase {
text-transform: none;
}
</style>
<i18n> <i18n>
es: es:
Download as CSV: Descargar como CSV Download as CSV: Descargar como CSV

25
src/pages/InvoiceOut/locale/en.yml Normal file
View File

@ -0,0 +1,25 @@
invoiceOutModule:
customer: Client
amount: Amount
company: Company
invoiceOutList:
tableVisibleColumns:
id: ID
ref: Reference
issued: Issued
created: Created
dueDate: Max date
invoiceOutSerial: Serial
ticket: Ticket
taxArea: Tax area
DownloadPdf: Download PDF
InvoiceOutSummary: Summary
negativeBases:
country: Country
clientId: Client ID
base: Base
ticketId: Ticket
active: Active
hasToInvoice: Has to invoice
verifiedData: Verified data
commercial: Commercial

29
src/pages/InvoiceOut/locale/es.yml
View File

@ -1,2 +1,31 @@
Search invoice: Buscar factura emitida Search invoice: Buscar factura emitida
You can search by invoice reference: Puedes buscar por referencia de la factura You can search by invoice reference: Puedes buscar por referencia de la factura
invoiceOutModule:
customer: Cliente
amount: Importe
company: Empresa
invoiceOutList:
tableVisibleColumns:
id: ID
ref: Referencia
issued: Fecha emisión
customer: Cliente
company: Empresa
amount: Importe
created: F. creación
dueDate: F. máxima
invoiceOutSerial: Serial
ticket: Ticket
taxArea: Area
DownloadPdf: Descargar PDF
InvoiceOutSummary: Resumen
negativeBases:
country: País
clientId: ID del cliente
client: Cliente
base: Base
ticketId: Ticket
active: Activo
hasToInvoice: Debe facturar
verifiedData: Datos verificados
commercial: Comercial

70
src/pages/Item/Card/ItemDiary.vue
View File

@ -5,7 +5,9 @@ import { useRoute } from 'vue-router';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue'; import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import OrderDescriptorProxy from 'src/pages/Order/Card/OrderDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue'; import VnInputDate from 'src/components/common/VnInputDate.vue';
@ -45,8 +47,8 @@ const columns = computed(() => [
align: 'left', align: 'left',
}, },
{ {
label: t('itemDiary.id'), label: t('itemDiary.origin'),
name: 'id', name: 'originId',
align: 'left', align: 'left',
}, },
{ {
@ -65,8 +67,8 @@ const columns = computed(() => [
}, },
{ {
label: t('itemDiary.client'), label: t('itemDiary.entity'),
name: 'client', name: 'entityId',
align: 'left', align: 'left',
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
@ -111,10 +113,28 @@ const getBadgeAttrs = (_date) => {
return attrs; return attrs;
}; };
const getIdDescriptor = (row) => { const originTypeMap = {
let descriptor = EntryDescriptorProxy; entry: {
if (row.isTicket) descriptor = TicketDescriptorProxy; descriptor: EntryDescriptorProxy,
return descriptor; icon: 'vn:entry',
},
ticket: {
descriptor: TicketDescriptorProxy,
icon: 'vn:ticket',
},
order: {
descriptor: OrderDescriptorProxy,
icon: 'vn:basket',
},
};
const entityTypeMap = {
client: {
descriptor: CustomerDescriptorProxy,
},
supplier: {
descriptor: SupplierDescriptorProxy,
},
}; };
onMounted(async () => { onMounted(async () => {
@ -206,21 +226,28 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</QBadge> </QBadge>
</QTd> </QTd>
</template> </template>
<template #body-cell-id="{ row }"> <template #body-cell-originId="{ row }">
<QTd @click.stop> <QTd @click.stop>
<component <component
:is="getIdDescriptor(row)" :is="originTypeMap[row.originType]?.descriptor"
:id="row.origin" :id="row.originId"
class="q-ma-none" class="q-ma-none"
dense dense
style="font-size: 14px" style="font-size: 14px"
> >
{{ row.origin }} {{ row.originId }}
</component> </component>
<span class="link">{{ row.origin }}</span> <span class="link">
<QIcon
:name="originTypeMap[row.originType]?.icon"
class="fill-icon q-mr-sm"
size="xs"
/>
{{ row.originId }}
</span>
</QTd> </QTd>
</template> </template>
<template #body-cell-client="{ row }"> <template #body-cell-entityId="{ row }">
<QTd @click.stop> <QTd @click.stop>
<QBadge <QBadge
:color="row.highlighted ? 'warning' : 'transparent'" :color="row.highlighted ? 'warning' : 'transparent'"
@ -228,11 +255,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
dense dense
style="font-size: 14px" style="font-size: 14px"
> >
<span v-if="row.isTicket" class="link"> <component
{{ dashIfEmpty(row.name) }} :is="entityTypeMap[row.entityType]?.descriptor"
<CustomerDescriptorProxy :id="row.clientFk" /> :id="row.entityId"
class="q-ma-none"
dense
style="font-size: 14px"
>
{{ row.entityId }}
</component>
<span class="link">
{{ dashIfEmpty(row.entityName) }}
</span> </span>
<span v-else>{{ dashIfEmpty(row.name) }}</span>
</QBadge> </QBadge>
</QTd> </QTd>
</template> </template>

8
src/pages/Item/Card/ItemLastEntries.vue
View File

@ -200,16 +200,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
<VnInputDate <VnInputDate
:label="t('lastEntries.since')" :label="t('lastEntries.since')"
dense dense
emit-date-format
v-model="from" v-model="from"
class="q-mr-lg" class="q-mr-lg"
/> />
<VnInputDate <VnInputDate :label="t('lastEntries.to')" dense v-model="to" />
:label="t('lastEntries.to')"
dense
emit-date-format
v-model="to"
/>
</div> </div>
<QSpace /> <QSpace />
<div id="st-actions"></div> <div id="st-actions"></div>

4
src/pages/Item/Card/ItemSummary.vue
View File

@ -135,10 +135,6 @@ const isAdministrative = computed(() => {
:label="t('item.summary.nonRecycledPlastic')" :label="t('item.summary.nonRecycledPlastic')"
:value="item.nonRecycledPlastic" :value="item.nonRecycledPlastic"
/> />
<VnLv
:label="t('item.summary.minSalesQuantity')"
:value="item.minQuantity"
/>
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-one">
<component <component

6
src/pages/Item/ItemRequestFilter.vue
View File

@ -192,7 +192,6 @@ const decrement = (paramsObj, key) => {
v-model="params.from" v-model="params.from"
@update:model-value="searchFn()" @update:model-value="searchFn()"
is-outlined is-outlined
emit-date-format
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -203,7 +202,6 @@ const decrement = (paramsObj, key) => {
v-model="params.to" v-model="params.to"
@update:model-value="searchFn()" @update:model-value="searchFn()"
is-outlined is-outlined
emit-date-format
/> />
</QItemSection> </QItemSection>
</QItem> </QItem>
@ -211,7 +209,7 @@ const decrement = (paramsObj, key) => {
<QItemSection> <QItemSection>
<VnInput <VnInput
v-model="params.scopeDays" v-model="params.scopeDays"
:label="t('params.scopeDays')" :label="t('globals.daysOnward')"
type="number" type="number"
dense dense
outlined outlined
@ -283,7 +281,6 @@ en:
requesterFk: Salesperson requesterFk: Salesperson
from: From from: From
to: To to: To
scopeDays: Days onward
mine: For me mine: For me
state: State state: State
dateFiltersTooltip: Cannot choose a range of dates and days onward at the same time dateFiltersTooltip: Cannot choose a range of dates and days onward at the same time
@ -301,7 +298,6 @@ es:
requesterFk: Comercial requesterFk: Comercial
from: Desde from: Desde
to: Hasta to: Hasta
scopeDays: Días adelante
mine: Para mi mine: Para mi
state: Estado state: Estado
dateFiltersTooltip: No se puede seleccionar un rango de fechas y días en adelante a la vez dateFiltersTooltip: No se puede seleccionar un rango de fechas y días en adelante a la vez

4
src/pages/Item/locale/en.yml
View File

@ -14,10 +14,10 @@ shelvings:
removeConfirmSubtitle: Are you sure you want to continue? removeConfirmSubtitle: Are you sure you want to continue?
itemDiary: itemDiary:
date: Date date: Date
id: Id origin: Origin
state: State state: State
reference: Reference reference: Reference
client: Client entity: Entity
in: In in: In
out: Out out: Out
balance: Balance balance: Balance

4
src/pages/Item/locale/es.yml
View File

@ -14,10 +14,10 @@ shelvings:
removeConfirmSubtitle: ¿Seguro que quieres continuar? removeConfirmSubtitle: ¿Seguro que quieres continuar?
itemDiary: itemDiary:
date: Fecha date: Fecha
id: Id origin: Origen
state: Estado state: Estado
reference: Referencia reference: Referencia
client: Cliente entity: Entidad
in: Entrada in: Entrada
out: Salida out: Salida
balance: Balance balance: Balance

14
src/pages/ItemType/Card/ItemTypeDescriptor.vue
View File

@ -51,20 +51,6 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
@on-fetch="setData" @on-fetch="setData"
data-key="entry" data-key="entry"
> >
<template #header-extra-action>
<QBtn
round
flat
size="sm"
icon="vn:item"
color="white"
:to="{ name: 'ItemTypeList' }"
>
<QTooltip>
{{ t('Go to module index') }}
</QTooltip>
</QBtn>
</template>
<template #body="{ entity }"> <template #body="{ entity }">
<VnLv :label="t('shared.code')" :value="entity.code" /> <VnLv :label="t('shared.code')" :value="entity.code" />
<VnLv :label="t('shared.name')" :value="entity.name" /> <VnLv :label="t('shared.name')" :value="entity.name" />

2
src/pages/Monitor/SalesClientsTable.vue
View File

@ -169,7 +169,6 @@ const columns = computed(() => [
<VnInputDate <VnInputDate
:label="t('salesClientsTable.from')" :label="t('salesClientsTable.from')"
dense dense
emit-date-format
v-model="from" v-model="from"
class="q-mr-lg" class="q-mr-lg"
style="width: 150px" style="width: 150px"
@ -177,7 +176,6 @@ const columns = computed(() => [
<VnInputDate <VnInputDate
:label="t('salesClientsTable.to')" :label="t('salesClientsTable.to')"
dense dense
emit-date-format
v-model="to" v-model="to"
style="width: 150px" style="width: 150px"
/> />

31
src/pages/Order/Card/OrderCatalogFilter.vue
View File

@ -37,6 +37,10 @@ const selectedOrder = ref(null);
const selectedOrderField = ref(null); const selectedOrderField = ref(null);
const moreFields = ref([]); const moreFields = ref([]);
const moreFieldsOrder = ref([]); const moreFieldsOrder = ref([]);
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref([]);
const createValue = (val, done) => { const createValue = (val, done) => {
if (val.length > 2) { if (val.length > 2) {
if (!tagOptions.value.includes(val)) { if (!tagOptions.value.includes(val)) {
@ -95,10 +99,6 @@ function exprBuilder(param, value) {
} }
} }
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref([]);
const applyTagFilter = (params, search) => { const applyTagFilter = (params, search) => {
if (!tagValues.value?.length) { if (!tagValues.value?.length) {
params.tagGroups = null; params.tagGroups = null;
@ -139,34 +139,22 @@ const onOrderChange = (value, params) => {
}; };
const onOrderFieldChange = (value, params) => { const onOrderFieldChange = (value, params) => {
const tagObj = JSON.parse(params.orderBy); // esto donde va const tagObj = JSON.parse(params.orderBy);
const fields = {
Relevancy: (value) => value + ' DESC, name',
ColorAndPrice: 'showOrder, price',
Name: 'name',
Price: 'price',
};
let tagField = fields[value];
if (!tagField) return;
if (typeof tagField === 'function') tagField = tagField(value);
tagObj.field = tagField;
params.orderBy = JSON.stringify(tagObj);
switch (value) { switch (value) {
case 'Relevancy': case 'Relevancy':
tagObj.field = value + ' DESC, name'; tagObj.name = value + ' DESC, name';
params.orderBy = JSON.stringify(tagObj); params.orderBy = JSON.stringify(tagObj);
break; break;
case 'ColorAndPrice': case 'ColorAndPrice':
tagObj.field = 'showOrder, price'; tagObj.name = 'showOrder, price';
params.orderBy = JSON.stringify(tagObj); params.orderBy = JSON.stringify(tagObj);
break; break;
case 'Name': case 'Name':
tagObj.field = 'name'; tagObj.name = 'name';
params.orderBy = JSON.stringify(tagObj); params.orderBy = JSON.stringify(tagObj);
break; break;
case 'Price': case 'Price':
tagObj.field = 'price'; tagObj.name = 'price';
params.orderBy = JSON.stringify(tagObj); params.orderBy = JSON.stringify(tagObj);
break; break;
} }
@ -308,6 +296,7 @@ const useLang = (values) => {
v-model="selectedOrder" v-model="selectedOrder"
:options="moreFields" :options="moreFields"
option-label="label" option-label="label"
option-value="way"
dense dense
outlined outlined
rounded rounded

4
src/pages/Order/Card/OrderDescriptor.vue
View File

@ -60,7 +60,7 @@ const filter = {
const data = ref(useCardDescription()); const data = ref(useCardDescription());
const setData = (entity) => { const setData = (entity) => {
if (!entity) return; if (!entity) return;
data.value = useCardDescription(entity.client.name, entity.id); data.value = useCardDescription(entity?.client?.name, entity?.id);
state.set('OrderDescriptor', entity); state.set('OrderDescriptor', entity);
}; };
@ -131,7 +131,7 @@ const total = ref(null);
color="primary" color="primary"
:to="{ name: 'CustomerCard', params: { id: entity.clientFk } }" :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
> >
<QTooltip>{{ t('claim.card.customerSummary') }}</QTooltip> <QTooltip>{{ t('claim.customerSummary') }}</QTooltip>
</QBtn> </QBtn>
</QCardActions> </QCardActions>
</template> </template>

17
src/pages/Order/Card/OrderDescriptorProxy.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup>
import OrderDescriptor from './OrderDescriptor.vue';
import OrderSummary from './OrderSummary.vue';
const $props = defineProps({
id: {
type: Number,
required: true,
},
});
</script>
<template>
<QPopupProxy>
<OrderDescriptor v-if="$props.id" :id="$props.id" :summary="OrderSummary" />
</QPopupProxy>
</template>

45
src/pages/Order/Card/OrderForm.vue
View File

@ -1,11 +1,10 @@
<script setup> <script setup>
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { reactive, ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import axios from 'axios'; import axios from 'axios';
import { useState } from 'composables/useState'; import { useState } from 'composables/useState';
import FormModel from 'components/FormModel.vue'; import FormModel from 'components/FormModel.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'components/common/VnSelect.vue'; import VnSelect from 'components/common/VnSelect.vue';
import VnInputDate from 'components/common/VnInputDate.vue'; import VnInputDate from 'components/common/VnInputDate.vue';
@ -18,29 +17,9 @@ const ORDER_MODEL = 'order';
const router = useRouter(); const router = useRouter();
const isNew = Boolean(!route.params.id); const isNew = Boolean(!route.params.id);
const initialFormState = reactive({
clientFk: null,
addressFk: null,
agencyModeFk: null,
landed: null,
});
const clientList = ref([]); const clientList = ref([]);
const agencyList = ref([]); const agencyList = ref([]);
const addressList = ref([]); const addressList = ref([]);
const clientId = ref(null);
const onClientsFetched = (data) => {
clientList.value = data;
initialFormState.clientFk = Number(route.query?.clientFk) || null;
clientId.value = initialFormState.clientFk;
const client = clientList.value.find(
(client) => client.id === initialFormState.clientFk
);
if (!client?.defaultAddressFk)
throw new Error(t(`No default address found for the client`));
fetchAddressList(client.defaultAddressFk);
};
const fetchAddressList = async (addressId) => { const fetchAddressList = async (addressId) => {
try { try {
@ -128,28 +107,19 @@ const onClientChange = async (clientId) => {
} }
}; };
async function onDataSaved(data) { async function onDataSaved({ id }) {
await router.push({ path: `/order/${data}/catalog` }); await router.push({ path: `/order/${id}/catalog` });
} }
</script> </script>
<template> <template>
<FetchData
url="Clients"
@on-fetch="(data) => onClientsFetched(data)"
:filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
auto-load
/>
<VnSubToolbar v-if="isNew" /> <VnSubToolbar v-if="isNew" />
<div class="q-pa-md"> <div class="q-pa-md">
<FormModel <FormModel
:url="!isNew ? `Orders/${route.params.id}` : null" :url="`Orders/${route.params.id}`"
url-create="Orders/new"
@on-data-saved="onDataSaved" @on-data-saved="onDataSaved"
:model="ORDER_MODEL" :model="ORDER_MODEL"
:form-initial-data="isNew ? initialFormState : null" :mapper="orderMapper"
:observe-form-changes="!isNew"
:mapper="isNew ? orderMapper : null"
:filter="orderFilter" :filter="orderFilter"
@on-fetch="fetchOrderDetails" @on-fetch="fetchOrderDetails"
auto-load auto-load
@ -157,11 +127,15 @@ async function onDataSaved(data) {
<template #form="{ data }"> <template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<VnSelect <VnSelect
url="Clients"
:label="t('order.form.clientFk')" :label="t('order.form.clientFk')"
v-model="data.clientFk" v-model="data.clientFk"
:options="clientList" :options="clientList"
option-value="id" option-value="id"
option-label="name" option-label="name"
:filter="{
fields: ['id', 'name', 'defaultAddressFk'],
}"
hide-selected hide-selected
@update:model-value="onClientChange" @update:model-value="onClientChange"
> >
@ -183,7 +157,6 @@ async function onDataSaved(data) {
option-label="street" option-label="street"
hide-selected hide-selected
:disable="!addressList?.length" :disable="!addressList?.length"
@update:model-value="onAddressChange"
> >
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem v-bind="scope.itemProps">

26
src/pages/Order/Card/OrderSummary.vue
View File

@ -7,6 +7,8 @@ import VnLv from 'components/ui/VnLv.vue';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
@ -62,6 +64,10 @@ const detailsColumns = ref([
</template> </template>
<template #body="{ entity }"> <template #body="{ entity }">
<QCard class="vn-one"> <QCard class="vn-one">
<VnTitle
:url="`#/order/${entity.id}/basic-data`"
:text="t('globals.pageTitles.basicData')"
/>
<VnLv label="ID" :value="entity.id" /> <VnLv label="ID" :value="entity.id" />
<VnLv :label="t('order.summary.nickname')" dash> <VnLv :label="t('order.summary.nickname')" dash>
<template #value> <template #value>
@ -81,6 +87,10 @@ const detailsColumns = ref([
/> />
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-one">
<VnTitle
:url="`#/order/${entity.id}/basic-data`"
:text="t('globals.pageTitles.basicData')"
/>
<VnLv <VnLv
:label="t('order.summary.created')" :label="t('order.summary.created')"
:value="toDateHourMinSec(entity?.created)" :value="toDateHourMinSec(entity?.created)"
@ -116,14 +126,13 @@ const detailsColumns = ref([
/> />
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-one">
<p class="header"> <VnTitle :text="t('globals.pageTitles.notes')" />
{{ t('order.summary.notes') }}
</p>
<p v-if="entity?.note" class="no-margin"> <p v-if="entity?.note" class="no-margin">
{{ entity?.note }} {{ entity?.note }}
</p> </p>
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-one">
<VnTitle :text="t('order.summary.total')" />
<VnLv> <VnLv>
<template #label> <template #label>
<span class="text-h6">{{ t('order.summary.subtotal') }}</span> <span class="text-h6">{{ t('order.summary.subtotal') }}</span>
@ -152,9 +161,7 @@ const detailsColumns = ref([
</VnLv> </VnLv>
</QCard> </QCard>
<QCard> <QCard>
<p class="header"> <VnTitle :text="t('order.summary.details')" />
{{ t('order.summary.details') }}
</p>
<QTable :columns="detailsColumns" :rows="entity?.rows" flat> <QTable :columns="detailsColumns" :rows="entity?.rows" flat>
<template #header="props"> <template #header="props">
<QTr :props="props"> <QTr :props="props">
@ -168,7 +175,10 @@ const detailsColumns = ref([
<template #body="props"> <template #body="props">
<QTr :props="props"> <QTr :props="props">
<QTd key="item" :props="props" class="item"> <QTd key="item" :props="props" class="item">
{{ props.row.item?.id }} <span class="link">
{{ props.row.item?.id }}
<ItemDescriptorProxy :id="props.row.item?.id" />
</span>
</QTd> </QTd>
<QTd key="description" :props="props" class="description"> <QTd key="description" :props="props" class="description">
<div class="name"> <div class="name">
@ -186,7 +196,7 @@ const detailsColumns = ref([
{{ props.row.quantity }} {{ props.row.quantity }}
</QTd> </QTd>
<QTd key="price" :props="props"> <QTd key="price" :props="props">
{{ props.row.price }} {{ toCurrency(props.row.price) }}
</QTd> </QTd>
<QTd key="amount" :props="props"> <QTd key="amount" :props="props">
{{ {{

10
src/pages/Order/OrderCatalog.vue
View File

@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
import { onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue'; import CatalogItem from 'components/ui/CatalogItem.vue';
import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue'; import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
const route = useRoute(); const route = useRoute();
@ -70,13 +70,19 @@ function extractValueTags(items) {
:user-params="catalogParams" :user-params="catalogParams"
auto-load auto-load
@on-fetch="extractTags" @on-fetch="extractTags"
:update-router="false"
> >
<template #body="{ rows }"> <template #body="{ rows }">
<div class="catalog-list"> <div class="catalog-list">
<div v-if="rows && !rows?.length" class="no-result"> <div v-if="rows && !rows?.length" class="no-result">
{{ t('globals.noResults') }} {{ t('globals.noResults') }}
</div> </div>
<OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" /> <CatalogItem
v-for="row in rows"
:key="row.id"
:item="row"
is-catalog
/>
</div> </div>
</template> </template>
</VnPaginate> </VnPaginate>

381
src/pages/Order/OrderLines.vue
View File

@ -1,33 +1,168 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { ref } from 'vue'; import { ref, computed } from 'vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import VnImg from 'components/ui/VnImg.vue';
import { toCurrency, toDate } from 'src/filters'; import { toCurrency, toDate } from 'src/filters';
import axios from 'axios'; import axios from 'axios';
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue'; import VnTable from 'src/components/VnTable/VnTable.vue';
import FetchData from 'src/components/FetchData.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
const componentKey = ref(0);
const tableLinesRef = ref();
const order = ref();
const orderSummary = ref({ const orderSummary = ref({
total: null, total: null,
vat: null, vat: null,
}); });
const componentKey = ref(0);
const order = ref(0);
const refresh = () => { const lineFilter = ref({
componentKey.value += 1; include: [
}; {
relation: 'item',
scope: {
fields: [
'id',
'name',
'subName',
'image',
'tag4',
'value4',
'tag5',
'value5',
'tag6',
'value6',
'tag7',
'value7',
'tag8',
'value8',
'tag9',
'value9',
'tag10',
'value10',
],
},
},
{
relation: 'warehouse',
scope: {
fields: ['id', 'name'],
},
},
],
where: { orderFk: route.params.id },
});
const columns = computed(() => [
{
align: 'center',
label: t('lines.image'),
name: 'image',
columnField: {
component: VnImg,
attrs: (id) => {
return {
id,
width: '50px',
};
},
},
columnFilter: false,
},
{
align: 'left',
name: 'id',
label: t('lines.item'),
chip: {
condition: () => true,
},
isId: true,
format: (row) => row?.item?.id,
},
{
align: 'left',
name: 'itemFk',
label: t('globals.description'),
isTitle: true,
cardVisible: true,
component: 'select',
attrs: {
url: 'Items',
fields: ['id', 'name', 'subName'],
},
columnField: {
component: null,
},
format: (row) => row?.item?.name,
},
{
align: 'left',
name: 'warehouseFk',
label: t('lines.warehouse'),
cardVisible: true,
component: 'select',
attrs: {
url: 'Warehouses',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
format: (row) => row?.warehouse?.name,
},
{
align: 'left',
name: 'shipped',
label: t('lines.shipped'),
cardVisible: true,
component: 'date',
columnField: {
component: null,
},
format: (row) => toDate(row.shipped),
},
{
align: 'left',
name: 'quantity',
label: t('lines.quantity'),
},
{
align: 'left',
name: 'price',
label: t('lines.price'),
cardVisible: true,
format: (row) => toCurrency(row.price),
},
{
align: 'left',
name: 'amount',
label: t('lines.amount'),
format: (row) => toCurrency(row.amount),
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('delete'),
icon: 'delete',
action: (row) => confirmRemove(row),
isPrimary: true,
},
],
},
]);
function confirmRemove(item) { function confirmRemove(item) {
quasar.dialog({ quasar.dialog({
@ -49,7 +184,7 @@ async function remove(item) {
message: t('globals.dataDeleted'), message: t('globals.dataDeleted'),
type: 'positive', type: 'positive',
}); });
refresh(); tableLinesRef.value.reload();
} }
async function confirmOrder() { async function confirmOrder() {
@ -59,56 +194,6 @@ async function confirmOrder() {
type: 'positive', type: 'positive',
}); });
} }
const detailsColumns = ref([
{
name: 'img',
label: '',
field: (row) => row?.item?.id,
},
{
name: 'item',
label: t('order.summary.item'),
field: (row) => row?.item?.id,
sortable: true,
},
{
name: 'description',
label: t('globals.description'),
field: (row) => row?.item?.name,
},
{
name: 'warehouse',
label: t('warehouse'),
field: (row) => row?.warehouse?.name,
sortable: true,
},
{
name: 'shipped',
label: t('shipped'),
field: (row) => toDate(row?.shipped),
},
{
name: 'quantity',
label: t('order.summary.quantity'),
field: (row) => row?.quantity,
},
{
name: 'price',
label: t('order.summary.price'),
field: (row) => toCurrency(row?.price),
},
{
name: 'amount',
label: t('order.summary.amount'),
field: (row) => toCurrency(row?.quantity * row?.price),
},
{
name: 'actions',
label: '',
field: (row) => row?.id,
},
]);
</script> </script>
<template> <template>
@ -130,122 +215,61 @@ const detailsColumns = ref([
@on-fetch="(data) => (orderSummary.vat = data)" @on-fetch="(data) => (orderSummary.vat = data)"
auto-load auto-load
/> />
<QPage :key="componentKey" class="column items-center q-pa-md"> <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
<QCard class="order-lines-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal') + ': '"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT') + ': '"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total') + ': '"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
</QDrawer>
<QPage :key="componentKey" class="column items-center">
<div class="order-list full-width"> <div class="order-list full-width">
<div v-if="!orderSummary.total" class="no-result"> <div v-if="!orderSummary.total" class="no-result">
{{ t('globals.noResults') }} {{ t('globals.noResults') }}
</div> </div>
<VnTable
<QDrawer side="right" :width="270" show-if-above> ref="tableLinesRef"
<QCard class="order-lines-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal')"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT')"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total')"
:value="toCurrency(orderSummary?.total)"
/>
</QCard>
</QDrawer>
<VnPaginate
data-key="OrderLines" data-key="OrderLines"
url="OrderRows" url="OrderRows"
:limit="20" :columns="columns"
:right-search="false"
:use-model="true"
auto-load auto-load
:filter="{ :user-filter="lineFilter"
include: [
{
relation: 'item',
},
{
relation: 'warehouse',
},
],
where: { orderFk: route.params.id },
}"
> >
<template #body="{ rows }"> <template #column-image="{ row }">
<div class="q-pa-md"> <div class="image-wrapper">
<QTable <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
:columns="detailsColumns"
:rows="rows"
flat
class="full-width"
style="text-align: center"
>
<template #header="props">
<QTr class="tr-header" :props="props">
<QTh
v-for="col in props.cols"
:key="col.name"
:props="props"
style="text-align: center"
>
{{ t(col.label) }}
</QTh>
</QTr>
</template>
<template #body-cell-img="{ value }">
<QTd>
<div class="image-wrapper">
<VnImg :id="value" class="rounded" />
</div>
</QTd>
</template>
<template #body-cell-item="{ value }">
<QTd class="item">
<span class="link">
<QBtn flat>
{{ value }}
</QBtn>
<ItemDescriptorProxy :id="value" />
</span>
</QTd>
</template>
<template #body-cell-description="{ row, value }">
<QTd>
<div
class="row column full-width justify-between items-start"
>
{{ value }}
<div v-if="value" class="subName">
{{ value.toUpperCase() }}
</div>
</div>
<FetchedTags :item="row.item" :max-length="6" />
</QTd>
</template>
<template #body-cell-actions="{ value }">
<QTd>
<QIcon
name="delete"
color="primary"
size="sm"
class="cursor-pointer"
@click.stop="confirmRemove(value)"
>
<QTooltip>{{ t('Remove thermograph') }}</QTooltip>
</QIcon>
</QTd>
</template>
</QTable>
</div> </div>
</template> </template>
</VnPaginate>
<template #column-itemFk="{ row }">
<div class="row column full-width justify-between items-start">
{{ row?.item?.name }}
<div v-if="row?.item?.subName" class="subName">
{{ row?.item?.subName.toUpperCase() }}
</div>
</div>
<FetchedTags :item="row?.item" :max-length="6" />
</template>
</VnTable>
</div> </div>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed"> <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" /> <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip> <QTooltip>
{{ t('confirm') }} {{ t('confirm') }}
@ -253,7 +277,8 @@ const detailsColumns = ref([
</QPageSticky> </QPageSticky>
</QPage> </QPage>
</template> </template>
<style lang="scss">
<style lang="scss" scoped>
.order-lines-summary { .order-lines-summary {
.vn-label-value { .vn-label-value {
display: flex; display: flex;
@ -274,8 +299,13 @@ const detailsColumns = ref([
} }
} }
} }
</style>
<style lang="scss" scoped> .image-wrapper {
height: 50px;
width: 50px;
margin-left: 30%;
}
.header { .header {
color: $primary; color: $primary;
font-weight: bold; font-weight: bold;
@ -284,12 +314,6 @@ const detailsColumns = ref([
display: inline-block; display: inline-block;
} }
.image-wrapper {
height: 50px;
width: 50px;
margin-left: 30%;
}
.no-result { .no-result {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
@ -302,6 +326,7 @@ const detailsColumns = ref([
color: var(--vn-label-color); color: var(--vn-label-color);
} }
</style> </style>
<i18n> <i18n>
en: en:
summary: Summary summary: Summary

288
src/pages/Order/OrderList.vue
View File

@ -1,128 +1,188 @@
<script setup> <script setup>
import axios from 'axios';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { onMounted, onUnmounted } from 'vue'; import { computed, ref } from 'vue';
import { useRouter } from 'vue-router'; import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import { useStateStore } from 'stores/useStateStore'; import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { toCurrency, toDate } from 'src/filters';
import CardList from 'components/ui/CardList.vue';
import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnLv from 'components/ui/VnLv.vue';
import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
import OrderSummary from 'pages/Order/Card/OrderSummary.vue'; import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog'; import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue'; import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const { viewSummary } = useSummaryDialog(); const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const clientList = ref([]);
const agencyList = ref([]);
const selectedAddress = ref();
onMounted(() => (stateStore.rightDrawer = true)); const columns = computed(() => [
onUnmounted(() => (stateStore.rightDrawer = false)); {
align: 'left',
name: 'id',
label: t('module.id'),
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'clientName',
label: t('module.customer'),
isTitle: true,
cardVisible: true,
component: 'select',
attrs: {
url: 'Clients',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'name',
label: t('module.salesPerson'),
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'isConfirmed',
label: t('module.isConfirmed'),
},
{
align: 'left',
name: 'created',
label: t('module.created'),
component: 'date',
cardVisible: true,
format: (row) => toDate(row?.landed),
columnField: {
component: null,
},
},
{
align: 'left',
name: 'landed',
label: t('module.landed'),
component: 'date',
format: (row) => toDate(row?.landed),
columnField: {
component: null,
},
style: 'color="positive"',
},
{
align: 'left',
name: 'hour',
label: t('module.hour'),
format: ({ hourTheoretical, hourEffective }) =>
dashIfEmpty(hourTheoretical || hourEffective),
},
{
align: 'left',
name: 'agencyName',
label: t('module.agency'),
component: 'select',
cardVisible: true,
attrs: {
url: 'Agencies',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
name: 'total',
label: t('module.total'),
format: ({ total }) => toCurrency(total),
cardVisible: true,
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('InvoiceOutSummary'),
icon: 'preview',
action: (row) => viewSummary(row.id, OrderSummary),
},
],
},
]);
function navigate(id) { async function fetchClientAddress(id, data) {
router.push({ path: `/order/${id}` }); const clientData = await axios.get(`Clients/${id}`);
selectedAddress.value = clientData.data.defaultAddressFk;
data.addressId = selectedAddress.value;
} }
</script> </script>
<template> <template>
<OrderSearchbar /> <VnSearchbar
<RightMenu> data-key="OrderList"
<template #right-panel> :label="t('Search order')"
<OrderFilter data-key="OrderList" /> :info="t('You can search orders by reference')"
/>
<VnTable
ref="tableRef"
data-key="OrderList"
url="Orders/filter"
:create="{
urlCreate: 'Orders/new',
title: 'Create Order',
onDataSaved: (url) => {
tableRef.redirect(url);
},
formInitialData: {
active: true,
addressId: null,
},
}"
:columns="columns"
redirect="order"
auto-load
>
<template #more-create-dialog="{ data }">
<VnSelect
url="Clients"
v-model="data.id"
:label="t('module.customer')"
:options="clientList"
option-value="id"
option-label="name"
@update:model-value="(id) => fetchClientAddress(id, data)"
/>
<VnSelect
url="Clients"
v-model="selectedAddress"
:label="t('module.address')"
:options="selectedAddress"
option-value="defaultAddressFk"
option-label="street"
/>
<VnInputDate v-model="data.landed" :label="t('module.landed')" />
<VnSelect
url="Agencies"
v-model="data.agencyModeId"
:label="t('module.agency')"
:options="agencyList"
option-value="id"
option-label="name"
/>
</template> </template>
</RightMenu> </VnTable>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
data-key="OrderList"
url="Orders/filter"
:limit="20"
:order="['landed DESC', 'clientFk', 'id DESC']"
:user-params="{ showEmpty: false }"
:keep-opts="['userParams']"
auto-load
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:key="row.id"
:id="row.id"
:title="`${row?.clientName} (${row?.clientFk})`"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv
:label="t('order.field.salesPersonFk')"
:title-label="t('order.field.salesPersonFk')"
>
<template #value>
<span class="link" @click.stop>
{{ row?.name || '-' }}
<WorkerDescriptorProxy :id="row?.salesPersonFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.field.clientFk')"
:title-label="t('order.field.clientFk')"
>
<template #value>
<span class="link" @click.stop>
{{ row?.clientName || '-' }}
<CustomerDescriptorProxy :id="row?.clientFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.field.isConfirmed')"
:value="row?.isConfirmed === 1"
/>
<VnLv
:label="t('order.field.created')"
:value="toDate(row?.created)"
/>
<VnLv :label="t('order.field.landed')">
<template #value>
<QBadge text-color="black" color="positive" dense>
{{ toDate(row?.landed) }}
</QBadge>
</template>
</VnLv>
<VnLv
:label="t('order.field.hour')"
:value="row.hourTheoretical || row.hourEffective"
/>
<VnLv
:label="t('order.field.agency')"
:value="row?.agencyName"
/>
<VnLv
:label="t('order.field.total')"
:value="toCurrency(row?.total)"
/>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, OrderSummary)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<RouterLink :to="{ name: 'OrderCreate' }">
<QBtn fab icon="add" color="primary" />
<QTooltip>
{{ t('order.list.newOrder') }}
</QTooltip>
</RouterLink>
</QPageSticky>
</QPage>
</template> </template>

22
src/pages/Order/locale/en.yml Normal file
View File

@ -0,0 +1,22 @@
module:
id: ID
name: Name
customer: Client
isConfirmed: Confirmed
created: Created
landed: Landed
hour: Hour
agency: Agency
total: Total
salesPerson: Sales Person
address: Address
lines:
item: Item
warehouse: Warehouse
shipped: Shipped
quantity: Quantity
price: Price
amount: Amount
image: Image
params:
tagGroups: Tags

22
src/pages/Order/locale/es.yml Normal file
View File

@ -0,0 +1,22 @@
module:
id: ID
name: Nombre
customer: Cliente
isConfirmed: Confirmado
created: Creado
landed: F. Entrega
hour: Hora
agency: Agencia
total: Total
salesPerson: Comercial
address: Dirección
lines:
item: Artículo
warehouse: Almacén
shipped: Envío
quantity: Cantidad
price: Precio
amount: Importe
image: Imagen
params:
tagGroups: Tags

16
src/pages/Parking/Card/ParkingDescriptor.vue
View File

@ -2,7 +2,6 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';
import CardDescriptor from 'components/ui/CardDescriptor.vue'; import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'components/ui/VnLv.vue'; import VnLv from 'components/ui/VnLv.vue';
@ -17,8 +16,7 @@ const props = defineProps({
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const entityId = computed(() => props.id || route.params.id); const entityId = computed(() => props.id || route.params.id);
const { store } = useArrayData('Parking');
const parking = computed(() => store.data);
const filter = { const filter = {
fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'], fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }], include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
@ -29,15 +27,13 @@ const filter = {
module="Parking" module="Parking"
data-key="Parking" data-key="Parking"
:url="`Parkings/${entityId}`" :url="`Parkings/${entityId}`"
:title="parking?.code" title="code"
:subtitle="parking?.id"
:filter="filter" :filter="filter"
@on-fetch="(data) => (parking = data)"
> >
<template #body> <template #body="{ entity }">
<VnLv :label="t('globals.code')" :value="parking.code" /> <VnLv :label="t('globals.code')" :value="entity.code" />
<VnLv :label="t('parking.pickingOrder')" :value="parking.pickingOrder" /> <VnLv :label="t('parking.pickingOrder')" :value="entity.pickingOrder" />
<VnLv :label="t('parking.sector')" :value="parking.sector?.description" /> <VnLv :label="t('parking.sector')" :value="entity.sector?.description" />
</template> </template>
</CardDescriptor> </CardDescriptor>
</template> </template>

26
src/pages/Parking/Card/ParkingSummary.vue
View File

@ -1,10 +1,9 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue'; import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'components/ui/VnLv.vue'; import VnLv from 'components/ui/VnLv.vue';
import { useArrayData } from 'src/composables/useArrayData';
const $props = defineProps({ const $props = defineProps({
id: { id: {
@ -15,9 +14,7 @@ const $props = defineProps({
const router = useRoute(); const router = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const entityId = computed(() => $props.id || router.params.id); const entityId = computed(() => $props.id || router.params.id);
const { store } = useArrayData('Parking');
const parking = ref(store.data);
const filter = { const filter = {
fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'], fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }], include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
@ -26,14 +23,9 @@ const filter = {
<template> <template>
<div class="q-pa-md"> <div class="q-pa-md">
<CardSummary <CardSummary :url="`Parkings/${entityId}`" data-key="Parking" :filter="filter">
:url="`Parkings/${entityId}`" <template #header="{ entity }">{{ entity.code }}</template>
:filter="filter" <template #body="{ entity }">
@on-fetch="(data) => (parking = data)"
data-key="Parking"
>
<template #header>{{ parking.code }}</template>
<template #body>
<QCard class="vn-one"> <QCard class="vn-one">
<QCardSection class="q-pa-none"> <QCardSection class="q-pa-none">
<a <a
@ -44,17 +36,17 @@ const filter = {
<QIcon name="open_in_new" /> <QIcon name="open_in_new" />
</a> </a>
</QCardSection> </QCardSection>
<VnLv :label="t('globals.code')" :value="parking.code" /> <VnLv :label="t('globals.code')" :value="entity.code" />
<VnLv <VnLv
:label="t('parking.pickingOrder')" :label="t('parking.pickingOrder')"
:value="parking.pickingOrder" :value="entity.pickingOrder"
/> />
<VnLv <VnLv
:label="t('parking.sector')" :label="t('parking.sector')"
:value="parking.sector?.description" :value="entity.sector?.description"
/> />
<VnLv :label="t('parking.row')" :value="parking.row" /> <VnLv :label="t('parking.row')" :value="entity.row" />
<VnLv :label="t('parking.column')" :value="parking.column" /> <VnLv :label="t('parking.column')" :value="entity.column" />
</QCard> </QCard>
</template> </template>
</CardSummary> </CardSummary>

94
src/pages/Route/Agency/AgencyList.vue Normal file
View File

@ -0,0 +1,94 @@
<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import VnTable from 'components/VnTable/VnTable.vue';
const { t } = useI18n();
const router = useRouter();
function navigate(id) {
router.push({ path: `/agency/${id}` });
}
const exprBuilder = (param, value) => {
if (!value) return;
if (param !== 'search') return;
if (!isNaN(value)) return { id: value };
return { name: { like: `%${value}%` } };
};
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: 'Id',
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
label: t('globals.name'),
name: 'name',
isTitle: true,
},
{
align: 'left',
label: t('isOwn'),
name: 'isOwn',
component: 'checkbox',
cardVisible: true,
},
{
align: 'left',
label: t('isAnyVolumeAllowed'),
name: 'isAnyVolumeAllowed',
component: 'checkbox',
cardVisible: true,
disable: true,
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('Client ticket list'),
icon: 'preview',
action: (row) => navigate(row.id),
},
],
},
]);
</script>
<template>
<VnSearchbar
:info="t('You can search by name')"
:label="t('Search agency')"
data-key="AgencyList"
:expr-builder="exprBuilder"
/>
<VnTable
ref="tableRef"
data-key="AgencyList"
url="Agencies"
order="name"
:columns="columns"
:right-search="false"
:use-model="true"
redirect="agency"
default-mode="card"
/>
</template>
<i18n>
es:
isOwn: Tiene propietario
isAnyVolumeAllowed: Permite cualquier volumen
Search agency: Buscar agencia
You can search by name: Puedes buscar por nombre
en:
isOwn: Has owner
isAnyVolumeAllowed: Allows any volume
</i18n>

0
src/pages/Agency/Card/AgencyBasicData.vue → src/pages/Route/Agency/Card/AgencyBasicData.vue
View File

2
src/pages/Agency/Card/AgencyCard.vue → src/pages/Route/Agency/Card/AgencyCard.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import AgencyDescriptor from 'pages/Agency/Card/AgencyDescriptor.vue'; import AgencyDescriptor from 'pages/Route/Agency/Card/AgencyDescriptor.vue';
import VnCard from 'components/common/VnCard.vue'; import VnCard from 'components/common/VnCard.vue';
</script> </script>
<template> <template>

0
src/pages/Agency/Card/AgencyDescriptor.vue → src/pages/Route/Agency/Card/AgencyDescriptor.vue
View File

0
src/pages/Agency/Card/AgencyLog.vue → src/pages/Route/Agency/Card/AgencyLog.vue
View File

0
src/pages/Agency/Card/AgencyModes.vue → src/pages/Route/Agency/Card/AgencyModes.vue
View File

10
src/pages/Agency/Card/AgencySummary.vue → src/pages/Route/Agency/Card/AgencySummary.vue
View File

@ -18,12 +18,10 @@ const entityId = computed(() => $props.id || useRoute().params.id);
<template #header="{ entity: agency }">{{ agency.name }}</template> <template #header="{ entity: agency }">{{ agency.name }}</template>
<template #body="{ entity: agency }"> <template #body="{ entity: agency }">
<QCard class="vn-one"> <QCard class="vn-one">
<QCardSection class="q-pa-none"> <VnTitle
<VnTitle :url="`#/agency/${entityId}/basic-data`"
:url="`#/agency/${entityId}/basic-data`" :text="t('globals.pageTitles.basicData')"
:text="t('globals.pageTitles.basicData')" />
/>
</QCardSection>
<VnLv :label="t('globals.name')" :value="agency.name" /> <VnLv :label="t('globals.name')" :value="agency.name" />
<QCheckbox <QCheckbox
:label="t('agency.isOwn')" :label="t('agency.isOwn')"

0
src/pages/Agency/Card/AgencyWorkcenter.vue → src/pages/Route/Agency/Card/AgencyWorkcenter.vue
View File

Some files were not shown because too many files have changed in this diff Show More