From bb716c11fe8ef69e9fcd6d49d356c61a6ce75b00 Mon Sep 17 00:00:00 2001
From: Qin Guan <qinguan20040914@gmail.com>
Date: Sat, 23 Sep 2023 23:17:52 +0800
Subject: [PATCH] feat: tabbar and profile

---
 components/app/events/page.vue   | 117 ++++---------------------------
 components/app/home/page.vue     |  70 +++++++++++++-----
 components/app/profile/page.vue  |  79 +++++++++++++++++++++
 components/app/services/page.vue |  16 +++++
 4 files changed, 158 insertions(+), 124 deletions(-)
 create mode 100644 components/app/profile/page.vue
 create mode 100644 components/app/services/page.vue

diff --git a/components/app/events/page.vue b/components/app/events/page.vue
index 93543b0..46f9df0 100644
--- a/components/app/events/page.vue
+++ b/components/app/events/page.vue
@@ -1,109 +1,16 @@
-<script>
-import {
-  f7AccordionContent,
-  f7Block,
-  f7BlockTitle,
-  f7List,
-  f7ListItem,
-  f7Navbar,
-  f7Page,
-} from 'framework7-vue'
-
-export default {
-  components: {
-    F7Navbar: f7Navbar,
-    F7Page: f7Page,
-    F7BlockTitle: f7BlockTitle,
-    F7Block: f7Block,
-    F7AccordionContent: f7AccordionContent,
-    F7List: f7List,
-    F7ListItem: f7ListItem,
-  },
-}
+<script setup lang="ts">
+import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
 </script>
 
 <template>
-  <F7Page>
-    <F7Navbar title="Accordion" back-link="Back" />
-
-    <F7BlockTitle>List View Accordion</F7BlockTitle>
-    <F7List strong outline-ios dividers-ios inset-md accordion-list>
-      <F7ListItem accordion-item title="Lorem Ipsum">
-        <F7AccordionContent>
-          <F7Block>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
-              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
-              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
-              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
-              ipsum.
-            </p>
-          </F7Block>
-        </F7AccordionContent>
-      </F7ListItem>
-      <F7ListItem accordion-item title="Nested List">
-        <F7AccordionContent>
-          <F7List>
-            <F7ListItem title="Item 1" />
-            <F7ListItem title="Item 2" />
-            <F7ListItem title="Item 3" />
-            <F7ListItem title="Item 4" />
-          </F7List>
-        </F7AccordionContent>
-      </F7ListItem>
-      <F7ListItem accordion-item title="Integer semper">
-        <F7AccordionContent>
-          <F7Block>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
-              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
-              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
-              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
-              ipsum.
-            </p>
-          </F7Block>
-        </F7AccordionContent>
-      </F7ListItem>
-    </F7List>
-
-    <F7BlockTitle>Opposite Side</F7BlockTitle>
-    <F7List strong outline-ios dividers-ios inset-md accordion-list accordion-opposite>
-      <F7ListItem accordion-item title="Lorem Ipsum">
-        <F7AccordionContent>
-          <F7Block>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
-              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
-              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
-              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
-              ipsum.
-            </p>
-          </F7Block>
-        </F7AccordionContent>
-      </F7ListItem>
-      <F7ListItem accordion-item title="Nested List">
-        <F7AccordionContent>
-          <F7List>
-            <F7ListItem title="Item 1" />
-            <F7ListItem title="Item 2" />
-            <F7ListItem title="Item 3" />
-            <F7ListItem title="Item 4" />
-          </F7List>
-        </F7AccordionContent>
-      </F7ListItem>
-      <F7ListItem accordion-item title="Integer semper">
-        <F7AccordionContent>
-          <F7Block>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
-              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
-              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
-              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
-              ipsum.
-            </p>
-          </F7Block>
-        </F7AccordionContent>
-      </F7ListItem>
-    </F7List>
-  </F7Page>
+  <f7Page>
+    <f7Navbar large transparent :sliding="false">
+      <f7NavTitle sliding>
+        Events & Bookings
+      </f7NavTitle>
+      <f7NavTitleLarge>
+        Events & Bookings
+      </f7NavTitleLarge>
+    </f7Navbar>
+  </f7Page>
 </template>
diff --git a/components/app/home/page.vue b/components/app/home/page.vue
index b5d8888..f4e829c 100644
--- a/components/app/home/page.vue
+++ b/components/app/home/page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { f7, f7BlockTitle, f7Link, f7List, f7ListItem, f7NavLeft, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Searchbar, f7SkeletonBlock, f7SkeletonText } from 'framework7-vue'
+import { f7Link, f7List, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Tab, f7Tabs, f7Toolbar } from 'framework7-vue'
 import type { Router } from 'framework7/types'
 import { useIsCurrentUserLoaded } from 'vuefire'
 
@@ -24,23 +24,55 @@ watch([authLoaded, auth], (values) => {
 <template>
   <f7Page>
     <CommonLoginScreen v-model:opened="state.showLoginScreen" />
-    <f7Navbar large transparent :sliding="false">
-      <f7NavTitle sliding>
-        SSTAA
-      </f7NavTitle>
-      <f7NavTitleLarge>
-        SSTAA
-      </f7NavTitleLarge>
-    </f7Navbar>
-
-    <f7List inset class="space-y-8">
-      <div>
-        <AppHomeMembershipCard />
-      </div>
-
-      <div>
-        <AppHomeNews />
-      </div>
-    </f7List>
+
+    <f7Toolbar position="bottom" tabbar icons>
+      <f7Link
+        tab-link="#home"
+        tab-link-active
+        text="Home"
+        icon-md="material:home"
+      />
+      <f7Link
+        tab-link="#services"
+        text="Services"
+        icon-md="material:sparkle"
+      />
+      <f7Link
+        tab-link="#events"
+        text="events"
+        icon-md="material:events"
+      />
+      <f7Link
+        tab-link="#profile"
+        text="Profile"
+        icon-md="material:account_circle"
+      />
+    </f7Toolbar>
+
+    <f7Tabs>
+      <f7Tab id="home" tab-active>
+        <f7List inset class="space-y-8">
+          <div>
+            <AppHomeMembershipCard />
+          </div>
+
+          <div>
+            <AppHomeNews />
+          </div>
+        </f7List>
+      </f7Tab>
+
+      <f7Tab id="services">
+        <AppServicesPage />
+      </f7Tab>
+
+      <f7Tab id="events">
+        <AppEventsPage />
+      </f7Tab>
+
+      <f7Tab id="profile">
+        <AppProfilePage />
+      </f7Tab>
+    </f7Tabs>
   </f7Page>
 </template>
diff --git a/components/app/profile/page.vue b/components/app/profile/page.vue
new file mode 100644
index 0000000..a51c759
--- /dev/null
+++ b/components/app/profile/page.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { f7Block, f7BlockTitle, f7Link, f7List, f7ListButton, f7ListInput, f7ListItem, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Popup, f7View } from 'framework7-vue'
+import { devDependencies } from '~/package.json'
+
+const { data: user } = useUser()
+const graduationYear = computed(() => {
+  return `Class of ${user.value?.graduationYear}`
+})
+
+const dependencies = Object.keys(devDependencies)
+</script>
+
+<template>
+  <f7Page>
+    <f7Navbar large transparent :sliding="false">
+      <f7NavTitle sliding>
+        Profile
+      </f7NavTitle>
+      <f7NavTitleLarge>
+        Profile
+      </f7NavTitleLarge>
+    </f7Navbar>
+
+    <f7List v-if="user">
+      <f7ListInput label="Name" type="text" placeholder="Your name" disabled :value="user.name" />
+      <f7ListInput label="Email" type="Email" placeholder="Your email" disabled :value="user.email" />
+      <f7ListInput label="Graduation year" placeholder="Your graduation year" disabled :value="graduationYear" />
+      <f7ListItem>
+        <span class="opacity-80 text-xs">
+          To update this information, contact us at <a href="mailto:app@sstaa.org">app@sstaa.org</a>
+        </span>
+      </f7ListItem>
+    </f7List>
+
+    <f7List inset strong>
+      <f7ListButton popup-open="#acknowledgements">
+        Acknowledgements
+      </f7ListButton>
+    </f7List>
+
+    <f7Popup id="acknowledgements" push>
+      <f7View>
+        <f7Page>
+          <f7Navbar title="Acknowledgements" large transparent>
+            <f7NavRight>
+              <f7Link popup-close>
+                Close
+              </f7Link>
+            </f7NavRight>
+          </f7Navbar>
+
+          <f7BlockTitle>Open source</f7BlockTitle>
+          <f7List inset strong>
+            <f7ListItem
+              target="_blank" link="https://github.com/sstalumniassociation/web" external
+              title="View on GitHub"
+            />
+          </f7List>
+
+          <f7BlockTitle>Development team</f7BlockTitle>
+          <f7List inset strong>
+            <f7ListItem target="_blank" link="https://github.com/qin-guan" external title="Qin Guan" />
+            <f7ListItem target="_blank" link="https://github.com/jiachenyee" external title="Jia Chen" />
+            <f7ListItem target="_blank" link="https://github.com/arashnrim" external title="Arash" />
+            <f7ListItem target="_blank" link="https://github.com/Ethan-Chew" external title="Ethan" />
+          </f7List>
+
+          <f7BlockTitle>Packages & libraries</f7BlockTitle>
+          <f7List inset strong>
+            <f7ListItem
+              v-for="dependency in dependencies" :key="dependency" target="_blank"
+              :link="`https://npmjs.com/package/${dependency}`" external :title="dependency"
+            />
+          </f7List>
+        </f7Page>
+      </f7View>
+    </f7Popup>
+  </f7Page>
+</template>
diff --git a/components/app/services/page.vue b/components/app/services/page.vue
new file mode 100644
index 0000000..827e5a0
--- /dev/null
+++ b/components/app/services/page.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
+</script>
+
+<template>
+  <f7Page>
+    <f7Navbar large transparent :sliding="false">
+      <f7NavTitle sliding>
+        Alumni Services
+      </f7NavTitle>
+      <f7NavTitleLarge>
+        Alumni Services
+      </f7NavTitleLarge>
+    </f7Navbar>
+  </f7Page>
+</template>