From b06dc48e4a844a8244104a79b21271832dc73cd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9rik=20BENOIST?= <fbenoist68@gmail.com>
Date: Sun, 24 Dec 2023 07:44:19 +0100
Subject: [PATCH] refactor: storeDetail adjust Pos loop

---
 src/models/storeData.ts                       |  31 +-
 src/views/pages/store/view/StoreHeader.vue    |  25 +-
 .../pages/store/view/StoreTabGeneral.vue      | 368 ++++++++++--------
 3 files changed, 241 insertions(+), 183 deletions(-)

diff --git a/src/models/storeData.ts b/src/models/storeData.ts
index be23e6b..6ff8249 100644
--- a/src/models/storeData.ts
+++ b/src/models/storeData.ts
@@ -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[]
 }
diff --git a/src/views/pages/store/view/StoreHeader.vue b/src/views/pages/store/view/StoreHeader.vue
index 49fbf5c..488b111 100644
--- a/src/views/pages/store/view/StoreHeader.vue
+++ b/src/views/pages/store/view/StoreHeader.vue
@@ -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>
diff --git a/src/views/pages/store/view/StoreTabGeneral.vue b/src/views/pages/store/view/StoreTabGeneral.vue
index d169729..c4796a1 100644
--- a/src/views/pages/store/view/StoreTabGeneral.vue
+++ b/src/views/pages/store/view/StoreTabGeneral.vue
@@ -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>