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' },
children: [
{
title: 'BL not sent',
title: 'BL not sent list',
to: { name: 'flux-bl-not-sent' },
icon: { icon: 'tabler-unlink' },
},

View File

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

View File

@ -147,155 +147,164 @@ const exportEXCEL = () => {
</script>
<template>
<VBreadcrumbs
class="px-0 py-2"
:items="[
{ title: t('Home'), to: { name: 'root' } },
{ title: t('BL not sent list') },
]"
/>
<div>
<!-- 👉 Statistics Widgets -->
<VCard class="mb-6">
<VCardText>
<VRow>
<template
v-for="(data, id) in widgetData"
:key="id"
>
<div>
<!-- 👉 Statistics Widgets -->
<VCard class="mb-6">
<VCardText>
<VRow>
<template
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
cols="12"
sm="6"
md="3"
class="px-6"
sm="4"
>
<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>
<AppSelect
v-model="selectedDistributor"
:placeholder="$t('Distributor')"
:items="distributor"
clearable
clear-icon="tabler-x"
/>
</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
cols="12"
sm="4"
>
<AppSelect
v-model="selectedDistributor"
:placeholder="$t('Distributor')"
:items="distributor"
clearable
clear-icon="tabler-x"
/>
</VCol>
<!-- 👉 Select store -->
<VCol
cols="12"
sm="4"
>
<AppSelect
v-model="selectedStore"
:placeholder="$t('Store')"
:items="store"
clearable
clear-icon="tabler-x"
/>
</VCol>
<!-- 👉 Select store -->
<VCol
cols="12"
sm="4"
>
<AppSelect
v-model="selectedStore"
:placeholder="$t('Store')"
:items="store"
clearable
clear-icon="tabler-x"
/>
</VCol>
<!-- 👉 Select Reference R -->
<VCol
cols="12"
sm="4"
>
<AppSelect
v-model="selectedRefr"
:placeholder="$t('Item')"
:items="filterRefr"
clearable
clear-icon="tabler-x"
/>
</VCol>
</VRow>
</VCardText>
</VCard>
<!-- 👉 Select Reference R -->
<VCol
cols="12"
sm="4"
>
<AppSelect
v-model="selectedRefr"
:placeholder="$t('Item')"
:items="filterRefr"
clearable
clear-icon="tabler-x"
<!-- 👉 BL not sent -->
<VCard
:title="$t('BL not sent list')"
class="mb-6"
>
<div class="d-flex flex-wrap gap-4 mx-5">
<div class="d-flex align-center">
<!-- 👉 Search -->
<AppTextField
v-model="searchQuery"
:placeholder="$t('Search')"
density="compact"
style="inline-size: 200px;"
class="me-3"
/>
</VCol>
</VRow>
</VCardText>
</VCard>
</div>
<!-- 👉 BL not sent -->
<VCard
:title="$t('BL not sent list')"
class="mb-6"
>
<div class="d-flex flex-wrap gap-4 mx-5">
<div class="d-flex align-center">
<!-- 👉 Search -->
<AppTextField
v-model="searchQuery"
:placeholder="$t('Search')"
density="compact"
style="inline-size: 200px;"
class="me-3"
<VSpacer />
<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"
/>
</div>
<VSpacer />
<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>
</VCol>
</Vcard>
</div>
</div>
</template>

View File

@ -25,6 +25,14 @@ const { data: storeData } = await useApi<any>(`/stores/${route.query.storeId}/de
</script>
<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>
<StoreHeader
class="mb-5"

View File

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

View File

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

View File

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

View File

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

View File

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