osm_my_commerce/components/SearchInput.vue

<template>
  <main>
    <section>
      <!--    <p class="content"><b>Selected:</b> {{ selected }}</p>-->
      <b-field label="Trouver mon Commerce par nom ou par SIREN">
        <b-autocomplete
          :data="data"
          placeholder="ex: Chambre du commerce d'Evry"
          field="title"
          :loading="isFetching"
          icon="magnify"
          @typing="getAsyncData"
          @select="(option) => (selected = option)"
        >
          <template slot-scope="props">
            <div class="media">
              <div class="media-left"></div>
              <div class="media-content">
                {{ props.option.title }}
                <br />
                <small>
                  Released at {{ props.option.release_date }}, rated
                  <b>{{ props.option.vote_average }}</b>
                </small>
              </div>
            </div>
          </template>
        </b-autocomplete>
      </b-field>
    </section>
    <section class="map">
      <br />
      <img src="~assets/carte_demo.png" alt="logo osm" />
    </section>
    <section v-if="mockAddok" class="result">
      <div class="card-content">
        <div class="media">
          <div class="media-left">
            <figure class="image is-48x48">
              <img
                src="https://bulma.io/images/placeholders/96x96.png"
                alt="Placeholder image"
              />
            </figure>
          </div>
          <div class="media-content">
            <p class="title is-4">
              {{ mockAddok.features[0].properties.denominationunitelegale }}
              | {{ mockAddok.features[0].properties.enseigne1etablissement }}
            </p>
            <p class="subtitle is-6">
              {{ mockAddok.features[0].properties.context }}
            </p>
            <p class="title is-6">
              {{ mockAddok.features[0].properties.longitude }} ,
              {{ mockAddok.features[0].properties.latitude }}
            </p>
          </div>
        </div>

        <div class="content">
          NAF:
          {{
            mockAddok.features[0].properties
              .nomenclatureactiviteprincipaleunitelegale
          }}
          siret : {{ mockAddok.features[0].properties.siret }}
          <br />

          activité principale
          {{
            mockAddok.features[0].properties.activiteprincipaleetablissement
          }}, source {{ mockAddok.features[0].properties.source }},
          <time datetime="2016-1-1">
            enregistré le
            {{ mockAddok.features[0].properties.anneeeffectifsetablissement }},
            entreprise créé le {{ mockAddok.features[0].properties.datedebut }},
            dernirèe mise à jour
            {{ mockAddok.features[0].properties.updated_at }}
          </time>
        </div>
      </div>
    </section>
    <section v-if="xml" class="edit">
      <b-field label="Nom">
        <b-input
          v-model="xml.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"
          placeholder="www.monsite.com"
          icon="planet"
        ></b-input>
      </b-field>
      <b-field label="email officiel">
        <b-input
          v-model="xml.tags.mail"
          placeholder="contact@monsite.com"
          icon="enveloppe"
        ></b-input>
      </b-field>
      <b-field label="Tel">
        <b-input
          v-model="xml.tags.phone"
          placeholder="012345"
          icon="planet"
          type="tel"
        ></b-input>
      </b-field>
      <b-field label="Description de votre activité">
        <b-input
          v-model="xml.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="xml.tags['parking:velo']"> Parking vélo </b-switch>
        <b-switch v-model="xml.tags['webaccess']"> Accès Internet </b-switch>
        <b-switch v-model="xml.tags['elecborne']">
          borne de recharge électrique sur parking
        </b-switch>
        <b-switch v-model="xml.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 }}
      </div>
      <iframe
        src="https://projets.pavie.info/yohours/"
        frameborder="0"
        width="100%"
        height="800"
      ></iframe>

      <button class="btn button has-background-success">Enregistrer</button>
    </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'

export default {
  data() {
    return {
      data: [],
      xml: nodeInfo.default.elements[0],
      mockEntreprise: resultsEntreprise.default,
      mockAddok: resultsAddok.default,
      selected: null,
      isFetching: false,
    }
  },
  mounted() {
    this.getAsyncData('larome')
  },
  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.isFetching = true
      // axios
      //   .get(`https://demo.addok.xyz/search/?q=${name}`)
      //   .then(({ data }) => {
      //     console.log('data', data)
      //     this.data = []
      //     data.results.forEach((item) => this.data.push(item))
      //   })
      //   .catch((error) => {
      //     this.data = []
      //     throw error
      //   })
      //   .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),
  },
}
</script>