#6321 - Improve Tickets negatives #1388
|
|
@ -0,0 +1,30 @@
|
|||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
export function showResultsAsTable(dialog, results, key) {
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
function openTable() {
|
||||
quasar.notify({
|
||||
message: t('negative.detail.modal.changeItem.success'),
|
||||
color: 'positive',
|
||||
actions: [
|
||||
{
|
||||
label: t('globals.ok'),
|
||||
color: 'white',
|
||||
handler: () => {
|
||||
quasar.dialog({
|
||||
component: dialog,
|
||||
componentProps: {
|
||||
results,
|
||||
key,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
return { openTable };
|
||||
}
|
||||
|
|
@ -1,9 +1,18 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import notifyResults from 'src/utils/notifyResults';
|
||||
import { showResultsAsTable } from 'src/composables/showResultsTable';
|
||||
import VnConfirm from 'src/components/ui/VnConfirm.vue';
|
||||
import HandleSplitDialog from './HandleSplitDialog.vue';
|
||||
const { openTable } = showResultsAsTable();
|
||||
const emit = defineEmits(['update-item']);
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
||||
const showChangeItemDialog = ref(false);
|
||||
const newItem = ref(null);
|
||||
|
|
@ -17,15 +26,17 @@ const $props = defineProps({
|
|||
const updateItem = async () => {
|
||||
try {
|
||||
showChangeItemDialog.value = true;
|
||||
const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
|
||||
axios.post(`Sales/replaceItem`, {
|
||||
saleFk,
|
||||
substitutionFk: newItem.value,
|
||||
quantity,
|
||||
}),
|
||||
);
|
||||
const result = await Promise.allSettled(rowsToUpdate);
|
||||
notifyResults(result, 'saleFk');
|
||||
// const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
|
||||
// axios.post(`Sales/replaceItem`, {
|
||||
// saleFk,
|
||||
// substitutionFk: newItem.value,
|
||||
// quantity,
|
||||
// }),
|
||||
// );
|
||||
// const result = await Promise.allSettled(rowsToUpdate);
|
||||
|
||||
openTable(HandleSplitDialog, [], 'saleFk');
|
||||
// notifyResults(result, 'saleFk');
|
||||
emit('update-item', newItem.value);
|
||||
} catch (err) {
|
||||
console.error('Error updating item:', err);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,281 @@
|
|||
<script setup>
|
||||
import { computed, onMounted, ref, toRefs } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
const { t } = useI18n();
|
||||
const showSplitDialog = ref(false);
|
||||
const newState = ref(null);
|
||||
const resultSplit = ref([]);
|
||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
const $props = defineProps({
|
||||
tickets: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const tickets = ref($props.tickets ?? []);
|
||||
const rowBtnDisable = () =>
|
||||
!(
|
||||
formData.value?.agencyModeFk &&
|
||||
formData.value?.date &&
|
||||
rowsSelected.value.length > 0
|
||||
);
|
||||
const rowsSelected = ref([]);
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'status',
|
||||
label: t('negative.split.status'),
|
||||
field: ({ status }) => status,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'ticket',
|
||||
label: t('negative.split.ticket'),
|
||||
field: ({ ticket }) => ticket,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'newTicket',
|
||||
label: t('negative.split.newTicket'),
|
||||
field: ({ newTicket }) => newTicket,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'message',
|
||||
label: t('negative.split.message'),
|
||||
field: ({ message }) => message,
|
||||
sortable: true,
|
||||
},
|
||||
// {
|
||||
// name: 'actions',
|
||||
// align: 'center',
|
||||
// label: t('negative.split.actions'),
|
||||
// // style: 'padding-left: 100px',
|
||||
// // headerStyle: 'padding-left: 100px',
|
||||
// },
|
||||
]);
|
||||
|
||||
const formData = ref({ agencies: [] });
|
||||
const handleDateChanged = async () => {
|
||||
const { data: agencyData } = await axios.get('Agencies/getLanded', {
|
||||
params: {
|
||||
addressFk: 123,
|
||||
agencyModeFk: 8,
|
||||
warehouseFk: 1,
|
||||
shipped: '2001-02-08T23:00:00.000Z',
|
||||
},
|
||||
});
|
||||
if (!agencyData) formData.value.agencies = [];
|
||||
const { zoneFk } = agencyData;
|
||||
const { data: zoneData } = await axios.get('Zones/Includingexpired', {
|
||||
params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
|
||||
});
|
||||
formData.value.agencies = zoneData;
|
||||
if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
|
||||
// formData.value.dateChanged = false;
|
||||
};
|
||||
const ticketsSelected = ref([]);
|
||||
onMounted(() => {
|
||||
ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
|
||||
});
|
||||
|
||||
const updateState = async () => {
|
||||
try {
|
||||
showSplitDialog.value = true;
|
||||
const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
|
||||
axios.post(`Tickets/state`, {
|
||||
ticketFk,
|
||||
code: newState.value,
|
||||
})
|
||||
);
|
||||
await Promise.all(rowsToUpdate);
|
||||
} catch (err) {
|
||||
return err;
|
||||
} finally {
|
||||
dialogRef.value.hide({ type: 'refresh', refresh: true });
|
||||
}
|
||||
};
|
||||
|
||||
function getIcon(value) {
|
||||
const icons = {
|
||||
split: {
|
||||
name: 'check_circle',
|
||||
color: 'secondary',
|
||||
},
|
||||
noSplit: {
|
||||
name: 'warning',
|
||||
color: 'primary',
|
||||
},
|
||||
error: {
|
||||
name: 'close',
|
||||
color: 'negative',
|
||||
},
|
||||
};
|
||||
return icons[value];
|
||||
}
|
||||
|
||||
const updateNewTickets = async () => {
|
||||
tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
|
||||
console.log('updateNewTickets');
|
||||
rowsSelected.value = [];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
|
||||
<QCard class="q-pa-sm">
|
||||
<QCardSection class="row items-center q-pb-none">
|
||||
<QAvatar
|
||||
:icon="icon"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="xl"
|
||||
v-if="icon"
|
||||
/>
|
||||
<span class="text-h6 text-grey">{{
|
||||
t('negative.detail.modal.handleSplited.title')
|
||||
}}</span>
|
||||
<QSpace />
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center justify-center column items-stretch">
|
||||
<Qform>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnInputDate
|
||||
:label="t('Max date')"
|
||||
v-model="formData.date"
|
||||
@update:model-value="(evt) => handleDateChanged()" />
|
||||
|
||||
<VnSelect
|
||||
:disable="formData.agencies.length < 1"
|
||||
:label="t('Agency')"
|
||||
v-model="formData.agencyModeFk"
|
||||
:options="formData.agencies"
|
||||
option-label="name"
|
||||
option-value="id" />
|
||||
|
||||
<QBtn
|
||||
icon="save"
|
||||
:disable="rowBtnDisable()"
|
||||
color="primary"
|
||||
flat
|
||||
rounded
|
||||
@click="updateNewTickets"
|
||||
/></VnRow>
|
||||
</Qform>
|
||||
<VnPaginate data-key="splitLack" :data="tickets">
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
selection="multiple"
|
||||
row-key="newTicket"
|
||||
v-model:selected="rowsSelected"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
flat
|
||||
dense
|
||||
hide-bottom
|
||||
auto-load
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:pagination="{ rowsPerPage: null }"
|
||||
>
|
||||
<template #header="props">
|
||||
<QTr :props="props">
|
||||
<QTh></QTh>
|
||||
<QTh
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
{{ t(col.label) }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<QTr :props="props">
|
||||
<Qtd>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
</Qtd>
|
||||
<QTd
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
![
|
||||
'status',
|
||||
'message',
|
||||
'actions',
|
||||
].includes(col.name)
|
||||
"
|
||||
>
|
||||
{{ col.value }}
|
||||
</span>
|
||||
<span v-if="'status' === col.name">
|
||||
<QIcon
|
||||
:name="`${getIcon(col.value).name}`"
|
||||
size="xs"
|
||||
class="cursor-pointer"
|
||||
:color="getIcon(col.value).color"
|
||||
>
|
||||
</QIcon>
|
||||
</span>
|
||||
<span v-if="'message' === col.name">message</span>
|
||||
</QTd></QTr
|
||||
></template
|
||||
>
|
||||
</QTable></template
|
||||
>
|
||||
</VnPaginate>
|
||||
</QCardSection>
|
||||
<QCardActions align="right">
|
||||
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
||||
<QBtn
|
||||
:label="t('globals.confirm')"
|
||||
color="primary"
|
||||
:disable="!newState"
|
||||
@click="updateState"
|
||||
unelevated
|
||||
autofocus
|
||||
/> </QCardActions
|
||||
></QCard>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.splitRow {
|
||||
border: 1px solid #ec8916;
|
||||
border-width: 1px 0 1px 0;
|
||||
}
|
||||
.list {
|
||||
max-height: 100%;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
}
|
||||
|
||||
#true {
|
||||
background-color: $positive;
|
||||
}
|
||||
|
||||
#false {
|
||||
background-color: $negative;
|
||||
}
|
||||
|
||||
div.q-dialog__inner > div {
|
||||
max-width: fit-content !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<script setup>
|
||||
import { computed, onMounted, ref, toRefs } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import axios from 'axios';
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
const { t } = useI18n();
|
||||
const showSplitDialog = ref(false);
|
||||
const newState = ref(null);
|
||||
const resultSplit = ref([]);
|
||||
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
||||
const $props = defineProps({
|
||||
tickets: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const tickets = ref($props.tickets ?? []);
|
||||
const rowBtnDisable = () =>
|
||||
!(
|
||||
formData.value?.agencyModeFk &&
|
||||
formData.value?.date &&
|
||||
rowsSelected.value.length > 0
|
||||
);
|
||||
const rowsSelected = ref([]);
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'status',
|
||||
label: t('negative.split.status'),
|
||||
field: ({ status }) => status,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'ticket',
|
||||
label: t('negative.split.ticket'),
|
||||
field: ({ ticket }) => ticket,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'newTicket',
|
||||
label: t('negative.split.newTicket'),
|
||||
field: ({ newTicket }) => newTicket,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'message',
|
||||
label: t('negative.split.message'),
|
||||
field: ({ message }) => message,
|
||||
sortable: true,
|
||||
},
|
||||
// {
|
||||
// name: 'actions',
|
||||
// align: 'center',
|
||||
// label: t('negative.split.actions'),
|
||||
// // style: 'padding-left: 100px',
|
||||
// // headerStyle: 'padding-left: 100px',
|
||||
// },
|
||||
]);
|
||||
|
||||
const formData = ref({ agencies: [] });
|
||||
const handleDateChanged = async () => {
|
||||
const { data: agencyData } = await axios.get('Agencies/getLanded', {
|
||||
params: {
|
||||
addressFk: 123,
|
||||
agencyModeFk: 8,
|
||||
warehouseFk: 1,
|
||||
shipped: '2001-02-08T23:00:00.000Z',
|
||||
},
|
||||
});
|
||||
if (!agencyData) formData.value.agencies = [];
|
||||
const { zoneFk } = agencyData;
|
||||
const { data: zoneData } = await axios.get('Zones/Includingexpired', {
|
||||
params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
|
||||
});
|
||||
formData.value.agencies = zoneData;
|
||||
if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
|
||||
// formData.value.dateChanged = false;
|
||||
};
|
||||
const ticketsSelected = ref([]);
|
||||
onMounted(() => {
|
||||
ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
|
||||
});
|
||||
|
||||
const updateState = async () => {
|
||||
try {
|
||||
showSplitDialog.value = true;
|
||||
const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
|
||||
axios.post(`Tickets/state`, {
|
||||
ticketFk,
|
||||
code: newState.value,
|
||||
})
|
||||
);
|
||||
await Promise.all(rowsToUpdate);
|
||||
} catch (err) {
|
||||
return err;
|
||||
} finally {
|
||||
dialogRef.value.hide({ type: 'refresh', refresh: true });
|
||||
}
|
||||
};
|
||||
|
||||
function getIcon(value) {
|
||||
const icons = {
|
||||
split: {
|
||||
name: 'check_circle',
|
||||
color: 'secondary',
|
||||
},
|
||||
noSplit: {
|
||||
name: 'warning',
|
||||
color: 'primary',
|
||||
},
|
||||
error: {
|
||||
name: 'close',
|
||||
color: 'negative',
|
||||
},
|
||||
};
|
||||
return icons[value];
|
||||
}
|
||||
|
||||
const updateNewTickets = async () => {
|
||||
tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
|
||||
console.log('updateNewTickets');
|
||||
rowsSelected.value = [];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
|
||||
<QCard class="q-pa-sm">
|
||||
<QCardSection class="row items-center q-pb-none">
|
||||
<QAvatar
|
||||
:icon="icon"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="xl"
|
||||
v-if="icon"
|
||||
/>
|
||||
<span class="text-h6 text-grey">{{
|
||||
t('negative.detail.modal.handleSplited.title')
|
||||
}}</span>
|
||||
<QSpace />
|
||||
<QBtn icon="close" flat round dense v-close-popup />
|
||||
</QCardSection>
|
||||
<QCardSection class="row items-center justify-center column items-stretch">
|
||||
<Qform>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<VnInputDate
|
||||
:label="t('Max date')"
|
||||
v-model="formData.date"
|
||||
@update:model-value="(evt) => handleDateChanged()" />
|
||||
|
||||
<VnSelect
|
||||
:disable="formData.agencies.length < 1"
|
||||
:label="t('Agency')"
|
||||
v-model="formData.agencyModeFk"
|
||||
:options="formData.agencies"
|
||||
option-label="name"
|
||||
option-value="id" />
|
||||
|
||||
<QBtn
|
||||
icon="save"
|
||||
:disable="rowBtnDisable()"
|
||||
color="primary"
|
||||
flat
|
||||
rounded
|
||||
@click="updateNewTickets"
|
||||
/></VnRow>
|
||||
</Qform>
|
||||
<VnPaginate data-key="splitLack" :data="tickets">
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
selection="multiple"
|
||||
row-key="newTicket"
|
||||
v-model:selected="rowsSelected"
|
||||
:no-data-label="t('globals.noResults')"
|
||||
flat
|
||||
dense
|
||||
hide-bottom
|
||||
auto-load
|
||||
:rows-per-page-options="[0]"
|
||||
hide-pagination
|
||||
:pagination="{ rowsPerPage: null }"
|
||||
>
|
||||
<template #header="props">
|
||||
<QTr :props="props">
|
||||
<QTh></QTh>
|
||||
<QTh
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
{{ t(col.label) }}
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<QTr :props="props">
|
||||
<Qtd>
|
||||
<QCheckbox v-model="props.selected" />
|
||||
</Qtd>
|
||||
<QTd
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
![
|
||||
'status',
|
||||
'message',
|
||||
'actions',
|
||||
].includes(col.name)
|
||||
"
|
||||
>
|
||||
{{ col.value }}
|
||||
</span>
|
||||
<span v-if="'status' === col.name">
|
||||
<QIcon
|
||||
:name="`${getIcon(col.value).name}`"
|
||||
size="xs"
|
||||
class="cursor-pointer"
|
||||
:color="getIcon(col.value).color"
|
||||
>
|
||||
</QIcon>
|
||||
</span>
|
||||
<span v-if="'message' === col.name">message</span>
|
||||
</QTd></QTr
|
||||
></template
|
||||
>
|
||||
</QTable></template
|
||||
>
|
||||
</VnPaginate>
|
||||
</QCardSection>
|
||||
<QCardActions align="right">
|
||||
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
||||
<QBtn
|
||||
:label="t('globals.confirm')"
|
||||
color="primary"
|
||||
:disable="!newState"
|
||||
@click="updateState"
|
||||
unelevated
|
||||
autofocus
|
||||
/> </QCardActions
|
||||
></QCard>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.splitRow {
|
||||
border: 1px solid #ec8916;
|
||||
border-width: 1px 0 1px 0;
|
||||
}
|
||||
.list {
|
||||
max-height: 100%;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
}
|
||||
|
||||
#true {
|
||||
background-color: $positive;
|
||||
}
|
||||
|
||||
#false {
|
||||
background-color: $negative;
|
||||
}
|
||||
|
||||
div.q-dialog__inner > div {
|
||||
max-width: fit-content !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue