refactor: storeDetail adjust Pos loop
parent
59cb81177a
commit
b06dc48e4a
|
|
@ -5,9 +5,11 @@ interface Store {
|
||||||
telephone: string
|
telephone: string
|
||||||
photoLink: string
|
photoLink: string
|
||||||
enseigne: string
|
enseigne: string
|
||||||
nb_caisses: number
|
nbcaisses: number
|
||||||
|
pays: string
|
||||||
adresse: string
|
adresse: string
|
||||||
caisses: Caisse[]
|
caisses: Caisse[]
|
||||||
|
date_migration: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Caisse {
|
interface Caisse {
|
||||||
|
|
@ -15,6 +17,21 @@ interface Caisse {
|
||||||
ip: string
|
ip: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface storePos {
|
||||||
|
workstationId: number
|
||||||
|
ip: string
|
||||||
|
version: string
|
||||||
|
businessDate: Date
|
||||||
|
businessDateS: string
|
||||||
|
openingDate: string
|
||||||
|
closingDate: string
|
||||||
|
boTransaction: Transaction
|
||||||
|
replication: Replication
|
||||||
|
saleTransaction: xStoreTransaction
|
||||||
|
primaryRegister: boolean
|
||||||
|
fatalError: boolean
|
||||||
|
}
|
||||||
|
|
||||||
interface Replication {
|
interface Replication {
|
||||||
pendingReplications: number
|
pendingReplications: number
|
||||||
minPendingReplicationDate: string
|
minPendingReplicationDate: string
|
||||||
|
|
@ -25,10 +42,9 @@ interface Transaction {
|
||||||
backOfficeTransactions: number
|
backOfficeTransactions: number
|
||||||
minBackOfficeTransactionDate: string
|
minBackOfficeTransactionDate: string
|
||||||
maxBackOfficeTransactionDate: string
|
maxBackOfficeTransactionDate: string
|
||||||
backOfficeBusinessDate: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface XstoreTransaction {
|
interface xStoreTransaction {
|
||||||
count: number
|
count: number
|
||||||
minDate: string
|
minDate: string
|
||||||
minDateT: string
|
minDateT: string
|
||||||
|
|
@ -40,12 +56,5 @@ interface XstoreTransaction {
|
||||||
|
|
||||||
export interface StoreData {
|
export interface StoreData {
|
||||||
store: Store
|
store: Store
|
||||||
replication: Replication
|
pos: storePos[]
|
||||||
transaction: Transaction
|
|
||||||
openingTransaction: XstoreTransaction
|
|
||||||
closingTransaction: XstoreTransaction
|
|
||||||
saleTransaction: XstoreTransaction
|
|
||||||
xstoreVersion: string
|
|
||||||
xstoreVersionDate: string
|
|
||||||
xstoreVersionCustomer: string
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,9 +28,20 @@ const props = defineProps<Props>()
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
|
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
|
||||||
<h5 class="text-h5 text-center text-sm-start font-weight-medium mb-3">
|
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4 mb-3">
|
||||||
{{ props.storeData.store.id_structure }} - {{ props.storeData.store.nom }}
|
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
|
||||||
</h5>
|
<span class="d-flex">
|
||||||
|
<span class="text-h5">
|
||||||
|
{{ props.storeData.store.id_structure }} - {{ props.storeData.store.nom }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-center gap-4">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<span class="text-h6 font-weight-medium">{{ props.storeData.store.date_migration }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
|
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
|
||||||
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
|
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
|
||||||
|
|
@ -63,7 +74,7 @@ const props = defineProps<Props>()
|
||||||
class="me-1"
|
class="me-1"
|
||||||
/>
|
/>
|
||||||
<span class="text-body-1">
|
<span class="text-body-1">
|
||||||
{{ props.storeData.store.adresse }}
|
{{ props.storeData.store.adresse }} - ({{ props.storeData.store.pays }})
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -74,13 +85,13 @@ const props = defineProps<Props>()
|
||||||
variant="tonal"
|
variant="tonal"
|
||||||
size="42"
|
size="42"
|
||||||
>
|
>
|
||||||
<VIcon icon="tabler-git-merge" />
|
<VIcon icon="tabler-http-post" />
|
||||||
</VAvatar>
|
</VAvatar>
|
||||||
|
|
||||||
<div class="d-flex flex-column">
|
<div class="d-flex flex-column">
|
||||||
<span class="text-h5 font-weight-medium">{{ props.storeData.xstoreVersion }} ({{ props.storeData.xstoreVersionCustomer }})</span>
|
<span class="text-h5 font-weight-medium">{{ props.storeData.store.nbcaisses }}</span>
|
||||||
<span class="text-sm">
|
<span class="text-sm">
|
||||||
{{ props.storeData.xstoreVersionDate }}
|
Caisses
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,189 +5,227 @@ interface Props {
|
||||||
storeData: StoreData
|
storeData: StoreData
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VRow class="py-6">
|
<div
|
||||||
<!-- 👉 Business date & opening hours -->
|
v-for="(pos, index) in storeData.pos"
|
||||||
<VCol
|
:key="index"
|
||||||
cols="12"
|
>
|
||||||
md="3"
|
<VChip
|
||||||
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
label
|
||||||
|
size="small"
|
||||||
|
class="text-capitalize me-1"
|
||||||
>
|
>
|
||||||
<div class="ape-3">
|
Pos {{ pos.workstationId }}
|
||||||
<div class="d-flex justify-space-between flex-wrap gap-4 flex-column flex-xs-row">
|
</VChip>
|
||||||
<div>
|
<VChip
|
||||||
<div class="d-flex mb-4">
|
label
|
||||||
<VAvatar
|
size="small"
|
||||||
variant="tonal"
|
class="text-capitalize"
|
||||||
color="primary"
|
>
|
||||||
rounded
|
{{ pos.ip }}
|
||||||
size="54"
|
</VChip>
|
||||||
class="text-primary me-4"
|
/
|
||||||
>
|
<VChip
|
||||||
<VIcon
|
label
|
||||||
icon="tabler-calendar-event"
|
size="small"
|
||||||
size="38"
|
class="text-capitalize me-3"
|
||||||
/>
|
color="primary"
|
||||||
</VAvatar>
|
>
|
||||||
<div>
|
{{ pos.primaryRegister ? 'Primary' : 'Slave' }}
|
||||||
<span class="text-base">Business date</span>
|
</VChip>
|
||||||
<h4 class="text-h4 font-weight-medium text-primary">
|
<VChip
|
||||||
{{ storeData.openingTransaction.maxDateT }}
|
v-if="pos.fatalError"
|
||||||
</h4>
|
label
|
||||||
|
size="small"
|
||||||
|
class="text-capitalize"
|
||||||
|
color="error"
|
||||||
|
>
|
||||||
|
Fatal
|
||||||
|
</VChip>
|
||||||
|
<VRow class="py-3 mb-1">
|
||||||
|
<!-- 👉 Business date & opening hours -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
||||||
|
>
|
||||||
|
<div class="ape-3">
|
||||||
|
<div class="d-flex justify-space-between flex-wrap gap-4 flex-column flex-xs-row">
|
||||||
|
<div>
|
||||||
|
<div class="d-flex mb-4">
|
||||||
|
<VAvatar
|
||||||
|
variant="tonal"
|
||||||
|
color="primary"
|
||||||
|
rounded
|
||||||
|
size="54"
|
||||||
|
class="text-primary me-4"
|
||||||
|
>
|
||||||
|
<VIcon
|
||||||
|
icon="tabler-calendar-event"
|
||||||
|
size="38"
|
||||||
|
/>
|
||||||
|
</VAvatar>
|
||||||
|
<div>
|
||||||
|
<span class="text-base">Business date</span>
|
||||||
|
<h4 class="text-h4 font-weight-medium text-primary">
|
||||||
|
{{ pos.businessDateS }}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<VAvatar
|
<VAvatar
|
||||||
variant="tonal"
|
variant="tonal"
|
||||||
color="info"
|
color="info"
|
||||||
rounded
|
rounded
|
||||||
size="54"
|
size="54"
|
||||||
class="text-primary me-4"
|
class="text-primary me-4"
|
||||||
>
|
>
|
||||||
<VIcon
|
<VIcon
|
||||||
icon="tabler-clock-hour-10"
|
icon="tabler-clock-hour-10"
|
||||||
size="38"
|
size="38"
|
||||||
/>
|
/>
|
||||||
</VAvatar>
|
</VAvatar>
|
||||||
<div>
|
<div>
|
||||||
<span class="text-base">Opening hours</span>
|
<span class="text-base">Opening hours</span>
|
||||||
<h4 class="text-h4 font-weight-medium text-info">
|
<h4 class="text-h6 font-weight-medium text-info">
|
||||||
{{ storeData.openingTransaction.maxDateH }}{{ storeData.closingTransaction.maxDateH ? ` / ${storeData.closingTransaction.maxDateH}` : '' }}
|
{{ pos.openingDate }}{{ pos.closingDate ? ` ${pos.closingDate}` : '' }}
|
||||||
</h4>
|
</h4>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</VCol>
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<!-- 👉 Pending Replication -->
|
<!-- 👉 Pending Replication -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="3"
|
md="3"
|
||||||
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
||||||
>
|
>
|
||||||
<div class="d-flex justify-space-between align-center">
|
<div class="d-flex justify-space-between align-center">
|
||||||
<div class="d-flex flex-column ps-3">
|
<div class="d-flex flex-column ps-3">
|
||||||
<h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
|
<h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
|
||||||
Pending replication
|
Pending replication
|
||||||
</h5>
|
</h5>
|
||||||
<div class="text-h3 mb-2">
|
<div class="text-h3 mb-2">
|
||||||
{{ props.storeData.replication.pendingReplications }}
|
{{ pos.replication.pendingReplications }}
|
||||||
|
</div>
|
||||||
|
<span class="mb-1">
|
||||||
|
<div>
|
||||||
|
<VChip
|
||||||
|
variant="tonal"
|
||||||
|
color="secondary"
|
||||||
|
style="inline-size:45px"
|
||||||
|
>
|
||||||
|
Min
|
||||||
|
</VChip>
|
||||||
|
{{ pos.replication.minPendingReplicationDate }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="mb-1">
|
||||||
|
<div>
|
||||||
|
<VChip
|
||||||
|
variant="tonal"
|
||||||
|
color="secondary"
|
||||||
|
style="inline-size:45px"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</VChip>
|
||||||
|
{{ pos.replication.maxPendingReplicationDate }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="mb-1">
|
|
||||||
<div>
|
|
||||||
<VChip
|
|
||||||
variant="tonal"
|
|
||||||
color="secondary"
|
|
||||||
style="inline-size:45px"
|
|
||||||
>
|
|
||||||
Min
|
|
||||||
</VChip>
|
|
||||||
{{ props.storeData.replication.minPendingReplicationDate }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="mb-1">
|
|
||||||
<div>
|
|
||||||
<VChip
|
|
||||||
variant="tonal"
|
|
||||||
color="secondary"
|
|
||||||
style="inline-size:45px"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</VChip>
|
|
||||||
{{ props.storeData.replication.maxPendingReplicationDate }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</VCol>
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<!-- 👉 XSTORE Ticket -->
|
<!-- 👉 XSTORE Ticket -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="3"
|
md="3"
|
||||||
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
||||||
>
|
>
|
||||||
<div class="d-flex justify-space-between align-center">
|
<div class="d-flex justify-space-between align-center">
|
||||||
<div class="d-flex flex-column ps-3">
|
<div class="d-flex flex-column ps-3">
|
||||||
<h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
|
<h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
|
||||||
XSTORE Tickets
|
XSTORE Tickets
|
||||||
</h5>
|
</h5>
|
||||||
<div class="text-h3 mb-2">
|
<div class="text-h3 mb-2">
|
||||||
{{ props.storeData.saleTransaction.count }}
|
{{ pos.saleTransaction.count }}
|
||||||
|
</div>
|
||||||
|
<span class="mb-1">
|
||||||
|
<div>
|
||||||
|
<VChip
|
||||||
|
variant="tonal"
|
||||||
|
color="secondary"
|
||||||
|
style="inline-size:45px"
|
||||||
|
>
|
||||||
|
Min
|
||||||
|
</VChip>
|
||||||
|
{{ pos.saleTransaction.minDate }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="mb-1">
|
||||||
|
<div>
|
||||||
|
<VChip
|
||||||
|
variant="tonal"
|
||||||
|
color="secondary"
|
||||||
|
style="inline-size:45px"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</VChip>
|
||||||
|
{{ pos.saleTransaction.maxDate }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="mb-1">
|
|
||||||
<div>
|
|
||||||
<VChip
|
|
||||||
variant="tonal"
|
|
||||||
color="secondary"
|
|
||||||
style="inline-size:45px"
|
|
||||||
>
|
|
||||||
Min
|
|
||||||
</VChip>
|
|
||||||
{{ props.storeData.saleTransaction.minDate }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="mb-1">
|
|
||||||
<div>
|
|
||||||
<VChip
|
|
||||||
variant="tonal"
|
|
||||||
color="secondary"
|
|
||||||
style="inline-size:45px"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</VChip>
|
|
||||||
{{ props.storeData.saleTransaction.maxDate }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</VCol>
|
||||||
</VCol>
|
|
||||||
|
|
||||||
<!-- 👉 DOTSOFT Tickets -->
|
<!-- 👉 DOTSOFT Tickets -->
|
||||||
<VCol
|
<VCol
|
||||||
cols="12"
|
cols="12"
|
||||||
md="3"
|
md="3"
|
||||||
>
|
>
|
||||||
<div class="d-flex justify-space-between align-center">
|
<div class="d-flex justify-space-between align-center">
|
||||||
<div class="d-flex flex-column ps-3">
|
<div class="d-flex flex-column ps-3">
|
||||||
<h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
|
<h5 class="text-h5 text-high-emphasis mb-0 text-no-wrap">
|
||||||
DOTSOFT Tickets
|
DOTSOFT Tickets
|
||||||
</h5>
|
</h5>
|
||||||
<div class="text-h3 mb-2">
|
<div class="text-h3 mb-2">
|
||||||
{{ props.storeData.transaction.backOfficeTransactions }}
|
{{ pos.boTransaction.backOfficeTransactions }}
|
||||||
|
</div>
|
||||||
|
<span class="mb-1">
|
||||||
|
<div>
|
||||||
|
<VChip
|
||||||
|
variant="tonal"
|
||||||
|
color="secondary"
|
||||||
|
style="inline-size:45px"
|
||||||
|
>
|
||||||
|
Min
|
||||||
|
</VChip>
|
||||||
|
{{ pos.boTransaction.minBackOfficeTransactionDate }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span class="mb-1">
|
||||||
|
<div>
|
||||||
|
<VChip
|
||||||
|
variant="tonal"
|
||||||
|
color="secondary"
|
||||||
|
style="inline-size:45px"
|
||||||
|
>
|
||||||
|
Max
|
||||||
|
</VChip>
|
||||||
|
{{ pos.boTransaction.maxBackOfficeTransactionDate }}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="mb-1">
|
|
||||||
<div>
|
|
||||||
<VChip
|
|
||||||
variant="tonal"
|
|
||||||
color="secondary"
|
|
||||||
style="inline-size:45px"
|
|
||||||
>
|
|
||||||
Min
|
|
||||||
</VChip>
|
|
||||||
{{ props.storeData.transaction.minBackOfficeTransactionDate }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="mb-1">
|
|
||||||
<div>
|
|
||||||
<VChip
|
|
||||||
variant="tonal"
|
|
||||||
color="secondary"
|
|
||||||
style="inline-size:45px"
|
|
||||||
>
|
|
||||||
Max
|
|
||||||
</VChip>
|
|
||||||
{{ props.storeData.transaction.maxBackOfficeTransactionDate }}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</VCol>
|
||||||
</VCol>
|
</VRow>
|
||||||
</VRow>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue