feat: admin event mobile view and other fixes

components/admin/common/left-panel.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { f7, f7Block, f7BlockTitle, f7Icon, f7Link, f7List, f7ListItem, f7NavLeft, f7NavTitle, f7Navbar, f7Page, f7Panel, f7Tab, f7Tabs, f7Toolbar } from 'framework7-vue'
+import type { Router } from 'framework7/types'
+
+const props = defineProps<{
+  route: Router.Route
+}>()
+
+const selectedPath = ref(props.route.path)
+
+const menuLinks = [
+  {
+    title: 'Events',
+    icon: 'material:today',
+    path: '/admin',
+  },
+  {
+    title: 'Members',
+    icon: 'material:account_circle',
+    path: '/admin/members',
+  },
+  {
+    title: 'Settings',
+    icon: 'material:settings',
+    path: '/admin/settings',
+  },
+]
+</script>
+
+<template>
+  <f7Panel left reveal>
+    <f7Page>
+      <f7List menu-list strong-ios outline-ios>
+        <f7ListItem v-for="link in menuLinks" :key="link.path" :link="link.path" :selected="selectedPath === link.path" :title="link.title" @click="selectedPath = link.path">
+          <template #media>
+            <f7Icon :md="link.icon" />
+          </template>
+        </f7ListItem>
+      </f7List>
+    </f7Page>
+  </f7Panel>
+</template>

components/admin/home/events-table.vue

@@ -1,44 +1,70 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { f7Button, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7Chip } from 'framework7-vue'
 
 const { data: events } = useEvents()
 </script>
 
 <template>
-  <div class="data-table data-table-init card">
-    <table>
-      <thead>
-        <tr>
-          <th class="label-cell">
-            Name
-          </th>
-          <th class="label-cell">
-            Start date
-          </th>
-          <th class="label-cell">
-            End date
-          </th>
-          <th class="numeric-label">
-            Participants
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="event in events" :key="event.id">
-          <td class="label-cell">
-            {{ event.name }}
-          </td>
-          <td class="label-cell">
-            {{ dayjs(event.startDateTime).format('DD-MM-YYYY hh:mm') }}
-          </td>
-          <td class="label-cell">
-            {{ dayjs(event.endDateTime).format('DD-MM-YYYY hh:mm') }}
-          </td>
-          <td class="numeric-cell">
-            {{ event.attendees.length }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div>
+    <div class="md:hidden">
+      <f7Card v-for="event in events" :key="event.id">
+        <f7CardHeader>
+          <div class="flex flex-col items-start space-y-4">
+            <f7Chip outline :text="`0 / ${event.attendees.length}`" />
+            <span>
+              {{ event.name }}
+            </span>
+          </div>
+        </f7CardHeader>
+        <f7CardContent>
+          {{ event.description }}
+        </f7CardContent>
+        <f7CardFooter>
+          <f7Button tonal>
+            Open
+          </f7Button>
+        </f7CardFooter>
+      </f7Card>
+    </div>
+
+    <div class="hidden md:inline">
+      <div class="data-table data-table-init card">
+        <table>
+          <thead>
+            <tr>
+              <th class="label-cell">
+                Name
+              </th>
+              <th class="label-cell">
+                Start date
+              </th>
+              <th class="label-cell">
+                End date
+              </th>
+              <th class="numeric-label">
+                Participants
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="event in events" :key="event.id">
+              <td class="label-cell">
+                {{ event.name }}
+              </td>
+              <td class="label-cell">
+                {{ dayjs(event.startDateTime).format('DD-MM-YYYY hh:mm') }}
+              </td>
+              <td class="label-cell">
+                {{ dayjs(event.endDateTime).format('DD-MM-YYYY hh:mm') }}
+              </td>
+              <td class="numeric-cell">
+                {{ event.attendees.length }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>

components/admin/home/page.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { f7Block, f7BlockTitle, f7Icon, f7Link, f7List, f7ListItem, f7NavLeft, f7NavTitle, f7Navbar, f7Page, f7Panel, f7Tab, f7Tabs, f7Toolbar } from 'framework7-vue'
+import { f7Block, f7BlockTitle, f7Icon, f7Link, f7List, f7ListItem, f7NavLeft, f7NavTitle, f7Navbar, f7Page, f7Panel, f7Tab, f7Tabs, f7Toolbar, f7View } from 'framework7-vue'
 import type { Router } from 'framework7/types'
 import { useIsCurrentUserLoaded } from 'vuefire'
 
-defineProps<{
-  f7router: Router.Router
+const props = defineProps<{
+  f7route: Router.Route
 }>()
 
 const auth = useCurrentUser()
@@ -22,13 +22,16 @@ watch([authLoaded, auth], (values) => {
 })
 
 const showForbidden = computed(() => {
-  return user.value?.memberType !== 'exco'
+  if (!user.value) // Should load placeholder data
+    return false
+  return user.value.memberType !== 'exco'
 })
 </script>
 
 <template>
   <f7Page>
     <CommonLoginScreen v-model:opened="state.showLoginScreen" />
+
     <f7Navbar>
       <f7NavLeft v-if="!showForbidden">
         <f7Link panel-open="left" icon-ios="f7:menu" icon-md="material:menu" />
@@ -41,28 +44,7 @@ const showForbidden = computed(() => {
     <LazyAdminHomeForbidden v-if="showForbidden" />
 
     <template v-else>
-      <f7Panel left cover>
-        <f7List menu-list strong-ios outline-ios>
-          <f7ListItem selected link title="Events">
-            <template #media>
-              <f7Icon md="material:today" />
-            </template>
-          </f7ListItem>
-
-          <f7ListItem link title="Members">
-            <template #media>
-              <f7Icon md="material:account_circle" />
-            </template>
-          </f7ListItem>
-
-          <f7ListItem link title="Settings">
-            <template #media>
-              <f7Icon md="material:settings" />
-            </template>
-          </f7ListItem>
-        </f7list>
-      </f7Panel>
-
+      <AdminCommonLeftPanel :route="props.f7route" />
       <AdminHomeEventsTable />
     </template>
   </f7Page>

components/app/home/news.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { f7BlockTitle, f7Card, f7CardContent, f7CardHeader, f7SkeletonBlock } from 'framework7-vue'
+import { f7BlockTitle, f7Button, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7SkeletonBlock } from 'framework7-vue'
 
 const { data: news, isLoading: newsIsLoading } = useNewsArticles()
 </script>
@@ -30,6 +30,11 @@ const { data: news, isLoading: newsIsLoading } = useNewsArticles()
           <f7CardContent>
             {{ article.description }}
           </f7CardContent>
+          <f7CardFooter v-if="article.ctaTitle && article.ctaUrl">
+            <f7Button tonal :href="article.ctaUrl" external target="_blank">
+              {{ article.ctaTitle }}
+            </f7Button>
+          </f7CardFooter>
         </f7Card>
       </template>
     </div>

components/app/profile/page.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { f7Block, f7BlockTitle, f7Link, f7List, f7ListButton, f7ListInput, f7ListItem, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Popup, f7View } from 'framework7-vue'
+import { 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()

pages/admin/[...slug].vue

@@ -10,7 +10,7 @@ import Framework7 from 'framework7/lite-bundle'
 import Framework7Vue from 'framework7-vue/bundle'
 import { f7App, f7View } from 'framework7-vue'
 
-import { AdminHomePage } from '#components'
+import { AdminHomePage, AdminMembersPage, AdminSettingsPage } from '#components'
 
 Framework7.use(Framework7Vue)
 
@@ -20,6 +20,16 @@ const appRoutes = [
     path: '/admin',
     component: AdminHomePage,
   },
+  {
+    name: 'members',
+    path: '/admin/members',
+    component: AdminMembersPage,
+  },
+  {
+    name: 'settings',
+    path: '/admin/settings',
+    component: AdminSettingsPage,
+  },
 ]
 
 useSeoMeta({

pages/app/[...slug].vue

@@ -20,11 +20,6 @@ const appRoutes = [
     path: '/app',
     component: AppHomePage,
   },
-  {
-    name: 'events',
-    path: '/app/events',
-    asyncComponent: () => import('~/components/app/events/page.vue'),
-  },
 ]
 
 useSeoMeta({