perf: refs #6321 clean code vntable detail

src/pages/Ticket/Negative/TicketLackDetail.vue

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

src/pages/Ticket/Negative/TicketLackTable.vue

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