WIP MMCM

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) {
-            return response.json();
-          }).then(function (jsonObj) {
-            console.log(jsonObj)
-            return jsonObj;
-          });
 
+      let productList = await fetch(urlApi)
+          .then(response => {
+            if (response.ok) {
+              return response.json();
+            }
+          })
+
+      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>