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

perf: refs #6321 clean code vntable detail

This commit is contained in:
Javier Segarra 2025-01-26 00:35:27 +01:00
parent ebca833d73
commit c88be1c6a8
2 changed files with 84 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/Ticket/Negative/TicketLackDetail.vue
View File

@ -4,26 +4,23 @@ import { useI18n } from 'vue-i18n';
import ChangeQuantityDialog from './components/ChangeQuantityDialog.vue'; import ChangeQuantityDialog from './components/ChangeQuantityDialog.vue';
import ChangeStateDialog from './components/ChangeStateDialog.vue'; import ChangeStateDialog from './components/ChangeStateDialog.vue';
import ChangeItemDialog from './components/ChangeItemDialog.vue'; import ChangeItemDialog from './components/ChangeItemDialog.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import TicketTransfer from '../Card/TicketTransfer.vue'; import TicketTransfer from '../Card/TicketTransfer.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import VnImg from 'src/components/ui/VnImg.vue';
import TicketLackTable from './TicketLackTable.vue'; import TicketLackTable from './TicketLackTable.vue';
import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';
import VnPopupProxy from 'src/components/common/VnPopupProxy.vue'; import VnPopupProxy from 'src/components/common/VnPopupProxy.vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import FetchedTags from 'components/ui/FetchedTags.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnImg from 'src/components/ui/VnImg.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
const URL_KEY = 'Tickets/ItemLack';
const editableStates = ref([]); const editableStates = ref([]);
const stateStore = useStateStore(); const stateStore = useStateStore();
const proposalDialogRef = ref();
const tableRef = ref(); const tableRef = ref();
const changeItemDialogRef = ref(null); const changeItemDialogRef = ref(null);
const changeStateDialogRef = ref(null); const changeStateDialogRef = ref(null);
@ -32,7 +29,6 @@ const showProposalDialog = ref(false);
const showChangeQuantityDialog = ref(false); const showChangeQuantityDialog = ref(false);
const showFree = ref(true); const showFree = ref(true);
const selectedRows = ref([]); const selectedRows = ref([]);
const badgeLackRef = ref();
const route = useRoute(); const route = useRoute();
const itemLack = ref(null); const itemLack = ref(null);
const originalRowDataCopy = ref(null); const originalRowDataCopy = ref(null);
@ -43,9 +39,6 @@ onUnmounted(() => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
}); });
const copyOriginalRowsData = (rows) => {
originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
};
const entityId = computed(() => route.params.id); const entityId = computed(() => route.params.id);
const item = ref({}); const item = ref({});
@ -106,9 +99,7 @@ const itemProposalSelected = ref(null);
function onBuysFetched(data) { function onBuysFetched(data) {
Object.assign(item.value, data[0]); Object.assign(item.value, data[0]);
} }
function onTicketLackFetched(data) {
itemLack.value = data[0];
}
const showItemProposal = () => { const showItemProposal = () => {
quasar quasar
.dialog({ .dialog({
@ -145,13 +136,14 @@ const showItemProposal = () => {
<FetchData <FetchData
:url="`Tickets/itemLack`" :url="`Tickets/itemLack`"
:params="{ itemFk: entityId }" :params="{ itemFk: entityId }"
@on-fetch="onTicketLackFetched" @on-fetch="(data) => (itemLack = data[0])"
auto-load auto-load
/> />
<VnSubToolbar> <VnSubToolbar>
<template #st-data> <template #st-data>
<QBtnGroup push style="column-gap: 1px"> <QBtnGroup push style="column-gap: 1px">
<VnPopupProxy <VnPopupProxy
data-cy="changeItem"
:disable="selectedRows.length < 1" :disable="selectedRows.length < 1"
:label="t('negative.buttonsUpdate.item')" :label="t('negative.buttonsUpdate.item')"
:tooltip="t('negative.detail.modal.changeItem.title')" :tooltip="t('negative.detail.modal.changeItem.title')"
@ -164,6 +156,7 @@ const showItemProposal = () => {
/></template> /></template>
</VnPopupProxy> </VnPopupProxy>
<VnPopupProxy <VnPopupProxy
data-cy="changeState"
:disable="selectedRows.length < 1" :disable="selectedRows.length < 1"
:label="t('negative.buttonsUpdate.state')" :label="t('negative.buttonsUpdate.state')"
:tooltip="t('negative.detail.modal.changeState.title')" :tooltip="t('negative.detail.modal.changeState.title')"
@ -176,6 +169,7 @@ const showItemProposal = () => {
/></template> /></template>
</VnPopupProxy> </VnPopupProxy>
<VnPopupProxy <VnPopupProxy
data-cy="changeQuantity"
:disable="selectedRows.length < 1" :disable="selectedRows.length < 1"
:label="t('negative.buttonsUpdate.quantity')" :label="t('negative.buttonsUpdate.quantity')"
:tooltip="t('negative.detail.modal.changeQuantity.title')" :tooltip="t('negative.detail.modal.changeQuantity.title')"
@ -189,6 +183,7 @@ const showItemProposal = () => {
/></template> /></template>
</VnPopupProxy> </VnPopupProxy>
<QBtn <QBtn
data-cy="transferLines"
color="primary" color="primary"
icon="vn:splitline" icon="vn:splitline"
:disable="selectedRows.length < 1" :disable="selectedRows.length < 1"
@ -203,6 +198,7 @@ const showItemProposal = () => {
></TicketTransfer> ></TicketTransfer>
</QBtn> </QBtn>
<QBtn <QBtn
data-cy="itemProposal"
color="primary" color="primary"
@click="showProposalDialog = true" @click="showProposalDialog = true"
:disable="selectedRows.length < 1" :disable="selectedRows.length < 1"
@ -224,27 +220,25 @@ const showItemProposal = () => {
</QTooltip> </QTooltip>
</QBtn> </QBtn>
</QBtnGroup> </QBtnGroup>
<QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" /> <QCheckbox
v-model="showFree"
data-cy="showFree"
:label="t('negative.detail.showFree')"
/>
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<QPage> <TicketLackTable
<div class="full-width" style="padding-bottom: 0px"> ref="tableRef"
<VnPaginate :filter="{ alertLevel: showFree }"
:data-key="URL_KEY" @update:selection="({ value }, _) => (selectedRows = value)"
:url="`${URL_KEY}/${entityId}`"
ref="itemLackForm"
@on-fetch="copyOriginalRowsData"
auto-load
class="full-width q-pa-md"
> >
<template #body> <template #top-left>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center" v-if="itemLack">
<VnImg :id="item.id" class="rounded image-wrapper"></VnImg> <VnImg :id="itemLack.itemFk" class="rounded image-wrapper"></VnImg>
<div class="flex column" style="align-items: center"> <div class="flex column" style="align-items: center">
<QBadge <QBadge
ref="badgeLackRef" ref="badgeLackRef"
class="q-ml-xs" class="q-ml-xs"
v-if="itemLack"
text-color="white" text-color="white"
:color="itemLack.lack === 0 ? 'green' : 'red'" :color="itemLack.lack === 0 ? 'green' : 'red'"
:label="itemLack.lack" :label="itemLack.lack"
@ -259,15 +253,7 @@ const showItemProposal = () => {
</div> </div>
</div> </div>
</template> </template>
</VnPaginate> </TicketLackTable>
</div>
<TicketLackTable
ref="tableRef"
:filter="{ alertLevel: showFree }"
@update:selection="({ value }, _) => (selectedRows = value)"
></TicketLackTable>
</QPage>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-enter-active, .list-enter-active,

67
src/pages/Ticket/Negative/TicketLackTable.vue
View File

@ -42,12 +42,10 @@ const filterLack = ref({
const selectedRows = ref([]); const selectedRows = ref([]);
const { t } = useI18n(); const { t } = useI18n();
const URL_KEY = 'Tickets/ItemLack';
const editableStates = ref([]);
const { notify } = useNotify(); const { notify } = useNotify();
const route = useRoute(); const route = useRoute();
const itemLack = ref(null); // const itemLack = ref(null);
const getInputEvents = ({ col, ...rows }) => ({ const getInputEvents = ({ col, ...rows }) => ({
'update:modelValue': () => saveChange(col.name, rows), 'update:modelValue': () => saveChange(col.name, rows),
'keyup.enter': () => saveChange(col.name, rows), 'keyup.enter': () => saveChange(col.name, rows),
@ -55,7 +53,7 @@ const getInputEvents = ({ col, ...rows }) => ({
const saveChange = async (field, { rowIndex, row }) => { const saveChange = async (field, { rowIndex, row }) => {
try { try {
switch (field) { switch (field) {
case 'code': case 'alertLevelCode':
await axios.post(`Tickets/state`, { await axios.post(`Tickets/state`, {
ticketFk: row.ticketFk, ticketFk: row.ticketFk,
code: row[field], code: row[field],
@ -80,7 +78,7 @@ const saveChange = async (field, { rowIndex, row }) => {
const entityId = computed(() => route.params.id); const entityId = computed(() => route.params.id);
const item = ref({}); const item = ref({});
const rowColor = (row) => { const rowColor = (row) => {
if (!row.hasToIgnore) return 'negative'; if (row.hasToIgnore) return 'negative';
return 'transparent'; return 'transparent';
}; };
// const textRowColor = (row) => { // const textRowColor = (row) => {
@ -203,17 +201,12 @@ watch(selectedRows, () => emit('update:selection', selectedRows));
function onBuysFetched(data) { function onBuysFetched(data) {
Object.assign(item.value, data[0]); Object.assign(item.value, data[0]);
} }
function onTicketLackFetched(data) { // function onTicketLackFetched(data) {
itemLack.value = data[0]; // itemLack.value = data[0];
} // }
</script> </script>
<template> <template>
<FetchData
url="States/editableStates"
@on-fetch="(data) => (editableStates = data)"
auto-load
/>
<FetchData <FetchData
:url="`Items/${entityId}/getCard`" :url="`Items/${entityId}/getCard`"
:fields="['longName']" :fields="['longName']"
@ -227,19 +220,18 @@ function onTicketLackFetched(data) {
@on-fetch="onBuysFetched" @on-fetch="onBuysFetched"
auto-load auto-load
/> />
<FetchData <!-- <FetchData
:url="`Tickets/itemLack`" :url="`Tickets/itemLack`"
:params="{ itemFk: entityId }" :params="{ itemFk: entityId }"
@on-fetch="onTicketLackFetched" @on-fetch="onTicketLackFetched"
auto-load auto-load
/> /> -->
<VnTable <VnTable
ref="tableRef" ref="tableRef"
:data-key="URL_KEY" data-key="NegativeItem"
:map-key="false" :map-key="false"
:url="`${URL_KEY}/${entityId}`" :url="`Tickets/itemLack/${entityId}`"
:columns="columns" :columns="columns"
:without-header="true"
auto-load auto-load
:create="false" :create="false"
:create-as-dialog="false" :create-as-dialog="false"
@ -256,19 +248,33 @@ function onTicketLackFetched(data) {
:right-search="false" :right-search="false"
v-model:selected="selectedRows" v-model:selected="selectedRows"
> >
<template #top-left>
<slot name="top-left" />
</template>
<template #column-status="{ row }"> <template #column-status="{ row }">
<QTd style="width: 150px"> <QTd style="width: 150px">
<!-- <pre> {{ props }}</pre> --> <QIcon
<!-- v-if="!props.row.isBasket" --> v-if="row.isBasket"
<QIcon name="vn:basket" color="primary" class="cursor-pointer" size="xs"> name="vn:basket"
color="primary"
class="cursor-pointer"
size="xs"
>
<QTooltip>{{ t('negative.detail.isBasket') }}</QTooltip> <QTooltip>{{ t('negative.detail.isBasket') }}</QTooltip>
</QIcon> </QIcon>
<!-- v-if="!props.row.hasToIgnore" --> <!-- -->
<QIcon name="star" color="primary" class="cursor-pointer" size="xs"> <QIcon
v-if="row.hasToIgnore"
name="star"
color="primary"
class="cursor-pointer fill-icon"
size="xs"
>
<QTooltip>{{ t('negative.detail.hasToIgnore') }}</QTooltip> <QTooltip>{{ t('negative.detail.hasToIgnore') }}</QTooltip>
</QIcon> </QIcon>
<!-- v-if="!props.row.hasSubstitution" -->
<QIcon <QIcon
v-if="row.hasSubstitution"
name="change_circle" name="change_circle"
color="primary" color="primary"
class="cursor-pointer" class="cursor-pointer"
@ -277,10 +283,17 @@ function onTicketLackFetched(data) {
<QTooltip>{{ <QTooltip>{{
t('negative.detail.hasSubstitution') t('negative.detail.hasSubstitution')
}}</QTooltip> </QIcon }}</QTooltip> </QIcon
><QIcon name="vn:Person" size="xs" color="primary" class="cursor-pointer"> ><QIcon
v-if="row.isRookie"
name="vn:Person"
size="xs"
color="primary"
class="cursor-pointer"
>
<QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip> <QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
</QIcon> </QIcon>
<QIcon <QIcon
v-if="row.peticionCompra"
name="vn:buyrequest" name="vn:buyrequest"
size="xs" size="xs"
color="primary" color="primary"
@ -289,6 +302,7 @@ function onTicketLackFetched(data) {
<QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip> <QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
</QIcon> </QIcon>
<QIcon <QIcon
v-if="row.turno"
name="vn:calendar" name="vn:calendar"
size="xs" size="xs"
color="primary" color="primary"
@ -307,7 +321,8 @@ function onTicketLackFetched(data) {
/></template> /></template>
<template #column-alertLevelCode="props"> <template #column-alertLevelCode="props">
<VnSelect <VnSelect
:options="editableStates" url="States/editableStates"
auto-load
hide-selected hide-selected
option-value="id" option-value="id"
option-label="name" option-label="name"