Merge branch '5293-claim-sections' of https://gitea.verdnatura.es/verdnatura/salix-front into 5293-claim-sections

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   (Reclamaciones) => Añadida nueva sección "Registros de auditoría"
 -   (Trabajadores) => Añadido módulo de trabajadores
 -   (General) => Añadida barra de búsqueda general en los listados principales
+-   (Vagones) => Añadido módulo de vagones
 
 ### Changed
 

src/css/icons.scss

@@ -10,7 +10,8 @@
     font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^='icon-'],
+[class*=' icon-'] {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'icomoon' !important;
     speak: never;
@@ -26,374 +27,377 @@
 }
 
 .icon-pin:before {
-  content: "\e950";
+    content: '\e950';
 }
 .icon-pin_off:before {
-  content: "\e95b";
+    content: '\e95b';
 }
 .icon-frozen:before {
-  content: "\e900";
+    content: '\e900';
 }
 .icon-Person:before {
-  content: "\e901";
+    content: '\e901';
 }
 .icon-handmadeArtificial:before {
-  content: "\e902";
+    content: '\e902';
 }
 .icon-fruit:before {
-  content: "\e903";
+    content: '\e903';
 }
 .icon-funeral:before {
-  content: "\e904";
+    content: '\e904';
 }
 .icon-noPayMethod:before {
-  content: "\e905";
+    content: '\e905';
 }
 .icon-preserved:before {
-  content: "\e906";
+    content: '\e906';
 }
 .icon-greenery:before {
-  content: "\e907";
+    content: '\e907';
 }
 .icon-planta:before {
-  content: "\e908";
+    content: '\e908';
 }
 .icon-handmade:before {
-  content: "\e909";
+    content: '\e909';
 }
 .icon-accessory:before {
-  content: "\e90a";
+    content: '\e90a';
 }
 .icon-artificial:before {
-  content: "\e90b";
+    content: '\e90b';
 }
 .icon-flower:before {
-  content: "\e90c";
+    content: '\e90c';
 }
 .icon-fixedPrice:before {
-  content: "\e90d";
+    content: '\e90d';
 }
 .icon-addperson:before {
-  content: "\e90e";
+    content: '\e90e';
 }
 .icon-supplierfalse:before {
-  content: "\e90f";
+    content: '\e90f';
 }
 .icon-invoice-out:before {
-  content: "\e910";
+    content: '\e910';
 }
 .icon-invoice-in:before {
-  content: "\e911";
+    content: '\e911';
 }
 .icon-invoice-in-create:before {
-  content: "\e912";
+    content: '\e912';
 }
 .icon-basketadd:before {
-  content: "\e913";
+    content: '\e913';
 }
 .icon-basket:before {
-  content: "\e914";
+    content: '\e914';
 }
 .icon-uniE915:before {
-  content: "\e915";
+    content: '\e915';
 }
 .icon-uniE916:before {
-  content: "\e916";
+    content: '\e916';
 }
 .icon-uniE917:before {
-  content: "\e917";
+    content: '\e917';
 }
 .icon-uniE918:before {
-  content: "\e918";
+    content: '\e918';
 }
 .icon-uniE919:before {
-  content: "\e919";
+    content: '\e919';
 }
 .icon-uniE91A:before {
-  content: "\e91a";
+    content: '\e91a';
 }
 .icon-isTooLittle:before {
-  content: "\e91b";
+    content: '\e91b';
 }
 .icon-deliveryprices:before {
-  content: "\e91c";
+    content: '\e91c';
 }
 .icon-onlinepayment:before {
-  content: "\e91d";
+    content: '\e91d';
 }
 .icon-risk:before {
-  content: "\e91e";
+    content: '\e91e';
 }
 .icon-noweb:before {
-  content: "\e91f";
+    content: '\e91f';
 }
 .icon-no036:before {
-  content: "\e920";
+    content: '\e920';
 }
 .icon-disabled:before {
-  content: "\e921";
+    content: '\e921';
 }
 .icon-treatments:before {
-  content: "\e922";
+    content: '\e922';
 }
 .icon-invoice:before {
-  content: "\e923";
+    content: '\e923';
 }
 .icon-photo:before {
-  content: "\e924";
+    content: '\e924';
 }
 .icon-supplier:before {
-  content: "\e925";
+    content: '\e925';
 }
 .icon-languaje:before {
-  content: "\e926";
+    content: '\e926';
 }
 .icon-credit:before {
-  content: "\e927";
+    content: '\e927';
 }
 .icon-client:before {
-  content: "\e928";
+    content: '\e928';
 }
 .icon-shipment-01:before {
-  content: "\e929";
+    content: '\e929';
 }
 .icon-account:before {
-  content: "\e92a";
+    content: '\e92a';
 }
 .icon-inventory:before {
-  content: "\e92b";
+    content: '\e92b';
 }
 .icon-unavailable:before {
-  content: "\e92c";
+    content: '\e92c';
 }
 .icon-wiki:before {
-  content: "\e92d";
+    content: '\e92d';
 }
 .icon-attach:before {
-  content: "\e92e";
+    content: '\e92e';
 }
 .icon-exit:before {
-  content: "\e92f";
+    content: '\e92f';
 }
 .icon-anonymous:before {
-  content: "\e930";
+    content: '\e930';
 }
 .icon-net:before {
-  content: "\e931";
+    content: '\e931';
 }
 .icon-buyrequest:before {
-  content: "\e932";
+    content: '\e932';
 }
 .icon-thermometer:before {
-  content: "\e933";
+    content: '\e933';
 }
 .icon-entry:before {
-  content: "\e934";
+    content: '\e934';
 }
 .icon-deletedTicket:before {
-  content: "\e935";
+    content: '\e935';
 }
 .icon-logout:before {
-  content: "\e936";
+    content: '\e936';
 }
 .icon-catalog:before {
-  content: "\e937";
+    content: '\e937';
 }
 .icon-agency:before {
-  content: "\e938";
+    content: '\e938';
 }
 .icon-delivery:before {
-  content: "\e939";
+    content: '\e939';
 }
 .icon-wand:before {
-  content: "\e93a";
+    content: '\e93a';
 }
 .icon-buscaman:before {
-  content: "\e93b";
+    content: '\e93b';
 }
 .icon-pbx:before {
-  content: "\e93c";
+    content: '\e93c';
 }
 .icon-calendar:before {
-  content: "\e93d";
+    content: '\e93d';
 }
 .icon-splitline:before {
-  content: "\e93e";
+    content: '\e93e';
 }
 .icon-consignatarios:before {
-  content: "\e93f";
+    content: '\e93f';
 }
 .icon-tax:before {
-  content: "\e940";
+    content: '\e940';
 }
 .icon-notes:before {
-  content: "\e941";
+    content: '\e941';
 }
 .icon-lines:before {
-  content: "\e942";
+    content: '\e942';
 }
 .icon-zone:before {
-  content: "\e943";
+    content: '\e943';
 }
 .icon-greuge:before {
-  content: "\e944";
+    content: '\e944';
 }
 .icon-ticketAdd:before {
-  content: "\e945";
+    content: '\e945';
 }
 .icon-components:before {
-  content: "\e946";
+    content: '\e946';
 }
 .icon-pets:before {
-  content: "\e947";
+    content: '\e947';
 }
 .icon-linesprepaired:before {
-  content: "\e948";
+    content: '\e948';
 }
 .icon-control:before {
-  content: "\e949";
+    content: '\e949';
 }
 .icon-revision:before {
-  content: "\e94a";
+    content: '\e94a';
 }
 .icon-deaulter:before {
-  content: "\e94b";
+    content: '\e94b';
 }
 .icon-services:before {
-  content: "\e94c";
+    content: '\e94c';
 }
 .icon-albaran:before {
-  content: "\e94d";
+    content: '\e94d';
 }
 .icon-solunion:before {
-  content: "\e94e";
+    content: '\e94e';
 }
 .icon-stowaway:before {
-  content: "\e94f";
+    content: '\e94f';
 }
 .icon-apps:before {
-  content: "\e951";
+    content: '\e951';
 }
 .icon-info:before {
-  content: "\e952";
+    content: '\e952';
 }
 .icon-columndelete:before {
-  content: "\e953";
+    content: '\e953';
 }
 .icon-columnadd:before {
-  content: "\e954";
+    content: '\e954';
 }
 .icon-deleteline:before {
-  content: "\e955";
+    content: '\e955';
 }
 .icon-item:before {
-  content: "\e956";
+    content: '\e956';
 }
 .icon-worker:before {
-  content: "\e957";
+    content: '\e957';
 }
 .icon-headercol:before {
-  content: "\e958";
+    content: '\e958';
 }
 .icon-reserva:before {
-  content: "\e959";
+    content: '\e959';
 }
 .icon-100:before {
-  content: "\e95a";
+    content: '\e95a';
 }
 .icon-sign:before {
-  content: "\e95d";
+    content: '\e95d';
 }
 .icon-polizon:before {
-  content: "\e95e";
+    content: '\e95e';
 }
 .icon-solclaim:before {
-  content: "\e95f";
+    content: '\e95f';
 }
 .icon-actions:before {
-  content: "\e960";
+    content: '\e960';
 }
 .icon-details:before {
-  content: "\e961";
+    content: '\e961';
 }
 .icon-traceability:before {
-  content: "\e962";
+    content: '\e962';
 }
 .icon-claims:before {
-  content: "\e963";
+    content: '\e963';
 }
 .icon-regentry:before {
-  content: "\e964";
+    content: '\e964';
 }
 .icon-transaction:before {
-  content: "\e966";
+    content: '\e966';
 }
 .icon-History:before {
-  content: "\e968";
+    content: '\e968';
 }
 .icon-mana:before {
-  content: "\e96a";
+    content: '\e96a';
 }
 .icon-ticket:before {
-  content: "\e96b";
+    content: '\e96b';
 }
 .icon-niche:before {
-  content: "\e96c";
+    content: '\e96c';
 }
 .icon-tags:before {
-  content: "\e96d";
+    content: '\e96d';
 }
 .icon-volume:before {
-  content: "\e96e";
+    content: '\e96e';
 }
 .icon-bin:before {
-  content: "\e96f";
+    content: '\e96f';
 }
 .icon-splur:before {
-  content: "\e970";
+    content: '\e970';
 }
 .icon-barcode:before {
-  content: "\e971";
+    content: '\e971';
 }
 .icon-botanical:before {
-  content: "\e972";
+    content: '\e972';
 }
 .icon-clone:before {
-  content: "\e973";
+    content: '\e973';
 }
 .icon-sms:before {
-  content: "\e975";
+    content: '\e975';
 }
 .icon-eye:before {
-  content: "\e976";
+    content: '\e976';
 }
 .icon-doc:before {
-  content: "\e977";
+    content: '\e977';
 }
 .icon-package:before {
-  content: "\e978";
+    content: '\e978';
 }
 .icon-settings:before {
-  content: "\e979";
+    content: '\e979';
 }
 .icon-bucket:before {
-  content: "\e97a";
+    content: '\e97a';
 }
 .icon-mandatory:before {
-  content: "\e97b";
+    content: '\e97b';
 }
 .icon-recovery:before {
-  content: "\e97c";
+    content: '\e97c';
 }
 .icon-payment:before {
-  content: "\e97e";
+    content: '\e97e';
 }
 .icon-grid:before {
-  content: "\e980";
+    content: '\e980';
 }
 .icon-web:before {
-  content: "\e982";
+    content: '\e982';
 }
 .icon-dfiscales:before {
-  content: "\e984";
+    content: '\e984';
+}
+.icon-trolley:before {
+    content: '\e95c';
 }

src/i18n/en/index.js

@@ -388,6 +388,49 @@ export default {
         },
         imageNotFound: 'Image not found',
     },
+    wagon: {
+        pageTitles: {
+            wagons: 'Wagons',
+            wagonsList: 'Wagons List',
+            wagonCreate: 'Create wagon',
+            wagonEdit: 'Edit wagon',
+            typesList: 'Types List',
+            typeCreate: 'Create type',
+            typeEdit: 'Edit type'
+        },
+        type: {
+            name: 'Name',
+            submit: 'Submit',
+            reset: 'Reset',
+            trayColor: 'Tray color',
+            removeItem: 'Wagon type removed successfully',
+        },
+        list: {
+            plate: 'Plate',
+            volume: 'Volume',
+            type: 'Type',
+            remove: 'Remove',
+            removeItem: 'Wagon removed successfully',
+        },
+        create: {
+            plate: 'Plate',
+            volume: 'Volume',
+            type: 'Type',
+            label: 'Label'
+        },
+        warnings: {
+            noData: 'No data available',
+            nameNotEmpty: 'Name can not be empty',
+            labelNotEmpty: 'Label can not be empty',
+            plateNotEmpty: 'Plate can not be empty',
+            volumeNotEmpty: 'Volume can not be empty',
+            typeNotEmpty: 'Type can not be empty',
+            maxTrays: 'You have reached the max number of trays',
+            minHeightBetweenTrays: 'The minimum height between trays is ',
+            maxWagonHeight: 'The maximum height of the wagon is ',
+            uncompleteTrays: 'There are incomplete trays',
+        }
+    },
     components: {
         topbar: {},
         userPanel: {

src/i18n/es/index.js

@@ -388,6 +388,49 @@ export default {
         },
         imageNotFound: 'No se ha encontrado la imagen',
     },
+    wagon: {
+        pageTitles: {
+            wagons: 'Vagones',
+            wagonsList: 'Listado vagones',
+            wagonCreate: 'Crear tipo',
+            wagonEdit: 'Editar tipo',
+            typesList: 'Listado tipos',
+            typeCreate: 'Crear tipo',
+            typeEdit: 'Editar tipo'
+        },
+        type: {
+            name: 'Nombre',
+            submit: 'Guardar',
+            reset: 'Deshacer cambios',
+            trayColor: 'Color de la bandeja',
+            removeItem: 'Tipo de vagón borrado correctamente',
+        },
+        list: {
+            plate: 'Matrícula',
+            volume: 'Volumen',
+            type: 'Tipo',
+            remove: 'Borrar',
+            removeItem: 'Vagón borrado correctamente',
+        },
+        create: {
+            plate: 'Matrícula',
+            volume: 'Volumen',
+            type: 'Tipo',
+            label: 'Etiqueta',
+        },
+        warnings: {
+            noData: 'Sin datos disponibles',
+            nameNotEmpty: 'El nombre no puede estar vacío',
+            labelNotEmpty: 'La etiqueta no puede estar vacía',
+            plateNotEmpty: 'La matrícula no puede estar vacía',
+            volumeNotEmpty: 'El volumen no puede estar vacío',
+            typeNotEmpty: 'El tipo no puede estar vacío',
+            maxTrays: 'Has alcanzado el número máximo de bandejas',
+            minHeightBetweenTrays: 'La distancia mínima entre bandejas es ',
+            maxWagonHeight: 'La altura máxima del vagón es ',
+            uncompleteTrays: 'Hay bandejas sin completar',
+        }
+    },
     components: {
         topbar: {},
         userPanel: {

src/pages/Wagon/Type/WagonTypeCreate.vue

@@ -0,0 +1,419 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { computed, ref, onMounted, onUpdated } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+const wagon = ref([]);
+const divisible = ref(false);
+const name = ref('');
+const colorPickerActive = ref(false);
+let originalData = { trays: [] };
+let wagonConfig;
+let wagonTypeColors;
+let currentTrayColorPicked;
+
+async function fetch() {
+    try {
+        await axios.get('WagonConfigs').then(async (res) => {
+            if (res.data) {
+                wagonConfig = res.data[0];
+            }
+        });
+
+        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 {
+                    await axios
+                        .get(`WagonTypeTrays`, {
+                            params: { filter: { where: { typeFk: entityId.value } } },
+                        })
+                        .then(async (res) => {
+                            if (res.data) {
+                                for (let i = 0; i < res.data.length; i++) {
+                                    const tray = res.data[i];
+                                    wagon.value.push({
+                                        id: res.data.length - i - 1,
+                                        position: tray.height,
+                                        color: {
+                                            ...wagonTypeColors.find((color) => {
+                                                return color.id === tray.colorFk;
+                                            }),
+                                        },
+                                        action: tray.height == 0 ? 'add' : 'delete',
+                                    });
+                                }
+                                wagon.value.forEach((value) => {
+                                    originalData.trays.push({ ...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) {
+        //
+    }
+}
+
+function addTray() {
+    if (
+        wagon.value.find((tray) => {
+            return tray.position == null;
+        })
+    ) {
+        quasar.notify({
+            message: t('wagon.warnings.uncompleteTrays'),
+            type: 'warning',
+        });
+        return;
+    }
+
+    if (wagon.value.length < wagonConfig.maxTrays) {
+        wagon.value.unshift({
+            id: wagon.value.length,
+            position: null,
+            color: { ...wagonTypeColors[0] },
+            action: 'delete',
+        });
+    } else {
+        quasar.notify({
+            message: t('wagon.warnings.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(trayToDelete) {
+    wagon.value = wagon.value.filter((tray) => tray.id !== trayToDelete.id);
+    reorderIds();
+}
+
+function reorderIds() {
+    for (let index = wagon.value.length - 1; index >= 0; index--) {
+        wagon.value[index].id = index;
+    }
+}
+
+async function onSubmit() {
+    try {
+        const path = entityId.value
+            ? 'WagonTypes/editWagonType'
+            : 'WagonTypes/createWagonType';
+
+        const params = {
+            id: entityId.value,
+            name: name.value,
+            divisible: divisible.value,
+            trays: wagon.value,
+        };
+
+        await axios.patch(path, params).then((res) => {
+            if (res.status == 204) router.push({ path: `/wagon/type/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+function onReset() {
+    name.value = entityId.value ? originalData.name : null;
+    divisible.value = entityId.value ? originalData.divisible : false;
+    wagon.value = entityId.value
+        ? [...originalData.trays]
+        : [
+              {
+                  id: 0,
+                  position: 0,
+                  color: { ...wagonTypeColors[0] },
+                  action: 'add',
+              },
+          ];
+}
+
+function doAction(tray) {
+    if (tray.action == 'add') {
+        addTray();
+    } else {
+        deleteTray(tray);
+    }
+}
+
+function showColorPicker(tray) {
+    colorPickerActive.value = true;
+    currentTrayColorPicked = wagon.value.findIndex((val) => {
+        return val.id === tray.id;
+    });
+}
+
+function updateColor(newColor) {
+    wagon.value[currentTrayColorPicked].color = {
+        ...wagonTypeColors.find((color) => {
+            return color.rgb === newColor;
+        }),
+    };
+}
+
+function onPositionBlur(tray) {
+    if (tray.position) {
+        if (tray.position == '' || tray.position < 0) {
+            tray.position = null;
+            return;
+        }
+        tray.position = parseInt(tray.position);
+        wagon.value.sort((a, b) => b.position - a.position);
+        reorderIds();
+        for (let index = wagon.value.length - 1; index > 0; index--) {
+            if (exceedMaxHeight(index - 1)) continue;
+            if (
+                wagon.value[index - 1].position - wagon.value[index].position >=
+                wagonConfig.minHeightBetweenTrays
+            ) {
+                continue;
+            } else {
+                wagon.value[index - 1].position +=
+                    wagonConfig.minHeightBetweenTrays -
+                    (wagon.value[index - 1].position - wagon.value[index].position);
+
+                quasar.notify({
+                    message:
+                        t('wagon.warnings.minHeightBetweenTrays') +
+                        wagonConfig.minHeightBetweenTrays +
+                        ' cm',
+                    type: 'warning',
+                });
+
+                exceedMaxHeight(index - 1);
+            }
+        }
+    }
+}
+
+function exceedMaxHeight(pos) {
+    if (wagon.value[pos].position > wagonConfig.maxWagonHeight) {
+        wagon.value.splice(pos, 1);
+        quasar.notify({
+            message:
+                t('wagon.warnings.maxWagonHeight') + wagonConfig.maxWagonHeight + ' cm',
+            type: 'warning',
+        });
+        return true;
+    }
+    return false;
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QCard class="q-pa-sm">
+            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+                <QInput
+                    filled
+                    v-model="name"
+                    :label="t('wagon.type.name')"
+                    :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
+                />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
+                    <div class="position">
+                        <QInput
+                            autofocus
+                            filled
+                            type="number"
+                            :class="{ isVisible: tray.action == 'add' }"
+                            v-model="tray.position"
+                            @blur="onPositionBlur(tray)"
+                        >
+                            <QTooltip :delay="2000">
+                                {{
+                                    t('wagon.warnings.minHeightBetweenTrays') +
+                                    wagonConfig.minHeightBetweenTrays +
+                                    ' cm'
+                                }}
+                                <QSpace />
+                                {{
+                                    t('wagon.warnings.maxWagonHeight') +
+                                    wagonConfig.maxWagonHeight +
+                                    ' cm'
+                                }}
+                            </QTooltip>
+                        </QInput>
+                    </div>
+                    <div class="shelving">
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                        <div
+                            class="shelving-divisible"
+                            :class="{ isVisible: !divisible }"
+                        ></div>
+                        <div class="shelving-half">
+                            <div class="shelving-up"></div>
+                            <div
+                                class="shelving-down"
+                                :style="{ backgroundColor: tray.color.rgb }"
+                                @click="showColorPicker(tray)"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="action-button">
+                        <QBtn
+                            flat
+                            round
+                            color="primary"
+                            :icon="tray.action"
+                            @click="doAction(tray)"
+                        />
+                    </div>
+                </div>
+                <div class="q-mb-sm wheels">
+                    <QIcon color="grey-6" name="trip_origin" size="3rem" />
+                    <QIcon color="grey-6" name="trip_origin" size="3rem" />
+                </div>
+                <div>
+                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                    <QBtn
+                        :label="t('wagon.type.reset')"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
+                </div>
+                <QDialog
+                    v-model="colorPickerActive"
+                    position="right"
+                    :no-backdrop-dismiss="false"
+                >
+                    <QCard>
+                        <QCardSection>
+                            <div class="text-h6">{{ t('wagon.type.trayColor') }}</div>
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
+                                flat
+                                v-model="wagon[currentTrayColorPicked].color.rgb"
+                                no-header
+                                no-footer
+                                default-view="palette"
+                                :palette="
+                                    wagonTypeColors.map((color) => {
+                                        return color.rgb;
+                                    })
+                                "
+                                @change="updateColor($event)"
+                            />
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QForm>
+        </QCard>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.q-card {
+    width: 70%;
+}
+.q-dialog {
+    .q-card {
+        width: 100%;
+    }
+}
+.wheels {
+    margin-left: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+.wagon-tray {
+    display: flex;
+    height: 6rem;
+    .position {
+        width: 15%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+    .shelving {
+        display: flex;
+        width: 75%;
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+    }
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+</style>

src/pages/Wagon/Type/WagonTypeList.vue

@@ -0,0 +1,102 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('WagonTypeList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/wagon/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/wagon/type/create` });
+}
+
+async function remove(row) {
+    try {
+        const id = row.id;
+        await axios
+            .delete(`WagonTypes/deleteWagonType`, { params: { id } })
+            .then(async () => {
+                quasar.notify({
+                    message: t('wagon.type.removeItem'),
+                    type: 'positive',
+                });
+                store.data.splice(store.data.indexOf(row), 1);
+            });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="WagonTypeList"
+                url="/WagonTypes"
+                order="id DESC"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.name }}</div>
+                                <QItem-label caption>#{{ row.id }}</QItem-label>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <QTooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="delete"
+                                    @click="remove(row)"
+                                >
+                                    <QTooltip>
+                                        {{ t('wagon.list.remove') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/pages/Wagon/WagonCreate.vue

@@ -0,0 +1,182 @@
+<script setup>
+import axios from 'axios';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => $props.id || route.params.id);
+
+let wagonTypes;
+let originalData = {};
+const wagon = ref({});
+const filteredWagonTypes = ref(wagonTypes);
+
+async function onSubmit() {
+    try {
+        const params = {
+            id: entityId.value,
+            label: wagon.value.label,
+            plate: wagon.value.plate,
+            volume: wagon.value.volume,
+            typeFk: wagon.value.typeFk,
+        };
+        await axios.patch('Wagons', params).then((res) => {
+            if (res.status == 200) router.push({ path: `/wagon/list` });
+        });
+    } catch (error) {
+        //
+    }
+}
+
+async function onReset() {
+    if (entityId.value) {
+        wagon.value = { ...originalData };
+    } else {
+        wagon.value = {};
+    }
+}
+
+async function fetch() {
+    try {
+        await axios.get('WagonTypes').then(async (res) => {
+            if (res.data) {
+                filteredWagonTypes.value = wagonTypes = res.data;
+            }
+        });
+        if (entityId.value) {
+            await axios.get(`Wagons/${entityId.value}`).then(async (res) => {
+                const data = res.data;
+                if (data) {
+                    wagon.value.label = data.label;
+                    wagon.value.plate = data.plate;
+                    wagon.value.volume = data.volume;
+                    wagon.value.typeFk = data.typeFk;
+                    originalData = { ...wagon.value };
+                }
+            });
+        }
+    } catch (e) {
+        //
+    }
+}
+
+function filterType(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        filteredWagonTypes.value = wagonTypes.filter(
+            (v) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
+</script>
+
+<template>
+    <QPage class="q-pa-sm q-mx-xl">
+        <QCard class="q-pa-sm">
+            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+                <div class="row q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="wagon.label"
+                            :label="t('wagon.create.label')"
+                            type="number"
+                            min="0"
+                            :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="wagon.plate"
+                            :label="t('wagon.create.plate')"
+                            :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
+                        />
+                    </div>
+                </div>
+                <div class="row q-col-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            filled
+                            v-model="wagon.volume"
+                            :label="t('wagon.create.volume')"
+                            type="number"
+                            min="0"
+                            :rules="[
+                                (val) => !!val || t('wagon.warnings.volumeNotEmpty'),
+                            ]"
+                        />
+                    </div>
+                    <div class="col">
+                        <QSelect
+                            filled
+                            v-model="wagon.typeFk"
+                            use-input
+                            fill-input
+                            hide-selected
+                            input-debounce="0"
+                            option-label="name"
+                            option-value="id"
+                            emit-value
+                            map-options
+                            :label="t('wagon.create.type')"
+                            :options="filteredWagonTypes"
+                            :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
+                            @filter="filterType"
+                        >
+                            <template v-if="wagon.typeFk" #append>
+                                <QIcon
+                                    name="cancel"
+                                    @click.stop.prevent="wagon.typeFk = null"
+                                    class="cursor-pointer"
+                                />
+                            </template>
+                            <template #no-option>
+                                <QItem>
+                                    <QItemSection class="text-grey">
+                                        {{ t('wagon.warnings.noData') }}
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </QSelect>
+                    </div>
+                </div>
+                <div>
+                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                    <QBtn
+                        :label="t('wagon.type.reset')"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
+                </div>
+            </QForm>
+        </QCard>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.q-card {
+    width: 70%;
+}
+</style>

src/pages/Wagon/WagonList.vue

@@ -0,0 +1,135 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+const quasar = useQuasar();
+const arrayData = useArrayData('WagonList');
+const store = arrayData.store;
+const router = useRouter();
+const { t } = useI18n();
+
+const filter = {
+    include: {
+        relation: 'type',
+        scope: {
+            fields: 'name',
+        },
+    },
+};
+
+function navigate(id) {
+    router.push({ path: `/wagon/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/wagon/create` });
+}
+
+async function remove(row) {
+    try {
+        await axios.delete(`Wagons/${row.id}`).then(async () => {
+            quasar.notify({
+                message: t('wagon.list.removeItem'),
+                type: 'positive',
+            });
+            store.data.splice(store.data.indexOf(row), 1);
+        });
+    } catch (error) {
+        //
+    }
+}
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="card-list">
+            <VnPaginate
+                data-key="WagonList"
+                url="/Wagons"
+                order="id DESC"
+                :filter="filter"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.label }}</div>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ t('wagon.list.plate') }}
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.plate }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ t('wagon.list.volume') }}
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.volume }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ t('wagon.list.type') }}
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <QTooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="delete"
+                                    @click="remove(row)"
+                                >
+                                    <QTooltip>
+                                        {{ t('wagon.list.remove') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/pages/Wagon/WagonMain.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>

src/router/modules/index.js

@@ -3,11 +3,13 @@ import Ticket from './ticket';
 import Claim from './claim';
 import InvoiceOut from './invoiceOut';
 import Worker from './worker';
+import Wagon from './wagon';
 
 export default [
     Customer,
     Ticket,
     Claim,
     InvoiceOut,
-    Worker
+    Worker,
+    Wagon
 ]

src/router/modules/wagon.js

@@ -0,0 +1,88 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/wagon',
+    name: 'Wagon',
+    meta: {
+        title: 'wagons',
+        icon: 'vn:trolley',
+    },
+    component: RouterView,
+    redirect: { name: 'WagonMain' },
+    menus: {
+        main: ['WagonList', 'WagonTypeList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '/wagon',
+            name: 'WagonMain',
+            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            redirect: { name: 'WagonList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'WagonList',
+                    meta: {
+                        title: 'wagonsList',
+                        icon: 'vn:trolley',
+                    },
+                    component: () => import('src/pages/Wagon/WagonList.vue')
+                },
+                {
+                    path: 'create',
+                    name: 'WagonCreate',
+                    meta: {
+                        title: 'wagonCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                },
+                {
+                    path: ':id/edit',
+                    name: 'WagonEdit',
+                    meta: {
+                        title: 'wagonEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                },
+            ],
+        },
+        {
+            path: '/wagon/type',
+            name: 'WagonTypeMain',
+            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            redirect: { name: 'WagonTypeList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'WagonTypeList',
+                    meta: {
+                        title: 'typesList',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Wagon/Type/WagonTypeList.vue')
+                },
+                {
+                    path: 'create',
+                    name: 'WagonTypeCreate',
+                    meta: {
+                        title: 'typeCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue')
+                },
+                {
+                    path: ':id/edit',
+                    name: 'WagonTypeEdit',
+                    meta: {
+                        title: 'typeEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue')
+                },
+            ],
+        }
+    ],
+};

src/router/routes.js

@@ -3,6 +3,7 @@ import ticket from './modules/ticket';
 import claim from './modules/claim';
 import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
+import wagon from './modules/wagon';
 
 const routes = [
     {
@@ -34,6 +35,7 @@ const routes = [
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
+            wagon
         ],
     },
 ];

src/stores/useNavigationStore.js

@@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
-    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker'];
+    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon'];
     const pinnedModules = ref([]);
     const role = useRole();
 

test/cypress/integration/wagonCreate.spec.js

@@ -0,0 +1,33 @@
+describe('WagonCreate', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/wagon/create');
+    });
+
+    it('should create and delete a new wagon', () => {
+        cy.get('input').eq(0).type('1234');
+        cy.get('input').eq(1).type('1234ABCD');
+        cy.get('input').eq(2).type('100');
+        cy.get('input').eq(3).click();
+        cy.get('div[role="listbox"]').find('div.q-item').click();
+
+        // Save
+        cy.get('button[type="submit"]').click();
+
+        // Check data has been saved successfully
+        cy.get('div.text-h6').contains('1234').click();
+        cy.get('input').eq(0).should('have.value', '1234');
+        cy.get('input').eq(1).should('have.value', '1234ABCD');
+        cy.get('input').eq(2).should('have.value', '100');
+        cy.get('input').eq(3).should('have.value', 'Wagon Type #1');
+
+        // Delete wagon type created
+        cy.go('back');
+        cy.get('div.text-h6')
+            .contains('1234')
+            .parentsUntil('div.q-card')
+            .find('div.q-card__actions')
+            .find('button').last().click();
+    });
+});

test/cypress/integration/wagonTypeCreate.spec.js

@@ -0,0 +1,57 @@
+describe('WagonTypeCreate', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit('/#/wagon/type/create');
+    });
+
+    function chooseColor(color){
+        cy.get('div.shelving-down').eq(1).click();
+        cy.get('div.q-color-picker__cube').eq(color).click();
+        cy.get('div.q-card__section').find('button').click();
+    }
+
+    function addTray(position){
+        cy.get('div.action-button').last().find('button').click();
+        cy.focused().type(position);
+        cy.focused().blur();
+    }
+
+    it('should create and delete a new wagon type', () => {
+        cy.get('input').first().type('Example for testing');
+        cy.get('div.q-checkbox__bg').click();
+        chooseColor(1);
+
+        // Insert invalid position (not minimal height)
+        addTray(20);
+        cy.get('div[role="alert"]').should('exist');
+        chooseColor(2);
+        addTray(150);
+        chooseColor(3);
+        addTray(100);
+
+        // Insert invalid position (max height reached)
+        addTray(210);
+        cy.get('div[role="alert"]').should('exist');
+
+        // Save
+        cy.get('button[type="submit"]').click();
+
+        // Check data has been saved successfully
+        cy.get('div.text-h6').contains('Example for testing').click();
+        cy.get('input').first().should('have.value', 'Example for testing');
+        cy.get('div.wagon-tray').should('have.length', 4);
+        cy.get('div.position').eq(0).find('input').should('have.value', '150');
+        cy.get('div.position').eq(1).find('input').should('have.value', '100');
+        cy.get('div.position').eq(2).find('input').should('have.value', '50');
+
+        // Delete wagon type created
+        cy.go('back');
+        cy.get('div.text-h6')
+            .contains('Example for testing')
+            .parentsUntil('div.q-card')
+            .find('div.q-card__actions')
+            .find('button').last().click();
+
+    });
+});

test/vitest/__tests__/pages/Wagons/WagonCreate.spec.js

@@ -0,0 +1,103 @@
+import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import WagonCreate from 'pages/Wagon/WagonCreate.vue';
+
+describe('WagonCreate', () => {
+    let vmEdit, vmCreate;
+    const entityId = 1;
+
+    beforeAll(() => {
+        vmEdit = createWrapper(WagonCreate, {propsData: {
+                id: entityId,
+            }}).vm;
+        vmCreate = createWrapper(WagonCreate).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('onSubmit()', () => {
+        it('should create a wagon', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            vmCreate.wagon = {
+                label: 1234,
+                plate: 'MOCK PLATE',
+                volume: 50,
+                typeFk: 1,
+            };
+
+            await vmCreate.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `Wagons`, vmCreate.wagon
+            );
+        });
+
+        it('should update a wagon', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            vmEdit.wagon = {
+                id: entityId,
+                label: 1234,
+                plate: 'MOCK PLATE',
+                volume: 50,
+                typeFk: 1,
+            };
+
+            await vmEdit.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `Wagons`, vmEdit.wagon
+            );
+        });
+    });
+
+    describe('onReset()', () => {
+        it('should reset wagon if have id', async () => {
+            vmEdit.originalData = {
+                label: 1234,
+                plate: 'Original',
+                volume: 200,
+                typeFk: 1,
+            };
+            vmEdit.wagon = {
+                label: 4321,
+                plate: 'Edited',
+                volume: 50,
+                typeFk: 2,
+            };
+
+            await vmEdit.onReset();
+
+            expect(vmEdit.wagon).toEqual(vmEdit.originalData);
+        });
+
+        it('should reset wagon if not have id', async () => {
+            vmCreate.wagon = {
+                label: 4321,
+                plate: 'Edited',
+                volume: 50,
+                typeFk: 2,
+            };
+
+            await vmCreate.onReset();
+
+            expect(vmCreate.wagon).toEqual({});
+        });
+    });
+
+    describe('fetch()', () => {
+        it('should fetch data', async () => {
+            vi.spyOn(axios, 'get').mockResolvedValue({ data: true });
+
+            await vmEdit.fetch();
+
+            expect(axios.get).toHaveBeenCalledWith(
+                `WagonTypes`
+            );
+            expect(axios.get).toHaveBeenCalledWith(
+                `Wagons/${entityId}`
+            );
+        });
+    });
+});

test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js

@@ -0,0 +1,271 @@
+import { axios, createWrapper } from 'app/test/vitest/helper';
+import WagonTypeCreate from 'pages/Wagon/Type/WagonTypeCreate.vue';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+describe('WagonTypeCreate', () => {
+    let vmCreate, vmEdit;
+    const entityId = 1;
+
+    beforeAll(() => {
+        vmEdit = createWrapper(WagonTypeCreate, {propsData: {
+                id: entityId,
+            }}).vm;
+        vmCreate = createWrapper(WagonTypeCreate).vm;
+        vmEdit.wagonConfig = vmCreate.wagonConfig = {maxTrays: 2 ,minHeightBetweenTrays: 50, maxWagonHeight: 200 };
+        vmEdit.wagonTypeColors = vmCreate.wagonTypeColors = [{id: 1, color:'white', rgb:'#000000'}];
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('addTray()', () => {
+        it('should throw message if there are uncomplete trays', async () => {
+            vi.spyOn(vmEdit.quasar, 'notify');
+            vmEdit.wagon = [{
+                id: 1,
+                position: null,
+                color: vmEdit.wagonTypeColors[0]
+            }];
+
+            await vmEdit.addTray();
+
+            expect(vmEdit.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+
+        it('should create a new tray if the limit has not been reached', async () => {
+            vmEdit.wagon = [{
+                id: 1,
+                position: 0,
+                color: vmEdit.wagonTypeColors[0]
+            }];
+
+            await vmEdit.addTray();
+            expect(vmEdit.wagon.length).toEqual(2);
+        });
+
+        it('should throw message if there are uncomplete trays', async () => {
+            vi.spyOn(vmEdit.quasar, 'notify');
+            vmEdit.wagon = [{
+                id: 1,
+                position: 0,
+                color: vmEdit.wagonTypeColors[0]
+            },{
+                id: 2,
+                position: 50,
+                color: vmEdit.wagonTypeColors[0]
+            }];
+
+            await vmEdit.addTray();
+
+            expect(vmEdit.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+    });
+
+    describe('deleteTray() reorderIds()', () => {
+        it('should delete a tray and reorder the ids', async () => {
+            const trayToDelete = {
+                id: 1,
+                position: 0,
+                color: vmEdit.wagonTypeColors[0]
+            };
+            const trayMaintained = {
+                id: 2,
+                position: 50,
+                color: vmEdit.wagonTypeColors[0]
+            };
+            vmEdit.wagon = [trayToDelete,trayMaintained];
+
+            await vmEdit.deleteTray(trayToDelete);
+
+            expect(vmEdit.wagon.length).toEqual(1);
+            expect(vmEdit.wagon[0].id).toEqual(0);
+            expect(vmEdit.wagon[0].position).toEqual(50);
+
+        });
+    });
+
+    describe('onSubmit()', () => {
+        it('should make a patch to editWagonType if have id', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            const wagon = {
+                id: entityId,
+                name: "Mock name",
+                divisible: true,
+                trays: [{
+                    id: 1,
+                    position: 0,
+                    color: vmEdit.wagonTypeColors[0]
+                }]
+            }
+            vmEdit.name = wagon.name;
+            vmEdit.divisible = wagon.divisible;
+            vmEdit.wagon = wagon.trays;
+
+            await vmEdit.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `WagonTypes/editWagonType`, wagon
+            );
+        });
+
+        it('should make a patch to createtWagonType if not have id', async () => {
+            vi.spyOn(axios, 'patch').mockResolvedValue({ data: true });
+            const wagon = {
+                name: "Mock name",
+                divisible: true,
+                trays: [{
+                    id: 1,
+                    position: 0,
+                    color: vmCreate.wagonTypeColors[0]
+                }]
+            }
+            vmCreate.name = wagon.name;
+            vmCreate.divisible = wagon.divisible;
+            vmCreate.wagon = wagon.trays;
+
+            await vmCreate.onSubmit();
+
+            expect(axios.patch).toHaveBeenCalledWith(
+                `WagonTypes/createWagonType`, wagon
+            );
+        });
+    });
+
+    describe('onReset()', () => {
+        it('should reset if have id', async () => {
+            vmEdit.name = 'Changed name';
+            vmEdit.divisible = false;
+            vmEdit.wagon = [];
+            vmEdit.originalData = {
+                name: 'Original name',
+                divisible: true,
+                trays: [{
+                    id: 1,
+                    position: 0,
+                    color: vmEdit.wagonTypeColors[0]
+                },{
+                    id: 2,
+                    position: 50,
+                    color: vmEdit.wagonTypeColors[0]
+                }]
+            };
+
+            vmEdit.onReset();
+
+            expect(vmEdit.name).toEqual(vmEdit.originalData.name);
+            expect(vmEdit.divisible).toEqual(vmEdit.originalData.divisible);
+            expect(vmEdit.wagon).toEqual(vmEdit.originalData.trays);
+        });
+
+        it('should reset if not have id', async () => {
+            vmCreate.name = 'Changed name';
+            vmCreate.divisible = false;
+            vmCreate.wagon = [];
+
+            vmCreate.onReset();
+
+            expect(vmCreate.name).toEqual(null);
+            expect(vmCreate.divisible).toEqual(false);
+            expect(vmCreate.wagon.length).toEqual(1);
+        });
+    });
+
+    describe('onPositionBlur()', () => {
+        it('should set position null if position is negative', async () => {
+            const negativeTray = {
+                id: 1,
+                position: -1,
+                color: vmCreate.wagonTypeColors[0]
+            };
+
+            vmCreate.onPositionBlur(negativeTray);
+
+            expect(negativeTray.position).toEqual(null);
+        });
+
+        it('should set position and reorder array', async () => {
+            const trays = [{
+                id: 0,
+                position: 100,
+                color: vmCreate.wagonTypeColors[0]
+            },{
+                id: 1,
+                position: 0,
+                color: vmCreate.wagonTypeColors[0]
+            }];
+            const newTray = {
+                id: 2,
+                position: 50,
+                color: vmCreate.wagonTypeColors[0]
+            };
+            trays.push(newTray);
+            vmCreate.wagon = trays;
+
+            vmCreate.onPositionBlur(newTray);
+
+            expect(vmCreate.wagon[0].position).toEqual(100);
+            expect(vmCreate.wagon[1].position).toEqual(50);
+            expect(vmCreate.wagon[2].position).toEqual(0);
+        });
+
+        it('should throw message if not have min height between trays and should set new adequate positions', async () => {
+            vi.spyOn(vmCreate.quasar, 'notify');
+            const trays = [{
+                id: 0,
+                position: 0,
+                color: vmCreate.wagonTypeColors[0]
+            }];
+            const newTray = {
+                id: 1,
+                position: 20,
+                color: vmCreate.wagonTypeColors[0]
+            };
+            trays.push(newTray);
+            vmCreate.wagon = trays;
+
+            vmCreate.onPositionBlur(newTray);
+
+            expect(vmCreate.wagon[0].position).toEqual(50);
+            expect(vmCreate.wagon[1].position).toEqual(0);
+            expect(vmCreate.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+
+        it('should throw message if max height has been exceed', async () => {
+            vi.spyOn(vmCreate.quasar, 'notify');
+            const trays = [{
+                id: 0,
+                position: 0,
+                color: vmCreate.wagonTypeColors[0]
+            }];
+            const newTray = {
+                id: 1,
+                position: 210,
+                color: vmCreate.wagonTypeColors[0]
+            };
+            trays.push(newTray);
+            vmCreate.wagon = trays;
+
+            vmCreate.onPositionBlur(newTray);
+
+            expect(vmCreate.wagon.length).toEqual(1);
+            expect(vmCreate.quasar.notify).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: 'warning',
+                })
+            );
+        });
+    });
+});