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

Merge branch 'branch-PR-2' of https://gitea.verdnatura.es/hyervoni/salix-front-mindshore into hyervoni-branch-PR-2

This commit is contained in:
Alex Moreno 2024-01-09 07:43:29 +01:00
parent b62a317a66 1f12609a05
commit bc8b9501c0
53 changed files with 1862 additions and 857 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/FormModel.vue
View File

@ -135,12 +135,11 @@ async function save() {
await axios.patch($props.urlUpdate || $props.url, body);
}
emit('onDataSaved', formData.value);
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
} catch (err) {
notify('errors.create', 'negative');
}
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
isLoading.value = false;
}

14
src/components/FormModelPopup.vue
View File

@ -62,12 +62,7 @@ const closeForm = () => {
@on-data-saved="onDataSaved()"
>
<template #form="{ data, validate }">
<span
ref="closeButton"
class="absolute cursor-pointer"
style="top: 20px; right: 20px"
v-close-popup
>
<span ref="closeButton" class="close-icon" v-close-popup>
<QIcon name="close" size="sm" />
</span>
<h1 class="title">{{ title }}</h1>
@ -102,4 +97,11 @@ const closeForm = () => {
font-weight: bold;
line-height: 20px;
}
.close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
</style>

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

@ -1,11 +1,10 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import { ref, computed, onMounted } from 'vue';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
allColumns: {
@ -24,17 +23,12 @@ const $props = defineProps({
const emit = defineEmits(['onConfigSaved']);
const { notify } = useNotify();
const state = useState();
const { t } = useI18n();
const popupProxyRef = ref(null);
const user = state.getUser();
const initialUserConfigViewData = ref(null);
const userConfigFilter = {
where: {
tableCode: $props.tableCode,
userFk: user.id,
},
};
const formattedCols = ref([]);
@ -43,16 +37,12 @@ const areAllChecksMarked = computed(() => {
});
const setUserConfigViewData = (data) => {
initialUserConfigViewData.value = data;
if (data.length === 0) return;
formattedCols.value = $props.allColumns.map((col) => {
// Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
const obj = {
name: col,
active: data[0].configuration[col],
};
return obj;
});
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
formattedCols.value = $props.allColumns.map((col) => ({
name: col,
active: data[col],
}));
emitSavedConfig();
};
@ -60,40 +50,95 @@ const toggleMarkAll = (val) => {
formattedCols.value.forEach((col) => (col.active = val));
};
const saveConfig = async () => {
const getConfig = async (url, filter) => {
const response = await axios.get(url, {
params: { filter: filter },
});
return response.data && response.data.length > 0 ? response.data[0] : null;
};
const fetchViewConfigData = async () => {
try {
const data = {
id: initialUserConfigViewData.value[0].id,
userFk: 9,
tableCode: $props.tableCode,
configuration: {},
const userConfigFilter = {
where: { tableCode: $props.tableCode, userFk: user.id },
};
const userConfig = await getConfig('UserConfigViews', userConfigFilter);
formattedCols.value.forEach((col) => {
data.configuration[col.name] = col.active;
});
if (userConfig) {
initialUserConfigViewData.value = userConfig;
setUserConfigViewData(userConfig.configuration);
return;
}
await axios.patch('UserConfigViews', data);
emitSavedConfig();
popupProxyRef.value.hide();
const defaultConfigFilter = { where: { tableCode: $props.tableCode } };
const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
if (defaultConfig) {
setUserConfigViewData(defaultConfig.columns);
return;
}
} catch (err) {
console.error('Error saving user view config');
console.err('Error fetching config view data', err);
}
};
const emitSavedConfig = () => {
const filteredCols = formattedCols.value.filter((col) => col.active);
const mappedCols = filteredCols.map((col) => col.name);
emit('onConfigSaved', mappedCols);
const saveConfig = async () => {
try {
const params = {};
const configuration = {};
formattedCols.value.forEach((col) => {
const { name, active } = col;
configuration[name] = active;
});
// Si existe una view config del usuario hacemos un update si no la creamos
if (initialUserConfigViewData.value) {
params.updates = [
{
data: {
configuration: configuration,
},
where: {
id: initialUserConfigViewData.value.id,
},
},
];
} else {
params.creates = [
{
userFk: user.value.id,
tableCode: $props.tableCode,
tableConfig: $props.tableCode,
configuration: configuration,
},
];
}
const response = await axios.post('UserConfigViews/crud', params);
if (response.data && response.data[0]) {
initialUserConfigViewData.value = response.data[0];
}
emitSavedConfig();
notify('globals.dataSaved', 'positive');
popupProxyRef.value.hide();
} catch (err) {
console.error('Error saving user view config', err);
}
};
const emitSavedConfig = () => {
const activeColumns = formattedCols.value
.filter((col) => col.active)
.map((col) => col.name);
emit('onConfigSaved', activeColumns);
};
onMounted(async () => {
await fetchViewConfigData();
});
</script>
<template>
<fetch-data
v-if="user"
url="UserConfigViews"
:filter="userConfigFilter"
@on-fetch="(data) => setUserConfigViewData(data)"
auto-load
/>
<QBtn color="primary" icon="view_column">
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
@ -108,7 +153,7 @@ const emitSavedConfig = () => {
class="q-mb-sm"
/>
<div
v-if="allColumns.length !== 0 && formattedCols.length !== 0"
v-if="allColumns.length > 0 && formattedCols.length > 0"
class="checks-layout"
>
<QCheckbox
@ -123,6 +168,7 @@ const emitSavedConfig = () => {
}}</QBtn>
</QCard>
</QPopupProxy>
<QTooltip>{{ t('Visible columns') }}</QTooltip>
</QBtn>
</template>
@ -138,3 +184,9 @@ const emitSavedConfig = () => {
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
</i18n>

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

@ -40,6 +40,7 @@ const styleAttrs = computed(() => {
v-model="value"
v-bind="{ ...$attrs, ...styleAttrs }"
type="text"
:class="{ required: $attrs.required }"
>
<template v-if="$slots.prepend" #prepend>
<slot name="prepend" />

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

@ -49,7 +49,7 @@ const toggleForm = () => {
<QIcon
@click.stop.prevent="toggleForm()"
name="add"
size="19px"
size="xs"
class="add-icon"
/>
<QDialog v-model="showForm" transition-show="scale" transition-hide="scale">

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

@ -87,13 +87,14 @@ const value = computed({
hide-selected
fill-input
ref="vnSelectRef"
:class="{ required: $attrs.required }"
>
<template v-if="isClearable" #append>
<QIcon
name="close"
@click.stop="value = null"
class="cursor-pointer"
size="18px"
size="xs"
/>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

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

@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
import { useArrayData } from 'composables/useArrayData';
import toDate from 'filters/toDate';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
const { t } = useI18n();
const props = defineProps({
dataKey: {
@ -39,9 +41,13 @@ const props = defineProps({
type: Array,
default: () => [],
},
customTags: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['refresh', 'clear', 'search', 'init']);
const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
const arrayData = useArrayData(props.dataKey, {
exprBuilder: props.exprBuilder,
@ -104,18 +110,26 @@ async function clearFilters() {
emit('clear');
}
const tags = computed(() => {
return Object.entries(userParams.value)
const tagsList = computed(() =>
Object.entries(userParams.value)
.filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
.map(([key, value]) => ({
label: key,
value: value,
}));
});
}))
);
const tags = computed(() =>
tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
);
const customTags = computed(() =>
tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
);
async function remove(key) {
userParams.value[key] = null;
await search();
emit('remove', key);
}
function formatValue(value) {
@ -171,21 +185,17 @@ function formatValue(value) {
</QItem>
<QItem class="q-mb-sm">
<div
v-if="tags.length === 0"
v-if="tagsList.length === 0"
class="text-grey font-xs text-center full-width"
>
{{ t(`No filters applied`) }}
</div>
<div>
<QChip
:key="chip.label"
@remove="remove(chip.label)"
class="text-dark"
color="primary"
icon="label"
:removable="!unremovableParams.includes(chip.label)"
size="sm"
<VnFilterPanelChip
v-for="chip of tags"
:key="chip.label"
:removable="!unremovableParams.includes(chip.label)"
@remove="remove(chip.label)"
>
<slot name="tags" :tag="chip" :format-fn="formatValue">
<div class="q-gutter-x-xs">
@ -193,7 +203,15 @@ function formatValue(value) {
<span>"{{ chip.value }}"</span>
</div>
</slot>
</QChip>
</VnFilterPanelChip>
<slot
v-if="$slots.customTags"
name="customTags"
:params="userParams"
:tags="customTags"
:format-fn="formatValue"
:search-fn="search"
/>
</div>
</QItem>
<QSeparator />

7
src/components/ui/VnFilterPanelChip.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup></script>
<template>
<QChip class="text-dark" color="primary" icon="label" size="sm" v-bind="$attrs">
<slot />
</QChip>
</template>

25
src/components/ui/VnTree.vue
View File

@ -53,10 +53,11 @@ const fetchNodeLeaves = async (nodeKey) => {
};
const removeNode = (node) => {
const { id, parentFk } = node;
quasar
.dialog({
title: 'Are you sure you want to delete it?',
message: 'Delete department',
title: t('Are you sure you want to delete it?'),
message: t('Delete department'),
ok: {
push: true,
color: 'primary',
@ -65,9 +66,9 @@ const removeNode = (node) => {
})
.onOk(async () => {
try {
await axios.post(`/Departments/${node.id}/removeChild`, node.id);
notify('department.departmentRemoved', 'positive');
await fetchNodeLeaves(node.parentFk);
await axios.post(`/Departments/${id}/removeChild`, id);
notify(t('department.departmentRemoved'), 'positive');
await fetchNodeLeaves(parentFk);
} catch (err) {
console.log('Error removing department');
}
@ -85,7 +86,7 @@ const onNodeCreated = async () => {
const redirectToDepartmentSummary = (id) => {
if (!id) return;
router.push({ name: 'DepartmentSummary', params: { id: id } });
router.push({ name: 'DepartmentSummary', params: { id } });
};
</script>
@ -99,22 +100,22 @@ const redirectToDepartmentSummary = (id) => {
v-model:expanded="expanded"
@update:expanded="onNodeExpanded($event)"
>
<template #default-header="prop">
<template #default-header="{ node }">
<div
class="row justify-between full-width q-pr-md cursor-pointer"
@click.stop="redirectToDepartmentSummary(prop.node.id)"
@click.stop="redirectToDepartmentSummary(node.id)"
>
<span class="text-uppercase">
{{ prop.node.name }}
{{ node.name }}
</span>
<div class="row justify-between" style="max-width: max-content">
<QIcon
v-if="prop.node.id"
v-if="node.id"
name="delete"
color="primary"
size="sm"
class="q-pr-xs cursor-pointer"
@click.stop="removeNode(prop.node)"
@click.stop="removeNode(node)"
>
<QTooltip>
{{ t('Remove') }}
@ -125,7 +126,7 @@ const redirectToDepartmentSummary = (id) => {
color="primary"
size="sm"
class="cursor-pointer"
@click.stop="showCreateNodeForm(prop.node.id)"
@click.stop="showCreateNodeForm(node.id)"
>
<QTooltip>
{{ t('Create') }}

5
src/css/app.scss
View File

@ -53,3 +53,8 @@ body.body--dark {
color: var(--vn-text);
border-radius: 8px;
}
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
content: ' *';
}

8
src/filters/dateRange.js Normal file
View File

@ -0,0 +1,8 @@
export default function dateRange(value) {
const minHour = new Date(value);
minHour.setHours(0, 0, 0, 0);
const maxHour = new Date(value);
maxHour.setHours(23, 59, 59, 59);
return [minHour, maxHour];
}

2
src/filters/index.js
View File

@ -7,6 +7,7 @@ import toCurrency from './toCurrency';
import toPercentage from './toPercentage';
import toLowerCamel from './toLowerCamel';
import dashIfEmpty from './dashIfEmpty';
import dateRange from './dateRange';
export {
toLowerCase,
@ -18,4 +19,5 @@ export {
toCurrency,
toPercentage,
dashIfEmpty,
dateRange,
};

17
src/i18n/en/index.js
View File

@ -62,6 +62,7 @@ export default {
selectRows: 'Select all { numberRows } row(s)',
allRows: 'All { numberRows } row(s)',
markAll: 'Mark all',
noResults: 'No results'
},
errors: {
statusUnauthorized: 'Access denied',
@ -115,7 +116,20 @@ export default {
defaulter: 'Defaulter',
createCustomer: 'Create customer',
summary: 'Summary',
basicData: 'Basic Data',
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',
others: 'Others',
},
list: {
phone: 'Phone',
@ -605,6 +619,7 @@ export default {
basicData: 'Basic Data',
catalog: 'Catalog',
volume: 'Volume',
lines: 'Lines',
},
field: {
salesPersonFk: 'Sales Person',

19
src/i18n/es/index.js
View File

@ -62,6 +62,7 @@ export default {
selectRows: 'Seleccionar las { numberRows } filas(s)',
allRows: 'Todo { numberRows } filas(s)',
markAll: 'Marcar todo',
noResults: 'Sin resultados',
},
errors: {
statusUnauthorized: 'Acceso denegado',
@ -114,8 +115,21 @@ export default {
notifications: 'Notificaciones',
defaulter: 'Morosos',
createCustomer: 'Crear cliente',
basicData: 'Datos básicos',
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',
others: 'Otros',
},
list: {
phone: 'Teléfono',
@ -513,6 +527,7 @@ export default {
basicData: 'Datos básicos',
catalog: 'Catálogo',
volume: 'Volumen',
lines: 'Líneas',
},
field: {
salesPersonFk: 'Comercial',
@ -841,7 +856,7 @@ export default {
payDeadline: 'Plazo de pago',
payDay: 'Día de pago',
account: 'Cuenta',
fiscalData: 'Data fiscal',
fiscalData: 'Datos fiscales',
sageTaxType: 'Tipo de impuesto Sage',
sageTransactionType: 'Tipo de transacción Sage',
sageWithholding: 'Retención sage',

3
src/pages/Customer/Card/CustomerBalance.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Balance</div>
</template>

3
src/pages/Customer/Card/CustomerBillingData.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Billing data</div>
</template>

3
src/pages/Customer/Card/CustomerConsignees.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Consignees</div>
</template>

3
src/pages/Customer/Card/CustomerCreditManagement.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Credit management</div>
</template>

3
src/pages/Customer/Card/CustomerCredits.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Credits</div>
</template>

3
src/pages/Customer/Card/CustomerFiscalData.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Fiscal data</div>
</template>

3
src/pages/Customer/Card/CustomerGreuges.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Greuges</div>
</template>

3
src/pages/Customer/Card/CustomerLog.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Log</div>
</template>

3
src/pages/Customer/Card/CustomerNotes.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Notes</div>
</template>

3
src/pages/Customer/Card/CustomerOthers.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Others</div>
</template>

3
src/pages/Customer/Card/CustomerRecoveries.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Recoveries</div>
</template>

3
src/pages/Customer/Card/CustomerSms.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Sms</div>
</template>

3
src/pages/Customer/Card/CustomerWebAccess.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<div class="flex justify-center">Web access</div>
</template>

51
src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'filters/index';
const $props = defineProps({
amount: {
type: Number,
required: true,
},
});
const { t } = useI18n();
</script>
<template>
<div class="card_balance q-px-md q-py-sm q-my-sm">
<h6 class="title_balance text-center">{{ t('Total') }}</h6>
<div class="row">
<p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
<b class="value_balance">
{{ toCurrency($props.amount) }}
</b>
</div>
</div>
</template>
<style lang="scss">
.card_balance {
border: 1px solid black;
}
.title_balance {
color: var(--vn-text);
margin-top: 0;
margin-bottom: 0;
}
.key_balance {
color: var(--vn-label);
margin-bottom: 0;
}
.value_balance {
color: var(--vn-text);
margin-bottom: 0;
}
</style>
<i18n>
es:
Total: Total
Balance due: Saldo vencido
</i18n>

185
src/pages/Customer/Defaulter/CustomerDefaulter.vue
View File

@ -4,11 +4,12 @@ import { useI18n } from 'vue-i18n';
import { QBtn, QCheckbox } from 'quasar';
import { toCurrency, toDate } from 'filters/index';
import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency, toDate } from 'filters/index';
import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
@ -16,6 +17,7 @@ const { t } = useI18n();
const stateStore = useStateStore();
const arrayData = ref(null);
const balanceDueTotal = ref(0);
onBeforeMount(async () => {
arrayData.value = useArrayData('CustomerDefaulter', {
@ -23,33 +25,40 @@ onBeforeMount(async () => {
limit: 0,
});
await arrayData.value.fetch({ append: false });
balanceDueTotal.value = arrayData.value.store.data.reduce(
(accumulator, currentValue) => {
return accumulator + (currentValue['amount'] || 0);
},
0
);
console.log(balanceDueTotal.value);
stateStore.rightDrawer = true;
});
const rows = computed(() => arrayData.value.store.data);
const selected = ref([]);
const worderId = ref(0);
const workerId = ref(0);
const customerId = ref(0);
const tableColumnComponents = {
client: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectClientId(prop.row.clientFk),
event: ({ row }) => selectCustomerId(row.clientFk),
},
isWorker: {
component: QCheckbox,
props: (prop) => ({
props: ({ value }) => ({
disable: true,
'model-value': Boolean(prop.value),
'model-value': Boolean(value),
}),
event: () => {},
},
salesperson: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectSalespersonId(prop.row.salesPersonFk),
event: ({ row }) => selectWorkerId(row.salesPersonFk),
},
country: {
component: 'span',
@ -69,7 +78,7 @@ const tableColumnComponents = {
author: {
component: QBtn,
props: () => ({ flat: true, color: 'blue' }),
event: (prop) => selectAuthorId(prop.row.workerFk),
event: ({ row }) => selectWorkerId(row.workerFk),
},
lastObservation: {
component: 'span',
@ -93,90 +102,83 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
align: 'left',
field: 'clientName',
label: t('Client'),
name: 'client',
},
{
align: 'left',
field: 'isWorker',
label: t('Is worker'),
name: 'isWorker',
},
{
align: 'left',
field: 'salesPersonName',
label: t('Salesperson'),
name: 'salesperson',
},
{
align: 'left',
field: 'country',
label: t('Country'),
name: 'country',
},
{
align: 'left',
field: 'payMethod',
label: t('P. Method'),
name: 'paymentMethod',
},
{
align: 'left',
field: (row) => toCurrency(row.amount),
label: t('Balance D.'),
name: 'balance',
},
{
align: 'left',
field: 'workerName',
label: t('Author'),
name: 'author',
},
{
align: 'left',
field: 'observation',
label: t('Last observation'),
name: 'lastObservation',
},
{
align: 'left',
field: (row) => toDate(row.created),
label: t('L. O. Date'),
name: 'date',
},
{
align: 'left',
field: (row) => toCurrency(row.creditInsurance),
label: t('Credit I.'),
name: 'credit',
},
{
align: 'left',
field: (row) => toDate(row.defaulterSinced),
label: t('From'),
name: 'from',
},
];
});
const columns = computed(() => [
{
align: 'left',
field: 'clientName',
label: t('Client'),
name: 'client',
},
{
align: 'left',
field: 'isWorker',
label: t('Is worker'),
name: 'isWorker',
},
{
align: 'left',
field: 'salesPersonName',
label: t('Salesperson'),
name: 'salesperson',
},
{
align: 'left',
field: 'country',
label: t('Country'),
name: 'country',
},
{
align: 'left',
field: 'payMethod',
label: t('P. Method'),
name: 'paymentMethod',
},
{
align: 'left',
field: ({ amount }) => toCurrency(amount),
label: t('Balance D.'),
name: 'balance',
},
{
align: 'left',
field: 'workerName',
label: t('Author'),
name: 'author',
},
{
align: 'left',
field: 'observation',
label: t('Last observation'),
name: 'lastObservation',
},
{
align: 'left',
field: ({ created }) => toDate(created),
label: t('L. O. Date'),
name: 'date',
},
{
align: 'left',
field: ({ creditInsurance }) => toCurrency(creditInsurance),
label: t('Credit I.'),
name: 'credit',
},
{
align: 'left',
field: ({ defaulterSinced }) => toDate(defaulterSinced),
label: t('From'),
name: 'from',
},
]);
const selectClientId = (id) => {
worderId.value = 0;
const selectCustomerId = (id) => {
workerId.value = 0;
customerId.value = id;
};
const selectSalespersonId = (id) => {
const selectWorkerId = (id) => {
customerId.value = 0;
worderId.value = id;
};
const selectAuthorId = (id) => {
customerId.value = 0;
worderId.value = id;
workerId.value = id;
};
</script>
@ -188,7 +190,9 @@ const selectAuthorId = (id) => {
</QDrawer>
<QToolbar class="bg-vn-dark">
<div id="st-data"></div>
<div id="st-data">
<CustomerBalanceDueTotal :amount="balanceDueTotal" />
</div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
@ -204,11 +208,6 @@ const selectAuthorId = (id) => {
selection="multiple"
v-model:selected="selected"
>
<template #top>
<div v-if="rows" class="full-width flex justify-end">
{{ `${rows.length} ${t('route.cmr.list.results')}` }}
</div>
</template>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">
@ -220,7 +219,7 @@ const selectAuthorId = (id) => {
>
{{ props.value }}
<WorkerDescriptorProxy v-if="worderId" :id="worderId" />
<WorkerDescriptorProxy v-if="workerId" :id="workerId" />
<CustomerDescriptorProxy v-else :id="customerId" />
</component>
</QTr>

416
src/pages/Customer/ExtendedList/CustomerExtendedList.vue
View File

@ -262,215 +262,213 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
align: 'left',
field: '',
label: '',
name: 'customerStatus',
format: () => ' ',
},
{
align: 'left',
field: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id',
},
{
align: 'left',
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
},
{
align: 'left',
field: 'salesPerson',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
},
{
align: 'left',
field: 'credit',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
},
{
align: 'left',
field: 'creditInsurance',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
},
{
align: 'left',
field: 'phone',
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
},
{
align: 'left',
field: 'street',
label: t('customer.extendedList.tableVisibleColumns.street'),
name: 'street',
},
{
align: 'left',
field: 'country',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
name: 'countryFk',
},
{
align: 'left',
field: 'province',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
},
{
align: 'left',
field: 'city',
label: t('customer.extendedList.tableVisibleColumns.city'),
name: 'city',
},
{
align: 'left',
field: 'postcode',
label: t('customer.extendedList.tableVisibleColumns.postcode'),
name: 'postcode',
},
{
align: 'left',
field: 'email',
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
},
{
align: 'left',
field: 'created',
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: (value) => toDate(value),
},
{
align: 'left',
field: 'businessType',
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
name: 'businessTypeFk',
},
{
align: 'left',
field: 'payMethod',
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
name: 'payMethodFk',
},
{
align: 'left',
field: 'sageTaxType',
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
name: 'sageTaxTypeFk',
},
{
align: 'left',
field: 'sageTransactionType',
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
name: 'sageTransactionTypeFk',
},
{
align: 'left',
field: 'isActive',
label: t('customer.extendedList.tableVisibleColumns.isActive'),
name: 'isActive',
format: () => ' ',
},
{
align: 'left',
field: 'isVies',
label: t('customer.extendedList.tableVisibleColumns.isVies'),
name: 'isVies',
format: () => ' ',
},
{
align: 'left',
field: 'isTaxDataChecked',
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
name: 'isTaxDataChecked',
format: () => ' ',
},
{
align: 'left',
field: 'isEqualizated',
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
name: 'isEqualizated',
format: () => ' ',
},
{
align: 'left',
field: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
name: 'isFreezed',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoice',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
name: 'hasToInvoice',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoiceByAddress',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
name: 'hasToInvoiceByAddress',
format: () => ' ',
},
{
align: 'left',
field: 'isToBeMailed',
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
name: 'isToBeMailed',
format: () => ' ',
},
{
align: 'left',
field: 'hasLcr',
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
name: 'hasLcr',
format: () => ' ',
},
{
align: 'left',
field: 'hasCoreVnl',
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
name: 'hasCoreVnl',
format: () => ' ',
},
{
align: 'left',
field: 'hasSepaVnl',
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
name: 'hasSepaVnl',
format: () => ' ',
},
{
align: 'right',
field: 'actions',
label: '',
name: 'actions',
},
];
});
const columns = computed(() => [
{
align: 'left',
field: '',
label: '',
name: 'customerStatus',
format: () => ' ',
},
{
align: 'left',
field: 'id',
label: t('customer.extendedList.tableVisibleColumns.id'),
name: 'id',
},
{
align: 'left',
field: 'name',
label: t('customer.extendedList.tableVisibleColumns.name'),
name: 'name',
},
{
align: 'left',
field: 'fi',
label: t('customer.extendedList.tableVisibleColumns.fi'),
name: 'fi',
},
{
align: 'left',
field: 'salesPerson',
label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
name: 'salesPersonFk',
},
{
align: 'left',
field: 'credit',
label: t('customer.extendedList.tableVisibleColumns.credit'),
name: 'credit',
},
{
align: 'left',
field: 'creditInsurance',
label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
name: 'creditInsurance',
},
{
align: 'left',
field: 'phone',
label: t('customer.extendedList.tableVisibleColumns.phone'),
name: 'phone',
},
{
align: 'left',
field: 'mobile',
label: t('customer.extendedList.tableVisibleColumns.mobile'),
name: 'mobile',
},
{
align: 'left',
field: 'street',
label: t('customer.extendedList.tableVisibleColumns.street'),
name: 'street',
},
{
align: 'left',
field: 'country',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
name: 'countryFk',
},
{
align: 'left',
field: 'province',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
},
{
align: 'left',
field: 'city',
label: t('customer.extendedList.tableVisibleColumns.city'),
name: 'city',
},
{
align: 'left',
field: 'postcode',
label: t('customer.extendedList.tableVisibleColumns.postcode'),
name: 'postcode',
},
{
align: 'left',
field: 'email',
label: t('customer.extendedList.tableVisibleColumns.email'),
name: 'email',
},
{
align: 'left',
field: 'created',
label: t('customer.extendedList.tableVisibleColumns.created'),
name: 'created',
format: (value) => toDate(value),
},
{
align: 'left',
field: 'businessType',
label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
name: 'businessTypeFk',
},
{
align: 'left',
field: 'payMethod',
label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
name: 'payMethodFk',
},
{
align: 'left',
field: 'sageTaxType',
label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
name: 'sageTaxTypeFk',
},
{
align: 'left',
field: 'sageTransactionType',
label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
name: 'sageTransactionTypeFk',
},
{
align: 'left',
field: 'isActive',
label: t('customer.extendedList.tableVisibleColumns.isActive'),
name: 'isActive',
format: () => ' ',
},
{
align: 'left',
field: 'isVies',
label: t('customer.extendedList.tableVisibleColumns.isVies'),
name: 'isVies',
format: () => ' ',
},
{
align: 'left',
field: 'isTaxDataChecked',
label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
name: 'isTaxDataChecked',
format: () => ' ',
},
{
align: 'left',
field: 'isEqualizated',
label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
name: 'isEqualizated',
format: () => ' ',
},
{
align: 'left',
field: 'isFreezed',
label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
name: 'isFreezed',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoice',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
name: 'hasToInvoice',
format: () => ' ',
},
{
align: 'left',
field: 'hasToInvoiceByAddress',
label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
name: 'hasToInvoiceByAddress',
format: () => ' ',
},
{
align: 'left',
field: 'isToBeMailed',
label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
name: 'isToBeMailed',
format: () => ' ',
},
{
align: 'left',
field: 'hasLcr',
label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
name: 'hasLcr',
format: () => ' ',
},
{
align: 'left',
field: 'hasCoreVnl',
label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
name: 'hasCoreVnl',
format: () => ' ',
},
{
align: 'left',
field: 'hasSepaVnl',
label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
name: 'hasSepaVnl',
format: () => ' ',
},
{
align: 'right',
field: 'actions',
label: '',
name: 'actions',
},
]);
const stopEventPropagation = (event, col) => {
if (!['id', 'salesPersonFk'].includes(col.name)) return;

49
src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
View File

@ -7,6 +7,7 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import { dateRange } from 'src/filters';
const props = defineProps({
dataKey: {
@ -32,6 +33,48 @@ const sageTransactionTypesOptions = ref([]);
const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
const exprBuilder = (param, value) => {
switch (param) {
case 'created':
return {
'c.created': {
between: dateRange(value),
},
};
case 'id':
case 'name':
case 'socialName':
case 'fi':
case 'credit':
case 'creditInsurance':
case 'phone':
case 'mobile':
case 'street':
case 'city':
case 'postcode':
case 'email':
case 'isActive':
case 'isVies':
case 'isTaxDataChecked':
case 'isEqualizated':
case 'isFreezed':
case 'hasToInvoice':
case 'hasToInvoiceByAddress':
case 'isToBeMailed':
case 'hasSepaVnl':
case 'hasLcr':
case 'hasCoreVnl':
case 'countryFk':
case 'provinceFk':
case 'salesPersonFk':
case 'businessTypeFk':
case 'payMethodFk':
case 'sageTaxTypeFk':
case 'sageTransactionTypeFk':
return { [`c.${param}`]: value };
}
};
const shouldRenderColumn = (colName) => {
return visibleColumnsSet.value.has(colName);
};
@ -88,7 +131,11 @@ const shouldRenderColumn = (colName) => {
auto-load
@on-fetch="(data) => (sageTransactionTypesOptions = data)"
/>
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:expr-builder="exprBuilder"
>
<template #tags="{ tag, formatFn }">
<div class="q-gutter-x-xs">
<strong

71
src/pages/Customer/Notifications/CustomerNotifications.vue
View File

@ -57,40 +57,38 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
align: 'left',
field: 'id',
label: t('Identifier'),
name: 'id',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
},
{
align: 'left',
field: 'city',
label: t('City'),
name: 'city',
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
name: 'phone',
},
{
align: 'left',
field: 'email',
label: t('Email'),
name: 'email',
},
];
});
const columns = computed(() => [
{
align: 'left',
field: 'id',
label: t('Identifier'),
name: 'id',
},
{
align: 'left',
field: 'socialName',
label: t('Social name'),
name: 'socialName',
},
{
align: 'left',
field: 'city',
label: t('City'),
name: 'city',
},
{
align: 'left',
field: 'phone',
label: t('Phone'),
name: 'phone',
},
{
align: 'left',
field: 'email',
label: t('Email'),
name: 'email',
},
]);
const selectCustomerId = (id) => {
selectedCustomerId.value = id;
@ -121,11 +119,6 @@ const selectCustomerId = (id) => {
selection="multiple"
v-model:selected="selected"
>
<template #top>
<div v-if="rows" class="full-width flex justify-end">
{{ `${rows.length} ${t('route.cmr.list.results')}` }}
</div>
</template>
<template #body-cell="props">
<QTd :props="props">
<QTr :props="props" class="cursor-pointer">

17
src/pages/Entry/EntryCreate.vue
View File

@ -60,13 +60,14 @@ const companiesOptions = ref([]);
<template #form="{ data, validate }">
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter
:label="t('Supplier *')"
:label="t('Supplier')"
class="full-width"
v-model="data.supplierFk"
:options="suppliersOptions"
option-value="id"
option-label="nickname"
hide-selected
:required="true"
:rules="validate('entry.supplierFk')"
>
<template #option="scope">
@ -83,7 +84,7 @@ const companiesOptions = ref([]);
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter
:label="t('Travel *')"
:label="t('Travel')"
class="full-width"
v-model="data.travelFk"
:options="travelsOptionsOptions"
@ -91,6 +92,7 @@ const companiesOptions = ref([]);
option-label="warehouseInName"
map-options
hide-selected
:required="true"
:rules="validate('entry.travelFk')"
>
<template #option="scope">
@ -111,7 +113,7 @@ const companiesOptions = ref([]);
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelectFilter
:label="t('Company *')"
:label="t('Company')"
class="full-width"
v-model="data.companyFk"
:options="companiesOptions"
@ -119,6 +121,7 @@ const companiesOptions = ref([]);
option-label="code"
map-options
hide-selected
:required="true"
:rules="validate('entry.companyFk')"
/>
</VnRow>
@ -129,7 +132,7 @@ const companiesOptions = ref([]);
<i18n>
es:
Supplier *: Proveedor *
Travel *: Envío *
Company *: Empresa *
</i18n>
Supplier: Proveedor
Travel: Envío
Company: Empresa
</i18n>

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

@ -49,30 +49,28 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{
label: t('invoiceOut.globalInvoices.table.client'),
field: 'clientName',
name: 'clientName',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.addressId'),
field: 'id',
name: 'id',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.streetAddress'),
field: 'nickname',
name: 'nickname',
align: 'left',
},
{ label: 'Error', field: 'message', name: 'message', align: 'left' },
];
});
const columns = computed(() => [
{ label: 'Id', field: 'clientId', name: 'clientId', align: 'left' },
{
label: t('invoiceOut.globalInvoices.table.client'),
field: 'clientName',
name: 'clientName',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.addressId'),
field: 'id',
name: 'id',
align: 'left',
},
{
label: t('invoiceOut.globalInvoices.table.streetAddress'),
field: 'nickname',
name: 'nickname',
align: 'left',
},
{ label: 'Error', field: 'message', name: 'message', align: 'left' },
]);
const rows = computed(() => {
if (!errors && !errors.length > 0) return [];

12
src/pages/Order/Card/OrderBasicData.vue
View File

@ -1,12 +0,0 @@
<script setup>
import OrderForm from 'pages/Order/Card/OrderForm.vue';
</script>
<template>
<QToolbar>
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<OrderForm />
</template>
<style lang="scss" scoped></style>

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

@ -15,9 +15,7 @@ const stateStore = useStateStore();
</QDrawer>
<QPageContainer>
<QPage>
<div class="q-pa-md">
<RouterView></RouterView>
</div>
<RouterView></RouterView>
</QPage>
</QPageContainer>
</template>

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

@ -1,11 +1,14 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';
import VnInput from 'components/common/VnInput.vue';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
const { t } = useI18n();
const route = useRoute();
@ -14,6 +17,10 @@ const props = defineProps({
type: String,
required: true,
},
tags: {
type: Array,
required: true,
},
});
const categoryList = ref(null);
@ -21,16 +28,41 @@ const selectedCategoryFk = ref(null);
const typeList = ref(null);
const selectedTypeFk = ref(null);
const selectCategory = (params, category) => {
const resetCategory = () => {
selectedCategoryFk.value = null;
typeList.value = null;
};
const selectedOrder = ref(null);
const orderList = [
{ way: 'ASC', name: 'Ascendant' },
{ way: 'DESC', name: 'Descendant' },
];
const selectedOrderField = ref(null);
const OrderFields = [
{ field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
{ field: 'showOrder, price', name: 'Color and price', priority: 999 },
{ field: 'name', name: 'Name', priority: 999 },
{ field: 'price', name: 'Price', priority: 999 },
];
const clearFilter = (key) => {
if (key === 'categoryFk') {
resetCategory();
}
};
const selectCategory = (params, category, search) => {
if (params.categoryFk === category?.id) {
selectedCategoryFk.value = null;
resetCategory();
params.categoryFk = null;
typeList.value = null;
} else {
selectedCategoryFk.value = category?.id;
params.categoryFk = category?.id;
loadTypes(category?.id);
}
search();
};
const loadTypes = async (categoryFk) => {
@ -48,6 +80,11 @@ const onFilterInit = async ({ params }) => {
await loadTypes(params.categoryFk);
selectedCategoryFk.value = params.categoryFk;
}
if (params.orderBy) {
orderByParam.value = JSON.parse(params.orderBy);
selectedOrder.value = orderByParam.value?.way;
selectedOrderField.value = orderByParam.value?.field;
}
};
const selectedCategory = computed(() =>
@ -65,9 +102,65 @@ function exprBuilder(param, value) {
case 'categoryFk':
case 'typeFk':
return { [param]: value };
case 'search':
return { 'i.name': { like: `%${value}%` } };
}
}
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref(null);
const isButtonDisabled = computed(
() => !selectedTag.value || tagValues.value.some((item) => !item.value)
);
const applyTagFilter = (params, search) => {
if (!tagValues.value?.length) {
params.tagGroups = null;
search();
return;
}
if (!params.tagGroups) {
params.tagGroups = [];
}
params.tagGroups.push(
JSON.stringify({
values: tagValues.value,
tagSelection: {
...selectedTag.value,
orgShowField: selectedTag.value.name,
},
tagFk: selectedTag.value.tagFk,
})
);
search();
selectedTag.value = null;
tagValues.value = [{}];
};
const removeTagChip = (selection, params, search) => {
if (params.tagGroups) {
params.tagGroups = (params.tagGroups || []).filter(
(value) => value !== selection
);
}
search();
};
const orderByParam = ref(null);
const onOrderFieldChange = (value, params, search) => {
const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
params.orderBy = JSON.stringify(orderBy);
search();
};
const onOrderChange = (value, params, search) => {
const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
params.orderBy = JSON.stringify(orderBy);
search();
};
const setCategoryList = (data) => {
categoryList.value = (data || [])
.filter((category) => category.display)
@ -88,10 +181,11 @@ const getCategoryClass = (category, params) => {
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:hidden-tags="['orderFk', 'orderBy']"
:expr-builder="exprBuilder"
:custom-tags="['tagGroups']"
@init="onFilterInit"
@remove="clearFilter"
>
<template #tags="{ tag, formatFn }">
<strong v-if="tag.label === 'categoryFk'">
@ -105,8 +199,27 @@ const getCategoryClass = (category, params) => {
<span>{{ formatFn(tag.value) }}</span>
</div>
</template>
<template #body="{ params }">
<QList dense>
<template #customTags="{ tags: customTags, params, searchFn }">
<template v-for="tag in customTags" :key="tag.label">
<template v-if="tag.label === 'tagGroups'">
<VnFilterPanelChip
v-for="chip in tag.value"
:key="chip"
removable
@remove="removeTagChip(chip, params, searchFn)"
>
<strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
<span>{{
(JSON.parse(chip).values || [])
.map((item) => item.value)
.join(' | ')
}}</span>
</VnFilterPanelChip>
</template>
</template>
</template>
<template #body="{ params, searchFn }">
<QList dense style="max-width: 256px">
<QItem class="category-filter q-mt-md">
<div
v-for="category in categoryList"
@ -116,7 +229,7 @@ const getCategoryClass = (category, params) => {
<QIcon
:name="category.icon"
class="category-icon"
@click="selectCategory(params, category)"
@click="selectCategory(params, category, searchFn)"
>
<QTooltip>
{{ t(category.name) }}
@ -124,7 +237,7 @@ const getCategoryClass = (category, params) => {
</QIcon>
</div>
</QItem>
<QItem class="q-mt-md">
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.type')"
@ -138,7 +251,12 @@ const getCategoryClass = (category, params) => {
emit-value
use-input
:disable="!selectedCategoryFk"
@update:model-value="(value) => (selectedTypeFk = value)"
@update:model-value="
(value) => {
selectedTypeFk = value;
searchFn();
}
"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
@ -153,6 +271,130 @@ const getCategoryClass = (category, params) => {
</VnSelectFilter>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-my-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrder"
:options="orderList || []"
option-value="way"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnSelectFilter
:label="t('params.order')"
v-model="selectedOrderField"
:options="OrderFields || []"
option-value="field"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
:is-clearable="false"
@update:model-value="
(value) => onOrderFieldChange(value, params, searchFn)
"
/>
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-mt-md">
<QItemSection>
<VnSelectFilter
:label="t('params.tag')"
v-model="selectedTag"
:options="props.tags || []"
option-value="id"
option-label="name"
dense
outlined
rounded
:emit-value="false"
use-input
/>
</QItemSection>
</QItem>
<QItem
v-for="(value, index) in tagValues"
:key="value"
class="q-mt-md filter-value"
>
<VnInput
v-if="selectedTag?.isFree"
v-model="value.value"
:label="t('params.value')"
is-outlined
class="filter-input"
/>
<VnSelectFilter
v-else
:label="t('params.value')"
v-model="value.value"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
outlined
rounded
emit-value
use-input
:disable="!selectedTag"
class="filter-input"
/>
<FetchData
v-if="selectedTag && !selectedTag.isFree"
:url="`Tags/${selectedTag?.id}/filterValue`"
limit="30"
auto-load
@on-fetch="(data) => (tagOptions = data)"
/>
<QIcon
name="delete"
class="filter-icon"
@click="(tagValues || []).splice(index, 1)"
/>
</QItem>
<QItem class="q-mt-lg">
<QIcon
name="add_circle"
class="filter-icon"
@click="tagValues.push({})"
/>
</QItem>
<QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
class="full-width"
color="primary"
dense
icon="search"
rounded
type="button"
unelevated
:disable="isButtonDisabled"
@click.stop="applyTagFilter(params, searchFn)"
/>
</QItemSection>
</QItem>
<QSeparator />
</QList>
</template>
</VnFilterPanel>
@ -180,12 +422,29 @@ const getCategoryClass = (category, params) => {
.category-icon {
border-radius: 50%;
background-color: var(--vn-label);
background-color: var(--vn-light-gray);
font-size: 2.6rem;
padding: 8px;
cursor: pointer;
}
}
.filter-icon {
font-size: 24px;
color: $primary;
padding: 0 4px;
cursor: pointer;
}
.filter-input {
flex-shrink: 1;
min-width: 0;
}
.filter-value {
display: flex;
align-items: center;
}
</style>
<i18n>
@ -193,10 +452,16 @@ en:
params:
type: Type
orderBy: Order By
tag: Tag
value: Value
order: Order
es:
params:
type: Tipo
orderBy: Ordenar por
tag: Etiqueta
value: Valor
order: Orden
Plant: Planta
Flower: Flor
Handmade: Confección

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

@ -24,7 +24,7 @@ const dialog = ref(null);
<template>
<div class="container order-catalog-item overflow-hidden">
<div class="card shadow-6 bg-dark">
<QCard class="card shadow-6">
<div class="img-wrapper">
<QImg
:src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
@ -76,7 +76,7 @@ const dialog = ref(null);
</p>
</div>
</div>
</div>
</QCard>
</div>
</template>

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

@ -10,6 +10,7 @@ import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.v
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import FetchData from 'components/FetchData.vue';
const DEFAULT_ITEMS = 0;
@ -66,9 +67,16 @@ const setData = (entity) => {
const getConfirmationValue = (isConfirmed) => {
return t(isConfirmed ? 'order.summary.confirmed' : 'order.summary.notConfirmed');
};
const total = ref(null);
</script>
<template>
<FetchData
:url="`Orders/${entityId}/getTotal`"
@on-fetch="(response) => (total = response)"
auto-load
/>
<CardDescriptor
ref="descriptor"
:url="`Orders/${entityId}`"
@ -102,7 +110,7 @@ const getConfirmationValue = (isConfirmed) => {
:label="t('order.summary.items')"
:value="(entity?.rows?.length || DEFAULT_ITEMS).toString()"
/>
<VnLv :label="t('order.summary.total')" :value="toCurrency(entity?.total)" />
<VnLv :label="t('order.summary.total')" :value="toCurrency(total)" />
</template>
<template #actions="{ entity }">
<QCardActions>

8
src/pages/Order/Card/OrderDescriptorMenu.vue
View File

@ -51,13 +51,13 @@ async function remove() {
<i18n>
en:
deleteOrder: Delete order,
confirmDeletion: Confirm deletion,
deleteOrder: Delete order
confirmDeletion: Confirm deletion
confirmDeletionMessage: Are you sure you want to delete this order?
es:
deleteOrder: Eliminar pedido,
confirmDeletion: Confirmar eliminación,
deleteOrder: Eliminar pedido
confirmDeletion: Confirmar eliminación
confirmDeletionMessage: Seguro que quieres eliminar este pedido?
</i18n>

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

@ -65,8 +65,8 @@ const fetchAgencyList = async (landed, addressFk) => {
};
const fetchOrderDetails = (order) => {
fetchAddressList(order?.addressFk)
fetchAgencyList(order?.landed, order?.addressFk)
fetchAddressList(order?.addressFk);
fetchAgencyList(order?.landed, order?.addressFk);
};
const orderMapper = (order) => {
@ -105,7 +105,7 @@ const orderFilter = {
</script>
<template>
<QToolbar>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
@ -116,94 +116,97 @@ const orderFilter = {
:filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
auto-load
/>
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null"
:url-create="isNew ? 'Orders/new' : null"
:model="ORDER_MODEL"
:form-initial-data="isNew ? initialFormState : null"
:observe-form-changes="!isNew"
:mapper="isNew ? orderMapper : null"
:filter="orderFilter"
@on-fetch="fetchOrderDetails"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.clientFk')"
v-model="data.clientFk"
:options="clientList"
option-value="id"
option-label="name"
hide-selected
@update:model-value="
(client) => fetchAddressList(client.defaultAddressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ `${scope.opt.id}: ${scope.opt.name}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('order.form.addressFk')"
v-model="data.addressFk"
:options="addressList"
option-value="id"
option-label="nickname"
hide-selected
:disable="!addressList?.length"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{
`${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
placeholder="dd-mm-aaa"
:label="t('order.form.landed')"
v-model="data.landed"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.agencyModeFk')"
v-model="data.agencyModeFk"
:options="agencyList"
option-value="agencyModeFk"
option-label="agencyMode"
hide-selected
:disable="!agencyList?.length"
>
</VnSelectFilter>
</div>
</VnRow>
</template>
</FormModel>
<div class="q-pa-md">
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null"
:url-create="isNew ? 'Orders/new' : null"
:model="ORDER_MODEL"
:form-initial-data="isNew ? initialFormState : null"
:observe-form-changes="!isNew"
:mapper="isNew ? orderMapper : null"
:filter="orderFilter"
@on-fetch="fetchOrderDetails"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.clientFk')"
v-model="data.clientFk"
:options="clientList"
option-value="id"
option-label="name"
hide-selected
@update:model-value="
(client) => fetchAddressList(client.defaultAddressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ `${scope.opt.id}: ${scope.opt.name}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('order.form.addressFk')"
v-model="data.addressFk"
:options="addressList"
option-value="id"
option-label="nickname"
hide-selected
:disable="!addressList?.length"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{
`${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
placeholder="dd-mm-aaa"
:label="t('order.form.landed')"
v-model="data.landed"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.agencyModeFk')"
v-model="data.agencyModeFk"
:options="agencyList"
option-value="agencyModeFk"
option-label="agencyMode"
hide-selected
:disable="!agencyList?.length"
>
</VnSelectFilter>
</div>
</VnRow>
</template>
</FormModel>
</div>
</template>

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

@ -56,148 +56,161 @@ const detailsColumns = ref([
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<OrderSearchbar />
</Teleport>
<CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
<template #header="{ entity }">
{{ t('order.summary.basket') }} #{{ entity?.id }} -
{{ entity?.client?.name }} ({{ entity?.clientFk }})
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<VnLv label="ID" :value="entity.id" />
<VnLv :label="t('order.summary.nickname')" dash>
<template #value>
<span class="link">
{{ dashIfEmpty(entity?.address?.nickname) }}
<CustomerDescriptorProxy :id="entity?.clientFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.summary.company')"
:value="entity?.address?.companyFk"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="Boolean(entity?.isConfirmed)"
/>
</QCard>
<QCard class="vn-one">
<VnLv
:label="t('order.summary.created')"
:value="toDateHour(entity?.created)"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="toDateHour(entity?.confirmed)"
/>
<VnLv
:label="t('order.summary.landed')"
:value="toDateHour(entity?.landed)"
/>
<VnLv :label="t('order.summary.phone')">
<template #value>
{{ dashIfEmpty(entity?.address?.phone) }}
<a
v-if="entity?.address?.phone"
:href="`tel:${entity?.address?.phone}`"
class="text-primary"
>
<QIcon name="phone" />
</a>
</template>
</VnLv>
<VnLv
:label="t('order.summary.createdFrom')"
:value="entity?.sourceApp"
/>
<VnLv
:label="t('order.summary.address')"
:value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
class="order-summary-address"
/>
</QCard>
<QCard class="vn-one">
<p class="header">
{{ t('order.summary.notes') }}
</p>
<p v-if="entity?.note" class="no-margin">
{{ entity?.note }}
</p>
</QCard>
<QCard class="vn-one">
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.subtotal') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.vat') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.total') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.total) }}</span>
</template>
</VnLv>
</QCard>
<QCard>
<p class="header">
{{ t('order.summary.details') }}
</p>
<QTable
:columns="detailsColumns"
:rows="entity?.rows"
flat
hide-pagination
>
<template #header="props">
<QTr :props="props">
<QTh auto-width>{{ t('order.summary.item') }}</QTh>
<QTh>{{ t('order.summary.description') }}</QTh>
<QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
<QTh auto-width>{{ t('order.summary.price') }}</QTh>
<QTh auto-width>{{ t('order.summary.amount') }}</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTd key="item" :props="props" class="item">
{{ props.row.item?.id }}
</QTd>
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span v-if="props.row.item.subName" class="subName">
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags :item="props.row.item" :max-length="5" />
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}
</QTd>
<QTd key="price" :props="props">
{{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{ toCurrency(props.row?.quantity * props.row?.price) }}
</QTd>
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
<div class="q-pa-md">
<CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
<template #header="{ entity }">
{{ t('order.summary.basket') }} #{{ entity?.id }} -
{{ entity?.client?.name }} ({{ entity?.clientFk }})
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<VnLv label="ID" :value="entity.id" />
<VnLv :label="t('order.summary.nickname')" dash>
<template #value>
<span class="link">
{{ dashIfEmpty(entity?.address?.nickname) }}
<CustomerDescriptorProxy :id="entity?.clientFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.summary.company')"
:value="entity?.address?.companyFk"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="Boolean(entity?.isConfirmed)"
/>
</QCard>
<QCard class="vn-one">
<VnLv
:label="t('order.summary.created')"
:value="toDateHour(entity?.created)"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="toDateHour(entity?.confirmed)"
/>
<VnLv
:label="t('order.summary.landed')"
:value="toDateHour(entity?.landed)"
/>
<VnLv :label="t('order.summary.phone')">
<template #value>
{{ dashIfEmpty(entity?.address?.phone) }}
<a
v-if="entity?.address?.phone"
:href="`tel:${entity?.address?.phone}`"
class="text-primary"
>
<QIcon name="phone" />
</a>
</template>
</VnLv>
<VnLv
:label="t('order.summary.createdFrom')"
:value="entity?.sourceApp"
/>
<VnLv
:label="t('order.summary.address')"
:value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
class="order-summary-address"
/>
</QCard>
<QCard class="vn-one">
<p class="header">
{{ t('order.summary.notes') }}
</p>
<p v-if="entity?.note" class="no-margin">
{{ entity?.note }}
</p>
</QCard>
<QCard class="vn-one">
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.subtotal') }}</span>
</template>
<template #value>
<span class="text-h6">{{
toCurrency(entity?.subTotal)
}}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.vat') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.total') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.total) }}</span>
</template>
</VnLv>
</QCard>
<QCard>
<p class="header">
{{ t('order.summary.details') }}
</p>
<QTable
:columns="detailsColumns"
:rows="entity?.rows"
flat
hide-pagination
>
<template #header="props">
<QTr :props="props">
<QTh auto-width>{{ t('order.summary.item') }}</QTh>
<QTh>{{ t('order.summary.description') }}</QTh>
<QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
<QTh auto-width>{{ t('order.summary.price') }}</QTh>
<QTh auto-width>{{ t('order.summary.amount') }}</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTd key="item" :props="props" class="item">
{{ props.row.item?.id }}
</QTd>
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span
v-if="props.row.item.subName"
class="subName"
>
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags
:item="props.row.item"
:max-length="5"
/>
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}
</QTd>
<QTd key="price" :props="props">
{{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{
toCurrency(props.row?.quantity * props.row?.price)
}}
</QTd>
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
</div>
</template>
<style lang="scss">
.cardSummary .summaryBody .vn-label-value.order-summary-address {

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

@ -1,7 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import { onMounted, onUnmounted } from 'vue';
import {onMounted, onUnmounted, ref} from 'vue';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
@ -20,11 +20,21 @@ const catalogParams = {
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
};
function exprBuilder(param, value) {
switch (param) {
case 'search':
return { 'i.name': { like: `%${value}%` } };
}
const tags = ref([])
function extractTags(items) {
const resultTags = [];
(items || []).forEach((item) => {
(item.tags || []).forEach((tag) => {
const index = resultTags.findIndex((item) => item.tagFk === tag.tagFk);
if (index === -1) {
resultTags.push({ ...tag, priority: 1 });
} else {
resultTags[index].priority += 1;
}
});
});
tags.value = resultTags
}
</script>
@ -35,8 +45,8 @@ function exprBuilder(param, value) {
url="Orders/CatalogFilter"
:limit="50"
:user-params="catalogParams"
:expr-builder="exprBuilder"
:static-params="['orderFk', 'orderBy']"
:redirect="false"
/>
</Teleport>
<Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
@ -56,7 +66,7 @@ function exprBuilder(param, value) {
</Teleport>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<OrderCatalogFilter data-key="OrderCatalogList" />
<OrderCatalogFilter data-key="OrderCatalogList" :tags="tags" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
@ -67,9 +77,13 @@ function exprBuilder(param, value) {
:limit="50"
:user-params="catalogParams"
auto-load
@on-fetch="extractTags"
>
<template #body="{ rows }">
<div class="catalog-list">
<div v-if="rows && !rows?.length" class="no-result">
{{ t('globals.noResults') }}
</div>
<OrderCatalogItem v-for="row in rows" :key="row.id" :item="row" />
</div>
</template>
@ -78,7 +92,7 @@ function exprBuilder(param, value) {
</QPage>
</template>
<style lang="scss">
<style lang="scss" scoped>
.card-list {
width: 100%;
}
@ -90,4 +104,11 @@ function exprBuilder(param, value) {
justify-content: center;
gap: 16px;
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>

295
src/pages/Order/OrderLines.vue Normal file
View File

@ -0,0 +1,295 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
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 CardList from 'components/ui/CardList.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import { toCurrency, toDate } from 'src/filters';
import { useSession } from 'composables/useSession';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const session = useSession();
const quasar = useQuasar();
const token = session.getToken();
const orderSummary = ref({
total: null,
vat: null,
});
const componentKey = ref(0);
const order = ref(0);
const refresh = () => {
componentKey.value += 1;
};
function confirmRemove(item) {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('confirmDeletion'),
message: t('confirmDeletionMessage'),
promise: async () => remove(item),
},
});
}
async function remove(item) {
await axios.post('OrderRows/removes', {
actualOrderId: route.params.id,
rows: [item.id],
});
quasar.notify({
message: t('globals.dataDeleted'),
type: 'positive',
});
refresh();
}
async function confirmOrder() {
await axios.post(`Orders/${route.params.id}/confirm`);
quasar.notify({
message: t('globals.confirm'),
type: 'positive',
});
}
</script>
<template>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}`"
@on-fetch="(data) => (order = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getTotal`"
@on-fetch="(data) => (orderSummary.total = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getVAT`"
@on-fetch="(data) => (orderSummary.vat = data)"
auto-load
/>
<QPage :key="componentKey" class="column items-center q-pa-md">
<div class="card-list">
<div v-if="!orderSummary.total" class="no-result">
{{ t('globals.noResults') }}
</div>
<QCard v-else 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>
<VnPaginate
data-key="OrderLines"
url="OrderRows"
:limit="20"
auto-load
:filter="{
include: [
{
relation: 'item',
},
{
relation: 'warehouse',
},
],
where: { orderFk: route.params.id },
}"
>
<template #body="{ rows }">
<div class="catalog-list q-mt-xl">
<CardList
v-for="row in rows"
:key="row.id"
:id="row.id"
:title="row?.item?.name"
class="cursor-inherit"
>
<template #title>
<div class="flex items-center">
<div class="image-wrapper q-mr-md">
<QImg
:src="`/api/Images/catalog/50x50/${row?.item?.id}/download?access_token=${token}`"
spinner-color="primary"
:ratio="1"
height="50"
width="50"
class="image"
/>
</div>
<div
class="title text-primary text-weight-bold text-h5"
>
{{ row?.item?.name }}
</div>
<QChip class="q-chip-color" outline size="sm">
{{ t('ID') }}: {{ row.id }}
</QChip>
</div>
</template>
<template #list-items>
<div class="q-mb-sm">
<span class="text-uppercase subname">
{{ row.item.subName }}
</span>
<fetched-tags :item="row.item" :max-length="5" />
</div>
<VnLv :label="t('item')" :value="String(row.item.id)" />
<VnLv
:label="t('warehouse')"
:value="row.warehouse.name"
/>
<VnLv
:label="t('shipped')"
:value="toDate(row.shipped)"
/>
<VnLv
:label="t('quantity')"
:value="String(row.quantity)"
/>
<VnLv
:label="t('price')"
:value="toCurrency(row.price)"
/>
<VnLv
:label="t('amount')"
:value="toCurrency(row.price * row.quantity)"
/>
</template>
<template #actions v-if="!order?.isConfirmed">
<QBtn
:label="t('remove')"
@click.stop="confirmRemove(row)"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</div>
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>
<style lang="scss">
.order-lines-summary {
.vn-label-value {
display: flex;
justify-content: flex-end;
gap: 2%;
.label {
color: var(--vn-label);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<style lang="scss" scoped>
.card-list {
width: 100%;
max-width: 60em;
}
.header {
color: $primary;
font-weight: bold;
margin-bottom: 25px;
font-size: 20px;
display: inline-block;
}
.image-wrapper {
height: 50px;
width: 50px;
.image {
border-radius: 50%;
}
}
.subname {
color: var(--vn-label);
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>
<i18n>
en:
summary: Summary
subtotal: Subtotal
VAT: VAT
total: Total
item: Item
warehouse: Warehouse
shipped: Shipped
quantity: Quantity
price: Price
amount: Amount
remove: Remove
confirmDeletion: Confirm deletion,
confirmDeletionMessage: Are you sure you want to delete this item?
confirm: Confirm
es:
summary: Resumen
subtotal: Subtotal
VAT: IVA
total: Total
item: Artículo
warehouse: Almacén
shipped: F. envío
quantity: Cantidad
price: Precio
amount: Importe
remove: Eliminar
confirmDeletion: Confirmar eliminación,
confirmDeletionMessage: Seguro que quieres eliminar este artículo?
confirm: Confirmar
</i18n>

28
src/pages/Order/OrderVolume.vue
View File

@ -1,15 +1,17 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import { ref } from 'vue';
import { dashIfEmpty } from 'src/filters';
import CardList from 'components/ui/CardList.vue';
import axios from 'axios';
import FetchedTags from 'components/ui/FetchedTags.vue';
import { dashIfEmpty } from 'src/filters';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const volumeSummary = ref(null);
@ -34,14 +36,17 @@ const loadVolumes = async (rows) => {
/>
<QPage class="column items-center q-pa-md">
<div class="card-list">
<QCard class="order-volume-summary q-pa-lg">
<div
v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
class="no-result"
>
{{ t('globals.noResults') }}
</div>
<QCard v-else class="order-volume-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
:label="t('total')"
:value="`${volumeSummary?.totalVolume} m³`"
/>
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
<VnLv
:label="t('boxes')"
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
@ -128,6 +133,13 @@ const loadVolumes = async (rows) => {
font-size: 20px;
display: inline-block;
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label);
text-align: center;
}
</style>
<i18n>
en:

2
src/pages/Route/Cmr/CmrList.vue
View File

@ -150,7 +150,7 @@ function downloadPdfs() {
<QIcon
name="visibility"
color="primary"
size="2em"
size="md"
class="q-mr-sm q-ml-sm"
/>
<QTooltip>

2
src/pages/Supplier/Card/SupplierSummary.vue
View File

@ -53,7 +53,7 @@ const isAdministrative = computed(() => {
>
<template #header-left>
<a v-if="isAdministrative" class="header link" :href="supplierUrl">
<QIcon name="open_in_new" color="white" size="25px" />
<QIcon name="open_in_new" color="white" size="sm" />
</a>
</template>
<template #header>

2
src/pages/Travel/Card/TravelSummary.vue
View File

@ -195,7 +195,7 @@ const openEntryDescriptor = () => {};
>
<template #header-left>
<a class="header link" :href="travelUrl">
<QIcon name="open_in_new" color="white" size="25px" />
<QIcon name="open_in_new" color="white" size="sm" />
</a>
</template>
<template #header>

208
src/pages/Travel/ExtraCommunity.vue
View File

@ -103,111 +103,109 @@ const tableColumnComponents = {
},
};
const columns = computed(() => {
return [
{
label: 'id',
field: 'id',
name: 'id',
align: 'left',
showValue: true,
},
{
label: t('supplier.pageTitles.supplier'),
field: 'cargoSupplierNickname',
name: 'cargoSupplierNickname',
align: 'left',
showValue: true,
},
{
label: t('globals.agency'),
field: 'agencyModeName',
name: 'agencyModeName',
align: 'left',
showValue: true,
},
{
label: t('globals.amount'),
name: 'invoiceAmount',
field: 'entries',
align: 'left',
showValue: true,
format: (value) =>
toCurrency(
value
? value.reduce((sum, entry) => {
return sum + (entry.invoiceAmount || 0);
}, 0)
: 0
),
},
{
label: t('globals.reference'),
field: 'ref',
name: 'ref',
align: 'left',
showValue: false,
},
{
label: t('globals.packages'),
field: 'stickers',
name: 'stickers',
align: 'left',
showValue: true,
},
{
label: t('kg'),
field: 'kg',
name: 'kg',
align: 'left',
showValue: true,
},
{
label: t('physicKg'),
field: 'loadedKg',
name: 'loadedKg',
align: 'left',
showValue: true,
},
{
label: 'KG Vol.',
field: 'volumeKg',
name: 'volumeKg',
align: 'left',
showValue: true,
},
{
label: t('globals.wareHouseOut'),
field: 'warehouseOutName',
name: 'warehouseOutName',
align: 'left',
showValue: true,
},
{
label: t('shipped'),
field: 'shipped',
name: 'shipped',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
{
label: t('globals.wareHouseIn'),
field: 'warehouseInName',
name: 'warehouseInName',
align: 'left',
showValue: true,
},
{
label: t('landed'),
field: 'landed',
name: 'landed',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
];
});
const columns = computed(() => [
{
label: 'id',
field: 'id',
name: 'id',
align: 'left',
showValue: true,
},
{
label: t('supplier.pageTitles.supplier'),
field: 'cargoSupplierNickname',
name: 'cargoSupplierNickname',
align: 'left',
showValue: true,
},
{
label: t('globals.agency'),
field: 'agencyModeName',
name: 'agencyModeName',
align: 'left',
showValue: true,
},
{
label: t('globals.amount'),
name: 'invoiceAmount',
field: 'entries',
align: 'left',
showValue: true,
format: (value) =>
toCurrency(
value
? value.reduce((sum, entry) => {
return sum + (entry.invoiceAmount || 0);
}, 0)
: 0
),
},
{
label: t('globals.reference'),
field: 'ref',
name: 'ref',
align: 'left',
showValue: false,
},
{
label: t('globals.packages'),
field: 'stickers',
name: 'stickers',
align: 'left',
showValue: true,
},
{
label: t('kg'),
field: 'kg',
name: 'kg',
align: 'left',
showValue: true,
},
{
label: t('physicKg'),
field: 'loadedKg',
name: 'loadedKg',
align: 'left',
showValue: true,
},
{
label: 'KG Vol.',
field: 'volumeKg',
name: 'volumeKg',
align: 'left',
showValue: true,
},
{
label: t('globals.wareHouseOut'),
field: 'warehouseOutName',
name: 'warehouseOutName',
align: 'left',
showValue: true,
},
{
label: t('shipped'),
field: 'shipped',
name: 'shipped',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
{
label: t('globals.wareHouseIn'),
field: 'warehouseInName',
name: 'warehouseInName',
align: 'left',
showValue: true,
},
{
label: t('landed'),
field: 'landed',
name: 'landed',
align: 'left',
format: (value) => toDate(value.substring(0, 10)),
showValue: true,
},
]);
async function getData() {
await arrayData.fetch({ append: false });

2
src/pages/Travel/ExtraCommunityFilter.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { reactive, ref } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';

4
src/pages/Wagon/Type/WagonTypeCreate.vue
View File

@ -309,8 +309,8 @@ function exceedMaxHeight(pos) {
</div>
</div>
<div class="q-mb-sm wheels">
<QIcon color="grey-6" name="trip_origin" size="3rem" />
<QIcon color="grey-6" name="trip_origin" size="3rem" />
<QIcon color="grey-6" name="trip_origin" size="xl" />
<QIcon color="grey-6" name="trip_origin" size="xl" />
</div>
<QDialog
v-model="colorPickerActive"

143
src/router/modules/customer.js
View File

@ -17,7 +17,22 @@ export default {
'CustomerNotifications',
'CustomerDefaulter',
],
card: ['CustomerBasicData'],
card: [
'CustomerBasicData',
'CustomerFiscalData',
'CustomerBillingData',
'CustomerConsignees',
'CustomerNotes',
'CustomerCredits',
'CustomerGreuges',
'CustomerBalance',
'CustomerRecoveries',
'CustomerWebAccess',
'CustomerLog',
'CustomerSms',
'CustomerCreditManagement',
'CustomerOthers',
],
},
children: [
{
@ -115,6 +130,132 @@ export default {
component: () =>
import('src/pages/Customer/Card/CustomerBasicData.vue'),
},
{
path: 'fiscal-data',
name: 'CustomerFiscalData',
meta: {
title: 'fiscalData',
icon: 'vn:dfiscales',
},
component: () =>
import('src/pages/Customer/Card/CustomerFiscalData.vue'),
},
{
path: 'billing-data',
name: 'CustomerBillingData',
meta: {
title: 'billingData',
icon: 'vn:payment',
},
component: () =>
import('src/pages/Customer/Card/CustomerBillingData.vue'),
},
{
path: 'consignees',
name: 'CustomerConsignees',
meta: {
title: 'consignees',
icon: 'vn:delivery',
},
component: () =>
import('src/pages/Customer/Card/CustomerConsignees.vue'),
},
{
path: 'notes',
name: 'CustomerNotes',
meta: {
title: 'notes',
icon: 'vn:notes',
},
component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
},
{
path: 'credits',
name: 'CustomerCredits',
meta: {
title: 'credits',
icon: 'vn:credit',
},
component: () =>
import('src/pages/Customer/Card/CustomerCredits.vue'),
},
{
path: 'greuges',
name: 'CustomerGreuges',
meta: {
title: 'greuges',
icon: 'vn:greuge',
},
component: () =>
import('src/pages/Customer/Card/CustomerGreuges.vue'),
},
{
path: 'balance',
name: 'CustomerBalance',
meta: {
title: 'balance',
icon: 'vn:invoice',
},
component: () =>
import('src/pages/Customer/Card/CustomerBalance.vue'),
},
{
path: 'recoveries',
name: 'CustomerRecoveries',
meta: {
title: 'recoveries',
icon: 'vn:recovery',
},
component: () =>
import('src/pages/Customer/Card/CustomerRecoveries.vue'),
},
{
path: 'web-access',
name: 'CustomerWebAccess',
meta: {
title: 'webAccess',
icon: 'vn:web',
},
component: () =>
import('src/pages/Customer/Card/CustomerWebAccess.vue'),
},
{
path: 'log',
name: 'CustomerLog',
meta: {
title: 'log',
icon: 'vn:History',
},
component: () => import('src/pages/Customer/Card/CustomerLog.vue'),
},
{
path: 'sms',
name: 'CustomerSms',
meta: {
title: 'sms',
icon: 'sms',
},
component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
},
{
path: 'credit-management',
name: 'CustomerCreditManagement',
meta: {
title: 'creditManagement',
icon: 'paid',
},
component: () =>
import('src/pages/Customer/Card/CustomerCreditManagement.vue'),
},
{
path: 'others',
name: 'CustomerOthers',
meta: {
title: 'others',
icon: 'pending',
},
component: () => import('src/pages/Customer/Card/CustomerOthers.vue'),
},
],
},
],

11
src/router/modules/order.js
View File

@ -11,7 +11,7 @@ export default {
redirect: { name: 'OrderMain' },
menus: {
main: ['OrderList'],
card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume'],
card: ['OrderBasicData', 'OrderCatalog', 'OrderVolume', 'OrderLines'],
},
children: [
{
@ -81,6 +81,15 @@ export default {
},
component: () => import('src/pages/Order/OrderVolume.vue'),
},
{
name: 'OrderLines',
path: 'line',
meta: {
title: 'lines',
icon: 'vn:lines',
},
component: () => import('src/pages/Order/OrderLines.vue'),
},
],
},
],