refactor: refs #6242 modified front to show ticket problems

src/pages/Monitor/Ticket/MonitorTickets.vue

@@ -364,7 +364,7 @@ const openTab = (id) =>
         <template #column-totalProblems="{ row }">
             <span>
                 <QIcon
-                    v-if="row.isTaxDataChecked === 0"
+                    v-if="row.isTaxDataChecked === 1"
                     name="vn:no036"
                     color="primary"
                     size="xs"

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
@@ -10,8 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { toDateTimeFormat } from 'src/filters/date';
-
+import FetchData from 'src/components/FetchData.vue';
-onMounted(async () => await getTicketData());
 
 const $props = defineProps({
     id: {
@@ -27,8 +25,7 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const sales = ref({});
+const problems = ref({});
-const rounding = ref();
 
 const filter = {
     include: [
@@ -107,37 +104,14 @@ const data = ref(useCardDescription());
 function ticketFilter(ticket) {
     return JSON.stringify({ clientFk: ticket.clientFk });
 }
-
-const getTicketData = async () => {
-    const { data } = await axios.get(`tickets/filter`, {
-        params: { id: entityId.value },
-    });
-    rounding.value = data[0]?.hasRounding;
-    getSales();
-};
-
-const getSales = async () => {
-    const { data } = await axios.get(`Tickets/${route.params.id}/getSales`);
-    if (data) {
-        sales.value = data;
-
-        await sales.value.map((sale) => {
-            return {
-                ...sale,
-                hasRounding: false,
-            };
-        });
-
-        await sales.value.forEach((sale) => {
-            if (rounding?.value?.includes(sale.concept)) {
-                sale.hasRounding = true;
-            }
-        });
-    }
-};
 </script>
 
 <template>
+    <FetchData
+        :url="`Tickets/${entityId}/getTicketProblems`"
+        auto-load
+        @on-fetch="(data) => (problems = data)"
+    />
     <CardDescriptor
         module="Ticket"
         :url="`Tickets/${entityId}`"
@@ -145,7 +119,6 @@ const getSales = async () => {
         :title="data.title"
         :subtitle="data.subtitle"
         data-key="ticketData"
-        @on-fetch="getTicketData"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
@@ -199,14 +172,6 @@ const getSales = async () => {
                 >
                     <QTooltip>{{ t('Client inactive') }}</QTooltip>
                 </QIcon>
-                <QIcon
-                    v-if="entity.client.isFreezed == true"
-                    name="vn:frozen"
-                    size="xs"
-                    color="primary"
-                >
-                    <QTooltip>{{ t('Client Frozen') }}</QTooltip>
-                </QIcon>
                 <QIcon
                     v-if="entity.problem.includes('hasRisk')"
                     name="vn:risk"
@@ -231,9 +196,49 @@ const getSales = async () => {
                 >
                     <QTooltip>{{ t('This ticket is deleted') }}</QTooltip>
                 </QIcon>
-                <div v-for="sale in sales" :key="sale.id">
+                <div v-for="problem in problems" :key="problem" class="q-gutter-x-xs">
                     <QIcon
-                        v-if="sale?.hasRounding"
+                        v-if="problem?.hasComponentLack"
+                        color="primary"
+                        name="vn:components"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('ticket.summary.hasComponentLack') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-show="problem?.risk"
+                        name="vn:risk"
+                        :color="problem?.hasHighRisk ? 'negative' : 'primary'"
+                        size="xs"
+                    >
+                        <QTooltip
+                            >{{ $t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip
+                        >
+                    </QIcon>
+                    <QIcon v-if="problem?.hasItemDelay" color="primary" size="xs">
+                        <QTooltip>
+                            {{ t('ticket.summary.hasItemDelay') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon v-if="problem?.hasItemLost" color="primary" size="xs">
+                        <QTooltip>
+                            {{ t('ticket.summary.hasItemLost') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        name="vn:unavailable"
+                        v-show="problem?.hasItemShortage"
+                        color="primary"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('ticket.summary.itemShortage') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="problem?.hasRounding"
                         color="primary"
                         name="sync_problem"
                         size="xs"
@@ -242,6 +247,32 @@ const getSales = async () => {
                             {{ t('ticketList.rounding') }}
                         </QTooltip>
                     </QIcon>
+                    <QIcon
+                        v-if="problem?.hasTicketRequest"
+                        color="primary"
+                        name="vn:buyrequest"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('ticket.summary.hasTicketRequest') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="problem.isFreezed"
+                        name="vn:frozen"
+                        size="xs"
+                        color="primary"
+                    >
+                        <QTooltip>{{ t('Client Frozen') }}</QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-show="problem.isTaxDataChecked"
+                        name="vn:no036"
+                        size="xs"
+                        color="primary"
+                    >
+                        <QTooltip>{{ t('Client not checked') }}</QTooltip>
+                    </QIcon>
                 </div>
             </QCardActions>
         </template>

src/pages/Ticket/Card/TicketSale.vue

@@ -50,17 +50,12 @@ const transfer = ref({
     sales: [],
 });
 const tableRef = ref([]);
-const roundingName = ref();
 
 watch(
     () => route.params.id,
     async () => await getSales()
 );
 
-onMounted(async () => {
-    getTicketData();
-});
-
 const columns = computed(() => [
     {
         align: 'left',
@@ -162,19 +157,8 @@ const getConfig = async () => {
 };
 
 const onSalesFetched = (salesData) => {
-    sales.value = salesData.map((sale) => {
+    sales.value = salesData;
-        return {
+    for (let sale of salesData) sale.amount = getSaleTotal(sale);
-            ...sale,
-            amount: getSaleTotal(sale),
-            hasRounding: false,
-        };
-    });
-
-    sales.value.forEach((sale) => {
-        if (roundingName?.value?.includes(sale.concept)) {
-            sale.hasRounding = true;
-        }
-    });
 };
 
 const getSales = async () => {
@@ -195,14 +179,6 @@ const getSaleTotal = (sale) => {
     return price - discount;
 };
 
-const getTicketData = async () => {
-    const { data } = await axios.get(`tickets/filter`, {
-        params: { id: route.params.id },
-    });
-
-    roundingName.value = data[0]?.hasRounding;
-};
-
 const resetChanges = async () => {
     arrayData.fetch({ append: false });
     getSales();
@@ -635,7 +611,7 @@ watch(
     <VnTable
         ref="tableRef"
         data-key="TicketSales"
-        :data="sales"
+        :url="`Tickets/${route.params.id}/getSales`"
         :columns="columns"
         v-model:selected="selectedRows"
         :bottom="true"
@@ -658,7 +634,6 @@ watch(
         :default-reset="false"
         :default-save="false"
         :disabled-attr="isTicketEditable"
-        @request-success="getSales"
     >
         <template #column-statusIcons="{ row }">
             <router-link
@@ -699,7 +674,7 @@ watch(
                 size="xs"
             >
                 <QTooltip>
-                    {{ t('ticketSale.hasComponentLack') }}
+                    {{ t('ticket.summary.hasComponentLack') }}
                 </QTooltip>
             </QIcon>
             <QIcon v-if="row.hasRounding" color="primary" name="sync_problem" size="xs">
@@ -707,6 +682,16 @@ watch(
                     {{ t('ticketList.rounding') }}
                 </QTooltip>
             </QIcon>
+            <QIcon v-if="row.hasItemLost" color="primary" size="xs">
+                <QTooltip>
+                    {{ t('ticketList.itemLost') }}
+                </QTooltip>
+            </QIcon>
+            <QIcon v-if="row.hasItemDelay" color="primary" size="xs">
+                <QTooltip>
+                    {{ t('ticketList.itemDelay') }}
+                </QTooltip>
+            </QIcon>
         </template>
         <template #column-image="{ row }">
             <div class="image-wrapper">

src/pages/Ticket/Card/TicketSummary.vue

@@ -38,11 +38,9 @@ const ticket = computed(() => summaryRef.value?.entity);
 const editableStates = ref([]);
 const ticketUrl = ref();
 const grafanaUrl = 'https://grafana.verdnatura.es';
-const roundingName = ref();
 
 onMounted(async () => {
     ticketUrl.value = (await getUrl('ticket/')) + entityId.value + '/';
-    getTicketData();
 });
 
 function formattedAddress() {
@@ -103,27 +101,6 @@ function getNoteValue(description) {
 function toTicketUrl(section) {
     return '#/ticket/' + entityId.value + '/' + section;
 }
-
-const getTicketData = async () => {
-    const { data } = await axios.get(`tickets/filter`, {
-        params: { id: entityId.value },
-    });
-
-    if (data) {
-        roundingName.value = data[0]?.hasRounding;
-        ticket.value.sales.map((sale) => {
-            return {
-                ...sale,
-                hasRounding: false,
-            };
-        });
-        ticket.value.sales.forEach((sale) => {
-            if (roundingName?.value?.includes(sale.concept)) {
-                sale.hasRounding = true;
-            }
-        });
-    }
-};
 </script>
 
 <template>
@@ -431,7 +408,7 @@ const getTicketData = async () => {
                                     </QTooltip>
                                 </QIcon>
                                 <QIcon
-                                    v-if="props.row.hasRounding"
+                                    v-show="props.row.hasRounding"
                                     color="primary"
                                     name="sync_problem"
                                     size="xs"
@@ -440,6 +417,24 @@ const getTicketData = async () => {
                                         {{ t('ticketList.rounding') }}
                                     </QTooltip>
                                 </QIcon>
+                                <QIcon
+                                    v-show="props.row.hasItemLost"
+                                    color="primary"
+                                    size="xs"
+                                >
+                                    <QTooltip>
+                                        {{ t('ticketList.itemLost') }}
+                                    </QTooltip>
+                                </QIcon>
+                                <QIcon
+                                    v-show="props.row.hasItemDelay"
+                                    color="primary"
+                                    size="xs"
+                                >
+                                    <QTooltip>
+                                        {{ t('ticketList.itemDelay') }}
+                                    </QTooltip>
+                                </QIcon>
                             </QTd>
                             <QTd>
                                 <QBtn class="link" flat>

src/pages/Ticket/TicketList.vue

@@ -487,13 +487,13 @@ function setReference(data) {
         <template #column-statusIcons="{ row }">
             <div class="q-gutter-x-xs">
                 <QIcon
-                    v-if="row.isTaxDataChecked === 0"
+                    v-if="row.isTaxDataChecked === 1"
                     color="primary"
                     name="vn:no036"
                     size="xs"
                 >
                     <QTooltip>
-                        {{ t('No verified data') }}
+                        {{ t('ticketList.noVerifiedData') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon
@@ -503,7 +503,7 @@ function setReference(data) {
                     size="xs"
                 >
                     <QTooltip>
-                        {{ t('Purchase request') }}
+                        {{ t('ticketList.purchaseRequest') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon
@@ -513,12 +513,12 @@ function setReference(data) {
                     size="xs"
                 >
                     <QTooltip>
-                        {{ t('Not visible') }}
+                        {{ t('ticketList.notVisible') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon v-if="row.isFreezed" color="primary" name="vn:frozen" size="xs">
                     <QTooltip>
-                        {{ t('Client frozen') }}
+                        {{ t('ticketList.clientFrozen') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon v-if="row.risk" color="primary" name="vn:risk" size="xs">
@@ -531,7 +531,7 @@ function setReference(data) {
                     size="xs"
                 >
                     <QTooltip>
-                        {{ t('Component lack') }}
+                        {{ t('ticketList.componentLack') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon

src/pages/Ticket/locale/en.yml

@@ -273,3 +273,8 @@ ticketList:
     addressNickname: Address nickname
     ref: Reference
     rounding: Rounding
+    noVerifiedData: No verified data
+    purchaseRequest: Purchase request
+    notVisible: Not visible
+    clientFrozen: Client frozen
+    componentLack: Component lack

src/pages/Ticket/locale/es.yml

@@ -276,3 +276,8 @@ ticketList:
     addressNickname: Alias consignatario
     ref: Referencia
     rounding: Redondeo
+    noVerifiedData: Sin datos comprobados
+    purchaseRequest: Petición de compra
+    notVisible: No visible
+    clientFrozen: Cliente congelado
+    componentLack: Faltan componentes