feat:list json demo restos

components/SearchInput.vue

@@ -17,7 +17,7 @@
 
       <b-field label="Trouver mon Commerce par nom ou par SIREN">
         <b-autocomplete
-          v-model="$store.searchQuery"
+          v-model="searchInput"
           :data="data"
           placeholder="ex: Chambre du commerce d'Evry"
           field="title"
@@ -141,131 +141,25 @@
         </div>
       </section>
     </fieldset>
-    <h2>Tags de data.elements[0]</h2>
-    <section v-if="data && data.elements" class="edit">
-      elements: {{ data.elements.length }}
-      <b-field label="Nom">
-        <b-input
-          v-model="data.elements[0].tags.name"
-          placeholder="le nom de votre commerce"
-          icon="pencil"
-        ></b-input>
-      </b-field>
-      <b-field label="Site web">
-        <b-input
-          v-model="data.elements[0].tags.website"
-          placeholder="www.monsite.com"
-          icon="planet"
-        ></b-input>
-      </b-field>
-      <b-field label="email officiel">
-        <b-input
-          v-model="data.elements[0].tags.mail"
-          placeholder="contact@monsite.com"
-          icon="enveloppe"
-        ></b-input>
-      </b-field>
-      <b-field label="Tel">
-        <b-input
-          v-model="data.elements[0].tags.phone"
-          placeholder="012345"
-          icon="planet"
-          type="tel"
-        ></b-input>
-      </b-field>
-      <b-field label="Description de votre activité">
-        <b-input
-          v-model="data.elements[0].tags.description"
-          placeholder="description de votre activité"
-          icon="planet"
-          type="tel"
-        ></b-input>
-      </b-field>
-      <b-field>
-        <b-switch v-model="data.elements[0].tags.takeaway">
-          Vente à emporter
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['parking:velo']">
-          Parking vélo
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['webaccess']">
-          Accès Internet
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['elecborne']">
-          borne de recharge électrique sur parking
-        </b-switch>
-        <b-switch v-model="data.elements[0].tags['access:public']">
-          Accès autorisé au public
-        </b-switch>
-      </b-field>
-
-      <h2 class="title is-2">Horaires d'ouverture</h2>
-      <div class="padded">
-        {{ data.elements[0].tags.opening_hours }}
-      </div>
-
-      <button class="btn button has-background-success">Enregistrer</button>
-    </section>
-
     <section>
-      <section class="comparaison">
+      <h2 class="title is-2">Debug info</h2>
-        <h2>Comparaison des tags</h2>
-        <table>
-          <thead>
-            <tr>
-              <td>API OSM</td>
-              <td>API addok</td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
-                <!--                  <div class="columns">-->
-                <!--                    <div class="column">-->
-                <!--                      <strong> {{ name }} </strong>-->
-                <!--                    </div>-->
-                <!--                    <div class="column">-->
-                <!--                      {{ value }}-->
-                <!--                    </div>-->
-                <!--                  </div>-->
-                <!--                </div>-->
-              </td>
-              <td v-if="osm_data && osm_data.elements">
-                <div
-                  v-for="(value, name) in osm_data.elements[0].tags"
-                  :key="name"
-                >
-                  <div class="columns">
-                    <div class="column">
-                      <strong> {{ name }}</strong>
-                    </div>
-                    <div class="column">{{ value }}</div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </section>
       <pre v-if="select">
       select.properties:
       {{ select }}
-    </pre>
+    </pre
-    <pre v-if="data">
+      >
-      data:
+      <pre v-if="fetchedData.osm_data">
-      {{ data }}
+      fetchedData OSM:
-    </pre>
+      {{ fetchedData.osm_data }}
-    <pre v-if="osm_data">
+    </pre
-      osm_data:
+      >
-      {{ osm_data }}
+    </section>
-    </pre>
   </main>
 </template>
 
 <script>
 import debounce from 'lodash/debounce'
+import { mapMutations } from 'vuex'
 import * as resultsAddok from '../mocks/addok'
 import * as resultsEntreprise from '../mocks/entreprise'
 import * as nodeInfo from '../mocks/osm_larome'
@@ -280,12 +174,29 @@ export default {
       mockEntreprise: resultsEntreprise.default,
       mockAddok: resultsAddok.default,
       select: {},
-      searchQuery: 'librairie interlignes',
-      isFetching: false,
     }
   },
+  computed: {
+    isFetching() {
+      return this.$store.state.isFetching
+    },
+    searchInput() {
+      return this.$store.state.searchInput
+    },
+    fetchedData() {
+      return this.$store.state.fetchedData
+    },
+  },
   mounted() {
-    this.getAsyncData(this.searchQuery)
+    if (!this.$store.state.fetchedData.addok_data) {
+      console.log(
+        'choppons de la data, y a rien dans le store ',
+        this.$store.state.fetchedData
+      )
+      this.getAsyncData(this.searchInput)
+    } else {
+      console.log('addok_data déjà trouvée')
+    }
   },
   methods: {
     // You have to install and import debounce to use it,
@@ -294,13 +205,15 @@ export default {
       if (!name.length) {
         this.data = []
       }
-      this.isFetching = true
+      this.setFetching(true)
+
       this.$axios
         .get(`https://demo.addok.xyz/search?&type=poi&q=${name}`)
         .then(({ data }) => {
           console.log('data', data)
           this.data = []
           this.selectChoice(data.features[0])
+          this.setFetchedDataAddok(data)
 
           data.features.forEach((item) => this.data.push(item))
         })
@@ -309,7 +222,7 @@ export default {
           throw error
         })
         .finally(() => {
-          this.isFetching = false
+          this.setFetching(false)
         })
     }, 500),
     selectChoice(option) {
@@ -321,7 +234,7 @@ export default {
     },
     getOSMNodeData(url) {
       if (!url.length) {
-        this.osm_data = []
+        this.fetchedData.osm_data = []
       }
       console.log('url', url)
       if (url.includes('node')) {
@@ -334,15 +247,14 @@ export default {
           )
           .then(({ data }) => {
             console.log('OSM data', data)
-            this.osm_data = data
+            this.setFetchedDataOsm(data)
             this.mixTags()
           })
           .catch((error) => {
-            this.osm_data = []
             throw error
           })
           .finally(() => {
-            this.isFetching = false
+            this.setFetching(false)
           })
       } else {
         console.log('l url donnée n a pas de node ', url)
@@ -350,9 +262,9 @@ export default {
     },
 
     mixTags() {
-      if (this.osm_data && this.osm_data.elements[0]) {
+      if (this.fetchedData.osm_data && this.fetchedData.osm_data.elements[0]) {
         for (const [key, value] of Object.entries(
-          this.osm_data.elements[0].tags
+          this.fetchedData.osm_data.elements[0].tags
         )) {
           if (!this.all_tags[key]) {
             this.createMissingKeyForMix(key)
@@ -360,7 +272,10 @@ export default {
           this.all_tags[key].osm_data = value
         }
       }
-      if (this.select && this.osm_data.elements[0]) {
+      if (
+        this.$store.state.selectedResult &&
+        this.fetchedData.osm_data.elements[0]
+      ) {
         for (const [key, value] of Object.entries(this.select)) {
           if (!this.all_tags[key]) {
             this.createMissingKeyForMix(key)
@@ -375,6 +290,13 @@ export default {
         addok_data: '',
       }
     },
+    ...mapMutations({
+      setFetching: 'index/setFetching',
+      setTag: 'index/setTag',
+      setSelectedResult: 'index/setSelectedResult',
+      setFetchedDataOsm: 'index/setFetchedDataOsm',
+      setFetchedDataAddok: 'index/setFetchedDataAddok',
+    }),
   },
 }
 </script>

components/TagTable.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <h2 class="title is-2">Tags de data.elements[0]</h2>
+    <section v-if="data && data.elements" class="edit">
+      elements: {{ data.elements.length }}
+      <b-field label="Nom">
+        <b-input
+          v-model="data.elements[0].tags.name"
+          icon="pencil"
+          placeholder="le nom de votre commerce"
+        ></b-input>
+      </b-field>
+      <b-field label="Site web">
+        <b-input
+          v-model="data.elements[0].tags.website"
+          icon="planet"
+          placeholder="www.monsite.com"
+        ></b-input>
+      </b-field>
+      <b-field label="email officiel">
+        <b-input
+          v-model="data.elements[0].tags.mail"
+          icon="enveloppe"
+          placeholder="contact@monsite.com"
+        ></b-input>
+      </b-field>
+      <b-field label="Tel">
+        <b-input
+          v-model="data.elements[0].tags.phone"
+          icon="planet"
+          placeholder="012345"
+          type="tel"
+        ></b-input>
+      </b-field>
+      <b-field label="Description de votre activité">
+        <b-input
+          v-model="data.elements[0].tags.description"
+          icon="planet"
+          placeholder="description de votre activité"
+          type="tel"
+        ></b-input>
+      </b-field>
+      <b-field>
+        <b-switch v-model="data.elements[0].tags.takeaway">
+          Vente à emporter
+        </b-switch>
+        <b-switch v-model="data.elements[0].tags['parking:velo']">
+          Parking vélo
+        </b-switch>
+        <b-switch v-model="data.elements[0].tags['webaccess']">
+          Accès Internet
+        </b-switch>
+        <b-switch v-model="data.elements[0].tags['elecborne']">
+          borne de recharge électrique sur parking
+        </b-switch>
+        <b-switch v-model="data.elements[0].tags['access:public']">
+          Accès autorisé au public
+        </b-switch>
+      </b-field>
+
+      <h2 class="title is-2">Horaires d'ouverture</h2>
+      <div class="padded">
+        {{ data.elements[0].tags.opening_hours }}
+      </div>
+
+      <button class="btn button has-background-success">Enregistrer</button>
+    </section>
+    <section class="comparaison">
+      <h2>Comparaison des tags</h2>
+      <table>
+        <thead>
+          <tr>
+            <td>API OSM</td>
+            <td>API addok</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
+              <!--                  <div class="columns">-->
+              <!--                    <div class="column">-->
+              <!--                      <strong> {{ name }} </strong>-->
+              <!--                    </div>-->
+              <!--                    <div class="column">-->
+              <!--                      {{ value }}-->
+              <!--                    </div>-->
+              <!--                  </div>-->
+              <!--                </div>-->
+            </td>
+            <td v-if="fetchedData.osm_data && fetchedData.osm_data.elements">
+              <div
+                v-for="(value, name) in fetchedData.osm_data.elements[0].tags"
+                :key="name"
+              >
+                <div class="columns">
+                  <div class="column">
+                    <strong> {{ name }}</strong>
+                  </div>
+                  <div class="column">{{ value }}</div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+    <pre v-if="data">
+      data:
+      {{ data }}
+    </pre>
+  </div>
+</template>

pages/Horaires.vue

@@ -2,8 +2,31 @@
   <section class="section">
     <h1>Horaires</h1>
     <p>Vos horaires actuelles</p>
+    <ul>
+      <li v-for="h in $store.state.formConfig.hours" :key="h">
+        {{ h }}
+      </li>
+    </ul>
   </section>
 </template>
+
 <script>
-export default {}
+import { mapMutations } from 'vuex'
+
+export default {
+  computed: {
+    hours() {
+      return this.$store.state.formConfig.hours
+    },
+  },
+  methods: {
+    addhour(e) {
+      this.$store.commit('formConfig/add', e.target.value)
+      e.target.value = ''
+    },
+    ...mapMutations({
+      setTag: 'index/setTag',
+    }),
+  },
+}
 </script>

store/example.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  list: [],
+});
+
+export const mutations = {
+  add(state, text) {
+    state.list.push({
+      text,
+      done: false,
+    });
+  },
+  remove(state, { todo }) {
+    state.list.splice(state.list.indexOf(todo), 1);
+  },
+  toggle(state, todo) {
+    todo.done = !todo.done;
+  },
+};

store/index.js

@@ -0,0 +1,56 @@
+/**
+ * see VueX docs
+ */
+export const state = () => ({
+  counter       : 0,
+  isFetching    : false,
+  searchInput   : 'librairie interlignes',
+  selectedResult: null,
+  fetchedData   : {
+    osm_data  : '',
+    addok_data: '',
+  },
+  list          : [],
+  formConfig    : {
+    name    : '',
+    delivery: false,
+    hours   : ['a', 'b'],
+    tags    : [],
+  },
+})
+
+export const mutations = {
+  increment(state) {
+    state.counter++
+  },
+  add(state, text) {
+    state.list.push({
+      text,
+      done: false,
+    })
+  },
+  remove(state, { todo }) {
+    state.list.splice(state.list.indexOf(todo), 1);
+  },
+  setFormField(state, { field }) {
+    state.formConfig[state.formConfig.indexOf(field)] = field;
+  },
+  setFetchedDataOsm(state, { data }) {
+    state.fetchedData.osm_data = data;
+  },
+  setFetchedDataAddok(state, { data }) {
+    state.fetchedData.addok_data = data;
+  },
+  setTag(state, { field }) {
+    state.formConfig.tags[state.formConfig.tags.indexOf(field)] = field;
+  },
+  setSelectedResult(state, { data }) {
+    state.selectedResult = data;
+  },
+  setFetching(state, { data }) {
+    state.isFetching = data;
+  },
+  setAllTag(state, { tags }) {
+    state.formConfig.tags = tags;
+  },
+}

store/index.ts

@@ -1,37 +0,0 @@
-/**
- * see VueX docs
- */
-export const state = () => ({
-  counter: 0,
-  isFetching: false,
-  searchInput: '',
-  selectedResult: null,
-  list: [],
-  formConfig: {
-    name: '',
-    delivery: false,
-    hours: [],
-    tags: [],
-  },
-})
-
-export const mutations = {
-  increment(state: any) {
-    state.counter++
-  },
-  add(state: any, text: any) {
-    state.list.push({
-      text,
-      done: false,
-    })
-  },
-  remove(state: any, { todo }: any) {
-    state.list.splice(state.list.indexOf(todo), 1)
-  },
-  setFormField(state: any, { field }: any) {
-    state.formConfig[state.formConfig.indexOf(field)] = field
-  },
-  setTag(state: any, { field }: any) {
-    state.formConfig.tags[state.formConfig.tags.indexOf(field)] = field
-  },
-}