WIP MMCM

src/views/address-check.vue

@@ -1,11 +1,18 @@
 <template>
   <h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
 
+
   <div class="input-group mb-3">
+    <div class="input-group-text">
+      <i v-if="isSearching" class="fa-solid fa-circle-notch fa-spin fa-fw color-success"></i>
+      <i v-else class="fa-regular fa-location-dot fa-fw color-success"></i>
+    </div>
     <input type="text" placeholder="Exemple : 2 rue de la Libération 78120 Rambouillet" class="form-control"
            v-model="query"
            @input="updateSearchResult" aria-describedby="button-addon">
-    <button class="btn btn-outline-secondary" type="button" id="button-addon" @click="checkIdAddressIsEligible">
+    <button class="btn btn-primary" type="button" id="button-addon" @click="checkIdAddressIsEligible">
+      <i v-if="isChecking" class="fa-solid fa-circle-notch fa-spin fa-fw"></i>
+      <i v-else class="fa-regular fa-circle-check fa-fw"></i>
       Valider
     </button>
   </div>
@@ -19,14 +26,12 @@
 
 <script>
 import {useMMCMStore} from '../stores/mmcm.js'
-import {storeToRefs} from 'pinia'
 
 export default {
   setup() {
     const store = useMMCMStore()
 
     return {
-      // you can return the whole store instance to use it in the template
       store,
     }
   },
@@ -34,17 +39,21 @@ export default {
   data() {
     return {
       query: "",
-      searchResults: []
+      searchResults: [],
+      isSearching: false,
+      isChecking: false,
     }
   },
   methods: {
     updateSearchResult: async function () {
+      this.isSearching = true
       this.searchResults = await fetch('https://api-adresse.data.gouv.fr/search/?q=' + this.query)
           .then(function (response) {
             return response.json();
           }).then(function (jsonObj) {
+            this.isSearching = false
             return jsonObj.features;
-          });
+          }.bind(this));
     },
     selectChoice(item) {
       this.searchResults = []
@@ -53,8 +62,10 @@ export default {
       this.store.setZipCode(item.properties.postcode)
       this.store.setCity(item.properties.city)
 
+
     },
     checkIdAddressIsEligible: async function () {
+      this.isChecking = true
 
       const urlApi = '/php/api/v3/mmcm.php?EXEC=getEligibility&street=' + encodeURI(this.store.street)
           + '&zip_code=' + this.store.zipCode
@@ -68,9 +79,8 @@ export default {
             }
           })
 
-      console.log(productList);
-
       this.store.setProductList(productList);
+      this.isChecking = false
       this.$router.push({path: '/delivery-option-step-1'});
     }
   }