feat: refs #6321 changes

src/pages/Item/components/ItemProposal.vue

@@ -7,8 +7,10 @@ import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import axios from 'axios';
 import notifyResults from 'src/utils/notifyResults';
+import FetchData from 'components/FetchData.vue';
+
+const MATCH = 'match';
 
-const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
 const $props = defineProps({
     itemLack: {
@@ -34,6 +36,7 @@ const filter = computed(() => ({
     itemFk: $props.itemLack.itemFk,
     sales: saleFk.value,
 }));
+
 const proposalTableRef = ref(null);
 const defaultColumnAttrs = {
     align: 'center',
@@ -45,13 +48,12 @@ const columns = computed(() => [
         label: t('proposal.available'),
         name: 'available',
         field: 'available',
-        columnClass: 'shrink',
-        style: 'max-width: 75px',
         columnFilter: {
             component: 'input',
             type: 'number',
             columnClass: 'shrink',
         },
+        columnClass: 'shrink',
     },
     {
         ...defaultColumnAttrs,
@@ -145,28 +147,32 @@ const columns = computed(() => [
     },
 ]);
 
-const compatibilityItem = (value) => 100 * (value / MATCH_VALUES.length);
-
+function extractMatchValues(obj) {
+    return Object.keys(obj)
+        .filter((key) => key.startsWith(MATCH))
+        .map((key) => parseInt(key.replace(MATCH, ''), 10));
+}
 const gradientStyle = (value) => {
     let color = 'white';
-    const perc = parseFloat(compatibilityItem(value));
+    const perc = parseFloat(value);
     switch (true) {
         case perc >= 0 && perc < 33:
-            color = 'orange';
+            color = 'primary';
             break;
         case perc >= 33 && perc < 66:
-            color = 'yellow';
+            color = 'warning';
             break;
 
         default:
-            color = 'green';
+            color = 'secondary';
             break;
     }
     return color;
 };
 const statusConditionalValue = (row) => {
-    const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
-    return total;
+    const matches = extractMatchValues(row);
+    const value = matches.reduce((acc, i) => acc + row[`${MATCH}${i}`], 0);
+    return 100 * (value / matches.length);
 };
 
 const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
@@ -196,11 +202,11 @@ async function change({ itemFk: substitutionFk }) {
         console.error(error);
     }
 }
-
+const ticketConfig = ref({});
 const isSelectionAvailable = (itemProposal) => {
     const { price2 } = itemProposal;
     const salePrice = sale.value.price;
-    const byPrice = (100 * price2) / salePrice > 30;
+    const byPrice = (100 * price2) / salePrice > ticketConfig.value.lackAlertPrice;
     if (byPrice) {
         return byPrice;
     }
@@ -208,15 +214,26 @@ const isSelectionAvailable = (itemProposal) => {
         (100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
     return byQuantity;
 };
+async function handleTicketConfig(data) {
+    ticketConfig.value = data[0];
+}
 </script>
 <template>
+    <FetchData
+        url="TicketConfigs"
+        :filter="{ fields: ['lackAlertPrice'] }"
+        @on-fetch="handleTicketConfig"
+        auto-load
+    />
+
     <VnTable
+        v-if="ticketConfig"
+        auto-load
         data-cy="proposalTable"
         ref="proposalTableRef"
         data-key="ItemsGetSimilar"
         url="Items/getSimilar"
         :user-filter="filter"
-        auto-load
         :columns="columns"
         class="full-width q-mt-md"
         row-key="id"
@@ -231,19 +248,11 @@ const isSelectionAvailable = (itemProposal) => {
                 class="flex"
                 style="max-width: 100%; flex-shrink: 50px; flex-wrap: nowrap"
             >
-                <QTooltip>
-                    {{ row.id }}
-                </QTooltip>
-
                 <div
                     class="middle full-width"
-                    :style="{
-                        background: gradientStyle(statusConditionalValue(row)),
-                    }"
+                    :class="[`proposal-${gradientStyle(statusConditionalValue(row))}`]"
                 >
-                    <QTooltip>
-                        {{ compatibilityItem(statusConditionalValue(row)) }}%
-                    </QTooltip>
+                    <QTooltip> {{ statusConditionalValue(row) }}% </QTooltip>
                 </div>
                 <div style="flex: 2 0 100%; align-content: center">
                     <div>
@@ -285,6 +294,7 @@ const isSelectionAvailable = (itemProposal) => {
     </VnTable>
 </template>
 <style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
 .middle {
     float: left;
     margin-right: 2px;
@@ -296,6 +306,15 @@ const isSelectionAvailable = (itemProposal) => {
 .not-match {
     color: inherit;
 }
+.proposal-warning {
+    background-color: $warning;
+}
+.proposal-secondary {
+    background-color: $secondary;
+}
+.proposal-primary {
+    background-color: $primary;
+}
 .text {
     margin: 0.05rem;
     padding: 1px;

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -40,7 +40,7 @@ const filterLack = ref({
         },
     ],
     where: { ...$props.filter },
-    order: 'ts.alertLevelCODE ASC',
+    order: 'ts.alertLevelCode ASC',
 });
 
 const selectedRows = ref([]);
@@ -190,7 +190,7 @@ function onBuysFetched(data) {
     <FetchData
         :url="`Buys/latestBuysFilter`"
         :fields="['longName']"
-        :filter="{ where: { 'i.id': '2' } }"
+        :filter="{ where: { 'i.id': entityId } }"
         @on-fetch="onBuysFetched"
         auto-load
     />

src/pages/Ticket/locale/en.yml

@@ -238,7 +238,6 @@ negative:
         peticionCompra: 'Ticket request'
         isRookie: 'Is rookie'
         turno: 'Turn line'
-        showFree: Show Free lines
         isBasket: 'Basket'
         hasSubstitution: 'Has substitution'
         hasToIgnore: VIP

src/pages/Ticket/locale/es.yml

@@ -266,7 +266,6 @@ negative:
         peticionCompra: 'Petición compra'
         isRookie: 'Cliente nuevo'
         turno: 'Linea turno'
-        showFree: Solo estado libre
         isBasket: 'Cesta'
         hasSubstitution: 'Tiene sustitución'
         hasToIgnore: VIP

src/router/modules/ticket.js

@@ -245,7 +245,6 @@ export default {
                                 title: 'negative',
                                 icon: 'exposure',
                             },
-                            // redirect: { name: 'TicketNegative' },
                             component: () =>
                                 import('src/pages/Ticket/Negative/TicketLackList.vue'),
                             path: '',