user profile

src/views/ProfilePage.vue

@@ -21,9 +21,22 @@
             <ion-toggle v-model="newsNoti">Receive News Update</ion-toggle>
           </ion-item>
           <ion-list-header>
-            <ion-label>Martial Arts, I Love</ion-label>
+            <ion-label>Select Courses You like</ion-label>
           </ion-list-header>
+          <ion-item>
+          <ion-select aria-label="Fruit" placeholder="Select all fruits that apply" 
+              :compareWith="compareWith" @ionChange="handleChange($event)">
+            <ion-select-option :value="c" v-for="c in list_courses">{{ c.name }}</ion-select-option>
+          </ion-select>
+          </ion-item>
         </ion-list>
+        <div class='ion-padding'>
+          <h1>I love ...</h1>
+          <ion-chip v-for="s in selecteds">
+            <ion-label>{{ s }}</ion-label>
+            <ion-icon :icon="close" @click="removeItem(s)"></ion-icon>
+          </ion-chip>
+        </div>
       <ion-button @click='fbLogout' expand='full'>Logout</ion-button>
       </template>
       <template v-else>
@@ -54,13 +67,15 @@
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonRow, IonCol, IonGrid, IonToggle, IonLabel, IonChip, IonIcon, IonSelect, IonSelectOption } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import LoginForm from '@/components/LoginForm.vue';
 import { defineComponent, onMounted } from 'vue';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
-import { facebookLogin, setUserToken, logout, clearPref, BASE_URL } from '@/composable/settings';
+import { facebookLogin, setUserToken, logout, clearPref, BASE_URL, listCourses } from '@/composable/settings';
 import { InAppBrowser } from '@capgo/inappbrowser'
+import { close, closeCircle, pin } from 'ionicons/icons';
+
 
 
 
@@ -86,7 +101,9 @@ const isLogin = ref(false)
 const liveNoti = ref(true)
 const favCourseNoti = ref(true)
 const newsNoti = ref(true)
+const list_courses = ref([])
 
+const selecteds = ref([])
 
 const openReset = async () => {
   console.log("open Reset")
@@ -94,7 +111,12 @@ const openReset = async () => {
   console.info("bw ", browser)
   InAppBrowser.addListener("urlChangeEvent", urlChange)
 }
-
+const removeItem = (s) => {
+  let temp = selecteds.value 
+  temp = temp.filter( e => e !== s)
+  console.log(temp)
+  selecteds.value = temp
+}
 const urlChange = (event) => {
   console.info("url change ", event)
   if(event.url.includes("/accounts/password_reset/done/")) {
@@ -153,6 +175,8 @@ onIonViewWillEnter(async () => {
   }else {
     isLogin.value = false
   }
+
+  list_courses.value = await listCourses()
   ggCheckLogin()
 
 })
@@ -191,4 +215,12 @@ const userLogin = async (data) => {
     isLogin.value = true
   }
 }
+
+const compareWith = (o1, o2) =>  {
+  return o1 && o2 ? o1.id === o2.id : o1 === o2;
+}
+const handleChange = (ev) =>{
+  console.log('Current value:', ev.detail.value);
+  selecteds.value.push(ev.detail.value.name)
+}
 </script>