refactor: storeDetail adjust Pos loop

refactor/issue-1/first-setup
Frédérik Benoist 2023-12-24 07:44:19 +01:00
parent 59cb81177a
commit b06dc48e4a
3 changed files with 241 additions and 183 deletions

View File

@ -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
} }

View File

@ -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">
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
<span class="d-flex">
<span class="text-h5">
{{ props.storeData.store.id_structure }} - {{ props.storeData.store.nom }} {{ props.storeData.store.id_structure }} - {{ props.storeData.store.nom }}
</h5> </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>

View File

@ -5,11 +5,48 @@ 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
v-for="(pos, index) in storeData.pos"
:key="index"
>
<VChip
label
size="small"
class="text-capitalize me-1"
>
Pos {{ pos.workstationId }}
</VChip>
<VChip
label
size="small"
class="text-capitalize"
>
{{ pos.ip }}
</VChip>
/
<VChip
label
size="small"
class="text-capitalize me-3"
color="primary"
>
{{ pos.primaryRegister ? 'Primary' : 'Slave' }}
</VChip>
<VChip
v-if="pos.fatalError"
label
size="small"
class="text-capitalize"
color="error"
>
Fatal
</VChip>
<VRow class="py-3 mb-1">
<!-- 👉 Business date & opening hours --> <!-- 👉 Business date & opening hours -->
<VCol <VCol
cols="12" cols="12"
@ -35,7 +72,7 @@ const props = defineProps<Props>()
<div> <div>
<span class="text-base">Business date</span> <span class="text-base">Business date</span>
<h4 class="text-h4 font-weight-medium text-primary"> <h4 class="text-h4 font-weight-medium text-primary">
{{ storeData.openingTransaction.maxDateT }} {{ pos.businessDateS }}
</h4> </h4>
</div> </div>
</div> </div>
@ -55,8 +92,8 @@ const props = defineProps<Props>()
</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>
@ -77,7 +114,7 @@ const props = defineProps<Props>()
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> </div>
<span class="mb-1"> <span class="mb-1">
<div> <div>
@ -88,7 +125,7 @@ const props = defineProps<Props>()
> >
Min Min
</VChip> </VChip>
{{ props.storeData.replication.minPendingReplicationDate }} {{ pos.replication.minPendingReplicationDate }}
</div> </div>
</span> </span>
<span class="mb-1"> <span class="mb-1">
@ -100,7 +137,7 @@ const props = defineProps<Props>()
> >
Max Max
</VChip> </VChip>
{{ props.storeData.replication.maxPendingReplicationDate }} {{ pos.replication.maxPendingReplicationDate }}
</div> </div>
</span> </span>
</div> </div>
@ -119,7 +156,7 @@ const props = defineProps<Props>()
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> </div>
<span class="mb-1"> <span class="mb-1">
<div> <div>
@ -130,7 +167,7 @@ const props = defineProps<Props>()
> >
Min Min
</VChip> </VChip>
{{ props.storeData.saleTransaction.minDate }} {{ pos.saleTransaction.minDate }}
</div> </div>
</span> </span>
<span class="mb-1"> <span class="mb-1">
@ -142,7 +179,7 @@ const props = defineProps<Props>()
> >
Max Max
</VChip> </VChip>
{{ props.storeData.saleTransaction.maxDate }} {{ pos.saleTransaction.maxDate }}
</div> </div>
</span> </span>
</div> </div>
@ -160,7 +197,7 @@ const props = defineProps<Props>()
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> </div>
<span class="mb-1"> <span class="mb-1">
<div> <div>
@ -171,7 +208,7 @@ const props = defineProps<Props>()
> >
Min Min
</VChip> </VChip>
{{ props.storeData.transaction.minBackOfficeTransactionDate }} {{ pos.boTransaction.minBackOfficeTransactionDate }}
</div> </div>
</span> </span>
<span class="mb-1"> <span class="mb-1">
@ -183,11 +220,12 @@ const props = defineProps<Props>()
> >
Max Max
</VChip> </VChip>
{{ props.storeData.transaction.maxBackOfficeTransactionDate }} {{ pos.boTransaction.maxBackOfficeTransactionDate }}
</div> </div>
</span> </span>
</div> </div>
</div> </div>
</VCol> </VCol>
</VRow> </VRow>
</div>
</template> </template>