WIP MMCM

src/views/address-check.vue

@@ -0,0 +1,70 @@
+<template>
+  <h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
+
+  <div class="input-group mb-3">
+    <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">
+      Valider
+    </button>
+  </div>
+  <ul class="list-group">
+    <li class="list-group-item text-start" v-for="(item, index) in searchResults" :key="index"
+        @click="selectChoice(item)">
+      {{ item.properties.label }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "address-check",
+  data() {
+    return {
+      query: "",
+      selectedChoice: {},
+      searchResults: []
+    }
+  },
+  methods: {
+    updateSearchResult: async function () {
+      this.searchResults = await fetch('https://api-adresse.data.gouv.fr/search/?q=' + this.query)
+          .then(function (response) {
+            return response.json();
+          }).then(function (jsonObj) {
+            return jsonObj.features;
+          });
+    },
+    selectChoice(item) {
+      this.searchResults = []
+      this.query = item.properties.label
+      this.selectedChoice = item;
+    },
+    checkIdAddressIsEligible: async function () {
+
+
+      await fetch('/php/api/v3/?NUMC=ZIWR5659&controller=MMCMController&street=' + encodeURI(this.selectedChoice.properties.name)
+          + '&zip_code=' + encodeURI(this.selectedChoice.properties.postcode)
+          + '&city=' + encodeURI(this.selectedChoice.properties.city)
+      )
+          .then(function (response) {
+            return response.json();
+          }).then(function (jsonObj) {
+            console.log(jsonObj)
+            return jsonObj;
+          });
+
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.list-group li:hover {
+  background-color: #d7fdc0;
+  cursor: pointer;
+}
+
+</style>