Programmatically build links. Styling Changes

src/boot/appwrite.ts

@@ -10,6 +10,7 @@ client
 
 const account = new Account(client);
 const databases = new Databases(client);
+const appDatabaseId = '654ac5044d1c446feb71';
 
 export default boot(({ app, urlPath, router }) => {
   // Initialize store
@@ -19,4 +20,4 @@ export default boot(({ app, urlPath, router }) => {
   });
 });
 
-export { client, account, databases, ID };
+export { client, account, databases, ID, appDatabaseId };

src/components/BoatComponent.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>My component</div>
+</template>
+
+<script setup lang="ts">
+</script>

src/components/EssentialLink.vue

@@ -1,49 +0,0 @@
-<template>
-  <q-item
-    clickable
-    tag="a"
-    target="_blank"
-    :href="link"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
-      <q-icon :name="icon" />
-    </q-item-section>
-
-    <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
-    </q-item-section>
-  </q-item>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    link: {
-      type: String,
-      default: '#'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
-  }
-});
-</script>

src/components/LeftDrawer.vue

@@ -6,63 +6,25 @@
     :breakpoint="500"
     @update:model-value="$emit('drawer-toggle')"
   >
-    <!-- TODO: Build this programmatically -->
     <q-scroll-area class="fit">
       <q-list padding class="menu-list">
-        <q-item clickable v-ripple>
-          <q-item-section avatar>
-            <q-icon name="account_circle" />
-          </q-item-section>
+        <template v-for="link in links" :key="link.name">
+          <q-item clickable v-ripple :to="link.to">
+            <q-item-section avatar>
+              <q-icon :name="link.icon" />
+            </q-item-section>
 
-          <q-item-section> Profile </q-item-section>
-        </q-item>
-
-        <q-item active clickable v-ripple>
-          <q-item-section avatar>
-            <q-icon name="sailing" />
-          </q-item-section>
-
-          <q-item-section> Boats </q-item-section>
-        </q-item>
-
-        <q-item clickable v-ripple>
-          <q-item-section avatar>
-            <q-icon name="calendar_month" />
-          </q-item-section>
-
-          <q-item-section> Bookings </q-item-section>
-        </q-item>
-
-        <q-item clickable v-ripple>
-          <q-item-section avatar>
-            <q-icon name="verified" />
-          </q-item-section>
-
-          <q-item-section> Certifications </q-item-section>
-        </q-item>
-
-        <q-item clickable v-ripple>
-          <q-item-section avatar>
-            <q-icon name="checklist" />
-          </q-item-section>
-
-          <q-item-section> Checklists </q-item-section>
-        </q-item>
-        <q-item clickable v-ripple>
-          <q-item-section avatar>
-            <q-icon name="info_outline" />
-          </q-item-section>
-
-          <q-item-section> Reference </q-item-section>
-        </q-item>
+            <q-item-section> {{ link.name }} </q-item-section>
+          </q-item>
+        </template>
       </q-list>
     </q-scroll-area>
   </q-drawer>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
 import { defineComponent } from 'vue';
+import { links } from 'components/navlinks';
 
 defineProps(['drawer']);
 defineEmits(['drawer-toggle']);
@@ -70,6 +32,7 @@ defineEmits(['drawer-toggle']);
 defineComponent({
   name: 'LeftDrawer',
 });
+console.log(links);
 </script>
 
 <style lang="sass" scoped>

src/components/models.ts

@@ -1,8 +1,9 @@
-export interface Todo {
-  id: number;
-  content: string;
+export interface Boat {
+  name: string;
+  class: string;
+  year: number;
 }
 
-export interface Meta {
+export interface test {
   totalCount: number;
 }

src/components/navlinks.ts

@@ -0,0 +1,38 @@
+export const links = [
+  {
+    name: 'Profile',
+    to: '/profile',
+    icon: 'account_circle',
+    front_links: false,
+  },
+  {
+    name: 'Boats',
+    to: 'boat',
+    icon: 'sailing',
+    front_links: true,
+  },
+  {
+    name: 'Booking',
+    to: '/booking',
+    icon: 'calendar_month',
+    front_links: true,
+  },
+  {
+    name: 'Certifications',
+    to: '/certifications',
+    icon: 'verified',
+    front_links: true,
+  },
+  {
+    name: 'Checklists',
+    to: '/checklists',
+    icon: 'checklist',
+    front_links: true,
+  },
+  {
+    name: 'Reference',
+    to: '/reference',
+    icon: 'info_outline',
+    front_links: true,
+  },
+];

src/layouts/AdminLayout.vue

@@ -0,0 +1,97 @@
+<template>
+  <q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->
+
+    <!-- (Optional) The Header -->
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          round
+          dense
+          icon="menu"
+          @click="leftDrawer = !leftDrawer"
+        />
+        <q-toolbar-title>
+          Header
+        </q-toolbar-title>
+      </q-toolbar>
+
+      <q-tabs>
+        <q-route-tab
+          icon="map"
+          to="/your/route"
+          replace
+          label="One Tab"
+        />
+        <q-route-tab
+          icon="assignment"
+          to="/some/other/route"
+          replace
+          label="Other Tab"
+        />
+      </q-tabs>
+    </q-header>
+
+    <!-- (Optional) The Footer -->
+    <q-footer>
+      <q-tabs switch-indicator>
+        <q-route-tab
+          icon="map"
+          to="/your/route"
+          replace
+          label="One Tab"
+        />
+        <q-route-tab
+          icon="assignment"
+          to="/some/other/route"
+          replace
+          label="Other Tab"
+        />
+      </q-tabs>
+
+      <q-toolbar>
+        <q-btn
+          flat
+          round
+          dense
+          icon="menu"
+          @click="leftDrawer = !leftDrawer"
+        />
+        <q-toolbar-title>
+          Footer
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-footer>
+
+    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
+    <q-drawer
+      v-model="leftDrawer"
+      side="left"
+      bordered
+      content-class="bg-grey-2"
+    >
+      <!-- QScrollArea is optional -->
+      <q-scroll-area class="fit q-pa-sm">
+        <!-- Content here -->
+      </q-scroll-area>
+    </q-drawer>
+
+    <q-page-container>
+      <!-- This is where pages get injected -->
+      <router-view />
+    </q-page-container>
+
+  </q-layout>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  // name: 'LayoutName',
+
+  setup() {
+    const leftDrawer = ref(false)
+    return { leftDrawer }
+  }
+})
+</script>

src/pages/BoatPage.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-page padding>
+    <q-card
+      flat
+      bordered
+      class="my-card"
+      :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
+    >
+      <q-card-section>
+        <div class="row items-center no-wrap">
+          <div class="col">
+            <div class="text-h6">Our Planet</div>
+            <div class="text-subtitle2">by John Doe</div>
+          </div>
+
+          <div class="col-auto">
+            <q-btn color="grey-7" round flat icon="more_vert">
+              <q-menu cover auto-close>
+                <q-list>
+                  <q-item clickable>
+                    <q-item-section>Remove Card</q-item-section>
+                  </q-item>
+                  <q-item clickable>
+                    <q-item-section>Send Feedback</q-item-section>
+                  </q-item>
+                  <q-item clickable>
+                    <q-item-section>Share</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-section>
+        <!-- {{ lorem }} -->
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions>
+        <q-btn flat>Action 1</q-btn>
+        <q-btn flat>Action 2</q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-page>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, PropType } from 'vue';
+import { Boat } from 'src/components/models';
+
+defineComponent({
+  name: 'BoatPage',
+  props: {
+    boats: {
+      type: Array as PropType<Boat[]>,
+      default: () => [],
+    },
+  },
+});
+</script>

src/pages/IndexPage.vue

@@ -1,48 +1,28 @@
 <template>
-  <q-page class="row items-center justify-evenly">
+  <q-page class="row justify-center">
     <q-img alt="OYS Logo" src="~assets/oysqn_logo.png" fit="scale-down" />
+    <q-list class="full-width">
+      <q-item v-for="link in links" :key="link.name">
+        <q-btn
+          :icon="link.icon"
+          color="primary"
+          :size="`1.5em`"
+          :to="link.to"
+          :label="link.name"
+          rounded
+          class="full-width"
+        />
+      </q-item>
+    </q-list>
   </q-page>
 </template>
 
-<script lang="ts">
-import { Todo, Meta } from 'components/models';
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+import { links } from 'components/navlinks';
 
-export default defineComponent({
+defineComponent({
   name: 'IndexPage',
   components: {},
-  setup() {
-    const todos = ref<Todo[]>([
-      {
-        id: 1,
-        content: 'ct1',
-      },
-      {
-        id: 2,
-        content: 'ct2',
-      },
-      {
-        id: 3,
-        content: 'ct3',
-      },
-      {
-        id: 4,
-        content: 'ct4',
-      },
-      {
-        id: 5,
-        content: 'ct5',
-      },
-    ]);
-    const meta = ref<Meta>({
-      totalCount: 1200,
-    });
-    return { todos, meta };
-  },
-  data() {
-    return {
-      name: '',
-    };
-  },
 });
 </script>

src/pages/LoginPage.vue

@@ -66,7 +66,6 @@
 </style>
 
 <script setup lang="ts">
-import { AppwriteException } from 'appwrite';
 import { ref } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { useRouter } from 'vue-router';

src/pages/admin/BoatAdminPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/pages/admin/UserAdminPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/router/routes.ts

@@ -10,6 +10,27 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/IndexPage.vue'),
         name: 'index',
       },
+      {
+        path: '/boat',
+        component: () => import('pages/BoatPage.vue'),
+        name: 'boat',
+      },
+    ],
+  },
+  {
+    path: '/admin',
+    component: () => import('layouts/AdminLayout.vue'),
+    children: [
+      {
+        path: '/user',
+        component: () => import('pages/admin/UserAdminPage.vue'),
+        name: 'useradmin',
+      },
+      {
+        path: '/boat',
+        component: () => import('pages/admin/BoatAdminPage.vue'),
+        name: 'boatadmin',
+      },
     ],
   },
   {

src/stores/auth.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { ID, account, client } from 'boot/appwrite';
+import { ID, account } from 'boot/appwrite';
 import type { Models } from 'appwrite';
 import { ref } from 'vue';
 
@@ -10,7 +10,7 @@ export const useAuthStore = defineStore('auth', () => {
     try {
       currentUser.value = await account.get();
     } catch {
-      return (currentUser.value = null);
+      currentUser.value = null;
     }
   }