src/pages/Wagon/Type/WagonTypeCreate.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
@@ -12,8 +13,8 @@ onMounted(() => fetch());
 onUpdated(() => fetch());
 
 const { t } = useI18n();
+const { notify } = useQuasar();
 const route = useRoute();
-const quasar = useQuasar();
 const router = useRouter();
 const $props = defineProps({
     id: {
@@ -29,29 +30,19 @@ const divisible = ref(false);
 const name = ref('');
 const colorPickerActive = ref(false);
 let originalData = { trays: [] };
-let wagonConfig;
+let maxTrays, maxWagonHeight, minHeightBetweenTrays;
 let wagonTypeColors;
 let currentTrayColorPicked;
 
 async function fetch() {
     try {
-        await axios.get('WagonConfigs').then(async (res) => {
-            if (res.data) {
-                wagonConfig = res.data[0];
-            }
-        });
+        ({
+            data: [{ maxTrays, maxWagonHeight, minHeightBetweenTrays }],
+        } = await axios.get('WagonConfigs'));
 
         await axios.get(`WagonTypeColors`).then(async (res) => {
-            if (res.data) {
-                wagonTypeColors = res.data;
-                if (!entityId.value)
-                    wagon.value.push({
-                        id: 0,
-                        position: 0,
-                        color: { ...wagonTypeColors[0] },
-                        action: 'add',
-                    });
-                else {
+            if ((wagonTypeColors = res.data)) {
+                if (entityId.value) {
                     await axios
                         .get(`WagonTypeTrays`, {
                             params: { filter: { where: { typeFk: entityId.value } } },
@@ -76,18 +67,23 @@ async function fetch() {
                                 });
                             }
                         });
-                }
+                } else
+                    wagon.value.push({
+                        id: 0,
+                        position: 0,
+                        color: { ...wagonTypeColors[0] },
+                        action: 'add',
+                    });
             }
         });
 
-        if (entityId.value) {
+        if (entityId.value)
             await axios.get(`WagonTypes/${entityId.value}`).then((res) => {
                 if (res.data) {
                     originalData.name = name.value = res.data.name;
                     originalData.divisible = divisible.value = res.data.divisible;
                 }
             });
-        }
     } catch (e) {
         //
     }
@@ -98,28 +94,25 @@ function addTray() {
         wagon.value.find((tray) => {
             return tray.position == null;
         })
-    ) {
-        quasar.notify({
+    )
+        return notify({
             message: t('wagon.warnings.uncompleteTrays'),
             type: 'warning',
         });
-        return;
-    }
 
-    if (wagon.value.length < wagonConfig.maxTrays) {
+    if (wagon.value.length < maxTrays)
         wagon.value.unshift({
             id: wagon.value.length,
             position: null,
             color: { ...wagonTypeColors[0] },
             action: 'delete',
         });
-    } else {
-        quasar.notify({
+    else
+        notify({
             message: t('wagon.warnings.maxTrays'),
             type: 'warning',
         });
 }
-}
 
 function deleteTray(trayToDelete) {
     wagon.value = wagon.value.filter((tray) => tray.id !== trayToDelete.id);
@@ -127,10 +120,9 @@ function deleteTray(trayToDelete) {
 }
 
 function reorderIds() {
-    for (let index = wagon.value.length - 1; index >= 0; index--) {
+    for (let index = wagon.value.length - 1; index >= 0; index--)
         wagon.value[index].id = index;
 }
-}
 
 async function onSubmit() {
     try {
@@ -153,7 +145,7 @@ async function onSubmit() {
     }
 }
 
-function onReset() {
+async function onReset() {
     name.value = entityId.value ? originalData.name : null;
     divisible.value = entityId.value ? originalData.divisible : false;
     wagon.value = entityId.value
@@ -169,11 +161,8 @@ function onReset() {
 }
 
 function doAction(tray) {
-    if (tray.action == 'add') {
-        addTray();
-    } else {
-        deleteTray(tray);
-    }
+    if (tray.action == 'add') addTray();
+    else deleteTray(tray);
 }
 
 function showColorPicker(tray) {
@@ -193,10 +182,8 @@ function updateColor(newColor) {
 
 function onPositionBlur(tray) {
     if (tray.position) {
-        if (tray.position == '' || tray.position < 0) {
-            tray.position = null;
-            return;
-        }
+        if (tray.position == '' || tray.position < 0) return (tray.position = null);
+
         tray.position = parseInt(tray.position);
         wagon.value.sort((a, b) => b.position - a.position);
         reorderIds();
@@ -204,18 +191,18 @@ function onPositionBlur(tray) {
             if (exceedMaxHeight(index - 1)) continue;
             if (
                 wagon.value[index - 1].position - wagon.value[index].position >=
-                wagonConfig.minHeightBetweenTrays
-            ) {
+                minHeightBetweenTrays
+            )
                 continue;
-            } else {
+            else {
                 wagon.value[index - 1].position +=
-                    wagonConfig.minHeightBetweenTrays -
+                    minHeightBetweenTrays -
                     (wagon.value[index - 1].position - wagon.value[index].position);
 
-                quasar.notify({
+                notify({
                     message:
                         t('wagon.warnings.minHeightBetweenTrays') +
-                        wagonConfig.minHeightBetweenTrays +
+                        minHeightBetweenTrays +
                         ' cm',
                     type: 'warning',
                 });
@@ -227,20 +214,19 @@ function onPositionBlur(tray) {
 }
 
 function exceedMaxHeight(pos) {
-    if (wagon.value[pos].position > wagonConfig.maxWagonHeight) {
+    if (wagon.value[pos].position < maxWagonHeight) return false;
+
     wagon.value.splice(pos, 1);
-        quasar.notify({
-            message:
-                t('wagon.warnings.maxWagonHeight') + wagonConfig.maxWagonHeight + ' cm',
+    notify({
+        message: t('wagon.warnings.maxWagonHeight') + maxWagonHeight + ' cm',
         type: 'warning',
     });
     return true;
 }
-    return false;
-}
 </script>
 
 <template>
+    <VnSubToolbar />
     <QPage class="q-pa-sm q-mx-xl">
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">
@@ -264,13 +250,13 @@ function exceedMaxHeight(pos) {
                             <QTooltip :delay="2000">
                                 {{
                                     t('wagon.warnings.minHeightBetweenTrays') +
-                                    wagonConfig.minHeightBetweenTrays +
+                                    minHeightBetweenTrays +
                                     ' cm'
                                 }}
                                 <QSpace />
                                 {{
                                     t('wagon.warnings.maxWagonHeight') +
-                                    wagonConfig.maxWagonHeight +
+                                    maxWagonHeight +
                                     ' cm'
                                 }}
                             </QTooltip>

src/pages/Wagon/Type/WagonTypeList.vue

@@ -56,6 +56,13 @@ async function remove(row) {
                         :id="row.id"
                         @click="navigate(row.id)"
                     >
+                        <template #list-items>
+                            <QCheckbox
+                                :label="t('Divisble')"
+                                :model-value="row.divisible"
+                                disable
+                            />
+                        </template>
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"