Merge branch 'dev' into 4797-workerNotificationManager

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.42.01",
+    "version": "23.48.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -53,4 +53,4 @@
         "vite": "^4.3.5",
         "vitest": "^0.31.1"
     }
-}
+}

src/components/FormModel.vue

@@ -122,9 +122,24 @@ watch(formUrl, async () => {
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md">
+    <div class="column items-center">
-        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
+        <QForm
-    </QForm>
+            v-if="formData"
+            @submit="save"
+            @reset="reset"
+            class="q-pa-md"
+            id="formModel"
+        >
+            <QCard>
+                <slot
+                    name="form"
+                    :data="formData"
+                    :validate="validate"
+                    :filter="filter"
+                />
+            </QCard>
+        </QForm>
+    </div>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">
@@ -156,3 +171,12 @@ watch(formUrl, async () => {
         color="primary"
     />
 </template>
+<style lang="scss" scoped>
+#formModel {
+    max-width: 800px;
+    width: 100%;
+}
+.q-card {
+    padding: 32px;
+}
+</style>

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();
@@ -57,10 +58,7 @@ const pinnedModulesRef = ref();
                     </QTooltip>
                 </QBtn>
             </RouterLink>
-            <QToolbarTitle shrink class="text-weight-bold" v-if="$q.screen.gt.sm">
+            <VnBreadcrumbs v-if="$q.screen.gt.sm" />
-                {{ appName }}
-                <QBadge label="Beta" align="top" />
-            </QToolbarTitle>
             <QSpace />
             <div id="searchbar" class="searchbar"></div>
             <QSpace />
@@ -112,6 +110,7 @@ const pinnedModulesRef = ref();
                 <div id="actions-append"></div>
             </div>
         </QToolbar>
+        <VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
     </QHeader>
 </template>
 

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>

src/components/ui/VnRow.vue

@@ -0,0 +1,12 @@
+<template>
+    <div id="row">
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss" scopped>
+@media screen and (max-width: 800px) {
+    #row {
+        flex-direction: column;
+    }
+}
+</style>

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>

src/composables/useCamelCase.js

@@ -0,0 +1,3 @@
+export function useCamelCase(value) {
+    return value.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
+}

src/composables/useFirstUpper.js

@@ -0,0 +1,3 @@
+export function useFirstUpper(str) {
+    return str && str.charAt(0).toUpperCase() + str.substr(1);
+}

src/pages/Claim/Card/ClaimBasicData.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -90,138 +91,119 @@ const statesFilter = {
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
-
+    <FormModel
-    <div class="column items-center">
+        :url="`Claims/${route.params.id}`"
-        <QCard>
+        :url-update="`Claims/updateClaim/${route.params.id}`"
-            <FormModel
+        :filter="claimFilter"
-                :url="`Claims/${route.params.id}`"
+        model="claim"
-                :url-update="`Claims/updateClaim/${route.params.id}`"
+    >
-                :filter="claimFilter"
+        <template #form="{ data, validate, filter }">
-                model="claim"
+            <VnRow class="row q-gutter-md q-mb-md">
-            >
+                <div class="col">
-                <template #form="{ data, validate, filter }">
+                    <QInput
-                    <div class="row q-gutter-md q-mb-md">
+                        v-model="data.client.name"
-                        <div class="col">
+                        :label="t('claim.basicData.customer')"
-                            <QInput
+                        disable
-                                v-model="data.client.name"
+                    />
-                                :label="t('claim.basicData.customer')"
+                </div>
-                                disable
+                <div class="col">
-                            />
+                    <QInput
-                        </div>
+                        v-model="data.created"
-                        <div class="col">
+                        mask="####-##-##"
-                            <QInput
+                        fill-mask="_"
-                                v-model="data.created"
+                        autofocus
-                                mask="####-##-##"
+                    >
-                                fill-mask="_"
+                        <template #append>
-                                autofocus
+                            <QIcon name="event" class="cursor-pointer">
-                            >
+                                <QPopupProxy
-                                <template #append>
+                                    cover
-                                    <QIcon name="event" class="cursor-pointer">
+                                    transition-show="scale"
-                                        <QPopupProxy
+                                    transition-hide="scale"
-                                            cover
+                                >
-                                            transition-show="scale"
+                                    <QDate v-model="data.created" mask="YYYY-MM-DD">
-                                            transition-hide="scale"
+                                        <div class="row items-center justify-end">
-                                        >
+                                            <QBtn
-                                            <QDate
+                                                v-close-popup
-                                                v-model="data.created"
+                                                label="Close"
-                                                mask="YYYY-MM-DD"
+                                                color="primary"
-                                            >
+                                                flat
-                                                <div class="row items-center justify-end">
+                                            />
-                                                    <QBtn
+                                        </div>
-                                                        v-close-popup
+                                    </QDate>
-                                                        label="Close"
+                                </QPopupProxy>
-                                                        color="primary"
+                            </QIcon>
-                                                        flat
+                        </template>
-                                                    />
+                    </QInput>
-                                                </div>
+                </div>
-                                            </QDate>
+            </VnRow>
-                                        </QPopupProxy>
+            <VnRow class="row q-gutter-md q-mb-md">
-                                    </QIcon>
+                <div class="col">
-                                </template>
+                    <QSelect
-                            </QInput>
+                        v-model="data.workerFk"
-                        </div>
+                        :options="workers"
-                    </div>
+                        option-value="id"
-                    <div class="row q-gutter-md q-mb-md">
+                        option-label="name"
-                        <div class="col">
+                        emit-value
-                            <QSelect
+                        :label="t('claim.basicData.assignedTo')"
-                                v-model="data.workerFk"
+                        map-options
-                                :options="workers"
+                        use-input
-                                option-value="id"
+                        @filter="(value, update) => filter(value, update, workerFilter)"
-                                option-label="name"
+                        :rules="validate('claim.claimStateFk')"
-                                emit-value
+                        :input-debounce="0"
-                                :label="t('claim.basicData.assignedTo')"
+                    >
-                                map-options
+                        <template #before>
-                                use-input
+                            <QAvatar color="orange">
-                                @filter="
+                                <QImg
-                                    (value, update) => filter(value, update, workerFilter)
+                                    v-if="data.workerFk"
-                                "
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                :rules="validate('claim.claimStateFk')"
+                                    spinner-color="white"
-                                :input-debounce="0"
+                                />
-                            >
+                            </QAvatar>
-                                <template #before>
+                        </template>
-                                    <QAvatar color="orange">
+                    </QSelect>
-                                        <QImg
+                </div>
-                                            v-if="data.workerFk"
+                <div class="col">
-                                            :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                    <QSelect
-                                            spinner-color="white"
+                        v-model="data.claimStateFk"
-                                        />
+                        :options="claimStates"
-                                    </QAvatar>
+                        option-value="id"
-                                </template>
+                        option-label="description"
-                            </QSelect>
+                        emit-value
-                        </div>
+                        :label="t('claim.basicData.state')"
-                        <div class="col">
+                        map-options
-                            <QSelect
+                        use-input
-                                v-model="data.claimStateFk"
+                        @filter="(value, update) => filter(value, update, statesFilter)"
-                                :options="claimStates"
+                        :rules="validate('claim.claimStateFk')"
-                                option-value="id"
+                        :input-debounce="0"
-                                option-label="description"
+                    >
-                                emit-value
+                    </QSelect>
-                                :label="t('claim.basicData.state')"
+                </div>
-                                map-options
+            </VnRow>
-                                use-input
+            <VnRow class="row q-gutter-md q-mb-md">
-                                @filter="
+                <div class="col">
-                                    (value, update) => filter(value, update, statesFilter)
+                    <QInput
-                                "
+                        v-model.number="data.packages"
-                                :rules="validate('claim.claimStateFk')"
+                        :label="t('claim.basicData.packages')"
-                                :input-debounce="0"
+                        :rules="validate('claim.packages')"
-                            >
+                        type="number"
-                            </QSelect>
+                    />
-                        </div>
+                </div>
-                    </div>
+                <div class="col">
-                    <div class="row q-gutter-md q-mb-md">
+                    <QInput
-                        <div class="col">
+                        v-model="data.rma"
-                            <QInput
+                        :label="t('claim.basicData.returnOfMaterial')"
-                                v-model.number="data.packages"
+                        :rules="validate('claim.rma')"
-                                :label="t('claim.basicData.packages')"
+                    />
-                                :rules="validate('claim.packages')"
+                </div>
-                                type="number"
+            </VnRow>
-                            />
+            <VnRow class="row q-gutter-md q-mb-md">
-                        </div>
+                <div class="col">
-                        <div class="col">
+                    <QCheckbox
-                            <QInput
+                        v-model="data.hasToPickUp"
-                                v-model="data.rma"
+                        :label="t('claim.basicData.picked')"
-                                :label="t('claim.basicData.returnOfMaterial')"
+                    />
-                                :rules="validate('claim.rma')"
+                </div>
-                            />
+            </VnRow>
-                        </div>
+        </template>
-                    </div>
+    </FormModel>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QCheckbox
-                                v-model="data.hasToPickUp"
-                                :label="t('claim.basicData.picked')"
-                            />
-                        </div>
-                    </div>
-                </template>
-            </FormModel>
-        </QCard>
-    </div>
 </template>
-
-<style lang="scss" scoped>
-.q-card {
-    width: 100%;
-    max-width: 60em;
-}
-</style>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -58,121 +59,109 @@ const filterOptions = {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <div class="column items-center">
-        <QCard>
-            <FormModel :url="`Clients/${route.params.id}`" model="customer">
-                <template #form="{ data, validate, filter }">
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.socialName"
-                                :label="t('customer.basicData.socialName')"
-                                :rules="validate('client.socialName')"
-                                autofocus
-                            />
-                        </div>
-                        <div class="col">
-                            <QSelect
-                                v-model="data.businessTypeFk"
-                                :options="businessTypes"
-                                option-value="code"
-                                option-label="description"
-                                emit-value
-                                :label="t('customer.basicData.businessType')"
-                                map-options
-                                :rules="validate('client.businessTypeFk')"
-                                :input-debounce="0"
-                            />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.contact"
-                                :label="t('customer.basicData.contact')"
-                                :rules="validate('client.contact')"
-                                clearable
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                v-model="data.email"
-                                type="email"
-                                :label="t('customer.basicData.email')"
-                                :rules="validate('client.email')"
-                                clearable
-                            />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QInput
-                                v-model="data.phone"
-                                :label="t('customer.basicData.phone')"
-                                :rules="validate('client.phone')"
-                                clearable
-                            />
-                        </div>
-                        <div class="col">
-                            <QInput
-                                v-model="data.mobile"
-                                :label="t('customer.basicData.mobile')"
-                                :rules="validate('client.mobile')"
-                                clearable
-                            />
-                        </div>
-                    </div>
-                    <div class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QSelect
-                                v-model="data.salesPersonFk"
-                                :options="workers"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                :label="t('customer.basicData.salesPerson')"
-                                map-options
-                                use-input
-                                @filter="
-                                    (value, update) =>
-                                        filter(value, update, filterOptions)
-                                "
-                                :rules="validate('client.salesPersonFk')"
-                                :input-debounce="0"
-                            >
-                                <template #prepend>
-                                    <QAvatar color="orange">
-                                        <QImg
-                                            v-if="data.salesPersonFk"
-                                            :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </QAvatar>
-                                </template>
-                            </QSelect>
-                        </div>
-                        <div class="col">
-                            <QSelect
-                                v-model="data.contactChannelFk"
-                                :options="contactChannels"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                :label="t('customer.basicData.contactChannel')"
-                                map-options
-                                :rules="validate('client.contactChannelFk')"
-                                :input-debounce="0"
-                            />
-                        </div>
-                    </div>
-                </template>
-            </FormModel>
-        </QCard>
-    </div>
-</template>
 
-<style lang="scss" scoped>
+    <FormModel :url="`Clients/${route.params.id}`" model="customer">
-.q-card {
+        <template #form="{ data, validate, filter }">
-    width: 800px;
+            <VnRow class="row q-gutter-md q-mb-md">
-}
+                <div class="col">
-</style>
+                    <QInput
+                        v-model="data.socialName"
+                        :label="t('customer.basicData.socialName')"
+                        :rules="validate('client.socialName')"
+                        autofocus
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.businessTypeFk"
+                        :options="businessTypes"
+                        option-value="code"
+                        option-label="description"
+                        emit-value
+                        :label="t('customer.basicData.businessType')"
+                        map-options
+                        :rules="validate('client.businessTypeFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.contact"
+                        :label="t('customer.basicData.contact')"
+                        :rules="validate('client.contact')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.email"
+                        type="email"
+                        :label="t('customer.basicData.email')"
+                        :rules="validate('client.email')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model="data.phone"
+                        :label="t('customer.basicData.phone')"
+                        :rules="validate('client.phone')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        v-model="data.mobile"
+                        :label="t('customer.basicData.mobile')"
+                        :rules="validate('client.mobile')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QSelect
+                        v-model="data.salesPersonFk"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('customer.basicData.salesPerson')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, filterOptions)"
+                        :rules="validate('client.salesPersonFk')"
+                        :input-debounce="0"
+                    >
+                        <template #prepend>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.salesPersonFk"
+                                    :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </QSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.contactChannelFk"
+                        :options="contactChannels"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        :label="t('customer.basicData.contactChannel')"
+                        map-options
+                        :rules="validate('client.contactChannelFk')"
+                        :input-debounce="0"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -8,6 +8,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {

src/pages/Ticket/Card/TicketDescriptorMenu.vue

@@ -87,7 +87,7 @@ function showSmsDialog(template, customData) {
         componentProps: {
             phone: phone,
             template: template,
-            locale: client.user.lang,
+            locale: client?.user?.lang ?? 'default_locale',
             data: data,
             promise: sendSms,
         },

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>

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'),
                 },
             ],
         },

src/router/modules/wagon.js

@@ -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,7 +36,7 @@ export default {
                         title: 'wagonCreate',
                         icon: 'create',
                     },
-                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                    component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
                 {
                     path: ':id/edit',
@@ -45,7 +45,7 @@ export default {
                         title: 'wagonEdit',
                         icon: 'edit',
                     },
-                    component: () => import('src/pages/Wagon/WagonCreate.vue')
+                    component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
             ],
         },
@@ -62,7 +62,7 @@ export default {
                         title: 'typesList',
                         icon: 'view_list',
                     },
-                    component: () => import('src/pages/Wagon/Type/WagonTypeList.vue')
+                    component: () => import('src/pages/Wagon/Type/WagonTypeList.vue'),
                 },
                 {
                     path: 'create',
@@ -71,7 +71,7 @@ export default {
                         title: 'typeCreate',
                         icon: 'create',
                     },
-                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue')
+                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue'),
                 },
                 {
                     path: ':id/edit',
@@ -80,9 +80,9 @@ export default {
                         title: 'typeEdit',
                         icon: 'edit',
                     },
-                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue')
+                    component: () => import('src/pages/Wagon/Type/WagonTypeCreate.vue'),
                 },
             ],
-        }
+        },
     ],
 };

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');
+    });
+});