perf: updates

src/pages/Item/components/ItemProposal.vue

@@ -1,9 +1,9 @@
 <script setup>
 import FetchData from 'components/FetchData.vue';
 
-import { ref, reactive, computed, watch } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useDialogPluginComponent } from 'quasar';
+// import { useDialogPluginComponent } from 'quasar';
 
 import VnInput from 'src/components/common/VnInput.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -18,10 +18,10 @@ const $props = defineProps({
 });
 const itemsProposal = ref([]);
 const showProposalDialog = ref(false);
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
+// const { dialogRef, onDialogHide } = useDialogPluginComponent();
-watch($props.item, (newX, oldX) => {
+// watch($props.item, (newX, oldX) => {
-    showProposalDialog.value = !newX;
+//     showProposalDialog.value = !newX;
-});
+// });
 const exprBuilder = (param, value) => {
     switch (param) {
         default:
@@ -34,7 +34,7 @@ const arrayData = useArrayData('ItemProposal', {
     order: ['itemFk'],
     exprBuilder: exprBuilder,
 });
-const store = arrayData.store;
+// const store = arrayData.store;
 const defaultColumnAttrs = {
     align: 'left',
     sortable: true,
@@ -55,24 +55,43 @@ const applyColumnFilter = async (col) => {
         console.error('Error applying column filter', err);
     }
 };
-const defaultColumnFilter = {
+// const defaultColumnFilter = {
-    component: VnInput,
+//     component: VnInput,
-    type: 'text',
+//     type: 'text',
-    filterValue: null,
+//     filterValue: null,
-    event: getColumnInputEvents,
+//     event: getColumnInputEvents,
-    attrs: {
+//     attrs: {
-        dense: true,
+//         dense: true,
-    },
+//     },
+// };
+const statusConditionalValue = (row) => {
+    const total = [5, 6, 7, 8].reduce((acc, i) => acc + row[`match${i}`], 0);
+    const STATUS_VALUES = { 2: '$secondary', 3: 'positive', 4: 'warning' };
+    const status = STATUS_VALUES[total - 2];
+    if (!status) return 'not-match';
+    return status;
 };
-
+const conditionalValue = (tag) => (tag === 1 ? 'match' : 'not-match');
-const conditionalValue = (tag) => (tag === 1 ? 'redd' : 'blackd');
 const columns = computed(() => [
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.counter'),
+        name: 'counter',
+        field: 'counter',
+    },
     {
         ...defaultColumnAttrs,
         label: t('proposal.itemFk'),
         name: 'id',
         field: 'id',
     },
+    {
+        ...defaultColumnAttrs,
+        label: t('proposal.status'),
+        name: 'status',
+        field: 'status',
+        classes: statusConditionalValue,
+    },
     {
         ...defaultColumnAttrs,
         label: t('proposal.longName'),
@@ -201,11 +220,11 @@ const columns = computed(() => [
     </QDialog>
 </template>
 <style lang="scss">
-.redd {
+.match {
-    background-color: red;
+    color: $negative;
 }
-.blackd {
+.not-match {
-    color: black;
+    color: inherit;
 }
 </style>