add page, init state management with pinia

hichina-main-front-mobile-first/package.json

@@ -17,6 +17,7 @@
     "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.4.0",
     "core-js": "^3.6.5",
+    "pinia": "^2.1.4",
     "quasar": "^2.6.0",
     "quill-image-uploader": "^1.3.0",
     "unhead": "^1.1.30",

hichina-main-front-mobile-first/src/pages/BookPage.vue

@@ -0,0 +1,110 @@
+<template>
+  <q-page> book page </q-page>
+</template>
+
+<script>
+import { ref, onMounted, getCurrentInstance, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import { api } from "boot/axios";
+import { bookParamStore } from "stores/bookParamStore";
+export default {
+  name: "BookPage",
+  setup() {
+    const store = bookParamStore();
+
+    const instance = getCurrentInstance();
+    const app = instance.appContext.app;
+    const gp = app.config.globalProperties;
+    const $q = useQuasar();
+
+    const route = useRoute();
+
+    const coupon = ref("");
+    const country = ref("");
+    const productName = ref("");
+    const productTypeId = ref("");
+    const productSkuId = ref("");
+    const packageCategory = ref("");
+    const selectedDate = ref(new Date());
+    const adultCount = ref(0);
+    const childCount = ref(0);
+    const infantCount = ref(0);
+    const buyCount = ref(1);
+    const totalPrice = ref(0);
+
+    const peopleform = reactive([]);
+    const contactform = ref({});
+
+    function whoami() {
+      api
+        .get("/api/v1/user/whoami")
+        .then(function (response) {
+          console.log("current user in book page: " + response.data);
+        })
+        .catch(function (error) {
+          console.log("currently not logged in setup: " + error);
+          gp.$goPage("/auth/login");
+        });
+    }
+    onMounted(() => {
+      whoami();
+
+      console.log("got parmas from previous page for store pinia");
+      console.log(store.getOrderDetail);
+
+      // peopleform.value = [];
+      // contactform.value = {
+      //   name: "",
+      //   email: "",
+      //   phone: "",
+      //   address: "",
+      // };
+      // if (
+      //   route.params.productName == null ||
+      //   route.params.productName.length < 1 ||
+      //   route.params.productSkuId == null ||
+      //   route.params.productSkuId.length < 1 ||
+      //   route.params.packageCategory == null ||
+      //   route.params.packageCategory.length < 1
+      // ) {
+      //   gp.$goPage("/");
+      //   return;
+      // }
+      // productName.value = route.params.productName;
+      // packageCategory.value = route.params.packageCategory;
+      // selectedDate.value = route.params.selectedDate;
+      // totalPrice.value = route.params.totalPrice;
+      // productSkuId.value = route.params.productSkuId;
+      // adultCount.value =
+      //   route.params.adultCount == null ? 0 : route.params.adultCount;
+      // childCount.value =
+      //   route.params.childCount == null ? 0 : route.params.childCount;
+      // infantCount.value =
+      //   route.params.infantCount == null ? 0 : route.params.infantCount;
+      // buyCount.value =
+      //   route.params.buyCount == null ? 0 : route.params.buyCount;
+
+      // productTypeId.value = route.params.productTypeId;
+      // for (
+      //   let index = 0;
+      //   index <
+      //   parseInt(adultCount.value) +
+      //     parseInt(childCount.value) +
+      //     parseInt(infantCount.value);
+      //   index++
+      // ) {
+      //   peopleform.value.push({
+      //     surName: "",
+      //     givenName: "",
+      //     birthday: "",
+      //     gender: "",
+      //     nationality: "",
+      //     passportNo: "",
+      //     passportExpireDate: "",
+      //   });
+      // }
+    });
+  },
+};
+</script>

hichina-main-front-mobile-first/src/pages/ProductDetailPage.vue

@@ -197,7 +197,13 @@
               class="col-5 col-sm-2 flex"
               style="align-items: center; height: 50px"
             >
-              <q-btn class="glossy" rounded color="blue-6" label="Book Now" />
+              <q-btn
+                class="glossy"
+                @click="collectConfigAndGoPage()"
+                rounded
+                color="blue-6"
+                label="Book Now"
+              />
             </div>
           </div>
         </div>
@@ -217,18 +223,28 @@
 </template>
 
 <script>
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
 import { api } from "boot/axios";
 import { useSeoMeta } from "unhead";
-import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
 import Datepicker from "vuejs3-datepicker";
+import { bookParamStore } from "stores/bookParamStore";
 export default {
   name: "ProductDetailPage",
   components: {
     Datepicker,
   },
   setup() {
+    const store = bookParamStore();
+
+    const instance = getCurrentInstance();
+    const app = instance.appContext.app;
+    const gp = app.config.globalProperties;
+    const $q = useQuasar();
+
     const route = useRoute();
+    const router = useRouter();
     const buyCount = ref(1);
     const adultCount = ref(1);
     const childCount = ref(0);
@@ -253,6 +269,7 @@ export default {
     const selectedDate = ref(new Date());
     const maxNum = ref(1000000);
     const renderComponent = ref(true);
+    const totalPrice = ref(0);
 
     const TYPEOFPACKAGEPROP = "11cd8b32-c4f6-47db-8b8a-486c992bf43b";
     const LOCALSPECIALTYPRODUCTTYPE = "fd264cab-ee8d-4571-a477-03d7e7c090b3";
@@ -280,6 +297,65 @@ export default {
       renderComponent.value = true;
     };
 
+    function getTotalPrice() {
+      if (
+        productTypeId.value != LOCALSPECIALTYPRODUCTTYPE &&
+        productTypeId.value != HOTELPRODUCTTYPE
+      ) {
+        totalPrice.value =
+          adultCount.value * adultUnitPrice.value +
+          childCount.value * childUnitPrice.value +
+          infantCount.value * infantUnitPrice.value;
+      } else {
+        totalPrice.value = generalPrice.value * buyCount.value;
+      }
+      console.log("this is the total price:");
+      console.log(totalPrice.value);
+      return totalPrice.value;
+    }
+
+    function collectConfigAndGoPage() {
+      if (singleMatchedSku.value == null) {
+        gp.$generalNotify($q, false, "Not all required config are selected");
+        return;
+      }
+      var params = {};
+      params.productTypeId = productTypeId.value;
+      params.productName = productName.value;
+      params.productSkuId =
+        singleMatchedSku.value["hichinaProductBasicDTO"]["skuId"];
+      params.productSkuGroupId = route.params.skuGroupId;
+      params.packageCategory = activeCategory.value;
+      params.productTypeName = productTypeName.value;
+      params.profileImageUrl = extractAttributeValueFromProductPropertyBag(
+        singleMatchedSku.value,
+        PRODUCTIMAGEURLPROP
+      );
+      params.totalPrice = getTotalPrice();
+      //params.totalPrice = 1;
+      if (productTypeId.value != LOCALSPECIALTYPRODUCTTYPE) {
+        params.adultCount = adultCount.value;
+        params.childCount = childCount.value;
+        params.infantCount = infantCount.value;
+      }
+      if (LOCALSPECIALTYPRODUCTTYPE != productTypeId.value) {
+        params.selectedDate = selectedDate.value.toISOString().split("T")[0];
+      }
+      if (
+        productTypeId.value == LOCALSPECIALTYPRODUCTTYPE ||
+        productTypeId.value == HOTELPRODUCTTYPE
+      ) {
+        params.buyCount = buyCount.value;
+      }
+
+      console.log("params collected from product");
+      console.log(params);
+      // gp.$goPageWithParams(val, params);
+      // router.push({ name: val, state: params });
+      gp.$goPage("/book");
+      store.setOrderDetail(params);
+    }
+
     function handleSelectDate(dt) {
       console.log("dt");
       console.log(dt);
@@ -640,6 +716,7 @@ export default {
       infantUnitPrice,
       generalPrice,
       buyCount,
+      collectConfigAndGoPage,
     };
   },
 };

hichina-main-front-mobile-first/src/router/routes.js

@@ -88,6 +88,12 @@ const routes = [
     component: () => import("layouts/MainLayout.vue"),
     children: [{ path: "", component: () => import("pages/BlogEditPage.vue") }],
   },
+  {
+    name: "book",
+    path: "/book",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [{ path: "", component: () => import("pages/BookPage.vue") }],
+  },
   {
     path: "/regsuccess",
     component: () => import("layouts/MainLayout.vue"),

hichina-main-front-mobile-first/src/stores/bookParamStore.js

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+export const bookParamStore = defineStore("bookParam", {
+  state: () => ({
+    orderDetail: {},
+  }),
+
+  getters: {
+    getOrderDetail: (state) => state.orderDetail,
+  },
+
+  actions: {
+    setOrderDetail(val) {
+      this.orderDetail = val;
+    },
+  },
+});

hichina-main-front-mobile-first/src/stores/index.js

@@ -0,0 +1,20 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default store((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

hichina-main-front-mobile-first/src/stores/store-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    store: true;
+  }
+}

hichina-main-front-mobile-first/yarn.lock

@@ -4797,6 +4797,14 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pinia@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
+  integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -6022,6 +6030,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vue-demi@>=0.14.5:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
+  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
+
 vue-eslint-parser@^9.3.0:
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.3.0.tgz#775a974a0603c9a73d85fed8958ed9e814a4a816"