feat(search): multi find data

components/SearchInput.vue

@@ -3,7 +3,16 @@
     <section>
       Résultats possibles: {{ data.length }}
       <div v-if="select && select.properties" class="selected">
-        <p class="content"><b>Selected:</b> {{ select.properties.name }}</p>
+        <p class="content">
+          <b>Selected:</b>
+          <strong>
+            {{ select.properties.name }}
+          </strong>
+          {{ select.properties.citycode }}
+          {{ select.properties.context }}
+          <br />
+          <a :href="select.properties.id">{{ select.properties.id }}</a>
+        </p>
       </div>
 
       <b-field label="Trouver mon Commerce par nom ou par SIREN">
@@ -83,6 +92,8 @@
       ( ici une carte )
       <!--      <img src="~assets/carte_demo.png" alt="logo osm" />-->
     </section>
+    <h2>Sélection:</h2>
+    <fieldset class="has-background-info">
       <section v-if="select && select.properties" class="result">
         <div class="card-content">
           <div class="media">
@@ -96,6 +107,7 @@
             </div>
             <div class="media-content">
               <p class="title is-4">
+                {{ select.properties.label }}
                 {{ select.properties.denominationunitelegale }}
                 | {{ select.properties.enseigne1etablissement }}
               </p>
@@ -103,6 +115,7 @@
                 {{ select.properties.context }}
               </p>
               <p class="title is-6">
+                {{ select.properties.city }} ,
                 {{ select.properties.longitude }} ,
                 {{ select.properties.latitude }}
               </p>
@@ -120,38 +133,41 @@
             {{ select.properties.source }},
             <time datetime="2016-1-1">
               enregistré le
-            {{ select.properties.anneeeffectifsetablissement }}, entreprise créé
+              {{ select.properties.anneeeffectifsetablissement }}, entreprise
-            le {{ select.properties.datedebut }}, dernirèe mise à jour
+              créé le {{ select.properties.datedebut }}, dernirèe mise à jour
               {{ select.properties.updated_at }}
             </time>
           </div>
         </div>
       </section>
-    <section v-if="xml" class="edit">
+    </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="xml.tags.name"
+          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="xml.tags.website"
+          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="xml.tags.mail"
+          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="xml.tags.phone"
+          v-model="data.elements[0].tags.phone"
           placeholder="012345"
           icon="planet"
           type="tel"
@@ -159,29 +175,39 @@
       </b-field>
       <b-field label="Description de votre activité">
         <b-input
-          v-model="xml.tags.description"
+          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="xml.tags.takeaway"> Vente à emporter</b-switch>
+        <b-switch v-model="data.elements[0].tags.takeaway">
-        <b-switch v-model="xml.tags['parking:velo']"> Parking vélo</b-switch>
+          Vente à emporter
-        <b-switch v-model="xml.tags['webaccess']"> Accès Internet</b-switch>
+        </b-switch>
-        <b-switch v-model="xml.tags['elecborne']">
+        <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="xml.tags['access:public']">
+        <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">
-        {{ xml.tags.opening_hours }}
+        {{ 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>
@@ -194,29 +220,47 @@
           <tbody>
             <tr>
               <td>
-                <div v-for="(value, name) in xml.tags" :key="name">
+                <!--                <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
-                  {{ name }} :
+                <!--                  <div class="columns">-->
-                  {{ value }}
+                <!--                    <div class="column">-->
-                </div>
+                <!--                      <strong> {{ name }} </strong>-->
+                <!--                    </div>-->
+                <!--                    <div class="column">-->
+                <!--                      {{ value }}-->
+                <!--                    </div>-->
+                <!--                  </div>-->
+                <!--                </div>-->
               </td>
-            </tr>
-            <tr>
               <td v-if="osm_data && osm_data.elements">
                 <div
                   v-for="(value, name) in osm_data.elements[0].tags"
                   :key="name"
                 >
-                  {{ name }} :
+                  <div class="columns">
-                  {{ value }}
+                    <div class="column">
+                      <strong> {{ name }}</strong>
+                    </div>
+                    <div class="column">{{ value }}</div>
+                  </div>
                 </div>
               </td>
             </tr>
           </tbody>
         </table>
       </section>
-
-      <button class="btn button has-background-success">Enregistrer</button>
     </section>
+    <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>
   </main>
 </template>
 
@@ -231,16 +275,17 @@ export default {
     return {
       data: [],
       osm_data: [],
+      all_tags: [],
       xml: nodeInfo.default.elements[0],
       mockEntreprise: resultsEntreprise.default,
       mockAddok: resultsAddok.default,
       select: {},
-      searchQuery: 'tour montparnasse',
+      searchQuery: 'librairie interlignes',
       isFetching: false,
     }
   },
   mounted() {
-    this.getAsyncData('tour eiffel')
+    this.getAsyncData(this.searchQuery)
   },
   methods: {
     // You have to install and import debounce to use it,
@@ -255,6 +300,8 @@ export default {
         .then(({ data }) => {
           console.log('data', data)
           this.data = []
+          this.selectChoice(data.features[0])
+
           data.features.forEach((item) => this.data.push(item))
         })
         .catch((error) => {
@@ -264,19 +311,6 @@ export default {
         .finally(() => {
           this.isFetching = false
         })
-      // axios
-      //   .get(`https://api.openstreetmap.org/api/0.6/node/6126513555`)
-      //   .then(({ data }) => {
-      //     console.log('data xml', data)
-      //     this.xml = data.elements[0]
-      //   })
-      //   .catch((error) => {
-      //     this.xml = []
-      //     throw error
-      //   })
-      //   .finally(() => {
-      //     this.isFetching = false
-      //   })
     }, 500),
     selectChoice(option) {
       console.log('option', option)
@@ -301,6 +335,7 @@ export default {
           .then(({ data }) => {
             console.log('OSM data', data)
             this.osm_data = data
+            this.mixTags()
           })
           .catch((error) => {
             this.osm_data = []
@@ -313,6 +348,33 @@ export default {
         console.log('l url donnée n a pas de node ', url)
       }
     },
+
+    mixTags() {
+      if (this.osm_data && this.osm_data.elements[0]) {
+        for (const [key, value] of Object.entries(
+          this.osm_data.elements[0].tags
+        )) {
+          if (!this.all_tags[key]) {
+            this.createMissingKeyForMix(key)
+          }
+          this.all_tags[key].osm_data = value
+        }
+      }
+      if (this.select && this.osm_data.elements[0]) {
+        for (const [key, value] of Object.entries(this.select)) {
+          if (!this.all_tags[key]) {
+            this.createMissingKeyForMix(key)
+          }
+          this.all_tags[key].osm_data = value
+        }
+      }
+    },
+    createMissingKeyForMix(key) {
+      this.all_tags[key] = {
+        osm_data: '',
+        addok_data: '',
+      }
+    },
   },
 }
 </script>