Merge pull request '#8138 add-component-ticketProblems' (!962) from 8138-add-component-ticketProblems into dev

Reviewed-on: #962

src/components/TicketProblems.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineProps({ row: { type: Object, required: true } });
+</script>
+<template>
+    <span>
+        <QIcon
+            v-if="row.isTaxDataChecked === 0"
+            name="vn:no036"
+            color="primary"
+            size="xs"
+        >
+            <QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
+        </QIcon>
+        <QIcon v-if="row.hasTicketRequest" name="vn:buyrequest" color="primary" size="xs">
+            <QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
+        </QIcon>
+        <QIcon v-if="row.itemShortage" name="vn:unavailable" color="primary" size="xs">
+            <QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
+        </QIcon>
+        <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
+            <QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
+        </QIcon>
+        <QIcon
+            v-if="row.risk"
+            name="vn:risk"
+            :color="row.hasHighRisk ? 'negative' : 'primary'"
+            size="xs"
+        >
+            <QTooltip>
+                {{ $t('salesTicketsTable.risk') }}: {{ row.risk - row.credit }}
+            </QTooltip>
+        </QIcon>
+        <QIcon v-if="row.hasComponentLack" name="vn:components" color="primary" size="xs">
+            <QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
+        </QIcon>
+        <QIcon v-if="row.isTooLittle" name="vn:isTooLittle" color="primary" size="xs">
+            <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
+        </QIcon>
+    </span>
+</template>

src/pages/Customer/Card/CustomerSummary.vue

@@ -320,7 +320,7 @@ const sumRisk = ({ clientRisks }) => {
                     :value="entity.recommendedCredit"
                 />
             </QCard>
-            <QCard class="vn-one">
+            <QCard class="vn-max">
                 <VnTitle :text="t('Latest tickets')" />
                 <CustomerSummaryTable />
             </QCard>

src/pages/Monitor/Ticket/MonitorTickets.vue

@@ -15,6 +15,7 @@ import { toCurrency, dateRange, dashIfEmpty } from 'src/filters';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import MonitorTicketSearchbar from './MonitorTicketSearchbar.vue';
 import MonitorTicketFilter from './MonitorTicketFilter.vue';
+import TicketProblems from 'src/components/TicketProblems.vue';
 
 const DEFAULT_AUTO_REFRESH = 2 * 60 * 1000; // 2min in ms
 const { t } = useI18n();
@@ -23,13 +24,18 @@ const tableRef = ref(null);
 const provinceOpts = ref([]);
 const stateOpts = ref([]);
 const zoneOpts = ref([]);
-const visibleColumns = ref([]);
 const { viewSummary } = useSummaryDialog();
 const from = Date.vnNew();
 from.setHours(0, 0, 0, 0);
 const to = new Date(from.getTime());
 to.setDate(to.getDate() + 1);
 to.setHours(23, 59, 59, 999);
+const stateColors = {
+    notice: 'info',
+    success: 'positive',
+    warning: 'warning',
+    alert: 'negative',
+};
 
 function exprBuilder(param, value) {
     switch (param) {
@@ -224,7 +230,7 @@ const columns = computed(() => [
             {
                 title: t('salesTicketsTable.goToLines'),
                 icon: 'vn:lines',
-                color: 'priamry',
+                color: 'primary',
                 action: (row) => openTab(row.id),
                 isPrimary: true,
                 attrs: {
@@ -235,7 +241,7 @@ const columns = computed(() => [
             {
                 title: t('salesTicketsTable.preview'),
                 icon: 'preview',
-                color: 'priamry',
+                color: 'primary',
                 action: (row) => viewSummary(row.id, TicketSummary),
                 isPrimary: true,
                 attrs: {
@@ -253,10 +259,10 @@ const getBadgeAttrs = (date) => {
     let timeTicket = new Date(date);
     timeTicket.setHours(0, 0, 0, 0);
 
-    let comparation = today - timeTicket;
+    let timeDiff = today - timeTicket;
 
-    if (comparation == 0) return { color: 'warning', 'text-color': 'black' };
-    if (comparation < 0) return { color: 'success', 'text-color': 'black' };
+    if (timeDiff == 0) return { color: 'warning', 'text-color': 'black' };
+    if (timeDiff < 0) return { color: 'success', 'text-color': 'black' };
     return { color: 'transparent', 'text-color': 'white' };
 };
 
@@ -271,13 +277,6 @@ const autoRefreshHandler = (value) => {
     }
 };
 
-const stateColors = {
-    notice: 'info',
-    success: 'positive',
-    warning: 'warning',
-    alert: 'negative',
-};
-
 const totalPriceColor = (ticket) => {
     const total = parseInt(ticket.totalWithVat);
     if (total > 0 && total < 50) return 'warning';
@@ -285,10 +284,10 @@ const totalPriceColor = (ticket) => {
 
 const formatShippedDate = (date) => {
     if (!date) return '-';
-    const split1 = date.split('T');
-    const [year, month, day] = split1[0].split('-');
-    const _date = new Date(year, month - 1, day);
-    return toDateFormat(_date);
+    const dateSplit = date.split('T');
+    const [year, month, day] = dateSplit[0].split('-');
+    const newDate = new Date(year, month - 1, day);
+    return toDateFormat(newDate);
 };
 
 const openTab = (id) =>
@@ -336,7 +335,6 @@ const openTab = (id) =>
         :expr-builder="exprBuilder"
         :offset="50"
         :columns="columns"
-        :visible-columns="visibleColumns"
         :right-search="false"
         default-mode="table"
         auto-load
@@ -366,61 +364,7 @@ const openTab = (id) =>
             </QCheckbox>
         </template>
         <template #column-totalProblems="{ row }">
-            <span>
-                <QIcon
-                    v-if="row.isTaxDataChecked === 0"
-                    name="vn:no036"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ $t('salesTicketsTable.noVerifiedData') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasTicketRequest"
-                    name="vn:buyrequest"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ $t('salesTicketsTable.purchaseRequest') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.itemShortage"
-                    name="vn:unavailable"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ $t('salesTicketsTable.notVisible') }}</QTooltip>
-                </QIcon>
-                <QIcon v-if="row.isFreezed" name="vn:frozen" color="primary" size="xs">
-                    <QTooltip>{{ $t('salesTicketsTable.clientFrozen') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.risk"
-                    name="vn:risk"
-                    :color="row.hasHighRisk ? 'negative' : 'primary'"
-                    size="xs"
-                >
-                    <QTooltip
-                        >{{ $t('salesTicketsTable.risk') }}: {{ row.risk }}</QTooltip
-                    >
-                </QIcon>
-                <QIcon
-                    v-if="row.hasComponentLack"
-                    name="vn:components"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ $t('salesTicketsTable.componentLack') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.isTooLittle"
-                    name="vn:isTooLittle"
-                    color="primary"
-                    size="xs"
-                >
-                    <QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
-                </QIcon>
-            </span>
+            <TicketProblems :row="row" />
         </template>
         <template #column-id="{ row }">
             <span class="link" @click.stop.prevent>
@@ -475,7 +419,7 @@ const openTab = (id) =>
             </QIcon>
         </template>
         <template #column-zoneFk="{ row }">
-            <div @click.stop.prevent :title="row.zoneName">
+            <div v-if="row.zoneFk" @click.stop.prevent :title="row.zoneName">
                 <span class="link">{{ row.zoneName }}</span>
                 <ZoneDescriptorProxy :id="row.zoneFk" />
             </div>

src/pages/Ticket/TicketList.vue

@@ -22,6 +22,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import { toTimeFormat } from 'src/filters/date';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
+import TicketProblems from 'src/components/TicketProblems.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -490,66 +491,7 @@ function setReference(data) {
         }"
     >
         <template #column-statusIcons="{ row }">
-            <div class="q-gutter-x-xs">
-                <QIcon
-                    v-if="row.isTaxDataChecked === 0"
-                    color="primary"
-                    name="vn:no036"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('No verified data') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasTicketRequest"
-                    color="primary"
-                    name="vn:buyrequest"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('Purchase request') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.itemShortage"
-                    color="primary"
-                    name="vn:unavailable"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('Not visible') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon v-if="row.isFreezed" color="primary" name="vn:frozen" size="xs">
-                    <QTooltip>
-                        {{ t('Client frozen') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon v-if="row.risk" color="primary" name="vn:risk" size="xs">
-                    <QTooltip> {{ t('Risk') }}: {{ row.risk }} </QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasComponentLack"
-                    color="primary"
-                    name="vn:components"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('Component lack') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasRounding"
-                    color="primary"
-                    name="sync_problem"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('Rounding') }}
-                    </QTooltip>
-                </QIcon>
-            </div>
+            <TicketProblems :row="row" />
         </template>
         <template #column-salesPersonFk="{ row }">
             <span class="link" @click.stop>