feat: add page breadcrumb

refactor/issue-1/first-setup
Frédérik Benoist 2023-12-31 14:09:49 +01:00
parent bf864b9b3c
commit fb3a7f1b97
9 changed files with 177 additions and 143 deletions

View File

@ -14,7 +14,7 @@ export default [
icon: { icon: 'tabler-topology-bus' }, icon: { icon: 'tabler-topology-bus' },
children: [ children: [
{ {
title: 'BL not sent', title: 'BL not sent list',
to: { name: 'flux-bl-not-sent' }, to: { name: 'flux-bl-not-sent' },
icon: { icon: 'tabler-unlink' }, icon: { icon: 'tabler-unlink' },
}, },

View File

@ -14,7 +14,7 @@ export default [
icon: { icon: 'tabler-topology-bus' }, icon: { icon: 'tabler-topology-bus' },
children: [ children: [
{ {
title: 'BL not sent', title: 'BL not sent list',
to: { name: 'flux-bl-not-sent' }, to: { name: 'flux-bl-not-sent' },
icon: { icon: 'tabler-unlink' }, icon: { icon: 'tabler-unlink' },
}, },

View File

@ -147,155 +147,164 @@ const exportEXCEL = () => {
</script> </script>
<template> <template>
<VBreadcrumbs
class="px-0 py-2"
:items="[
{ title: t('Home'), to: { name: 'root' } },
{ title: t('BL not sent list') },
]"
/>
<div> <div>
<!-- 👉 Statistics Widgets --> <div>
<VCard class="mb-6"> <!-- 👉 Statistics Widgets -->
<VCardText> <VCard class="mb-6">
<VRow> <VCardText>
<template <VRow>
v-for="(data, id) in widgetData" <template
:key="id" v-for="(data, id) in widgetData"
> :key="id"
>
<VCol
cols="12"
sm="6"
md="3"
class="px-6"
>
<div class="d-flex justify-space-between">
<div class="d-flex flex-column gap-y-1">
<h4
class="text-h4 text-high-emphasis"
:class="{ 'text-error': id === 3 }"
>
{{ data.value }}
</h4>
<div class="text-body-1 text-capitalize">
{{ data.title }}
</div>
</div>
<VAvatar
color="rgba(var(--v-theme-on-background), var(--v-hover-opacity))"
rounded
class="text-high-emphasis"
size="38"
>
<VIcon
:icon="data.icon"
size="26"
/>
</VAvatar>
</div>
</VCol>
<VDivider
v-if="$vuetify.display.mdAndUp ? id !== widgetData.length - 1
: $vuetify.display.smAndUp ? id % 2 === 0
: false"
vertical
inset
/>
</template>
</VRow>
</VCardText>
</VCard>
<VCard
:title="$t('Filters')"
class="mb-6"
>
<VCardText>
<VRow>
<!-- 👉 Select distributor -->
<VCol <VCol
cols="12" cols="12"
sm="6" sm="4"
md="3"
class="px-6"
> >
<div class="d-flex justify-space-between"> <AppSelect
<div class="d-flex flex-column gap-y-1"> v-model="selectedDistributor"
<h4 :placeholder="$t('Distributor')"
class="text-h4 text-high-emphasis" :items="distributor"
:class="{ 'text-error': id === 3 }" clearable
> clear-icon="tabler-x"
{{ data.value }} />
</h4>
<div class="text-body-1 text-capitalize">
{{ data.title }}
</div>
</div>
<VAvatar
color="rgba(var(--v-theme-on-background), var(--v-hover-opacity))"
rounded
class="text-high-emphasis"
size="38"
>
<VIcon
:icon="data.icon"
size="26"
/>
</VAvatar>
</div>
</VCol> </VCol>
<VDivider
v-if="$vuetify.display.mdAndUp ? id !== widgetData.length - 1
: $vuetify.display.smAndUp ? id % 2 === 0
: false"
vertical
inset
/>
</template>
</VRow>
</VCardText>
</VCard>
<VCard <!-- 👉 Select store -->
:title="$t('Filters')" <VCol
class="mb-6" cols="12"
> sm="4"
<VCardText> >
<VRow> <AppSelect
<!-- 👉 Select distributor --> v-model="selectedStore"
<VCol :placeholder="$t('Store')"
cols="12" :items="store"
sm="4" clearable
> clear-icon="tabler-x"
<AppSelect />
v-model="selectedDistributor" </VCol>
:placeholder="$t('Distributor')"
:items="distributor"
clearable
clear-icon="tabler-x"
/>
</VCol>
<!-- 👉 Select store --> <!-- 👉 Select Reference R -->
<VCol <VCol
cols="12" cols="12"
sm="4" sm="4"
> >
<AppSelect <AppSelect
v-model="selectedStore" v-model="selectedRefr"
:placeholder="$t('Store')" :placeholder="$t('Item')"
:items="store" :items="filterRefr"
clearable clearable
clear-icon="tabler-x" clear-icon="tabler-x"
/> />
</VCol> </VCol>
</VRow>
</VCardText>
</VCard>
<!-- 👉 Select Reference R --> <!-- 👉 BL not sent -->
<VCol <VCard
cols="12" :title="$t('BL not sent list')"
sm="4" class="mb-6"
> >
<AppSelect <div class="d-flex flex-wrap gap-4 mx-5">
v-model="selectedRefr" <div class="d-flex align-center">
:placeholder="$t('Item')" <!-- 👉 Search -->
:items="filterRefr" <AppTextField
clearable v-model="searchQuery"
clear-icon="tabler-x" :placeholder="$t('Search')"
density="compact"
style="inline-size: 200px;"
class="me-3"
/> />
</VCol> </div>
</VRow>
</VCardText>
</VCard>
<!-- 👉 BL not sent --> <VSpacer />
<VCard
:title="$t('BL not sent list')" <div class="d-flex gap-4 flex-wrap align-center">
class="mb-6" <!-- 👉 Export button -->
> <VBtn
<div class="d-flex flex-wrap gap-4 mx-5"> variant="tonal"
<div class="d-flex align-center"> color="primary"
<!-- 👉 Search --> prepend-icon="tabler-upload"
<AppTextField @click="exportEXCEL"
v-model="searchQuery" >
:placeholder="$t('Search')" Export
density="compact" </VBtn>
style="inline-size: 200px;" </div>
class="me-3" </div>
<VDivider class="mt-4" />
<VCol cols="12">
<!-- 👉 Datatable -->
<VDataTable
class="dt-row-striped"
:headers="headers"
:items="filteredData"
:items-per-page="options.itemsPerPage"
:page="options.page"
:options="options"
/> />
</div> </VCol>
</Vcard>
<VSpacer /> </div>
<div class="d-flex gap-4 flex-wrap align-center">
<!-- 👉 Export button -->
<VBtn
variant="tonal"
color="primary"
prepend-icon="tabler-upload"
@click="exportEXCEL"
>
Export
</VBtn>
</div>
</div>
<VDivider class="mt-4" />
<VCol cols="12">
<!-- 👉 Datatable -->
<VDataTable
class="dt-row-striped"
:headers="headers"
:items="filteredData"
:items-per-page="options.itemsPerPage"
:page="options.page"
:options="options"
/>
</VCol>
</Vcard>
</div> </div>
</template> </template>

View File

@ -25,6 +25,14 @@ const { data: storeData } = await useApi<any>(`/stores/${route.query.storeId}/de
</script> </script>
<template> <template>
<VBreadcrumbs
class="px-0 py-2"
:items="[
{ title: t('Home'), to: { name: 'root' } },
{ title: t('List of stores'), to: { name: 'store-list' } },
{ title: t('Store visualization') },
]"
/>
<div> <div>
<StoreHeader <StoreHeader
class="mb-5" class="mb-5"

View File

@ -124,6 +124,13 @@ const reloadStores = async () => {
</script> </script>
<template> <template>
<VBreadcrumbs
class="px-0 py-2"
:items="[
{ title: t('Home'), to: { name: 'root' } },
{ title: t('List of stores') },
]"
/>
<div> <div>
<!-- 👉 filters --> <!-- 👉 filters -->
<VCard <VCard

View File

@ -238,6 +238,13 @@ const exportEXCEL = () => {
</script> </script>
<template> <template>
<VBreadcrumbs
class="px-0 py-2"
:items="[
{ title: t('Home'), to: { name: 'root' } },
{ title: t('Logs list') },
]"
/>
<div> <div>
<!-- 👉 Statistics Widgets --> <!-- 👉 Statistics Widgets -->
<VCard class="mb-6"> <VCard class="mb-6">

View File

@ -6,6 +6,7 @@
"OBI": "OBI", "OBI": "OBI",
"Dotsoft": "Dotsoft", "Dotsoft": "Dotsoft",
"List of stores": "قائمة المتاجر", "List of stores": "قائمة المتاجر",
"Store visualization": "عرض المتاجر",
"BL not sent list": "قائمة البيانات الخارجية غير المرسلة", "BL not sent list": "قائمة البيانات الخارجية غير المرسلة",
"BL not sent": "بيانات البيانات الخارجية غير المرسلة", "BL not sent": "بيانات البيانات الخارجية غير المرسلة",
"ST ID": "ST ID", "ST ID": "ST ID",

View File

@ -6,6 +6,7 @@
"OBI": "OBI", "OBI": "OBI",
"Dotsoft": "Dotsoft", "Dotsoft": "Dotsoft",
"List of stores": "List of stores", "List of stores": "List of stores",
"Store visualization": "Store visualization",
"BL not sent list": "BL not sent list", "BL not sent list": "BL not sent list",
"BL not sent": "BL not sent", "BL not sent": "BL not sent",
"ST ID": "ST ID", "ST ID": "ST ID",

View File

@ -6,8 +6,9 @@
"OBI": "OBI", "OBI": "OBI",
"Dotsoft": "Dotsoft", "Dotsoft": "Dotsoft",
"List of stores": "Liste des boutiques", "List of stores": "Liste des boutiques",
"BL not sent list": "Liste des BL non envoyés", "Store visualization": "Visualisation boutique",
"BL not sent": "BL non envoyé", "BL not sent list": "Liste BL non envoyés",
"BL not sent": "BL non envoyés",
"ST ID": "ID ST", "ST ID": "ID ST",
"Exp ID": "ID Exp", "Exp ID": "ID Exp",
"BL ID": "ID BL", "BL ID": "ID BL",