feat(form): add store vuex

components/SearchInput.vue

@@ -135,12 +135,6 @@
       <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>
@@ -174,21 +168,21 @@ export default {
       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
-      //   })
+      this.isFetching = true
+      this.$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 }) => {

layouts/default.vue

@@ -7,9 +7,7 @@
     >
       <div class="navbar-brand">
         <a class="navbar-item" href="/">
-          <img
-            src='~assets/OSM-FR.svg'
-            alt='logo osm' >
+          <img src="~assets/OSM-FR.svg" alt="logo osm" />
           Sur OSM
         </a>
 
@@ -23,10 +21,13 @@
 
     <section class="main-content columns">
       <aside class="column is-2 section">
-<!--        <p class="menu-label is-hidden-touch">General</p>-->
+        <!--        <p class="menu-label is-hidden-touch">General</p>-->
         <ul class="menu-list">
           <li v-for="(item, key) of items" :key="key">
-            <nuxt-link :to="item.to" exact-active-class="has-background-success">
+            <nuxt-link
+              :to="item.to"
+              exact-active-class="has-background-success"
+            >
               <b-icon :icon="item.icon" /> {{ item.title }}
             </nuxt-link>
           </li>
@@ -41,21 +42,12 @@
 </template>
 
 <script>
+import routelist from './routes'
+
 export default {
   data() {
     return {
-      items: [
-        {
-          title: 'Accueil',
-          icon: 'home',
-          to: { name: 'index' },
-        },
-        {
-          title: 'à propos',
-          icon: 'lightbulb',
-          to: { name: 'A-propos' },
-        },
-      ],
+      items: routelist,
     }
   },
 }

layouts/routes.ts

@@ -0,0 +1,17 @@
+export default [
+  {
+    title: 'Accueil',
+    icon: 'home',
+    to: { name: 'index' },
+  },
+  {
+    title: 'Horaires',
+    icon: 'clock',
+    to: { name: 'Horaires' },
+  },
+  {
+    title: 'à propos',
+    icon: 'lightbulb',
+    to: { name: 'A-propos' },
+  },
+]

pages/A-propos.vue

@@ -2,7 +2,9 @@
   <section class="section">
     <h1>à propos</h1>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam corporis eum natus odio recusandae sapiente sunt suscipit voluptate, voluptatem! Animi culpa debitis illo, ipsam magnam nihil nobis quo sint?
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam
+      corporis eum natus odio recusandae sapiente sunt suscipit voluptate,
+      voluptatem! Animi culpa debitis illo, ipsam magnam nihil nobis quo sint?
     </p>
   </section>
 </template>

pages/Horaires.vue

@@ -0,0 +1,12 @@
+<template>
+  <section class="section">
+    <h1>Horaires</h1>
+    <p>Vos horaires actuelles</p>
+    <iframe
+      src="https://projets.pavie.info/yohours/"
+      frameborder="0"
+      width="100%"
+      height="800"
+    ></iframe>
+  </section>
+</template>

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="section">
-<!--    <h1 class="title">{{ $t('message') }}</h1>-->
+    <!--    <h1 class="title">{{ $t('message') }}</h1>-->
     <h1 class="title is-1">OSM Mon Commerce</h1>
     <search-input></search-input>
   </section>

store/index.ts

@@ -0,0 +1,26 @@
+export const state = () => ({
+  counter: 0,
+  list: [],
+  formConfig: {},
+})
+
+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)
+  },
+  toggle(state: any, todo: any) {
+    todo.done = !todo.done
+  },
+  setFormField(state: any, { field }: any) {
+    state.formConfig[state.formConfig.indexOf(field)] = field
+  },
+}

tsconfig.json

@@ -3,11 +3,7 @@
     "target": "ES2018",
     "module": "ESNext",
     "moduleResolution": "Node",
-    "lib": [
-      "ESNext",
-      "ESNext.AsyncIterable",
-      "DOM"
-    ],
+    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "allowJs": true,
@@ -17,21 +13,10 @@
     "experimentalDecorators": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": [
-        "./*"
-      ],
-      "@/*": [
-        "./*"
-      ]
+      "~/*": ["./*"],
+      "@/*": ["./*"]
     },
-    "types": [
-      "@types/node",
-      "@nuxt/types"
-    ]
+    "types": ["@types/node", "@nuxt/types"]
   },
-  "exclude": [
-    "node_modules",
-    ".nuxt",
-    "dist"
-  ]
+  "exclude": ["node_modules", ".nuxt", "dist"]
 }