From 318e2f22777a9f9ebbde267f04ce99dff4951793 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 6 Oct 2023 09:11:29 +0200
Subject: [PATCH 1/3] ref #6248 breadcrumbs created

---
 src/components/NavBar.vue                     |   3 +
 src/components/common/VnBreadCrumbs.vue       | 100 ++++++++++++++++
 src/components/ui/VnSearchbar.vue             |   6 +-
 src/composables/useCamelCase.js               |   3 +
 src/composables/useFirstUpper.js              |   3 +
 src/pages/Wagon/Card/WagonCard.vue            |  29 +++++
 src/pages/Wagon/Type/Card/WagonTypeCard.vue   |  26 +++++
 src/router/modules/route.js                   |   4 +-
 src/router/modules/wagon.js                   | 107 +++++++++++-------
 .../cypress/integration/vnBreadCrumbs.spec.js |  19 ++++
 test/cypress/integration/workerList.spec.js   |  10 +-
 11 files changed, 261 insertions(+), 49 deletions(-)
 create mode 100644 src/components/common/VnBreadCrumbs.vue
 create mode 100644 src/composables/useCamelCase.js
 create mode 100644 src/composables/useFirstUpper.js
 create mode 100644 src/pages/Wagon/Card/WagonCard.vue
 create mode 100644 src/pages/Wagon/Type/Card/WagonTypeCard.vue
 create mode 100644 test/cypress/integration/vnBreadCrumbs.spec.js

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 7d09b09b8..6102dca55 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -7,6 +7,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
 import UserPanel from 'components/UserPanel.vue';
+import VnBreadCrumbs from './common/VnBreadCrumbs.vue';
 
 const { t } = useI18n();
 const session = useSession();
@@ -61,6 +62,7 @@ const pinnedModulesRef = ref();
                 {{ appName }}
                 <QBadge label="Beta" align="top" />
             </QToolbarTitle>
+            <VnBreadCrumbs v-if="$q.screen.gt.xs" />
             <QSpace />
             <div id="searchbar" class="searchbar"></div>
             <QSpace />
@@ -112,6 +114,7 @@ const pinnedModulesRef = ref();
                 <div id="actions-append"></div>
             </div>
         </QToolbar>
+        <VnBreadCrumbs v-if="$q.screen.xs" class="q-ml-md" />
     </QHeader>
 </template>
 
diff --git a/src/components/common/VnBreadCrumbs.vue b/src/components/common/VnBreadCrumbs.vue
new file mode 100644
index 000000000..64c01ae28
--- /dev/null
+++ b/src/components/common/VnBreadCrumbs.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { ref, watchEffect } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useCamelCase } from 'src/composables/useCamelCase';
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+let params = ref([]);
+let childRoutes = ref([]);
+let links = ref([]);
+let root = ref([]);
+let lastModel;
+
+watchEffect(() => {
+    lastModel = undefined;
+    params.value = router.currentRoute.value.path
+        .split('/')
+        .filter((param) => param && isNaN(param));
+    childRoutes.value = router.options.routes[1].children;
+    root.value = params.value[0];
+    setLinks(params);
+});
+
+function setLinks(params) {
+    links.value.length = 0;
+
+    if (params.value.includes('dashboard')) return;
+
+    for (let index in params.value) {
+        const path =
+            index < params.value.length - 1
+                ? '/' +
+                  params.value.filter((item, itemIndex) => itemIndex <= index).join('/')
+                : undefined;
+        links.value.push(getLink(params.value[index], path));
+    }
+    links.value.forEach((link) => {
+        if (link) link.root = root;
+    });
+}
+function getLink(param, path) {
+    lastModel = getModel(param);
+    if (!lastModel) return;
+
+    const { icon, title } = lastModel.meta;
+    const breadcrumb = {
+        icon,
+        path,
+    };
+
+    if (quasar.screen.gt.xs) {
+        breadcrumb.name = param;
+        breadcrumb.title = title;
+    }
+
+    return breadcrumb;
+}
+
+function getModel(param) {
+    if (!lastModel)
+        return childRoutes.value.find((child) => child.path.substring(1) == param);
+
+    let result = lastModel.children.find((child) => child.path == param);
+    if (result) return result;
+
+    for (const child of lastModel.children) {
+        if (child.children) {
+            result = child.children.find((item) => item.path === param);
+            if (result) break;
+        }
+    }
+    return result;
+}
+</script>
+<template>
+    <QBreadcrumbs v-if="links.length && $q.screen.gt.xs" class="q-pa-xs">
+        <QBreadcrumbsEl
+            v-for="(link, index) of links"
+            :key="index"
+            :icon="link.icon"
+            :label="
+                t(`${useCamelCase(link.root)}.pageTitles.${useCamelCase(link.title)}`)
+            "
+            :to="link.path"
+        />
+    </QBreadcrumbs>
+    <QBreadcrumbs v-else class="q-pa-xs">
+        <QBreadcrumbsEl
+            v-for="(link, index) of links"
+            :key="index"
+            :icon="link.icon"
+            :to="link.path"
+        />
+    </QBreadcrumbs>
+</template>
+<style scoped></style>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index af6999b5b..693d6fce2 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -105,7 +105,11 @@ async function search() {
                     class="cursor-pointer"
                 />
 
-                <QIcon v-if="props.info" name="info" class="cursor-info">
+                <QIcon
+                    v-if="props.info && $q.screen.gt.xs"
+                    name="info"
+                    class="cursor-info"
+                >
                     <QTooltip>{{ props.info }}</QTooltip>
                 </QIcon>
             </template>
diff --git a/src/composables/useCamelCase.js b/src/composables/useCamelCase.js
new file mode 100644
index 000000000..5285b022a
--- /dev/null
+++ b/src/composables/useCamelCase.js
@@ -0,0 +1,3 @@
+export function useCamelCase(value) {
+    return value.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
+}
diff --git a/src/composables/useFirstUpper.js b/src/composables/useFirstUpper.js
new file mode 100644
index 000000000..36378c05f
--- /dev/null
+++ b/src/composables/useFirstUpper.js
@@ -0,0 +1,3 @@
+export function useFirstUpper(str) {
+    return str && str.charAt(0).toUpperCase() + str.substr(1);
+}
diff --git a/src/pages/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue
new file mode 100644
index 000000000..18ec121e3
--- /dev/null
+++ b/src/pages/Wagon/Card/WagonCard.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useRoute } from 'vue-router';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+const route = useRoute();
+const { t } = useI18n();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>
+
+<i18n>
+es:
+    Search customer: Buscar cliente
+    You can search by customer id or name: Puedes buscar por id o nombre del cliente
+</i18n>
diff --git a/src/pages/Wagon/Type/Card/WagonTypeCard.vue b/src/pages/Wagon/Type/Card/WagonTypeCard.vue
new file mode 100644
index 000000000..a23122947
--- /dev/null
+++ b/src/pages/Wagon/Type/Card/WagonTypeCard.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useRoute } from 'vue-router';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+const route = useRoute();
+const { t } = useI18n();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+
+    <div><RouterView></RouterView></div>
+</template>
+
+<i18n>
+es:
+    Search customer: Buscar cliente
+    You can search by customer id or name: Puedes buscar por id o nombre del cliente
+</i18n>
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index a3550885c..acda898de 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -21,13 +21,13 @@ export default {
             redirect: { name: 'CmrList' },
             children: [
                 {
-                    path: 'cmr/list',
+                    path: 'cmr',
                     name: 'CmrList',
                     meta: {
                         title: 'cmrsList',
                         icon: 'fact_check',
                     },
-                    component: () => import('src/pages/Route/Cmr/CmrList.vue')
+                    component: () => import('src/pages/Route/Cmr/CmrList.vue'),
                 },
             ],
         },
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 02513d5a8..5a491cf1e 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -11,11 +11,11 @@ export default {
     redirect: { name: 'WagonMain' },
     menus: {
         main: ['WagonList', 'WagonTypeList'],
-        card: [],
+        card: ['WagonEdit'],
     },
     children: [
         {
-            path: '/wagon',
+            path: '',
             name: 'WagonMain',
             component: () => import('src/pages/Wagon/WagonMain.vue'),
             redirect: { name: 'WagonList' },
@@ -27,7 +27,7 @@ export default {
                         title: 'wagonsList',
                         icon: 'vn:trolley',
                     },
-                    component: () => import('src/pages/Wagon/WagonList.vue')
+                    component: () => import('src/pages/Wagon/WagonList.vue'),
                 },
                 {
                     path: 'create',
@@ -36,53 +36,78 @@ export default {
                         title: 'wagonCreate',
                         icon: 'create',
                     },
-                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                    component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
                 {
-                    path: ':id/edit',
+                    path: 'type',
+                    name: 'WagonTypeMain',
+                    meta: {
+                        title: 'typesList',
+                        icon: 'view_list',
+                    },
+                    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',
+                            name: 'WagonTypeCard',
+                            component: () =>
+                                import('src/pages/Wagon/Type/Card/WagonTypeCard.vue'),
+                            redirect: { name: 'WagonTypeEdit' },
+                            children: [
+                                {
+                                    path: 'edit',
+                                    name: 'WagonTypeEdit',
+                                    meta: {
+                                        title: 'typeEdit',
+                                        icon: 'edit',
+                                    },
+                                    component: () =>
+                                        import(
+                                            'src/pages/Wagon/Type/WagonTypeCreate.vue'
+                                        ),
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: 'WagonCard',
+            path: ':id',
+            component: () => import('src/pages/Wagon/Card/WagonCard.vue'),
+            redirect: { name: 'WagonEdit' },
+            children: [
+                {
+                    path: 'edit',
                     name: 'WagonEdit',
                     meta: {
                         title: 'wagonEdit',
                         icon: 'edit',
                     },
-                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                    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')
-                },
-            ],
-        }
     ],
 };
diff --git a/test/cypress/integration/vnBreadCrumbs.spec.js b/test/cypress/integration/vnBreadCrumbs.spec.js
new file mode 100644
index 000000000..9e17b6b80
--- /dev/null
+++ b/test/cypress/integration/vnBreadCrumbs.spec.js
@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+describe('VnBreadCrumbs', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/');
+    });
+
+    it('should not be breadcrumbs', () => {
+        cy.get('.q-breadcrumbs').should('not.exist');
+    });
+    it('should get the correct breadcrumbs', () => {
+        cy.get('[href="#/customer"]').click();
+        cy.get('.q-breadcrumbs .q-breadcrumbs--last').should('have.length', 1);
+        cy.get('.q-breadcrumbs .q-breadcrumbs--last').contains('Clientes');
+        cy.get('.q-infinite-scroll > :nth-child(1)').click();
+        cy.get('.q-breadcrumbs .q-breadcrumbs__el').should('have.length', 2);
+        cy.get('.q-breadcrumbs .q-breadcrumbs__el').eq(1).contains('Resumen');
+    });
+});
diff --git a/test/cypress/integration/workerList.spec.js b/test/cypress/integration/workerList.spec.js
index d76958367..8d4dd770d 100644
--- a/test/cypress/integration/workerList.spec.js
+++ b/test/cypress/integration/workerList.spec.js
@@ -8,17 +8,17 @@ describe('WorkerList', () => {
     it('should load workers', () => {
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
             .eq(0)
-            .should('have.text', 'victorvd');
-        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(1)
             .should('have.text', 'JessicaJones');
         cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
-            .eq(2)
+            .eq(1)
             .should('have.text', 'BruceBanner');
+        cy.get('.card-list-body > .list-items > :nth-child(2) > .value > span')
+            .eq(2)
+            .should('have.text', 'CharlesXavier');
     });
 
     it('should open the worker summary', () => {
-        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(1).click();
+        cy.get('.card-list-body .actions .q-btn:nth-child(2)').eq(0).click();
         cy.get('.summaryHeader div').should('have.text', '1110 - Jessica Jones');
         cy.get('.summary .header').eq(0).invoke('text').should('include', 'Basic data');
         cy.get('.summary .header').eq(1).should('have.text', 'User data');
-- 
2.40.1


From 0c930e5de19cc691d1e1a1b9f5450bbf5c96d356 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 13 Oct 2023 12:36:25 +0200
Subject: [PATCH 2/3] ref #6248 test fixed

---
 test/cypress/integration/vnBreadCrumbs.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/integration/vnBreadCrumbs.spec.js b/test/cypress/integration/vnBreadCrumbs.spec.js
index 9e17b6b80..dd74fbfd4 100644
--- a/test/cypress/integration/vnBreadCrumbs.spec.js
+++ b/test/cypress/integration/vnBreadCrumbs.spec.js
@@ -11,9 +11,9 @@ describe('VnBreadCrumbs', () => {
     it('should get the correct breadcrumbs', () => {
         cy.get('[href="#/customer"]').click();
         cy.get('.q-breadcrumbs .q-breadcrumbs--last').should('have.length', 1);
-        cy.get('.q-breadcrumbs .q-breadcrumbs--last').contains('Clientes');
+        cy.get('.q-breadcrumbs .q-breadcrumbs--last').contains('List');
         cy.get('.q-infinite-scroll > :nth-child(1)').click();
         cy.get('.q-breadcrumbs .q-breadcrumbs__el').should('have.length', 2);
-        cy.get('.q-breadcrumbs .q-breadcrumbs__el').eq(1).contains('Resumen');
+        cy.get('.q-breadcrumbs .q-breadcrumbs__el').eq(1).contains('Summary');
     });
 });
-- 
2.40.1


From 5f12d64e7387fe6b8f749246cb644197fb4533bd Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 19 Oct 2023 09:31:50 +0200
Subject: [PATCH 3/3] ref #6248 refactor breadcrumbs

---
 src/components/NavBar.vue                     |  10 +-
 src/components/common/VnBreadCrumbs.vue       | 100 -----------------
 src/components/common/VnBreadcrumbs.vue       |  82 ++++++++++++++
 src/pages/Wagon/Type/Card/WagonTypeCard.vue   |  26 -----
 src/router/modules/wagon.js                   | 101 +++++++-----------
 .../cypress/integration/vnBreadCrumbs.spec.js |  19 ----
 .../cypress/integration/vnBreadcrumbs.spec.js |  21 ++++
 7 files changed, 144 insertions(+), 215 deletions(-)
 delete mode 100644 src/components/common/VnBreadCrumbs.vue
 create mode 100644 src/components/common/VnBreadcrumbs.vue
 delete mode 100644 src/pages/Wagon/Type/Card/WagonTypeCard.vue
 delete mode 100644 test/cypress/integration/vnBreadCrumbs.spec.js
 create mode 100644 test/cypress/integration/vnBreadcrumbs.spec.js

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6102dca55..c82a26248 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -7,7 +7,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
 import UserPanel from 'components/UserPanel.vue';
-import VnBreadCrumbs from './common/VnBreadCrumbs.vue';
+import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
 
 const { t } = useI18n();
 const session = useSession();
@@ -58,11 +58,7 @@ const pinnedModulesRef = ref();
                     </QTooltip>
                 </QBtn>
             </RouterLink>
-            <QToolbarTitle shrink class="text-weight-bold" v-if="$q.screen.gt.sm">
-                {{ appName }}
-                <QBadge label="Beta" align="top" />
-            </QToolbarTitle>
-            <VnBreadCrumbs v-if="$q.screen.gt.xs" />
+            <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpace />
             <div id="searchbar" class="searchbar"></div>
             <QSpace />
@@ -114,7 +110,7 @@ const pinnedModulesRef = ref();
                 <div id="actions-append"></div>
             </div>
         </QToolbar>
-        <VnBreadCrumbs v-if="$q.screen.xs" class="q-ml-md" />
+        <VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
     </QHeader>
 </template>
 
diff --git a/src/components/common/VnBreadCrumbs.vue b/src/components/common/VnBreadCrumbs.vue
deleted file mode 100644
index 64c01ae28..000000000
--- a/src/components/common/VnBreadCrumbs.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { ref, watchEffect } from 'vue';
-import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useCamelCase } from 'src/composables/useCamelCase';
-
-const router = useRouter();
-const quasar = useQuasar();
-const { t } = useI18n();
-
-let params = ref([]);
-let childRoutes = ref([]);
-let links = ref([]);
-let root = ref([]);
-let lastModel;
-
-watchEffect(() => {
-    lastModel = undefined;
-    params.value = router.currentRoute.value.path
-        .split('/')
-        .filter((param) => param && isNaN(param));
-    childRoutes.value = router.options.routes[1].children;
-    root.value = params.value[0];
-    setLinks(params);
-});
-
-function setLinks(params) {
-    links.value.length = 0;
-
-    if (params.value.includes('dashboard')) return;
-
-    for (let index in params.value) {
-        const path =
-            index < params.value.length - 1
-                ? '/' +
-                  params.value.filter((item, itemIndex) => itemIndex <= index).join('/')
-                : undefined;
-        links.value.push(getLink(params.value[index], path));
-    }
-    links.value.forEach((link) => {
-        if (link) link.root = root;
-    });
-}
-function getLink(param, path) {
-    lastModel = getModel(param);
-    if (!lastModel) return;
-
-    const { icon, title } = lastModel.meta;
-    const breadcrumb = {
-        icon,
-        path,
-    };
-
-    if (quasar.screen.gt.xs) {
-        breadcrumb.name = param;
-        breadcrumb.title = title;
-    }
-
-    return breadcrumb;
-}
-
-function getModel(param) {
-    if (!lastModel)
-        return childRoutes.value.find((child) => child.path.substring(1) == param);
-
-    let result = lastModel.children.find((child) => child.path == param);
-    if (result) return result;
-
-    for (const child of lastModel.children) {
-        if (child.children) {
-            result = child.children.find((item) => item.path === param);
-            if (result) break;
-        }
-    }
-    return result;
-}
-</script>
-<template>
-    <QBreadcrumbs v-if="links.length && $q.screen.gt.xs" class="q-pa-xs">
-        <QBreadcrumbsEl
-            v-for="(link, index) of links"
-            :key="index"
-            :icon="link.icon"
-            :label="
-                t(`${useCamelCase(link.root)}.pageTitles.${useCamelCase(link.title)}`)
-            "
-            :to="link.path"
-        />
-    </QBreadcrumbs>
-    <QBreadcrumbs v-else class="q-pa-xs">
-        <QBreadcrumbsEl
-            v-for="(link, index) of links"
-            :key="index"
-            :icon="link.icon"
-            :to="link.path"
-        />
-    </QBreadcrumbs>
-</template>
-<style scoped></style>
diff --git a/src/components/common/VnBreadcrumbs.vue b/src/components/common/VnBreadcrumbs.vue
new file mode 100644
index 000000000..792671e21
--- /dev/null
+++ b/src/components/common/VnBreadcrumbs.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { ref, watchEffect } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useCamelCase } from 'src/composables/useCamelCase';
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+
+let matched = ref([]);
+let breadcrumbs = ref([]);
+let root = ref(null);
+
+watchEffect(() => {
+    matched.value = router.currentRoute.value.matched.filter(
+        (matched) => Object.keys(matched.meta).length
+    );
+    breadcrumbs.value.length = 0;
+
+    if (matched.value[0].name != 'Dashboard') {
+        root.value = useCamelCase(matched.value[0].path.substring(1).toLowerCase());
+
+        for (let index in matched.value)
+            breadcrumbs.value.push(getBreadcrumb(matched.value[index]));
+
+        breadcrumbs.value[breadcrumbs.value.length - 1].path = undefined;
+    }
+});
+
+function getBreadcrumb(param) {
+    const breadcrumb = {
+        icon: param.meta.icon,
+        path: param.path,
+        root: root.value,
+    };
+
+    if (quasar.screen.gt.sm) {
+        breadcrumb.name = param.name;
+        breadcrumb.title = useCamelCase(param.meta.title);
+    }
+
+    return breadcrumb;
+}
+</script>
+<template>
+    <QBreadcrumbs v-if="breadcrumbs.length && $q.screen.gt.sm" class="q-pa-xs">
+        <QBreadcrumbsEl
+            v-for="(breadcrumb, index) of breadcrumbs"
+            :key="index"
+            :icon="breadcrumb.icon"
+            :label="t(`${breadcrumb.root}.pageTitles.${breadcrumb.title}`)"
+            :to="breadcrumb.path"
+        />
+    </QBreadcrumbs>
+    <QBreadcrumbs v-else class="q-pa-xs">
+        <QBreadcrumbsEl
+            v-for="(breadcrumb, index) of breadcrumbs"
+            :key="index"
+            :icon="breadcrumb.icon"
+            :to="breadcrumb.path"
+        />
+    </QBreadcrumbs>
+</template>
+<style lang="scss">
+.q-breadcrumbs {
+    &__el,
+    > div {
+        flex-wrap: nowrap;
+    }
+}
+@media (max-width: $breakpoint-md) {
+    .q-breadcrumbs {
+        overflow: hidden;
+
+        &__el:not(:first-child):not(:last-child) {
+            display: none !important;
+        }
+    }
+}
+</style>
diff --git a/src/pages/Wagon/Type/Card/WagonTypeCard.vue b/src/pages/Wagon/Type/Card/WagonTypeCard.vue
deleted file mode 100644
index a23122947..000000000
--- a/src/pages/Wagon/Type/Card/WagonTypeCard.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-const route = useRoute();
-const { t } = useI18n();
-</script>
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-
-    <div><RouterView></RouterView></div>
-</template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 5a491cf1e..3fb808778 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -11,11 +11,11 @@ export default {
     redirect: { name: 'WagonMain' },
     menus: {
         main: ['WagonList', 'WagonTypeList'],
-        card: ['WagonEdit'],
+        card: [],
     },
     children: [
         {
-            path: '',
+            path: '/wagon',
             name: 'WagonMain',
             component: () => import('src/pages/Wagon/WagonMain.vue'),
             redirect: { name: 'WagonList' },
@@ -39,67 +39,7 @@ export default {
                     component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
                 {
-                    path: 'type',
-                    name: 'WagonTypeMain',
-                    meta: {
-                        title: 'typesList',
-                        icon: 'view_list',
-                    },
-                    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',
-                            name: 'WagonTypeCard',
-                            component: () =>
-                                import('src/pages/Wagon/Type/Card/WagonTypeCard.vue'),
-                            redirect: { name: 'WagonTypeEdit' },
-                            children: [
-                                {
-                                    path: 'edit',
-                                    name: 'WagonTypeEdit',
-                                    meta: {
-                                        title: 'typeEdit',
-                                        icon: 'edit',
-                                    },
-                                    component: () =>
-                                        import(
-                                            'src/pages/Wagon/Type/WagonTypeCreate.vue'
-                                        ),
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: 'WagonCard',
-            path: ':id',
-            component: () => import('src/pages/Wagon/Card/WagonCard.vue'),
-            redirect: { name: 'WagonEdit' },
-            children: [
-                {
-                    path: 'edit',
+                    path: ':id/edit',
                     name: 'WagonEdit',
                     meta: {
                         title: 'wagonEdit',
@@ -109,5 +49,40 @@ export default {
                 },
             ],
         },
+        {
+            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'),
+                },
+            ],
+        },
     ],
 };
diff --git a/test/cypress/integration/vnBreadCrumbs.spec.js b/test/cypress/integration/vnBreadCrumbs.spec.js
deleted file mode 100644
index dd74fbfd4..000000000
--- a/test/cypress/integration/vnBreadCrumbs.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/// <reference types="cypress" />
-describe('VnBreadCrumbs', () => {
-    beforeEach(() => {
-        cy.login('developer');
-        cy.visit('/');
-    });
-
-    it('should not be breadcrumbs', () => {
-        cy.get('.q-breadcrumbs').should('not.exist');
-    });
-    it('should get the correct breadcrumbs', () => {
-        cy.get('[href="#/customer"]').click();
-        cy.get('.q-breadcrumbs .q-breadcrumbs--last').should('have.length', 1);
-        cy.get('.q-breadcrumbs .q-breadcrumbs--last').contains('List');
-        cy.get('.q-infinite-scroll > :nth-child(1)').click();
-        cy.get('.q-breadcrumbs .q-breadcrumbs__el').should('have.length', 2);
-        cy.get('.q-breadcrumbs .q-breadcrumbs__el').eq(1).contains('Summary');
-    });
-});
diff --git a/test/cypress/integration/vnBreadcrumbs.spec.js b/test/cypress/integration/vnBreadcrumbs.spec.js
new file mode 100644
index 000000000..3c839c1c7
--- /dev/null
+++ b/test/cypress/integration/vnBreadcrumbs.spec.js
@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+describe('VnBreadcrumbs', () => {
+    const firstCard = '.q-infinite-scroll > :nth-child(1)';
+    const lastBreadcrumb = '.q-breadcrumbs--last > .q-breadcrumbs__el';
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/');
+    });
+
+    it('should not be breadcrumbs', () => {
+        cy.get('.q-breadcrumbs').should('not.exist');
+    });
+
+    it('should get the correct breadcrumbs', () => {
+        cy.visit('#/customer/list');
+        cy.get('.q-breadcrumbs__el').should('have.length', 2);
+
+        cy.get(firstCard).click();
+        cy.get(`${lastBreadcrumb} > .q-icon`).should('have.text', 'launch');
+    });
+});
-- 
2.40.1