feat: refs #6123 enhance ZoneControl component with improved column definitions and dynamic event handling

src/pages/Zone/ZoneControl.vue

@@ -10,6 +10,8 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnCheckbox from 'src/components/common/VnCheckbox.vue';
 import { useState } from 'src/composables/useState';
 import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
+import { date } from 'quasar';
 
 const { t } = useI18n();
 const state = useState();
@@ -43,6 +45,8 @@ const columns = computed(() => [
         name: 'zoneFk',
         label: t('zone.params.zoneFk'),
         component: 'select',
+        columnClass: 'expand',
+        isEditable: false,
         attrs: {
             url: 'Zones',
             fields: ['id', 'name'],
@@ -57,6 +61,7 @@ const columns = computed(() => [
         name: 'etd',
         label: t('zone.params.etd'),
         component: 'time',
+        columnClass: 'shrink',
         columnFilter: false,
         isEditable: false,
     },
@@ -64,6 +69,7 @@ const columns = computed(() => [
         name: 'volume',
         label: t('zone.params.volume'),
         component: 'number',
+        columnClass: 'shrink',
         format: ({ volume }) => Math.round(volume),
         columnFilter: false,
         isEditable: false,
@@ -78,12 +84,8 @@ const columns = computed(() => [
         name: 'packingProgress',
         label: t('packingProgress'),
         component: 'number',
-        format: ({ packingProgress }) => Math.round(packingProgress * 100) + '%',
-        style: ({ packingProgress }) => {
-            if (packingProgress == 0) return 'color: var(--vn-section-color)';
-            if (packingProgress < 1) return 'color: var(--q-negative)';
-            return 'color: var(--q-positive)';
-        },
+        format: ({ packingProgress }) => expressAsPercent(packingProgress),
+        style: ({ packingProgress }) => progressStyle(packingProgress),
         columnFilter: false,
         isEditable: false,
     },
@@ -91,6 +93,22 @@ const columns = computed(() => [
         name: 'isLate',
         label: t('zone.params.isLate'),
         component: 'checkbox',
+        cellEvent: {
+            'update:modelValue': async (value, oldValue, row) => {
+                const zoneEvent = await axios.get('ZoneEvents', {
+                    zoneFk: row.zoneFk,
+                    type: 'day',
+                    dated: row.landed,
+                });
+                console.log('zoneEvent: ', zoneEvent);
+
+                /* await axios.delete('ZoneEvents/1', {
+                    zoneFk: row.zoneFk,
+                    type: 'day',
+                    dated: row.landed,
+                }); */
+            },
+        },
     },
     {
         name: 'isFull',
@@ -107,6 +125,15 @@ const productionConfig = ref();
 function openDialog() {
     productionConfigDialogRef.value = true;
 }
+
+function expressAsPercent(value) {
+    return value ? Math.round(value * 100) + '%' : '-';
+}
+
+function progressStyle(value) {
+    if (value < 1 && value) return 'color: var(--q-negative)';
+    return 'color: var(--q-positive)';
+}
 </script>
 <template>
     <FetchData
@@ -139,7 +166,7 @@ function openDialog() {
         </FormModelPopup>
     </QDialog>
     <div class="table-container">
-        <div class="column items-center" style="width: 60%">
+        <div class="column items-center" style="width: 80%">
             <VnTable
                 ref="tableRef"
                 data-key="ZoneControl"
@@ -188,7 +215,10 @@ function openDialog() {
                     <span v-text="Math.round(footer.volume)" />
                 </template>
                 <template #column-footer-packingProgress>
-                    <span v-text="Math.round(footer.packingProgress * 100) + '%'" />
+                    <span
+                        v-text="expressAsPercent(footer.packingProgress)"
+                        :style="progressStyle(footer.packingProgress)"
+                    />
                 </template>
             </VnTable>
         </div>