feat: refs #6321 update

This commit is contained in:
Javier Segarra 2024-09-24 13:54:58 +02:00
parent d0eb1d97ac
commit 7da3f132ea
10 changed files with 119 additions and 367 deletions

View File

@ -29,8 +29,16 @@ module.exports = configure(function (/* ctx */) {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli/boot-files
boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
boot: [
'i18n',
'axios',
'vnDate',
'validations',
'quasar',
'quasar.defaults',
'global-components',
],
importStrategy: 'auto',
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss'],

View File

@ -0,0 +1,13 @@
// src/boot/global-components.js
import { defineAsyncComponent } from 'vue';
const components = import.meta.glob('src/components/**/*.vue');
export default ({ app }) => {
for (const path in components) {
const componentName = path
.split('/')
.pop()
.replace(/\.\w+$/, '');
app.component(componentName, defineAsyncComponent(components[path]));
}
};

View File

@ -17,8 +17,12 @@ const props = defineProps({
},
});
const valueClass = computed(() => (props.value > 0 ? 'positive' : 'negative'));
const iconName = computed(() => (props.value > 0 ? 'arrow_upward' : 'arrow_downward'));
const valueClass = computed(() =>
props.value === 0 ? 'neutral' : props.value > 0 ? 'positive' : 'negative'
);
const iconName = computed(() =>
props.value === 0 ? 'equal' : props.value > 0 ? 'arrow_upward' : 'arrow_downward'
);
const formattedValue = computed(() => props.value);
</script>
@ -29,6 +33,9 @@ const formattedValue = computed(() => props.value);
.negative {
color: red;
}
.neutral {
color: orange;
}
.value-icon {
margin-right: 4px;
}

View File

@ -23,11 +23,6 @@ const gradientStyle = (value) =>
)}, ${colorSpacer} 10%)`;
const $props = defineProps({
item: {
type: Object,
required: true,
default: () => {},
},
itemLack: {
type: Object,
required: true,
@ -38,7 +33,7 @@ const $props = defineProps({
required: false,
default: false,
},
tickets: {
sales: {
type: Array,
required: false,
default: () => [],
@ -47,15 +42,19 @@ const $props = defineProps({
const proposalSelected = ref([]);
const quantity = ref(-1);
const defaultColumnAttrs = {
align: 'left',
align: 'center',
sortable: true,
};
const ticket = computed(() => $props.tickets[0]);
const ticket = computed(() => $props.sales[0]);
const saleFk = computed(() => ticket.value.saleFk);
const statusConditionalValue = (row) => {
const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
return total;
};
const popupProxyRef = ref(null);
const proposalTableRef = ref(null);
const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
const columns = computed(() => [
{
@ -63,18 +62,13 @@ const columns = computed(() => [
label: t('proposal.available'),
name: 'available',
field: 'available',
component: 'input',
type: 'number',
class: 'shrink',
},
{
...defaultColumnAttrs,
label: t('proposal.difference'),
name: 'difference',
component: 'input',
type: 'number',
class: 'shrink',
style: 'background-color:red;max-width: 75px',
style: 'max-width: 75px',
},
{
...defaultColumnAttrs,
@ -88,9 +82,6 @@ const columns = computed(() => [
label: t('proposal.counter'),
name: 'counter',
field: 'counter',
component: 'input',
type: 'number',
class: 'shrink',
},
{
@ -107,9 +98,6 @@ const columns = computed(() => [
...defaultColumnAttrs,
label: t('proposal.price2'),
name: 'price2',
field: 'price2',
component: 'input',
type: 'number',
class: 'shrink',
},
{
@ -131,12 +119,18 @@ const columns = computed(() => [
async function confirm() {
try {
const params = {
saleFk: saleFk.value,
newItemFK: proposalSelected.value[0].id,
quantity: quantity.value,
};
// const params = {
// saleFk: saleFk.value,
// substitutionFk: proposalSelected.value[0].id,
// quantity: quantity.value,
// };
// const { data } = await axios.post('Sales/replaceItem', params);
const params = [saleFk.value, proposalSelected.value[0].id, quantity.value];
const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
schema: 'vn',
params,
});
proposalTableRef.value.reload();
emit('itemReplaced', {
type: 'refresh',
itemProposal: proposalSelected.value[0],
@ -149,8 +143,6 @@ async function confirm() {
}
}
// const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
const popupProxyRef = ref(null);
const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
// function onDialogClose() {
// console.log('Dialog has been closed');
@ -161,16 +153,20 @@ onUnmounted(() => {});
function handleSelection(value, _) {
quantity.value = value.available;
}
const isSelectionAvailable = (data) => {
if (!data?.row) return false;
const { row } = data;
return $props.replaceAction && row.available >= $props.itemLack.lack * -1;
};
// const isSelectionAvailable = (data) => {
// if (!data?.row) return false;
// const { row } = data;
// return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
// };
// watch(proposalSelected, ({ available }) => (quantity.value = available));
</script>
<template>
<div style="min-width: 65vw">
{{ sales }}
<br />
{{ itemLack }}
<VnTable
ref="proposalTableRef"
data-key="ItemsGetSimilar"
url="Items/getSimilar"
:filter="{
@ -194,10 +190,9 @@ const isSelectionAvailable = (data) => {
}"
>
<template #top-left>
<div v-if="$props.replaceAction" style="display: flex">
<div v-if="$props.replaceAction" class="q-ml-xs" style="display: flex">
<QBtn
:label="t('globals.replace')"
class="q-py-xs"
color="primary"
:loading="isLoading"
@click="confirm"
@ -216,10 +211,10 @@ const isSelectionAvailable = (data) => {
/></div
></template>
<template #body-selection="props">
<!-- {{ isSelectionAvailable(props) }} -->
<QCheckbox
class="q-ma-xs"
flat
v-if="isSelectionAvailable(props)"
v-model="props.selected"
@update:model-value="(evt, _) => handleSelection(props.row, null)"
>
@ -231,18 +226,24 @@ const isSelectionAvailable = (data) => {
{{ row.id }}
</QTooltip>
<!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
<p class="link">{{ row.longName }}</p>
<span class="link">{{ row.longName }}</span>
<ItemDescriptorProxy :id="row.id" />
<div style="display: flex">
<VnImg
:id="row.id"
spinner-color="primary"
:ratio="1"
height="50px"
width="50px"
class="image remove-bg"
/>
<FetchedTags :item="row" />
<div style="display: flex; flex-direction: row">
<div style="display: flex; flex-direction: column">
<span style="font-size: xx-small">{{ row.price2 }}</span>
<VnImg
:id="row.id"
spinner-color="primary"
:ratio="1"
height="50px"
width="50px"
class="image remove-bg"
/>
<span style="font-size: xx-small">ID: {{ row.id }}</span>
</div>
<div style="display: flex; align-items: center">
<FetchedTags :item="row" />
</div>
</div>
<!-- </QTd> -->
</template>
@ -265,9 +266,7 @@ const isSelectionAvailable = (data) => {
}}</span>
</template>
<template #column-difference="{ row }">
<QTd style="width: 75px; background-color: red"
><VnStockValueDisplay :value="row.id % 2 === 0 ? 10 : -10"
/></QTd>
<VnStockValueDisplay :value="sales[0].price - row.price2" />
</template>
</VnTable>
</div>

View File

@ -6,11 +6,6 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
const $props = defineProps({
item: {
type: Object,
required: true,
default: () => {},
},
itemLack: {
type: Object,
required: true,
@ -21,7 +16,7 @@ const $props = defineProps({
required: false,
default: false,
},
tickets: {
sales: {
type: Array,
required: false,
default: () => [],
@ -37,12 +32,12 @@ const $props = defineProps({
<QBtn icon="close" flat round dense v-close-popup />
</QCardSection>
<QCardSection class="row items-center">
<VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
<VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
<QBtn flat class="link text-blue">
{{ item.longName }}
<ItemDescriptorProxy :id="item.id" />
{{ itemLack.longName }}
<ItemDescriptorProxy :id="itemLack.id" />
</QBtn>
<FetchedTags :item="item" />
<FetchedTags :item="itemLack" />
<!-- {{ tickets[0].saleFk }} -->
</QCardSection>

View File

@ -89,6 +89,7 @@ itemType:
category: Category
temperature: Temperature
proposal:
difference: Difference
title: Items proposal
itemFk: Item
longName: Name

View File

@ -1,41 +1,20 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSession } from 'composables/useSession';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useQuasar } from 'quasar';
import { toDate } from 'src/filters';
import { useRouter } from 'vue-router';
import { toHour } from 'src/filters';
import axios from 'axios';
import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { usePrintService } from 'src/composables/usePrintService';
const $props = defineProps({
filter: {
type: Object,
default: () => ({}),
},
});
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const { openReport } = usePrintService();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const quasar = useQuasar();
const session = useSession();
const selectedRows = ref([]);
const tableRef = ref([]);
const confirmationDialog = ref(false);
const startingDate = ref(null);
const router = useRouter();
const filterLack = ref({
const routeFilter = {
include: [
{
relation: 'workers',
@ -44,17 +23,16 @@ const filterLack = ref({
},
},
],
where: { alertLevel: 'FREE' },
});
};
const columns = computed(() => [
{
align: 'left',
isId: true,
name: 'id',
label: 'Id',
chip: {
condition: () => true,
},
isId: true,
columnFilter: false,
},
{
@ -62,138 +40,52 @@ const columns = computed(() => [
name: 'workerFk',
label: t('Worker'),
create: true,
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
useLike: false,
optionFilter: 'firstName',
find: {
value: 'workerFk',
label: 'workerUserName',
},
},
columnFilter: {
inWhere: true,
},
useLike: false,
cardVisible: true,
format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
columnFilter: false,
},
{
align: 'left',
name: 'agencyModeFk',
name: 'agencyName',
label: t('Agency'),
isTitle: true,
cardVisible: true,
create: true,
component: 'select',
attrs: {
url: 'agencyModes',
fields: ['id', 'name'],
find: {
value: 'agencyModeFk',
label: 'agencyName',
},
},
columnClass: 'expand',
columnFilter: false,
},
{
align: 'left',
name: 'vehicleFk',
name: 'vehiclePlateNumber',
label: t('Vehicle'),
cardVisible: true,
create: true,
component: 'select',
attrs: {
url: 'vehicles',
fields: ['id', 'numberPlate'],
optionLabel: 'numberPlate',
optionFilterValue: 'numberPlate',
find: {
value: 'vehicleFk',
label: 'vehiclePlateNumber',
},
},
columnFilter: {
inWhere: true,
},
},
{
align: 'left',
name: 'created',
label: t('Date'),
columnFilter: false,
cardVisible: true,
create: true,
component: 'date',
format: ({ date }) => toDate(date),
},
{
align: 'left',
name: 'from',
label: t('From'),
visible: false,
cardVisible: true,
create: true,
component: 'date',
format: ({ date }) => toDate(date),
},
{
align: 'left',
name: 'to',
label: t('To'),
visible: false,
cardVisible: true,
create: true,
component: 'date',
format: ({ date }) => toDate(date),
},
{
align: 'center',
name: 'm3',
label: t('Volume'),
cardVisible: true,
columnClass: 'shrink',
},
{
align: 'left',
name: 'started',
label: t('hourStarted'),
component: 'time',
cardVisible: true,
columnFilter: false,
format: (row) => toHour(row.started),
},
{
align: 'left',
name: 'finished',
label: t('hourFinished'),
component: 'time',
cardVisible: true,
columnFilter: false,
},
{
align: 'center',
name: 'kmStart',
label: t('KmStart'),
columnClass: 'shrink',
create: true,
visible: false,
},
{
align: 'center',
name: 'kmEnd',
label: t('KmEnd'),
columnClass: 'shrink',
create: true,
visible: false,
format: (row) => toHour(row.started),
},
{
align: 'left',
name: 'description',
label: t('Description'),
cardVisible: true,
isTitle: true,
create: true,
component: 'input',
field: 'description',
columnFilter: false,
},
{
align: 'left',
@ -207,212 +99,53 @@ const columns = computed(() => [
align: 'right',
name: 'tableActions',
actions: [
{
title: t('Add tickets'),
icon: 'vn:ticketAdd',
action: (row) => openTicketsDialog(row?.id),
},
{
title: t('components.smartCard.viewSummary'),
icon: 'preview',
action: (row) => viewSummary(row?.id, RouteSummary),
},
{
title: t('Route summary'),
icon: 'arrow_forward',
isPrimary: true,
action: (row) => navigate(row?.id),
color: 'primary',
},
],
},
]);
watch($props.filter, (v) => (filterLack.value.where = v));
function navigate(id) {
router.push({ path: `/route/${id}` });
}
const cloneRoutes = () => {
if (!selectedRows.value.length || !startingDate.value) return;
axios.post('Routes/clone', {
created: startingDate.value,
ids: selectedRows.value.map((row) => row?.id),
});
startingDate.value = null;
tableRef.value.reload();
};
const showRouteReport = () => {
const ids = selectedRows.value.map((row) => row?.id);
const idString = ids.join(',');
let url = `Routes/${idString}/driver-route-pdf`;
let params = {};
if (selectedRows.value.length >= 1) {
params = {
id: idString,
};
url = `Routes/downloadZip`;
}
openReport(url, params, '_blank');
};
function markAsServed() {
selectedRows.value.forEach(async (row) => {
await axios.patch(`Routes/${row?.id}`, { isOk: true });
});
tableRef.value.reload();
startingDate.value = null;
}
const openTicketsDialog = (id) => {
quasar
.dialog({
component: RouteListTicketsDialog,
componentProps: {
id,
},
})
.onOk(() => tableRef.value.reload());
};
</script>
<template>
<RouteSearchbar />
<QDialog v-model="confirmationDialog">
<QCard style="min-width: 350px">
<QCardSection>
<p class="text-h6 q-ma-none">{{ t('Select the starting date') }}</p>
</QCardSection>
<QCardSection class="q-pt-none">
<VnInputDate
:label="t('Stating date')"
v-model="startingDate"
autofocus
/>
</QCardSection>
<QCardActions align="right">
<QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
<QBtn color="primary" v-close-popup @click="cloneRoutes">
{{ t('globals.clone') }}
</QBtn>
</QCardActions>
</QCard>
</QDialog>
<VnSubToolbar />
<RightMenu>
<template #right-panel>
<RouteFilter data-key="RouteList" />
</template>
</RightMenu>
<VnTable
class="route-list"
ref="tableRef"
data-key="RouteList"
url="Routes/filter"
:columns="columns"
:right-search="false"
:is-editable="true"
:filter="filterLack"
:filter="routeFilter"
redirect="route"
:row-click="false"
:create="{
urlCreate: 'Routes',
title: t('Create route'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
}"
save-url="Routes/crud"
:disable-option="{ card: true }"
table-height="85vh"
v-model:selected="selectedRows"
:table="{
'row-key': 'id',
selection: 'multiple',
}"
>
<template #moreBeforeActions>
<QBtn
icon="vn:clone"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="confirmationDialog = true"
>
<QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
</QBtn>
<QBtn
icon="cloud_download"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="showRouteReport"
>
<QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
</QBtn>
<QBtn
icon="check"
color="primary"
class="q-mr-sm"
:disable="!selectedRows?.length"
@click="markAsServed()"
>
<QTooltip>{{ t('Mark as served') }}</QTooltip>
</QBtn>
<template #column-workerFk="{ row }">
<span class="link" @click.stop>
{{ row?.workerUserName }}
<WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
</span>
</template>
</VnTable>
</template>
<style lang="scss" scoped>
.table-input-cell {
max-width: 143px;
}
.route-list {
width: 100%;
max-height: 100%;
}
.table-actions {
gap: 12px;
}
th:last-child,
td:last-child {
background-color: var(--vn-section-color);
position: sticky;
right: 0;
}
</style>
<i18n>
en:
newRoute: New Route
hourStarted: Started hour
hourFinished: Finished hour
es:
From: Desde
To: Hasta
Worker: Trabajador
Agency: Agencia
Vehicle: Vehículo
Volume: Volumen
Date: Fecha
Description: Descripción
Hour started: Hora inicio
Hour finished: Hora fin
KmStart: Km inicio
KmEnd: Km fin
Served: Servida
newRoute: Nueva Ruta
Clone Selected Routes: Clonar rutas seleccionadas
Select the starting date: Seleccione la fecha de inicio
Stating date: Fecha de inicio
Cancel: Cancelar
Mark as served: Marcar como servidas
Download selected routes as PDF: Descargar rutas seleccionadas como PDF
Add ticket: Añadir tickets
Preview: Vista previa
Summary: Resumen
Route is closed: La ruta está cerrada
Route is not served: La ruta no está servida
hourStarted: Hora de inicio
hourFinished: Hora de fin
</i18n>

View File

@ -176,10 +176,9 @@ const itemProposalSelected = ref(null);
<QIcon name="import_export" class="rotate-90"></QIcon>
<ItemProposalProxy
ref="proposalDialogRef"
:item="item"
:item-lack="itemLack"
:replace-action="true"
:tickets="selectedRows"
:sales="selectedRows"
@item-replaced="itemProposalEvt"
></ItemProposalProxy>
<QTooltip bottom anchor="bottom right">
@ -217,13 +216,13 @@ const itemProposalSelected = ref(null);
:color="itemLack.lack === 0 ? 'green' : 'red'"
:label="itemLack.lack"
/>
<QBadge
<!-- <QBadge
color="secondary"
class="q-ml-xs q-mt-xs"
v-if="itemLack"
:label="toCurrency(itemLack.lack)"
:label="toCurrency(itemLack.quantity * itemLack.price)"
outline
/>
/> -->
</div>
<QBtn flat class="link text-blue">
{{ item.longName }}

View File

@ -2,18 +2,14 @@
import { computed, ref, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStateStore } from 'stores/useStateStore';
import VnTable from 'components/VnTable/VnTable.vue';
import NegativeOriginDialog from 'pages/Ticket/Negative/components/NegativeOriginDialog.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { onBeforeMount } from 'vue';
import { dashIfEmpty, toDate, toHour } from 'src/filters';
import { useRouter } from 'vue-router';
import { useState } from 'src/composables/useState';
import { useRole } from 'src/composables/useRole';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
const router = useRouter();
import VnImg from 'src/components/ui/VnImg.vue';
import TicketLackFilter from './TicketLackFilter.vue';
const stateStore = useStateStore();

View File

@ -43,9 +43,9 @@ const { notify } = useNotify();
const route = useRoute();
const itemLack = ref(null);
const getInputEvents = (colField, props) => ({
'update:modelValue': () => saveChange(colField, props),
'keyup.enter': () => saveChange(colField, props),
const getInputEvents = ({ col, ...rows }) => ({
'update:modelValue': () => saveChange(col.name, rows),
'keyup.enter': () => saveChange(col.name, rows),
});
const saveChange = async (field, { rowIndex, row }) => {
try {
@ -175,8 +175,9 @@ const columns = computed(() => [
]);
const itemLackForm = ref();
const reload = async () => {
itemLackForm.value.fetch();
const reload = async (data) => {
// window.location.reload();
console.err(data);
};
defineExpose({ reload });
const emit = defineEmits(['update:selection']);