perf: refs #6321 clean code

src/pages/Item/components/ItemProposal.vue

@@ -10,29 +10,6 @@ import notifyResults from 'src/utils/notifyResults';
 
 const MATCH_VALUES = [5, 6, 7, 8];
 const { t } = useI18n();
-const extractNumericValue = (percentageString) => {
-    const match = percentageString.match(/(\d+(\.\d+)?)/);
-    return match ? parseFloat(match[0]) : null;
-};
-const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
-const gradientStyle = (value) => {
-    let color = 'white';
-    const perc = extractNumericValue(compatibilityItem(value));
-    switch (true) {
-        case perc >= 0 && perc < 33:
-            color = 'orange';
-            break;
-        case perc >= 33 && perc < 66:
-            color = 'yellow';
-            break;
-
-        default:
-            color = 'green';
-            break;
-    }
-    return color;
-};
-const tagColor = (match) => `color: ${!match ? 'red' : 'var(--vn-label-color)'}`;
 const $props = defineProps({
     itemLack: {
         type: Object,
@@ -52,20 +29,17 @@ const $props = defineProps({
 });
 const proposalSelected = ref([]);
 const quantity = ref(-1);
+const sale = computed(() => $props.sales[0]);
+const saleFk = computed(() => sale.value.saleFk);
+const filter = computed(() => ({
+    itemFk: $props.itemLack.itemFk,
+    sales: saleFk.value,
+}));
+const proposalTableRef = ref(null);
 const defaultColumnAttrs = {
     align: 'center',
     sortable: false,
 };
-const sale = computed(() => $props.sales[0]);
-const saleFk = computed(() => sale.value.saleFk);
-const statusConditionalValue = (row) => {
-    const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
-    return total;
-};
-const proposalTableRef = ref(null);
-const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
-
-const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
 const columns = computed(() => [
     {
         ...defaultColumnAttrs,
@@ -157,8 +131,44 @@ const columns = computed(() => [
         field: 'located',
     },
 ]);
+
+const extractNumericValue = (percentageString) => {
+    const match = percentageString.match(/(\d+(\.\d+)?)/);
+    return match ? parseFloat(match[0]) : null;
+};
+const compatibilityItem = (value) => `${100 * (value / MATCH_VALUES.length)}%`;
+
+const gradientStyle = (value) => {
+    let color = 'white';
+    const perc = extractNumericValue(compatibilityItem(value));
+    switch (true) {
+        case perc >= 0 && perc < 33:
+            color = 'orange';
+            break;
+        case perc >= 33 && perc < 66:
+            color = 'yellow';
+            break;
+
+        default:
+            color = 'green';
+            break;
+    }
+    return color;
+};
+const tagColor = (match) => `color: ${!match ? 'red' : 'var(--vn-label-color)'}`;
+
+const statusConditionalValue = (row) => {
+    const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
+    return total;
+};
+
+const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
+
+const conditionalValuePrice = (price) => (price > 1.3 ? 'match' : 'not-match');
+
 const isSelected = (row) =>
     proposalSelected.value.some((item) => row.itemFk === item.itemFk);
+
 function change(row) {
     if (isSelected(row)) {
         confirm(row);
@@ -166,6 +176,7 @@ function change(row) {
     }
     proposalSelected.value = [row];
 }
+
 async function confirm() {
     try {
         const substitutionFk = proposalSelected.value[0].itemFk;
@@ -190,10 +201,7 @@ async function confirm() {
         console.error(error);
     }
 }
-const filter = computed(() => ({
+
-    itemFk: $props.itemLack.itemFk,
-    sales: saleFk.value,
-}));
 const isSelectionAvailable = (itemProposal) => {
     const { price2 } = itemProposal;
     const salePrice = sale.value.price;
@@ -276,8 +284,9 @@ const isSelectionAvailable = (itemProposal) => {
         </template>
         <template #column-counter="{ row }">
             <span
-                :style="{
+                :class="{
-                    color: row[`match${tag}`] ? 'green' : 'var(--vn-label-color)',
+                    match: row.counter === 1,
+                    'not-match': row.counter !== 1,
                 }"
                 >{{ row.counter }}</span
             >

src/pages/Item/components/ItemProposalProxy.vue

@@ -1,16 +1,7 @@
 <script setup>
 import ItemProposal from './ItemProposal.vue';
 import { useDialogPluginComponent } from 'quasar';
-const emit = defineEmits([
-    'onDialogClosed',
-    'itemReplaced',
-    'confirm',
-    'cancel',
-    ...useDialogPluginComponent.emits,
-]);
-defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 
-const { dialogRef } = useDialogPluginComponent();
 const $props = defineProps({
     itemLack: {
         type: Object,
@@ -28,6 +19,13 @@ const $props = defineProps({
         default: () => [],
     },
 });
+const { dialogRef } = useDialogPluginComponent();
+const emit = defineEmits([
+    'onDialogClosed',
+    'itemReplaced',
+    ...useDialogPluginComponent.emits,
+]);
+defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 </script>
 <template>
     <QDialog ref="dialogRef" full-width transition-show="scale" transition-hide="scale">

src/pages/Ticket/Card/TicketSale.vue

@@ -56,7 +56,7 @@ const canProceed = ref();
 
 watch(
     () => route.params.id,
-    () => tableRef.value.reload()
+    () => tableRef.value.reload(),
 );
 
 const columns = computed(() => [
@@ -199,7 +199,7 @@ const changeQuantity = async (sale) => {
         await updateQuantity(sale);
     } catch (e) {
         const { quantity } = tableRef.value.CrudModelRef.originalData.find(
-            (s) => s.id === sale.id
+            (s) => s.id === sale.id,
         );
         sale.quantity = quantity;
         throw e;
@@ -503,7 +503,7 @@ async function isSalePrepared(item) {
                         componentProps: {
                             title: t('Item prepared'),
                             message: t(
-                                'This item is already prepared. Do you want to continue?'
+                                'This item is already prepared. Do you want to continue?',
                             ),
                             data: item,
                         },
@@ -525,7 +525,7 @@ watch(
         if (newItemFk) {
             updateItem(newRow.value);
         }
-    }
+    },
 );
 </script>
 
@@ -595,7 +595,7 @@ watch(
                         openConfirmationModal(
                             t('Continue anyway?'),
                             t('You are going to delete lines of the ticket'),
-                            removeSales
+                            removeSales,
                         )
                     "
                 >

src/pages/Ticket/Negative/TicketLackTable.vue

@@ -46,46 +46,9 @@ const filterLack = ref({
 const selectedRows = ref([]);
 const { t } = useI18n();
 const { notify } = useNotify();
-
-const route = useRoute();
-const getInputEvents = ({ col, ...rows }) => ({
-    'update:modelValue': () => saveChange(col.name, rows),
-    'keyup.enter': () => saveChange(col.name, rows),
-});
-const saveChange = async (field, { rowIndex, row }) => {
-    try {
-        switch (field) {
-            case 'alertLevelCode':
-                await axios.post(`Tickets/state`, {
-                    ticketFk: row.ticketFk,
-                    code: row[field],
-                });
-                break;
-
-            case 'quantity':
-                await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
-                    quantity: +row.quantity,
-                });
-                break;
-
-            default:
-                console.error(field, { rowIndex, row });
-                break;
-        }
-        notify('globals.dataSaved', 'positive');
-        fetchItemLack.value.fetch();
-    } catch (err) {
-        console.error('Error saving changes', err);
-        f;
-    }
-};
 const entityId = computed(() => route.params.id);
 const item = ref({});
-const hasToIgnore = (row) => row.hasToIgnore === 1;
+const route = useRoute();
-const rowColor = (row) => {
-    if (hasToIgnore(row)) return 'transparent';
-    return 'negative';
-};
 const columns = computed(() => [
     {
         name: 'status',
@@ -186,11 +149,48 @@ const emit = defineEmits(['update:selection']);
 const itemLack = ref(null);
 const fetchItemLack = ref(null);
 const tableRef = ref(null);
+defineExpose({ tableRef, itemLack });
 watch(selectedRows, () => emit('update:selection', selectedRows));
+const getInputEvents = ({ col, ...rows }) => ({
+    'update:modelValue': () => saveChange(col.name, rows),
+    'keyup.enter': () => saveChange(col.name, rows),
+});
+const saveChange = async (field, { rowIndex, row }) => {
+    try {
+        switch (field) {
+            case 'alertLevelCode':
+                await axios.post(`Tickets/state`, {
+                    ticketFk: row.ticketFk,
+                    code: row[field],
+                });
+                break;
+
+            case 'quantity':
+                await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
+                    quantity: +row.quantity,
+                });
+                break;
+
+            default:
+                console.error(field, { rowIndex, row });
+                break;
+        }
+        notify('globals.dataSaved', 'positive');
+        fetchItemLack.value.fetch();
+    } catch (err) {
+        console.error('Error saving changes', err);
+        f;
+    }
+};
+
+const hasToIgnore = (row) => row.hasToIgnore === 1;
+const rowColor = (row) => {
+    if (hasToIgnore(row)) return 'transparent';
+    return 'negative';
+};
 function onBuysFetched(data) {
     Object.assign(item.value, data[0]);
 }
-defineExpose({ tableRef, itemLack });
 </script>
 
 <template>