src/i18n/en/index.js

@@ -389,7 +389,9 @@ export default {
     wagon: {
         pageTitles: {
             wagons: 'Wagons',
-            list: 'List'
+            types: 'Types',
+            typeCreate: 'Create type',
+            typeEdit: 'Edit type'
         },
         type: {
             name: 'Name',

src/i18n/es/index.js

@@ -389,7 +389,9 @@ export default {
     wagon: {
         pageTitles: {
             wagons: 'Vagones',
-            list: 'Listado'
+            types: 'Tipos',
+            typeCreate: 'Crear tipo',
+            typeEdit: 'Editar tipo'
         },
         type: {
             name: 'Nombre',

src/pages/Wagon/Type/WagonTypeCreate.vue

@@ -32,10 +32,12 @@ import FetchData from 'components/FetchData.vue';
 import { useQuasar } from 'quasar';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import WagonTray from './WagonTray.vue';
+import { useRouter } from 'vue-router';
+import WagonTray from '../Type/WagonTray.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
+const router = useRouter();
 const wagonConfig = ref([]);
 const wagonTypeColors = ref([]);
 const wagon = ref([]);
@@ -45,7 +47,7 @@ let currentPosition = 0;
 
 function addTray() {
     if (wagon.value.length < wagonConfig.value.maxTrays - 1) {
-        currentPosition += wagonConfig.value.trayStep;
+        currentPosition += wagonConfig.value.minTrayHeight;
         wagon.value.unshift({
             position: currentPosition,
             color: {
@@ -65,7 +67,7 @@ function deleteTray(position) {
     currentPosition = 0;
     wagon.value = wagon.value.filter((tray) => tray.position !== position);
     for (let i = wagon.value.length - 1; i >= 0; i--) {
-        currentPosition += wagonConfig.value.trayStep;
+        currentPosition += wagonConfig.value.minTrayHeight;
         wagon.value[i].position = currentPosition;
     }
 }
@@ -76,20 +78,23 @@ async function onSubmit() {
             .post('WagonTypes', {
                 name: name.value,
             })
-            .then((res) => {
-                wagon.value.forEach(async (tray) => {
-                    await axios.post('WagonTypeTrays', {
+            .then(async (res) => {
+                const trays = [];
+                wagon.value.forEach((tray) => {
+                    trays.push({
                         typeFk: res.data.id,
                         height: tray.position,
                         colorFk: tray.color.id,
                     });
                 });
-            });
-
+                await axios.post('WagonTypeTrays', trays).then(() => {
+                    router.push({ path: `/wagon/type/list` });
                     quasar.notify({
                         message: t('wagon.type.saveMessage'),
                         type: 'positive',
                     });
+                });
+            });
     } catch (error) {
         //
     }

src/pages/Wagon/Type/WagonTypeEdit.vue

@@ -0,0 +1,223 @@
+<!-- <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import Paginate from 'src/components/PaginateData.vue';
+import WorkerSummaryDialog from 'src/pages/Worker/Card/WorkerSummaryDialog.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import WorkerFilter from 'src/pages/Worker/WorkerFilter.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+function navigate(id) {
+    router.push({ path: `/worker/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: WorkerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script> -->
+<script setup>
+import axios from 'axios';
+import FetchData from 'components/FetchData.vue';
+import { useQuasar } from 'quasar';
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import WagonTray from './WagonTray.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const wagonConfig = ref([]);
+const wagonTypeColors = ref([]);
+const wagon = ref([]);
+const divisible = ref(false);
+const name = ref('');
+let currentPosition = 0;
+
+const originalData = ref({});
+
+onMounted(() => fetch());
+onUpdated(() => fetch());
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+async function fetch() {
+    await axios.get(`WagonTypes/${entityId.value}`).then(async (type) => {
+        if (type) {
+            originalData.value.name = name.value = type.name;
+            await axios.get(`WagonTypeTrays`, {
+                params: { filter: { typeFk: entityId.value } },
+            });
+        }
+    });
+}
+
+function addTray() {
+    if (wagon.value.length < wagonConfig.value.maxTrays - 1) {
+        currentPosition += wagonConfig.value.trayStep;
+        wagon.value.unshift({
+            position: currentPosition,
+            color: {
+                id: 1,
+                rgb: 'blue',
+            },
+        });
+    } else {
+        quasar.notify({
+            message: t('wagon.type.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(position) {
+    currentPosition = 0;
+    wagon.value = wagon.value.filter((tray) => tray.position !== position);
+    for (let i = wagon.value.length - 1; i >= 0; i--) {
+        currentPosition += wagonConfig.value.trayStep;
+        wagon.value[i].position = currentPosition;
+    }
+}
+
+async function onSubmit() {
+    try {
+        await axios
+            .post('WagonTypes', {
+                name: name.value,
+            })
+            .then(async (res) => {
+                const trays = [];
+                wagon.value.forEach((tray) => {
+                    trays.push({
+                        typeFk: res.data.id,
+                        height: tray.position,
+                        colorFk: tray.color.id,
+                    });
+                });
+                await axios.post('WagonTypeTrays', trays).then(() => {
+                    router.push({ path: `/wagon/type/list` });
+                    quasar.notify({
+                        message: t('wagon.type.saveMessage'),
+                        type: 'positive',
+                    });
+                });
+            });
+    } catch (error) {
+        //
+    }
+}
+
+async function onReset() {
+    name.value = originalData.value.name;
+    divisible.value = false;
+    wagon.value = [];
+    currentPosition = 0;
+}
+</script>
+
+<template>
+    <fetch-data
+        url="WagonConfigs"
+        @on-fetch="(data) => (wagonConfig = data[0])"
+        auto-load
+    />
+    <fetch-data
+        url="WagonTypeColors"
+        @on-fetch="(data) => (wagonTypeColors = data)"
+        auto-load
+    />
+    <q-page class="q-pa-sm q-mx-xl">
+        <q-card class="q-pa-sm">
+            <q-form @submit="onSubmit" @reset="onReset" class="q-pa-md">
+                <q-input
+                    filled
+                    v-model="name"
+                    :label="t('wagon.type.name')"
+                    :rules="[(val) => !!val || t('wagon.type.nameNotEmpty')]"
+                />
+                <q-checkbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div v-for="tray in wagon" :key="tray.position">
+                    <WagonTray
+                        action="delete"
+                        @delete-tray="deleteTray"
+                        :position="tray.position"
+                        :color="{ rgb: 'blue' }"
+                        :divisible="divisible"
+                    ></WagonTray>
+                </div>
+                <WagonTray
+                    v-if="wagonTypeColors.values"
+                    action="add"
+                    @add-tray="addTray"
+                    :color="{ rgb: 'blue' }"
+                    :divisible="divisible"
+                ></WagonTray>
+                <div class="q-mb-sm wheels">
+                    <q-icon color="grey-6" name="trip_origin" size="3rem" />
+                    <q-icon color="grey-6" name="trip_origin" size="3rem" />
+                </div>
+                <div>
+                    <q-btn
+                        :label="t('wagon.type.submit')"
+                        type="submit"
+                        color="primary"
+                    />
+                    <q-btn
+                        :label="t('wagon.type.reset')"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
+                    <!-- <q-color
+                        flat
+                        v-model="hex"
+                        no-header
+                        no-footer
+                        default-view="palette"
+                        :palette="
+                            wagonTypeColors.map((color) => {
+                                return color.rgb;
+                            })
+                        "
+                    /> -->
+                </div>
+            </q-form>
+        </q-card>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.q-card {
+    width: 50%;
+}
+.wheels {
+    display: flex;
+    justify-content: space-around;
+}
+</style>

src/pages/Wagon/Type/WagonTypeList.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import Paginate from 'src/components/PaginateData.vue';
+// import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+// import CustomerFilter from './CustomerFilter.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+function navigate(id) {
+    router.push({ path: `/wagon/type/${id}/edit` });
+}
+
+function create() {
+    router.push({ path: `/wagon/type/create` });
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="CustomerList"
+                :label="t('Search wagon type')"
+                :info="t('You can search by wagon type id or name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <q-btn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <q-tooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </q-tooltip>
+                </q-btn>
+            </div>
+        </Teleport>
+    </template>
+    <q-page class="column items-center q-pa-md">
+        <div class="card-list">
+            <paginate data-key="CustomerList" url="/WagonTypes" order="id DESC" auto-load>
+                <template #body="{ rows }">
+                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <q-item
+                            class="q-pa-none items-start cursor-pointer q-hoverable"
+                            v-ripple
+                            clickable
+                        >
+                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                                <div class="text-h6">{{ row.name }}</div>
+                                <q-item-label caption>#{{ row.id }}</q-item-label>
+                            </q-item-section>
+                            <q-separator vertical />
+                            <q-card-actions vertical class="justify-between">
+                                <q-btn
+                                    flat
+                                    round
+                                    color="primary"
+                                    icon="arrow_circle_right"
+                                    @click="navigate(row.id)"
+                                >
+                                    <q-tooltip>
+                                        {{ t('components.smartCard.openCard') }}
+                                    </q-tooltip>
+                                </q-btn>
+                            </q-card-actions>
+                        </q-item>
+                    </q-card>
+                </template>
+            </paginate>
+        </div>
+        <q-page-sticky position="bottom-right" :offset="[18, 18]">
+            <q-btn @click="create" fab icon="add" color="primary" />
+        </q-page-sticky>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
+
+<i18n>
+es:
+    Search wagon type: Buscar tipo de vagón
+    You can search by wagon type id or name: Puedes buscar por id o nombre del tipo de vagón
+</i18n>

src/router/modules/wagon.js

@@ -15,19 +15,37 @@ export default {
     },
     children: [
         {
-            path: '',
+            path: '/wagon/type',
             name: 'WagonMain',
             component: () => import('src/pages/Wagon/WagonMain.vue'),
             redirect: { name: 'WagonTypeList' },
             children: [
                 {
                     path: 'list',
-                    name: 'WagonTypeCreate',
+                    name: 'WagonTypeList',
                     meta: {
-                        title: 'list',
+                        title: 'types',
                         icon: 'view_list',
                     },
-                    component: () => import('src/pages/Wagon/WagonTypeCreate.vue'),
+                    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')
                 },
             ],
         }