From 51929825556264cdc49b39bb68704e55253d77be Mon Sep 17 00:00:00 2001
From: Jonathan Chevalier <jonathan.chevalier@live.com>
Date: Thu, 29 Sep 2022 16:03:50 +0200
Subject: [PATCH] WIP MMCM

---
 src/App.vue                           |  29 +++++++-
 src/components/Wizard.vue             | 100 ++++++++++++++++----------
 src/views/address-check.vue           |   2 +-
 src/views/delivery-option-step-1.vue  |  43 ++++++-----
 src/views/delivery-option-step-2.vue  |  18 ++---
 src/views/delivery-option-step-3.vue  |  25 +++----
 src/views/delivery-option-summary.vue |  20 +++---
 7 files changed, 140 insertions(+), 97 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 118f0d4..2ac427b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,14 +6,37 @@ import Wizard from "./components/Wizard.vue";
 </script>
 
 <template>
-  <div class="PARA">
+  <div class="app_vue_mmcm">
     <main id="product">
-      <wizard></wizard>
+      <wizard v-if="$route.path !== '/'"></wizard>
       <router-view></router-view>
     </main>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss">
 
+@import 'https://fonts.googleapis.com/css?family=Montserrat';
+
+.app_vue_mmcm{
+  font-family: 'Montserrat',sans-serif;
+}
+
+.step_title{
+  text-align: left;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #000;
+  font-family: 'Montserrat',sans-serif;
+  margin-bottom: 30px
+}
+
+.step_title:after {
+  width: 85px;
+  height: 3px;
+  background-color: #f91ea9;
+  content: "";
+  display: block;
+  margin: 10px 0 0;
+}
 </style>
diff --git a/src/components/Wizard.vue b/src/components/Wizard.vue
index eada3e4..8cad289 100644
--- a/src/components/Wizard.vue
+++ b/src/components/Wizard.vue
@@ -1,53 +1,75 @@
 <template>
   <ol class="step-indicator">
-    <li class="active">
-      <div class="step"><i class="fa-regular fa-location-dot fa-fw"></i></div>
-      <div class="caption d-none d-sm-block">Etape <span>1</span>: <span>Mon adresse</span></div>
-    </li>
-    <li class="">
-      <div class="step"><i class="fa-solid fa-file-medical fa-fw"></i></div>
-      <div class="caption d-none d-sm-block">Etape <span>2</span>: <span>Mon ordonnance</span></div>
-    </li>
-    <li class="">
-      <div class="step"><i class="fa-solid fa-truck fa-fw"></i></div>
-      <div class="caption d-none d-sm-block">Etape <span>3</span>: <span>Ma livraison</span></div>
-    </li>
-    <li class="">
-      <div class="step"><i class="fa-solid fa-calendar-days fa-fw"></i></div>
-      <div class="caption d-none d-sm-block">Etape <span>4</span>: <span>Date</span></div>
-    </li>
-    <li class="">
-      <div class="step"><i class="fa-solid fa-circle-check fa-fw"></i></div>
-      <div class="caption d-none d-sm-block">Step <span>5</span>: <span>Confirmation</span></div>
+    <li v-for="step in stepList" :class="(step.stepNumber<currentStep) ?  'complete' : ''">
+      <router-link :to="step.path">
+      <div class="step"><i :class="step.class"></i></div>
+      <div class="caption d-none d-sm-block">Etape <span>{{step.stepNumber}}</span>: <span>{{ step.name }}</span></div>
+      </router-link>
     </li>
   </ol>
 </template>
 
 <script>
+import {useMMCMStore} from "../stores/mmcm";
+import {ref, computed} from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
 export default {
-  name: "Wizard"
+  setup() {
+    const stepList = [
+      {
+        class: 'fa-regular fa-location-dot fa-fw',
+        name: 'Mon adresse',
+        path: '/address-check',
+        stepNumber : 1
+      },
+      {
+        class: 'fa-solid fa-file-medical fa-fw',
+        name: 'Mon ordonnance',
+        path: '/delivery-option-step-1',
+        stepNumber : 2
+      },
+      {
+        class: 'fa-solid fa-truck fa-fw',
+        name: 'Ma livraison',
+        path: '/delivery-option-step-2',
+        stepNumber : 3
+      },
+      {
+        class: 'fa-solid fa-calendar-days fa-fw',
+        name: 'Date',
+        path: '/delivery-option-step-3',
+        stepNumber : 4
+      },
+      {
+        class: 'fa-solid fa-cart-shopping fa-fw',
+        name: 'Ajout au panier',
+        path: '/delivery-option-summary',
+        stepNumber : 5
+      },
+
+    ]
+
+    const router = useRouter()
+    const route = useRoute()
+
+    const currentStep = computed(() => stepList.filter(step=>step.path === route.path)[0].stepNumber)
+
+    return {
+      stepList,
+      currentStep
+    }
+  },
+  name: "Wizard",
 }
 </script>
 
 <style lang="scss">
 $wizard-color-neutral: #ccc !default;
-$wizard-color-active: #4183D7 !default;
+$wizard-color-active: #f91ea9 !default;
 $wizard-color-complete: #87D37C !default;
-$wizard-step-width-height: 64px !default;
-$wizard-step-font-size: 24px !default;
-
-@import 'https://fonts.googleapis.com/css?family=Roboto';
-
-body {
-  padding: 0;
-  margin: 0;
-  background-color: #f6f6f6;
-  font-family: 'Roboto', sans-serif;
-}
-
-.container {
-  background-color: #fff;
-}
+$wizard-step-width-height: 48px !default;
+$wizard-step-font-size: 18px !default;
 
 .step-wrapper {
   padding: 20px 0;
@@ -97,7 +119,11 @@ body {
       }
     }
 
-    &.active {
+    a{
+      text-decoration:none
+    }
+
+    .router-link-active {
       .step {
         border-color: $wizard-color-active;
         color: $wizard-color-active;
diff --git a/src/views/address-check.vue b/src/views/address-check.vue
index bcb063a..bc57785 100644
--- a/src/views/address-check.vue
+++ b/src/views/address-check.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
+  <div class="step_title">Indiquez votre adresse de livraison (domicile, travail...) :</div>
 
   <div class="input-group mb-3">
     <div class="input-group-text">
diff --git a/src/views/delivery-option-step-1.vue b/src/views/delivery-option-step-1.vue
index eb996ec..3f87be4 100644
--- a/src/views/delivery-option-step-1.vue
+++ b/src/views/delivery-option-step-1.vue
@@ -1,11 +1,10 @@
 <template>
-
-  <div class="card">
-    <div class="card-header"><h2>Avec ou sans ordonnance ?</h2></div>
-    <div class="card-body">
-      <div class="row text-start">
-        <div class="col-lg-6">
-          <h4>Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</h4>
+  <div class="step_title"> Avec ou sans ordonnance ?</div>
+  <div class="row">
+    <div class="col-lg-6">
+      <div class="card">
+        <div class="card-header fw-bold">Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</div>
+        <div class="card-body text-start">
           <ol>
             <li>Le livreur vient chercher l’original de mon ordonnance, carte vitale et carte mutuelle (si j’en ai
               une) dans une enveloppe fermée.
@@ -16,26 +15,26 @@
             <li>Mon pharmacien remet mes médicaments et mes documents au livreur.</li>
             <li>Le livreur me livre à mon adresse mes médicaments et mes documents originaux.</li>
           </ol>
-
+          <div class="text-center">
+            <button class="btn btn-primary" @click="goNextStep(true)"><i class="fa-regular fa-circle-check fa-fw"></i>
+              Choisir
+            </button>
+          </div>
         </div>
-        <div class="col-lg-6">
-          <h4>Sans ordonnance (mon pharmacien a déjà mon ordonnance) :</h4>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <div class="card">
+        <div class="card-header fw-bold">Sans ordonnance (mon pharmacien a déjà mon ordonnance)</div>
+        <div class="card-body text-start">
           <ol>
             <li>Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.</li>
             <li>Le livreur me livre à l’adresse renseignée.</li>
           </ol>
-        </div>
-      </div>
-
-      <div class="row text-center">
-        <div class="col-lg-6">
-          <button class="btn btn-primary" @click="goNextStep(true)"><i class="fa-regular fa-circle-check fa-fw"></i>
-            Choisir
-          </button>
-        </div>
-        <div class="col-lg-6">
-          <button class="btn btn-primary" @click="goNextStep(false)"><i class="fa-regular fa-circle-check fa-fw"></i>Choisir
-          </button>
+          <div class="text-center">
+            <button class="btn btn-primary" @click="goNextStep(false)"><i class="fa-regular fa-circle-check fa-fw"></i> Choisir
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/views/delivery-option-step-2.vue b/src/views/delivery-option-step-2.vue
index b0dd2db..5987019 100644
--- a/src/views/delivery-option-step-2.vue
+++ b/src/views/delivery-option-step-2.vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="card">
-    <div class="card-header"><h2>Mode de livraison</h2></div>
-    <div class="card-body row">
-      <div v-for="(product, i) in store.productList" class="col-lg-6">
-        <h4>{{ product.name }}</h4>
-        <p>{{ text[i].short }}</p>
-        <p>{{ text[i].long }}</p>
-        <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(product.price)}} TTC</button>
+  <div class="step_title">Mode de livraison</div>
+  <div class="row">
+    <div class="col-lg-6" v-for="(product, i) in store.productList">
+      <div class="card">
+        <div class="card-header fw-bold">{{ product.name }}</div>
+        <div class="card-body">
+          <p>{{ text[i].short }}</p>
+          <p>{{ text[i].long }}</p>
+          <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(product.price) }} TTC</button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/views/delivery-option-step-3.vue b/src/views/delivery-option-step-3.vue
index f73b431..be8adaf 100644
--- a/src/views/delivery-option-step-3.vue
+++ b/src/views/delivery-option-step-3.vue
@@ -1,21 +1,16 @@
 <template>
-  <div class="card">
-    <div class="card-header"><h4>Date de livraison des médicaments :</h4></div>
-    <div class="card-body">
-
-      <div class="input-group has-validation">
-        <Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false"  model-type="timestamp" select-text="Choisir" cancel-text="Annuler"
-                    monthNameFormat="long" format="dd MMMM yyyy" :minDate="tomorrow" :enableTimePicker="false"
-                    :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
-        <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
-        </button>
-        <div v-if="isError" class="invalid-feedback d-block text-start">
-          Merci de renseigner la date
-        </div>
-      </div>
+  <div class="step_title">Date de livraison des médicaments :</div>
+  <div class="input-group has-validation">
+    <Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false" model-type="timestamp"
+                select-text="Choisir" cancel-text="Annuler"
+                monthNameFormat="long" format="dd MMMM yyyy" :minDate="tomorrow" :enableTimePicker="false"
+                :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
+    <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
+    </button>
+    <div v-if="isError" class="invalid-feedback d-block text-start">
+      Merci de renseigner la date
     </div>
   </div>
-
 </template>
 
 <script>
diff --git a/src/views/delivery-option-summary.vue b/src/views/delivery-option-summary.vue
index 36441df..6ddafe5 100644
--- a/src/views/delivery-option-summary.vue
+++ b/src/views/delivery-option-summary.vue
@@ -1,16 +1,14 @@
 <template>
-  <div class="card">
-    <div class="card-header"><h4>Recapitulatif</h4></div>
-    <div class="card-body">
-      <div><strong>Adresse de livraison : </strong>{{ store.fullAddress }}</div>
-      <div><strong>Mode de livraison : </strong>{{ store.deliveryMethod }}</div>
-      <div><strong>Collecte de l'ordonnnace : </strong>
-        <span v-if="store.widthPrescription">Oui</span>
-        <span v-else>Non</span>
-      </div>
-      <div><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
-      <button class="btn btn-primary" @click="addToCart">Valider</button>
+  <div class="step_title">Recapitulatif :</div>
+  <div class="text-start">
+    <div class="mb-2"><strong>Adresse de livraison : </strong>{{ store.fullAddress }}</div>
+    <div class="mb-2"><strong>Mode de livraison : </strong>{{ store.deliveryMethod }}</div>
+    <div class="mb-2"><strong>Collecte de l'ordonnnace : </strong>
+      <span v-if="store.widthPrescription">Oui</span>
+      <span v-else>Non</span>
     </div>
+    <div class="mb-2"><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
+    <button class="btn btn-primary" @click="addToCart"><i class="fa-regular fa-circle-check fa-fw"></i> Ajouter au panier</button>
   </div>
 </template>