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