From 0c84bcd7383d1afdd371f09b7c1221918f6d9a8b Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Fri, 29 Jan 2021 12:59:44 +0100
Subject: [PATCH] start using vuex, split tag list in other component

---
 components/SearchInput.vue | 237 +++++++++++++------------------------
 components/TagTable.vue    | 115 ++++++++++++++++++
 pages/Horaires.vue         |  43 +++++--
 store/example.js           |  18 +++
 store/index.js             |  41 +++++--
 5 files changed, 276 insertions(+), 178 deletions(-)
 create mode 100644 components/TagTable.vue
 create mode 100644 store/example.js

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 6197cc7..7c7f28b 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -17,8 +17,8 @@
 
       <b-field label="Trouver mon Commerce par nom ou par SIREN">
         <b-autocomplete
-          v-model="$store.searchQuery"
-          :data="data"
+          v-model='searchInput'
+          :data='data'
           placeholder="ex: Chambre du commerce d'Evry"
           field="title"
           :loading="isFetching"
@@ -141,175 +141,89 @@
         </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>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">
+    <section >
+      <h2 class='title is-2' >
+        Debug info
+      </h2 >
+      <pre v-if='select' >
       select.properties:
       {{ select }}
-    </pre>
-    <pre v-if="data">
-      data:
-      {{ data }}
-    </pre>
-    <pre v-if="osm_data">
-      osm_data:
-      {{ osm_data }}
-    </pre>
+    </pre >
+      <pre v-if='fetchedData.osm_data' >
+      fetchedData OSM:
+      {{ fetchedData.osm_data }}
+    </pre >
+
+    </section >
   </main>
 </template>
 
-<script>
-import debounce from 'lodash/debounce'
-import * as resultsAddok from '../mocks/addok'
-import * as resultsEntreprise from '../mocks/entreprise'
-import * as nodeInfo from '../mocks/osm_larome'
+<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';
 
 export default {
   data() {
     return {
-      data: [],
-      osm_data: [],
-      all_tags: [],
-      xml: nodeInfo.default.elements[0],
+      data          : [],
+      osm_data      : [],
+      all_tags      : [],
+      xml           : nodeInfo.default.elements[0],
       mockEntreprise: resultsEntreprise.default,
-      mockAddok: resultsAddok.default,
-      select: {},
-      searchQuery: 'librairie interlignes',
-      isFetching: false,
-    }
+      mockAddok     : resultsAddok.default,
+      select        : {},
+    };
+  },
+  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,
     // it's not mandatory though.
     getAsyncData: debounce(function (name) {
       if (!name.length) {
-        this.data = []
+        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])
+          console.log('data', data);
+          this.data = [];
+          this.selectChoice(data.features[0]);
+          this.setFetchedDataAddok(data);
 
-          data.features.forEach((item) => this.data.push(item))
+          data.features.forEach((item) => this.data.push(item));
         })
         .catch((error) => {
           this.data = []
           throw error
         })
         .finally(() => {
-          this.isFetching = false
+          this.setFetching(false);
         })
     }, 500),
     selectChoice(option) {
@@ -321,7 +235,7 @@ export default {
     },
     getOSMNodeData(url) {
       if (!url.length) {
-        this.osm_data = []
+        this.fetchedData.osm_data = [];
       }
       console.log('url', url)
       if (url.includes('node')) {
@@ -333,16 +247,15 @@ export default {
             `https://api.openstreetmap.org/api/0.6/node/${objectNumber}.json`
           )
           .then(({ data }) => {
-            console.log('OSM data', data)
-            this.osm_data = data
-            this.mixTags()
+            console.log('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,31 +263,41 @@ 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)
+            this.createMissingKeyForMix(key);
           }
-          this.all_tags[key].osm_data = value
+          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)
+            this.createMissingKeyForMix(key);
           }
-          this.all_tags[key].osm_data = value
+          this.all_tags[key].osm_data = value;
         }
       }
     },
     createMissingKeyForMix(key) {
       this.all_tags[key] = {
-        osm_data: '',
+        osm_data  : '',
         addok_data: '',
-      }
+      };
     },
+    ...mapMutations({
+      setFetching        : 'index/setFetching',
+      setTag             : 'index/setTag',
+      setSelectedResult  : 'index/setSelectedResult',
+      setFetchedDataOsm  : 'index/setFetchedDataOsm',
+      setFetchedDataAddok: 'index/setFetchedDataAddok',
+    }),
   },
 }
 </script>
diff --git a/components/TagTable.vue b/components/TagTable.vue
new file mode 100644
index 0000000..f841e6c
--- /dev/null
+++ b/components/TagTable.vue
@@ -0,0 +1,115 @@
+<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 >
diff --git a/pages/Horaires.vue b/pages/Horaires.vue
index 3f68917..1cb80ae 100644
--- a/pages/Horaires.vue
+++ b/pages/Horaires.vue
@@ -1,11 +1,34 @@
-<template>
-  <section class="section">
-    <h1>Horaires</h1>
-    <p>Vos horaires actuelles</p>
-    <ul>
-      <li v-for="h in $store.formConfig.hours" :key="h">
+<template >
+  <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>
+      </li >
+    </ul >
+  </section >
+</template >
+
+<script >
+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 >
diff --git a/store/example.js b/store/example.js
new file mode 100644
index 0000000..0999c4f
--- /dev/null
+++ b/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;
+  },
+};
diff --git a/store/index.js b/store/index.js
index 7c54ea3..09bce29 100644
--- a/store/index.js
+++ b/store/index.js
@@ -2,16 +2,20 @@
  * see VueX docs
  */
 export const state = () => ({
-  counter: 0,
-  isFetching: false,
-  searchInput: '',
+  counter       : 0,
+  isFetching    : false,
+  searchInput   : 'librairie interlignes',
   selectedResult: null,
-  list: [],
-  formConfig: {
-    name: '',
+  fetchedData   : {
+    osm_data  : '',
+    addok_data: '',
+  },
+  list          : [],
+  formConfig    : {
+    name    : '',
     delivery: false,
-    hours: ['a', 'b'],
-    tags: [],
+    hours   : ['a', 'b'],
+    tags    : [],
   },
 })
 
@@ -26,12 +30,27 @@ export const mutations = {
     })
   },
   remove(state, { todo }) {
-    state.list.splice(state.list.indexOf(todo), 1)
+    state.list.splice(state.list.indexOf(todo), 1);
   },
   setFormField(state, { field }) {
-    state.formConfig[state.formConfig.indexOf(field)] = 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
+    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;
   },
 }