feat: updates

src/i18n/locale/en.yml

@@ -6,6 +6,7 @@ globals:
     entity: Entity
     user: User
     details: Details
+    Preview: Preview
     collapseMenu: Collapse left menu
     backToDashboard: Return to dashboard
     notifications: Notifications

src/i18n/locale/es.yml

@@ -6,6 +6,7 @@ globals:
     entity: Entidad
     user: Usuario
     details: Detalles
+    preview: Vista previa
     collapseMenu: Contraer menú lateral
     backToDashboard: Volver al tablón
     notifications: Notificaciones

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { QBtn, QCheckbox } from 'quasar';
 import axios from 'axios';
@@ -12,6 +12,7 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import { toDate, toHour } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
+import { useStateStore } from 'stores/useStateStore';
 
 const { openConfirmationModal } = useVnConfirm();
 
@@ -20,6 +21,7 @@ const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
 const editableStates = ref([]);
 const { notify } = useNotify();
+const stateStore = useStateStore();
 
 const selectedRows = ref([]);
 const originalRowDataCopy = ref(null);
@@ -29,6 +31,9 @@ const $props = defineProps({
         required: true,
     },
 });
+onMounted(() => (stateStore.rightDrawer = false));
+onUnmounted(() => (stateStore.rightDrawer = true));
+
 const copyOriginalRowsData = (rows) => {
     originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
 };
@@ -71,10 +76,17 @@ function isComponentVn(col) {
     return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
 }
 const tableColumnComponents = computed(() => ({
+    status: {
+        component: 'span',
+        props: {},
+        event: () => ({}),
+        sortable: false,
+    },
     ticketFk: {
         component: QBtn,
-        props: { color: 'blue', flat: true },
+        props: { color: 'blue', sortable: true, flat: true },
         event: () => ({}),
+        sortable: true,
     },
     shipped: {
         component: 'span',
@@ -133,36 +145,20 @@ const tableColumnComponents = computed(() => ({
         props: {},
         event: () => ({}),
     },
-
-    peticionCompra: {
-        component: QCheckbox,
-        props: {
-            disabled: true,
-        },
-        event: getInputEvents,
-    },
-    isRookie: {
-        component: QCheckbox,
-        props: {
-            disabled: true,
-        },
-        event: getInputEvents,
-    },
-    turno: {
-        component: QCheckbox,
-        props: {
-            disabled: true,
-        },
-        event: getInputEvents,
-    },
 }));
 
 const columns = computed(() => [
+    {
+        name: 'status',
+        align: 'center',
+        sortable: false,
+    },
     {
         name: 'ticketFk',
         label: t('negative.detail.ticketFk'),
         field: 'ticketFk',
         align: 'left',
+        sortable: true,
     },
     {
         name: 'shipped',
@@ -170,12 +166,14 @@ const columns = computed(() => [
         field: 'shipped',
         align: 'left',
         format: (val) => toDate(val),
+        sortable: true,
     },
     {
         name: 'theoreticalhour',
         label: t('negative.detail.theoreticalhour'),
         field: 'theoreticalhour',
         align: 'left',
+        sortable: true,
         format: (val) => toHour(val),
     },
     {
@@ -183,54 +181,42 @@ const columns = computed(() => [
         label: t('negative.detail.state'),
         field: 'code',
         align: 'left',
+        sortable: true,
     },
     {
         name: 'agName',
         label: t('negative.detail.agName'),
         field: 'agName',
         align: 'left',
+        sortable: true,
     },
     {
         name: 'zoneName',
         label: t('negative.detail.zoneName'),
         field: 'zoneName',
         align: 'left',
+        sortable: true,
     },
     {
         name: 'nickname',
         label: t('negative.detail.nickname'),
         field: 'nickname',
         align: 'left',
+        sortable: true,
     },
     {
         name: 'quantity',
         label: t('negative.detail.quantity'),
         field: 'quantity',
         align: 'left',
+        sortable: true,
     },
     {
         name: 'alertLevelCode',
         label: t('negative.detail.alertLevelCode'),
         field: 'alertLevelCode',
         align: 'left',
-    },
+        sortable: true,
-    {
-        name: 'isRookie',
-        label: t('negative.detail.isRookie'),
-        field: 'isRookie',
-        align: 'center',
-    },
-    {
-        name: 'turno',
-        label: t('negative.detail.turno'),
-        field: 'turno',
-        align: 'center',
-    },
-    {
-        name: 'peticionCompra',
-        label: t('negative.detail.peticionCompra'),
-        field: 'peticionCompra',
-        align: 'center',
     },
 ]);
 
@@ -269,6 +255,21 @@ function getIcon(key, prop) {
     };
     return icons[status][prop];
 }
+
+// Función de comparación
+function freeFirst({ alertLevel: a }, { alertLevel: b }) {
+    const DEFAULT = 0;
+    // Si el estado de 'a' es 'free' y el de 'b' no lo es, 'a' viene primero
+    if (a === DEFAULT && b !== DEFAULT) {
+        return -1;
+    }
+    // Si el estado de 'b' es 'free' y el de 'a' no lo es, 'b' viene primero
+    if (b === DEFAULT && a !== DEFAULT) {
+        return 1;
+    }
+    // En cualquier otro caso, no se cambia el orden
+    return 0;
+}
 </script>
 
 <template>
@@ -284,11 +285,12 @@ function getIcon(key, prop) {
         @on-fetch="copyOriginalRowsData($event)"
         auto-load
     >
+        <!-- :rows="rows" -->
         <template #body="{ rows }">
             <QTable
                 ref="tableRef"
-                :rows="rows"
                 :columns="columns"
+                :rows="rows.sort(freeFirst)"
                 row-key="ticketFk"
                 selection="multiple"
                 v-model:selected="selectedRows"
@@ -325,6 +327,41 @@ function getIcon(key, prop) {
                                     <template v-if="isComponentVn(col)">{{
                                         col.value
                                     }}</template>
+                                    <template v-if="col.name === 'status'">
+                                        <QIcon
+                                            v-if="props.row.isRookie"
+                                            name="vn:person"
+                                            size="xs"
+                                            color="primary"
+                                            class="cursor-pointer"
+                                        >
+                                            <QTooltip>{{
+                                                t('negative.detail.isRookie')
+                                            }}</QTooltip>
+                                        </QIcon>
+                                        <QIcon
+                                            v-if="props.row.peticionCompra"
+                                            name="vn:buyrequest"
+                                            size="xs"
+                                            color="primary"
+                                            class="cursor-pointer"
+                                        >
+                                            <QTooltip>{{
+                                                t('negative.detail.peticionCompra')
+                                            }}</QTooltip>
+                                        </QIcon>
+                                        <QIcon
+                                            v-if="props.row.turno"
+                                            name="vn:calendar"
+                                            size="xs"
+                                            color="primary"
+                                            class="cursor-pointer"
+                                        >
+                                            <QTooltip>{{
+                                                t('negative.detail.turno')
+                                            }}</QTooltip>
+                                        </QIcon>
+                                    </template>
                                     <template v-if="col.name === 'ticketFk'"
                                         >{{ col.value }}
                                         <ItemDescriptorProxy :id="$props.id"

src/pages/Ticket/Negative/TicketLackList.vue

@@ -145,7 +145,12 @@ const columns = computed(() => [
             </template>
         </VnSubToolbar>
         <div v-show="!currentRow" class="list">
-            <VnPaginate data-key="NegativeList" :url="`Tickets/itemLack`" auto-load>
+            <VnPaginate
+                data-key="NegativeList"
+                :url="`Tickets/itemLack`"
+                :order="['itemFk DESC']"
+                auto-load
+            >
                 <template #body="{ rows }">
                     <QTable
                         :columns="columns"