product detail page

package-lock.json

         "typescript": "^4.9.3",
         "vite": "^4.1.0",
         "vitest": "^0.29.2",
+        "vue-showdown": "^4.0.0",
         "vue-tsc": "^1.0.24"
       }
     },
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "node_modules/@types/showdown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/showdown/-/showdown-2.0.0.tgz",
+      "integrity": "sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==",
+      "dev": true
+    },
     "node_modules/@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
         "node": ">=8"
       }
     },
+    "node_modules/showdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/showdown/-/showdown-2.1.0.tgz",
+      "integrity": "sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^9.0.0"
+      },
+      "bin": {
+        "showdown": "bin/showdown.js"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://www.paypal.me/tiviesantos"
+      }
+    },
+    "node_modules/showdown/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-showdown": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vue-showdown/-/vue-showdown-4.0.0.tgz",
+      "integrity": "sha512-ZDO2IVJ4UUtVbl1IQAQzG0xq8lgnwolSqYOLyBkTqT2L/oAr00yb1lpsRIPruaIqsxHqGjAuijY+K3pGJ2z0QQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/showdown": "^2.0.0",
+        "showdown": "^2.1.0",
+        "vue": "^3.2.45"
+      },
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
       "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==",
       "dev": true
     },
+    "@types/showdown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/showdown/-/showdown-2.0.0.tgz",
+      "integrity": "sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==",
+      "dev": true
+    },
     "@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "showdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/showdown/-/showdown-2.1.0.tgz",
+      "integrity": "sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^9.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "9.5.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+          "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+          "dev": true
+        }
+      }
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vue-showdown": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vue-showdown/-/vue-showdown-4.0.0.tgz",
+      "integrity": "sha512-ZDO2IVJ4UUtVbl1IQAQzG0xq8lgnwolSqYOLyBkTqT2L/oAr00yb1lpsRIPruaIqsxHqGjAuijY+K3pGJ2z0QQ==",
+      "dev": true,
+      "requires": {
+        "@types/showdown": "^2.0.0",
+        "showdown": "^2.1.0",
+        "vue": "^3.2.45"
+      }
+    },
     "vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",

package.json

     "typescript": "^4.9.3",
     "vite": "^4.1.0",
     "vitest": "^0.29.2",
+    "vue-showdown": "^4.0.0",
     "vue-tsc": "^1.0.24"
   },
   "description": "An Ionic project"

src/components/ProductDetail.vue

     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <ion-item>
-      <ion-label position="stacked">Your name</ion-label>
-      {{ name }}
-      <ion-input v-model="name" placeholder="Your name"></ion-input>
-    </ion-item>
+    <!--<ion-item>-->
+      <!--<ion-label position="stacked">Your name</ion-label>-->
+      <!--{{ name }}-->
+
+      <!--<strong>{{ pid }}</strong>-->
+      <!--<ion-input v-model="name" placeholder="Your name" label='xx'></ion-input>-->
+    <!--</ion-item>-->
+    <template v-if="product">
+      <ion-img :src="product.cover_image_str"></ion-img>
+      <ion-text>
+        <h1>{{ product.name }}</h1>
+        <vue-showdown :markdown="product.description" />
+ 
+      </ion-text>
+    </template>
   </ion-content>
 </template>
 
 <script setup lang="ts">
-  import {
-    IonContent,
-    IonHeader,
-    IonTitle,
-    IonToolbar,
-    IonButtons,
-    IonButton,
-    IonItem,
-    IonLabel,
-    IonInput,
-    modalController,
-    onIonViewWillEnter, 
-  } from '@ionic/vue';
-  import { ref, onMounted } from 'vue'
+import {
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  IonButtons,
+  IonButton,
+  IonItem,
+  IonLabel,
+  IonInput,
+  IonImg,
+  IonText,
+  modalController,
+  onIonViewWillEnter, 
+} from '@ionic/vue';
 
-const props = defineProps(['pid'])
+import { VueShowdown } from 'vue-showdown';
+import { ref, onMounted } from 'vue'
 
+import axios from 'axios';
+import { API_URL } from '@/api_config';
+
+const props = defineProps(['pid'])
+let pid = ref(0)
+let product = ref(null)
 //console.log(pid)
 
 let name = ref("xxx")
 function confirm(){
   return modalController.dismiss(name.value, 'confirm');
 }
-onMounted(() => {
+onMounted(async () => {
 //onIonViewWillEnter(() => {
   console.log("on mounted")
   console.log(props.pid)
+  const res = await axios.get(API_URL + `fn_products/${props.pid}/?format=json`)
+  product.value = res.data
+  pid.value  = props.pid
 })
 
 </script>

src/components/TopBar.vue

+<template>
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+    <ion-buttons slot="end">
+      <ion-button>
+        <ion-icon slot="icon-only" :icon="heart"></ion-icon>
+      </ion-button>
+      <ion-button id='cartBtn'>
+        <ion-icon  :icon="cart" slot='start'></ion-icon>
+        <ion-badge slot="end" id='bd'>22</ion-badge>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</template>
+
+<script setup lang="ts">
+import {  IonToolbar, IonButton, IonItem, IonIcon, IonSearchbar, IonButtons, IonBadge } from '@ionic/vue';
+import { star, heart, cart } from 'ionicons/icons';
+</script>

src/views/ProductListPage.vue

     </ion-header>
     <ion-grid>
       <ion-row>
-        <ion-col size="6" v-for="(c, index) in prods"  :key="index" @click="openModal">
+        <ion-col size="6" v-for="(c, index) in prods"  :key="c.id" @click="openModal($event, c)">
           <ion-img :src="c.cover_image_str"></ion-img>
           <ion-label class="ion-text-wrap">
             {{ c.name }} {{ message }}
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonBackButton, IonButtons, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonRow, IonGrid, IonCol, IonImg, IonButton, IonLabel, modalController} from '@ionic/vue';
 
+
 import ProductDetail from '@/components/ProductDetail.vue'
 
 import axios from 'axios';
   console.log(prods)
 })
 
-const openModal = async () => {
+const openModal = async (event, obj) => {
+  console.log(event)
+  console.log(obj)
   const modal = await modalController.create({
     component: ProductDetail,
-    componentProps: {pid: 5}, 
+    componentProps: {pid: obj.id}, 
   });
   modal.present();
 

src/views/Tab1Page.vue

 <template>
   <ion-page>
     <ion-header>
-      <ion-toolbar>
-        <ion-searchbar></ion-searchbar>
-        <ion-buttons slot="end">
-          <ion-button>
-             <ion-icon slot="icon-only" :icon="heart"></ion-icon>
-          </ion-button>
-          <ion-button id='cartBtn'>
-             <ion-icon  :icon="cart" slot='start'></ion-icon>
-             <ion-badge slot="end" id='bd'>22</ion-badge>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
+      <top-bar></top-bar>
     </ion-header>
     <ion-content :fullscreen="true" id="content">
          <swiper>
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonItem, IonLabel, IonList, IonIcon, IonSearchbar, onIonViewDidEnter, onIonViewWillLeave, onIonViewWillEnter, IonThumbnail, IonImg, IonCard, IonCardContent, IonButtons, IonBadge } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
+import TopBar from '@/components/TopBar.vue'
 import { logoAndroid, logoApple, star, heart, cart } from 'ionicons/icons';
 import axios from 'axios';
 

src/views/Tab2Page.vue

 <template>
   <ion-page>
     <ion-header>
-      <ion-toolbar>
-        <ion-title>
-          <img src="@/assets/img/kacee-logo.png">
-        </ion-title>
-      </ion-toolbar>
+      <top-bar></top-bar>
     </ion-header>
     <ion-content class='ion-padding' :fullscreen="true">
       <ion-grid>
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonButton, IonContent, IonBackButton, IonButtons, IonRow, IonCol, IonGrid, onIonViewWillEnter, IonLabel, IonImg } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
+import TopBar from '@/components/TopBar.vue'
 import { useRouter } from 'vue-router';
 
 import { ref, onMounted } from 'vue'