WIP MMCM

package-lock.json

@@ -8,6 +8,7 @@
       "name": "mmcm",
       "version": "0.0.0",
       "dependencies": {
+        "pinia": "^2.0.22",
         "vue": "^3.2.37",
         "vue-router": "^4.1.5"
       },
@@ -1149,6 +1150,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.22.tgz",
+      "integrity": "sha512-u+b8/BC+tmvo3ACbYO2w5NfxHWFOjvvw9DQnyT0dW8aUMCPRQT5QnfZ5R5W2MzZBMTeZRMQI7V/QFbafmM9QHw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.2.1",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -2324,6 +2375,23 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.22.tgz",
+      "integrity": "sha512-u+b8/BC+tmvo3ACbYO2w5NfxHWFOjvvw9DQnyT0dW8aUMCPRQT5QnfZ5R5W2MzZBMTeZRMQI7V/QFbafmM9QHw==",
+      "requires": {
+        "@vue/devtools-api": "^6.2.1",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "pinia": "^2.0.22",
     "vue": "^3.2.37",
     "vue-router": "^4.1.5"
   },

src/main.js

@@ -4,8 +4,11 @@ import './assets/common_css.css'
 import './assets/bootstrap-para.css'
 import App from './App.vue'
 import router from "./router/index"
+import { createPinia } from 'pinia'
 
+const pinia = createPinia()
 
 const app = createApp(App)
 app.use(router);
+app.use(pinia)
 app.mount("#app");

src/router/index.js

@@ -11,6 +11,11 @@ const routes = [
         name: 'address-check',
         component: () => import('/src/views/address-check.vue'),
     },
+    {
+        path: '/delivery-option',
+        name: 'delivery-option',
+        component: () => import('/src/views/delivery-option.vue'),
+    },
 
 ]
 const router = createRouter({

src/stores/mmcm.js

@@ -0,0 +1,22 @@
+import {defineStore} from 'pinia'
+
+export const useMMCMStore = defineStore('counter', {
+    state: () => ({count: 0, name: 'Eduardo', street: '', zipCode: '', city: '', productList : []}),
+    getters: {
+        fullAddress: (state) => state.street + ' ' + state.zipCode + '' + state.city
+    },
+    actions: {
+        setStreet(street) {
+            this.street = street
+        },
+        setZipCode(zipCode) {
+            this.zipCode = zipCode
+        },
+        setCity(city) {
+            this.city = city
+        },
+        setProductList(array){
+            this.productList = array
+        }
+    },
+})

src/views/address-check.vue

@@ -18,12 +18,22 @@
 </template>
 
 <script>
+import {useMMCMStore} from '../stores/mmcm.js'
+import {storeToRefs} from 'pinia'
+
 export default {
+  setup() {
+    const store = useMMCMStore()
+
+    return {
+      // you can return the whole store instance to use it in the template
+      store,
+    }
+  },
   name: "address-check",
   data() {
     return {
       query: "",
-      selectedChoice: {},
       searchResults: []
     }
   },
@@ -39,22 +49,27 @@ export default {
     selectChoice(item) {
       this.searchResults = []
       this.query = item.properties.label
-      this.selectedChoice = item;
+      this.store.setStreet(item.properties.name)
+      this.store.setZipCode(item.properties.postcode)
+      this.store.setCity(item.properties.city)
+
     },
     checkIdAddressIsEligible: async function () {
 
+      const urlApi = '/php/api/v3/mmcm.php?street=' + encodeURI(this.store.street)
+          + '&zip_code=' + this.store.zipCode
+          + '&city=' + this.store.city
 
-      await fetch('/php/api/v3/?NUMC=ZIWR5659&controller=MMCMController&street=' + encodeURI(this.selectedChoice.properties.name)
-          + '&zip_code=' + encodeURI(this.selectedChoice.properties.postcode)
-          + '&city=' + encodeURI(this.selectedChoice.properties.city)
-      )
-          .then(function (response) {
+
+      let productList = await fetch(urlApi)
+          .then(response => {
+            if (response.ok) {
               return response.json();
-          }).then(function (jsonObj) {
-            console.log(jsonObj)
-            return jsonObj;
-          });
+            }
+          })
 
+      this.store.setProductList(productList);
+      this.$router.push({path: '/delivery-option'});
     }
   }
 

src/views/delivery-option.vue

@@ -0,0 +1,26 @@
+<template>
+
+  <div v-for="product in store.productList" class="card">
+    <div class="card-header">{{ product.name }}</div>
+    <div class="card-body">{{ product.price }}</div>
+  </div>
+
+</template>
+
+<script>
+import {useMMCMStore} from '../stores/mmcm.js'
+
+export default {
+  setup() {
+    const store = useMMCMStore()
+    return {
+      store
+    }
+  },
+  name: "delivery-option"
+}
+</script>
+
+<style scoped>
+
+</style>

vite.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/php': {
-        target: 'https://www.parapharmacie-et-medicament.com/',
+        target: 'https://para-php7-dev.parapharmacie-et-medicament.com/',
         changeOrigin: true,
       }
     }