From 12370b6437ea2b28410762d88fbb871f52f1f0dd Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 23 Jul 2024 13:22:54 +0200
Subject: [PATCH] feat: refs #6346 new wagon type section

---
 src/i18n/locale/en.yml                        |   1 +
 src/i18n/locale/es.yml                        |   1 +
 .../Customer/Defaulter/CustomerDefaulter.vue  |   3 +-
 src/pages/Wagon/Type/WagonCreateTray.vue      | 148 +++++++
 src/pages/Wagon/Type/WagonTypeCreate.vue      | 419 ------------------
 src/pages/Wagon/Type/WagonTypeEdit.vue        | 301 +++++++++++++
 src/pages/Wagon/Type/WagonTypeList.vue        |  88 +++-
 src/router/modules/wagon.js                   |   6 +-
 .../wagonType/wagonTypeCreate.spec.js         |  46 +-
 .../wagonType/wagonTypeEdit.spec.js           |  27 ++
 .../pages/Wagons/WagonTypeCreate.spec.js      | 271 -----------
 11 files changed, 551 insertions(+), 760 deletions(-)
 create mode 100644 src/pages/Wagon/Type/WagonCreateTray.vue
 delete mode 100644 src/pages/Wagon/Type/WagonTypeCreate.vue
 create mode 100644 src/pages/Wagon/Type/WagonTypeEdit.vue
 create mode 100644 test/cypress/integration/wagonType/wagonTypeEdit.spec.js
 delete mode 100644 test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 8ccdf640f..d82a5dbd1 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -919,6 +919,7 @@ wagon:
         typeCreate: Create type
         typeEdit: Edit type
         wagonCounter: Trolley counter
+        wagonTray: Tray List
     type:
         name: Name
         submit: Submit
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 452421343..274edf491 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -907,6 +907,7 @@ wagon:
         typeCreate: Crear tipo
         typeEdit: Editar tipo
         wagonCounter: Contador de carros
+        wagonTray: Listado bandejas
     type:
         name: Nombre
         submit: Guardar
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index af7ce0a26..854db2801 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -189,7 +189,7 @@ const columns = computed(() => [
     {
         align: 'left',
         field: 'finished',
-        label: t('Has recover'),
+        label: t('Has recovery'),
         name: 'finished',
     },
 ]);
@@ -408,4 +408,5 @@ es:
     Credit I.: Crédito A.
     Credit insurance: Crédito asegurado
     From: Desde
+    Has recovery: Tiene recobro
 </i18n>
diff --git a/src/pages/Wagon/Type/WagonCreateTray.vue b/src/pages/Wagon/Type/WagonCreateTray.vue
new file mode 100644
index 000000000..19f66b0b3
--- /dev/null
+++ b/src/pages/Wagon/Type/WagonCreateTray.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, watch } from 'vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FormPopup from 'src/components/FormPopup.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+
+const $props = defineProps({
+    entityId: {
+        type: Number,
+        required: true,
+    },
+    height: {
+        type: Number,
+        default: 0,
+    },
+    color: {
+        type: Array,
+        default: () => [],
+    },
+});
+const entityId = ref($props.entityId);
+const selectedTrayColor = ref();
+const trayHeight = ref();
+const wagonColors = ref([]);
+const wagonColorTranslated = ref();
+const heights = ref();
+const existingTrayHeight = ref($props.height);
+const { t } = useI18n();
+const { notify } = useQuasar();
+
+watch(wagonColors, () => {
+    wagonColorTranslated.value = wagonColors.value.map((color) => {
+        return { ...color, name: t(`colors.${color.name}`) };
+    });
+});
+const emit = defineEmits(['onSubmit']);
+
+async function getTrays() {
+    const data = await axios.get('WagonTypeTrays', undefined, {
+        filter: { wagonTypeFk: entityId.value },
+    });
+    existingTrayHeight.value = data.data.filter(
+        (item) => item.wagonTypeFk == entityId.value
+    );
+    heights.value = existingTrayHeight.value.map((item) => item.height);
+}
+
+function onSubmit() {
+    if (heights.value.includes(parseInt(trayHeight.value))) {
+        notify({
+            message: t(
+                'A tray with the same height already exists, try with a different height'
+            ),
+            type: 'negative',
+        });
+        return;
+    }
+    if (trayHeight.value - heights.value[heights.value.length - 1] < 50) {
+        notify({
+            message: t('The minimum height between trays is 50cm'),
+            type: 'negative',
+        });
+        return;
+    }
+
+    if (trayHeight.value > 200) {
+        notify({
+            message: t(
+                'The maximum height of the wagon is 200cm, try with a lower height'
+            ),
+            type: 'negative',
+        });
+        return;
+    }
+
+    const newTray = {
+        wagonTypeFk: entityId.value,
+        wagonTypeColorFk: selectedTrayColor.value,
+        height: trayHeight.value,
+    };
+
+    emit('onSubmit', newTray);
+}
+getTrays();
+</script>
+
+<template>
+    <FetchData
+        url="WagonTypeColors"
+        @on-fetch="(data) => (wagonColors = data)"
+        auto-load
+    />
+    <FormPopup
+        ref="createTrayFormDialogRef"
+        @on-submit="onSubmit()"
+        :title="t('Add new tray')"
+        :entity-id="selectedEntityId"
+    >
+        <template #form-inputs>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    v-model="selectedTrayColor"
+                    :options="wagonColorTranslated"
+                    option-label="name"
+                    option-value="id"
+                    id="id"
+                    :label="t('Select a tray color')"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps" clickable>
+                            <QItemSection>
+                                <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+                <VnInput v-model="trayHeight" :label="t('Height')" type="number" />
+            </VnRow>
+        </template>
+    </FormPopup>
+</template>
+
+<i18n>
+    en:
+        Select a tray: Select a tray
+        colors:
+            white: White
+            red: Red
+            green: Green
+            blue: Blue
+    es:
+        Select a tray color: Seleccione un color
+        Add new tray: Añadir nueva bandeja
+        Height: Altura
+        The minimum height between trays is 50cm: La altura mínima entre bandejas es de 50cm
+        The maximum height of the wagon is 200cm: La altura máxima del vagón es de 200cm
+        A tray with the same height already exists, try with a different height: Ya existe una bandeja con la misma altura, prueba con una diferente
+        colors:
+            white: Blanco
+            red: Rojo
+            green: Verde
+            blue: Azul
+</i18n>
diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
deleted file mode 100644
index 640ca75c6..000000000
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ /dev/null
@@ -1,419 +0,0 @@
-<script setup>
-import { computed, ref, onMounted, onUpdated } from 'vue';
-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';
-
-onMounted(() => fetch());
-onUpdated(() => fetch());
-
-const { t } = useI18n();
-const { notify } = useQuasar();
-const route = useRoute();
-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 maxTrays, maxWagonHeight, minHeightBetweenTrays;
-let wagonTypeColors;
-let currentTrayColorPicked;
-
-async function fetch() {
-    try {
-        ({
-            data: [{ maxTrays, maxWagonHeight, minHeightBetweenTrays }],
-        } = await axios.get('WagonConfigs'));
-
-        await axios.get(`WagonTypeColors`).then(async (res) => {
-            if ((wagonTypeColors = res.data)) {
-                if (entityId.value) {
-                    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 });
-                                });
-                            }
-                        });
-                } else
-                    wagon.value.push({
-                        id: 0,
-                        position: 0,
-                        color: { ...wagonTypeColors[0] },
-                        action: 'add',
-                    });
-            }
-        });
-
-        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;
-        })
-    )
-        return notify({
-            message: t('wagon.warnings.uncompleteTrays'),
-            type: 'warning',
-        });
-
-    if (wagon.value.length < maxTrays)
-        wagon.value.unshift({
-            id: wagon.value.length,
-            position: null,
-            color: { ...wagonTypeColors[0] },
-            action: 'delete',
-        });
-    else
-        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) {
-        //
-    }
-}
-
-async 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) return (tray.position = null);
-
-        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 >=
-                minHeightBetweenTrays
-            )
-                continue;
-            else {
-                wagon.value[index - 1].position +=
-                    minHeightBetweenTrays -
-                    (wagon.value[index - 1].position - wagon.value[index].position);
-
-                notify({
-                    message:
-                        t('wagon.warnings.minHeightBetweenTrays') +
-                        minHeightBetweenTrays +
-                        ' cm',
-                    type: 'warning',
-                });
-
-                exceedMaxHeight(index - 1);
-            }
-        }
-    }
-}
-
-function exceedMaxHeight(pos) {
-    if (wagon.value[pos].position < maxWagonHeight) return false;
-
-    wagon.value.splice(pos, 1);
-    notify({
-        message: t('wagon.warnings.maxWagonHeight') + maxWagonHeight + ' cm',
-        type: 'warning',
-    });
-    return true;
-}
-</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">
-                <VnInput
-                    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-lg" 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') +
-                                    minHeightBetweenTrays +
-                                    ' cm'
-                                }}
-                                <QSpace />
-                                {{
-                                    t('wagon.warnings.maxWagonHeight') +
-                                    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="xl" />
-                    <QIcon color="grey-6" name="trip_origin" size="xl" />
-                </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>
-            </QCard>
-            <div class="q-mt-md">
-                <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>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.q-page {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.q-form {
-    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: 20%;
-        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>
diff --git a/src/pages/Wagon/Type/WagonTypeEdit.vue b/src/pages/Wagon/Type/WagonTypeEdit.vue
new file mode 100644
index 000000000..25ba05714
--- /dev/null
+++ b/src/pages/Wagon/Type/WagonTypeEdit.vue
@@ -0,0 +1,301 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useQuasar } from 'quasar';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import FormModel from 'src/components/FormModel.vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import WagonCreateTray from './WagonCreateTray.vue';
+
+const { t } = useI18n();
+const { notify } = useQuasar();
+const route = useRoute();
+const entityId = computed(() => route.params.id);
+const wagonTrays = ref([]);
+const createTrayFormDialogRef = ref();
+const selectedEntityId = ref();
+
+async function loadTrays() {
+    try {
+        const res = await axios.get('WagonTypeTrays');
+        const filteredTrays = res.data.filter(
+            (tray) => tray.wagonTypeFk === entityId.value
+        );
+        wagonTrays.value = filteredTrays;
+        return;
+    } catch (err) {
+        console.error('Error loading trays:', err);
+    }
+}
+
+async function addTray(newTray) {
+    try {
+        const res = await axios.post(`WagonTypeTrays`, newTray);
+        wagonTrays.value.push(res.data);
+        notify({
+            message: t(`Tray added successfully`),
+            type: 'positive',
+        });
+    } catch (err) {
+        console.log('err: ', err);
+    }
+}
+
+async function deleteTray(trayToDelete) {
+    try {
+        await axios.delete(`WagonTypeTrays/${trayToDelete.id}`);
+        const index = wagonTrays.value.findIndex((tray) => tray.id === trayToDelete.id);
+        if (index !== -1) {
+            wagonTrays.value.splice(index, 1);
+        }
+        notify({
+            message: t('Tray deleted successfully'),
+            type: 'positive',
+        });
+    } catch (err) {
+        console.log('err: ', err);
+    }
+}
+
+const filter = {
+    where: { wagonTypeFk: entityId.value },
+    include: {
+        relation: 'color',
+        scope: {
+            fields: ['rgb'],
+        },
+    },
+};
+
+const formFilter = { where: { wagonTypeFk: entityId.value } };
+
+const showCreateTrayForm = (id) => {
+    selectedEntityId.value = id;
+    createTrayFormDialogRef.value.show();
+};
+
+watch(
+    () => wagonTrays.value,
+    async (newVal, oldVal) => {
+        if (newVal.length !== oldVal.length) {
+            await loadTrays();
+        }
+    },
+    { deep: true }
+);
+</script>
+
+<template>
+    <VnSubToolbar />
+    <QPage class="q-pa-sm q-mx-xl">
+        <FormModel
+            :url="`WagonTypes/ ${entityId}`"
+            :url-update="`WagonTypes/ ${entityId}`"
+            :filter="formFilter"
+            model="WagonType"
+            auto-load
+        >
+            <template #form="{ data }">
+                <QCard class="q-pa-md">
+                    <VnInput
+                        filled
+                        v-model="data.name"
+                        :label="t('wagon.type.name')"
+                        :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
+                    />
+                    <QCheckbox
+                        class="q-mb-sm"
+                        v-model="data.divisible"
+                        label="Divisible"
+                    />
+
+                    <VnPaginate
+                        data-key="wagonTypeTray"
+                        url="WagonTypeTrays"
+                        order="id DESC"
+                        :filter="filter"
+                        auto-load
+                        ref="vnPaginateRef"
+                        v-bind="$attrs"
+                        :key="wagonTrays.length"
+                    >
+                        <template #body="{ rows }">
+                            <div v-for="row in rows" :key="row.id">
+                                <div class="shelving"></div>
+                                <div class="action-button">
+                                    <div class="wagon-tray q-mx-lg">
+                                        <div class="position">
+                                            <VnInput
+                                                borderless
+                                                type="number"
+                                                disable
+                                                class="input-tray q-mb-sm"
+                                                :label="t('Height') + ': '"
+                                                v-model="row.height"
+                                            />
+                                        </div>
+                                        <div class="shelving">
+                                            <div class="shelving-half">
+                                                <div class="shelving-up"></div>
+                                                <div
+                                                    class="shelving-down"
+                                                    :style="{
+                                                        backgroundColor: row.color.rgb,
+                                                    }"
+                                                ></div>
+                                            </div>
+                                            <div
+                                                class="shelving-divisible"
+                                                :class="{ isVisible: !data.divisible }"
+                                            ></div>
+                                            <div class="shelving-half">
+                                                <div class="shelving-up"></div>
+                                                <div
+                                                    class="shelving-down"
+                                                    :style="{
+                                                        backgroundColor: row.color.rgb,
+                                                    }"
+                                                ></div>
+                                            </div>
+                                        </div>
+                                        <div class="action-button">
+                                            <QBtn
+                                                v-if="row.height === 0"
+                                                flat
+                                                round
+                                                color="primary"
+                                                :icon="'add'"
+                                                class="btn-tray"
+                                                @click="showCreateTrayForm(entityId)"
+                                            />
+                                            <QBtn
+                                                v-else
+                                                flat
+                                                round
+                                                color="primary"
+                                                :icon="'delete'"
+                                                class="btn-tray"
+                                                @click="deleteTray(row)"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </VnPaginate>
+                    <div class="q-mb-sm wheels">
+                        <QIcon color="grey-6" name="trip_origin" size="xl" />
+                        <QIcon color="grey-6" name="trip_origin" size="xl" />
+                    </div>
+                </QCard>
+                <QDialog ref="createTrayFormDialogRef">
+                    <WagonCreateTray :entity-id="entityId" @on-submit="addTray($event)" />
+                </QDialog>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.q-form {
+    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: 26%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding-right: 2rem;
+        padding-left: 3rem;
+    }
+
+    .shelving {
+        display: flex;
+        width: 54%;
+
+        .shelving-half {
+            width: 100%;
+            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: 20%;
+        border-left: 1rem solid gray;
+        align-items: baseline;
+        padding-left: 3rem;
+    }
+
+    .isVisible {
+        display: none;
+    }
+}
+.btn-tray {
+    margin-right: 100%;
+    margin-top: 100%;
+}
+.input-tray {
+    margin-top: 100%;
+    margin-left: 40%;
+}
+</style>
+
+<i18n>
+    en:
+        tray: Tray
+        wagonColor: Wagon color
+        Select a tray: Select a tray
+    es:
+        tray: Bandeja
+        wagonColor: Color de la bandeja
+        Select a tray: Seleccione una bandeja
+        Create new Wagon type: Crear nuevo tipo de vagón
+        Add new tray: Añadir nueva bandeja
+        Height: Altura
+        Tray added successfully: Bandeja añadida correctamente
+        Tray deleted successfully: Bandeja eliminada correctamente
+</i18n>
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 6744dde04..acd6f14be 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed } from 'vue';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -6,36 +7,40 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 
 const quasar = useQuasar();
 const arrayData = useArrayData('WagonTypeList');
 const store = arrayData.store;
-const router = useRouter();
+const dialog = ref();
+const { push } = useRouter();
 const { t } = useI18n();
+const paginate = ref();
 
-function navigate(id) {
-    router.push({ path: `/wagon/type/${id}/edit` });
+const initialData = computed(() => {
+    return {
+        name: null,
+    };
+});
+
+function reloadData() {
+    initialData.value.name = null;
+    paginate.value.fetch();
 }
 
-function create() {
-    router.push({ path: `/wagon/type/create` });
+function navigate(id, name) {
+    push({ path: `/wagon/type/${id}/edit`, query: { name } });
 }
 
 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) {
-        //
-    }
+    await axios.delete(`WagonTypes/${row.id}`);
+    quasar.notify({
+        message: t('wagon.type.removeItem'),
+        type: 'positive',
+    });
+    store.data.splice(store.data.indexOf(row), 1);
 }
 </script>
 
@@ -43,8 +48,9 @@ async function remove(row) {
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
+                ref="paginate"
                 data-key="WagonTypeList"
-                url="/WagonTypes"
+                url="WagonTypes"
                 order="id DESC"
                 auto-load
             >
@@ -54,7 +60,7 @@ async function remove(row) {
                         :key="row.id"
                         :title="(row.name || '').toString()"
                         :id="row.id"
-                        @click="navigate(row.id)"
+                        @click="navigate(row.id, row.name)"
                     >
                         <template #list-items>
                             <QCheckbox
@@ -66,7 +72,7 @@ async function remove(row) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
+                                @click.stop="navigate(row.id, row.name)"
                                 outline
                             />
                             <QBtn
@@ -80,8 +86,42 @@ async function remove(row) {
                 </template>
             </VnPaginate>
         </div>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+        <QPageSticky :offset="[18, 18]">
+            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
+                <QDialog ref="dialog">
+                    <FormModelPopup
+                        :title="t('Create new Wagon type')"
+                        url-create="WagonTypes"
+                        model="WagonType"
+                        :form-initial-data="initialData"
+                        @on-data-saved="reloadData()"
+                        auto-load
+                    >
+                        <template #form-inputs="{ data }">
+                            <VnRow class="row q-gutter-md q-mb-md">
+                                <VnInput
+                                    filled
+                                    v-model="data.name"
+                                    :label="t('Name')"
+                                    :rules="[(val) => !!val || t('nameNotEmpty')]"
+                                />
+                            </VnRow>
+                        </template>
+                    </FormModelPopup>
+                </QDialog>
+            </QBtn>
+            <QTooltip>
+                {{ t('globals.new') }}
+            </QTooltip>
         </QPageSticky>
     </QPage>
 </template>
+
+<i18n>
+en:
+    nameNotEmpty: The name cannot be empty
+es:
+    Create new Wagon type: Crear nuevo tipo de vagón
+    Name: Nombre
+    nameNotEmpty: El nombre no puede estar vacío
+</i18n>
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 6f9a4c819..ecdf7dff0 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'WagonMain' },
     menus: {
-        main: ['WagonList', 'WagonTypeList', 'WagonCounter'],
+        main: ['WagonList', 'WagonTypeList', 'WagonCounter', 'WagonTray'],
         card: [],
     },
     children: [
@@ -81,7 +81,7 @@ export default {
                         title: 'typeCreate',
                         icon: 'create',
                     },
-                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue'),
+                    component: () => import('src/pages/Wagon/Type/WagonTypeList.vue'),
                 },
                 {
                     path: ':id/edit',
@@ -90,7 +90,7 @@ export default {
                         title: 'typeEdit',
                         icon: 'edit',
                     },
-                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue'),
+                    component: () => import('src/pages/Wagon/Type/WagonTypeEdit.vue'),
                 },
             ],
         },
diff --git a/test/cypress/integration/wagonType/wagonTypeCreate.spec.js b/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
index bcf7fe841..05d61c9c5 100644
--- a/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
+++ b/test/cypress/integration/wagonType/wagonTypeCreate.spec.js
@@ -5,50 +5,12 @@ describe('WagonTypeCreate', () => {
         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', () => {
+    it('should create a new wagon type', () => {
+        cy.get('.q-page-sticky > div > .q-btn').click();
         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(':nth-child(1) > :nth-child(1) > .justify-between > .flex > .title')
-            .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');
+    });
+    it('delete a wagon type', () => {
         cy.get(
             ':nth-child(2) > :nth-child(1) > .card-list-body > .actions > .q-btn--standard'
         ).click();
diff --git a/test/cypress/integration/wagonType/wagonTypeEdit.spec.js b/test/cypress/integration/wagonType/wagonTypeEdit.spec.js
new file mode 100644
index 000000000..6e5816e51
--- /dev/null
+++ b/test/cypress/integration/wagonType/wagonTypeEdit.spec.js
@@ -0,0 +1,27 @@
+describe('WagonTypeEdit', () => {
+    const trayColorRow =
+        '.q-select > .q-field__inner > .q-field__control > .q-field__control-container';
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit('/#/wagon/type/2/edit');
+    });
+
+    it('should edit the name and the divisible field of the wagon type', () => {
+        cy.get('.q-card');
+        cy.get('input').first().type(' changed');
+        cy.get('div.q-checkbox__bg').first().click();
+        cy.get('.q-btn--standard').click();
+    });
+
+    it('should create a tray', () => {
+        cy.get('.action-button > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('input').last().type('150');
+        cy.get(trayColorRow).type('{downArrow}{downArrow}{enter}');
+    });
+
+    it('should delete a tray', () => {
+        cy.get('.action-button > .q-btn > .q-btn__content > .q-icon').first().click();
+        cy.reload();
+    });
+});
diff --git a/test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js b/test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js
deleted file mode 100644
index 60c199b73..000000000
--- a/test/vitest/__tests__/pages/Wagons/WagonTypeCreate.spec.js
+++ /dev/null
@@ -1,271 +0,0 @@
-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',
-                })
-            );
-        });
-    });
-});