feat(ledensysteem): add groups and member pages

.eslintrc.json

@@ -1,6 +1,12 @@
 {
   "root": true,
-  "ignorePatterns": ["dist/**", ".output/**", ".nuxt/**", "dockerdata/**"],
+  "ignorePatterns": [
+    "dist/**",
+    ".output/**",
+    ".nuxt/**",
+    "dockerdata/**",
+    "node_modules/**"
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:json/recommended",
@@ -37,6 +43,7 @@
           "*~/server/logic",
           "*~/server/prisma",
           "*~/server/sync",
+          "*~/server/types",
           "*~/server/validation",
           "*~/server/utils",
           "*~/utils/*"

components/Breadcrumbs.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="text-xl breadcrumbs">
+    <ul class="text-primary font-bold">
+      <li v-for="crumb in crumbs" :key="crumb.name">
+        <NuxtLink :to="crumb.link">{{ crumb.name }}</NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  crumbs: {
+    name: string;
+    link: string;
+  }[];
+}>();
+</script>

components/Input/Select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-control mb-4">
+  <div class="form-control">
     <label v-if="title" class="label">
       <span class="label-text text-base font-bold">{{ title }}</span>
       <span v-if="required" class="label-text-alt text-error text-lg">*</span>

components/Input/Text.vue

@@ -5,7 +5,7 @@
       <span v-if="required" class="label-text-alt text-error text-lg">*</span>
     </label>
     <input
-      type="text"
+      :type="type"
       class="input"
       :class="classes"
       :title="title"
@@ -26,9 +26,10 @@
 <script lang="ts" setup>
 interface Props {
   modelValue?: string;
+  type: "text" | "search" | "date";
   title?: string;
   error?: string;
-  placeholder: string;
+  placeholder?: string;
   size?: "xs" | "sm" | "md" | "lg";
   color?:
     | "primary"

components/NavBar/NavBar.vue

@@ -59,28 +59,32 @@ const menuItems: MenuItem[] = [
       },
     ],
   },
-  { name: "Foto's", icon: "material-symbols:camera", target: "/foto" },
+  {
+    name: "Foto's",
+    icon: "material-symbols:camera",
+    target: "https://proteus-eretes.nl/fotos",
+  },
   {
     name: "Leden",
     icon: "material-symbols:person",
-    target: "/lid",
+    target: "/leden",
     children: [
       {
         name: "Groepen",
         icon: "material-symbols:group",
-        target: "/groups",
+        target: "/groepen",
       },
       {
         name: "Lebberlijst",
         icon: "ph:graph",
-        target: "/lebberlijst",
+        target: "https://proteus-eretes.nl/lebberlijst",
       },
     ],
   },
   {
     name: "Evenementen",
     icon: "material-symbols:calendar-today",
-    target: "/event",
+    target: "https://proteus-eretes.nl/eetlijst",
   },
 ];
 </script>

components/NavBar/ProfileDropdown.vue

@@ -14,7 +14,18 @@
       class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
     >
       <li>
-        <NuxtLink to="/me" title="Mijn Profiel">Profiel</NuxtLink>
+        <!-- TODO: change link to logged in member's profile -->
+        <NuxtLink to="/leden" title="Mijn Profiel">Profiel</NuxtLink>
+      </li>
+      <li>
+        <!-- TODO: change link to logged in member's memberships -->
+        <NuxtLink to="/groepen" title="Lidmaatschappen"
+          >Lidmaatschappen
+        </NuxtLink>
+      </li>
+      <li>
+        <!-- TODO: change link to logged in member's settings -->
+        <NuxtLink to="/leden" title="Instellingen">Instellingen</NuxtLink>
       </li>
       <li><a @click.prevent="() => signOut()">Log uit</a></li>
     </ul>

components/NavBar/Search.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="form-control max-lg:hidden mx-4">
-    <InputText placeholder="Proteus Zoek!" bordered />
+    <InputText type="text" placeholder="Proteus Zoek!" bordered />
   </div>
-  <Button title="Seearch" ghost shape="circle" class="lg:hidden">
+  <Button title="Search" ghost shape="circle" class="lg:hidden">
     <Icon name="material-symbols:search" size="28px" />
   </Button>
 </template>

components/Page/Material/TypesCreate.vue

@@ -4,6 +4,7 @@
       <Alert type="error" :content="error?.global" />
       <InputText
         v-model="name"
+        type="text"
         title="Naam Materiaaltype"
         placeholder="Helicopter"
         :error="error?.name"

components/TwoColumn.vue

@@ -8,7 +8,24 @@
         {{ title }}
       </div>
       <div class="collapse-content">
-        <slot name="content" />
+        <ul class="menu">
+          <li v-for="item in items" :key="item.title" :class="classes(item.to)">
+            <span v-if="!item.to">{{ item.title }}</span>
+            <NuxtLink v-else :to="item.to">
+              <Icon
+                :name="item.icon || 'ic:baseline-question-mark'"
+                size="20px"
+              />
+              {{ item.title }}
+              <span
+                v-if="item.badge"
+                class="indicator-item indicator-middle badge badge-secondary"
+              >
+                {{ item.badge }}
+              </span>
+            </NuxtLink>
+          </li>
+        </ul>
       </div>
     </div>
     <div class="divider divider-horizontal max-lg:hidden"></div>
@@ -19,7 +36,20 @@
 </template>
 
 <script lang="ts" setup>
+export interface MenuItem {
+  icon?: string;
+  title: string;
+  to?: string;
+  badge?: string;
+}
+
 defineProps<{
   title: string;
+  items: MenuItem[];
 }>();
+
+const classes = (route?: string): string => {
+  if (!route) return "menu-title pt-5";
+  return useRoute().path.endsWith(route) ? "bordered" : "";
+};
 </script>

composables/useBreadcrumbs.ts

@@ -0,0 +1,59 @@
+import { Group, Member } from "~/server/types";
+
+export const useBreadcrumbs = () => {
+  const route = computed(() => useRoute().path.slice(1).split("/"));
+
+  const breadCrumbs = computed(() => {
+    const crumbs = [];
+    let link = "";
+
+    for (const crumb of route.value) {
+      crumbs.push({
+        name: formatCrumb(crumb),
+        link: (link = link + "/" + crumb),
+      });
+    }
+    return crumbs;
+  });
+
+  const groupCrumbs = (group: Group) =>
+    computed(() => {
+      const crumbs = [];
+      let link = "";
+
+      for (const crumb of route.value) {
+        link = link + "/" + crumb;
+        const name = crumb === group.id ? group.name : formatCrumb(crumb);
+        crumbs.push({ name, link });
+      }
+      return crumbs;
+    });
+
+  const memberCrumbs = (member: Member) =>
+    computed(() => {
+      const crumbs = [];
+      let link = "";
+
+      for (const crumb of route.value) {
+        link = link + "/" + crumb;
+        const name =
+          crumb === member.id
+            ? `${member.firstName} ${member.insertion} ${member.lastName}`
+            : formatCrumb(crumb);
+        crumbs.push({ name, link });
+      }
+      return crumbs;
+    });
+
+  return {
+    breadCrumbs,
+    memberCrumbs,
+    groupCrumbs,
+  };
+};
+
+const formatCrumb = (crumb: string) => {
+  let parts = crumb.split("-");
+  parts = parts.map((p) => p.charAt(0).toUpperCase() + p.slice(1));
+  return parts.join(" ");
+};

composables/useDateFormatter.ts

@@ -0,0 +1,31 @@
+export const useDateFormatter = () => {
+  const dateToString = (date?: Date) =>
+    computed<string>(() => {
+      if (!date) return "-";
+      const day = date.getDate();
+      const month = date.getMonth() + 1;
+      const year = date.getFullYear();
+      return `${day}-${month}-${year}`;
+    });
+
+  const ISOToString = (date?: string) =>
+    computed<string>(() => {
+      if (!date) return "-";
+      const day = date.slice(8, 10);
+      const month = date.slice(5, 7);
+      const year = date.slice(0, 4);
+      return `${day}-${month}-${year}`;
+    });
+
+  const ISOToDateInputString = (date?: string) =>
+    computed<string>(() => {
+      if (!date) return "";
+      return date.slice(0, 10);
+    });
+
+  return {
+    dateToString,
+    ISOToString,
+    ISOToDateInputString,
+  };
+};

middleware/validateRouteUUID.global.ts

@@ -0,0 +1,13 @@
+import validator from "validator";
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (!to.params.id) {
+    return true;
+  }
+
+  if (typeof to.params.id !== "string") {
+    return false;
+  }
+
+  return validator.isUUID(to.params.id);
+});

package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "^11.0.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
-    "@prisma/client": "^4.6.1",
+    "@prisma/client": "^4.7.1",
     "@types/node": "^18.11.9",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
@@ -39,12 +39,12 @@
     "nuxt-icon": "^0.1.7",
     "postcss-custom-properties": "^13.0.0",
     "prettier": "^2.7.1",
-    "prisma": "^4.6.1",
+    "prisma": "^4.7.1",
     "typescript": "^4.8.4",
     "vue-eslint-parser": "^9.1.0"
   },
   "dependencies": {
-    "@sidebase/nuxt-auth": "^0.3.0-alpha.1",
+    "@sidebase/nuxt-auth": "^0.3.0",
     "daisyui": "^2.38.0",
     "superstruct": "^1.0.3",
     "validator": "^13.7.0"

pages/groepen.vue

@@ -0,0 +1,50 @@
+<template>
+  <TwoColumn title="Groepen" :items="menuItems">
+    <NuxtPage />
+  </TwoColumn>
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+
+const menuItems = computed(() => {
+  return [...standard, ...(route.params.id ? selected.value : [])];
+});
+
+const standard = [
+  { icon: "ic:search", title: "Zoeken", to: "/groepen" },
+  { icon: "ic:group", title: "Mijn Groepen", to: "/groepen/mijn-groepen" },
+  { icon: "ic:add", title: "Groep Maken", to: "/groepen/nieuw" },
+];
+
+const selected = computed(() => [
+  {
+    title: "Groep",
+  },
+  {
+    icon: "ic:baseline-groups",
+    title: "Overzicht",
+    to: `/groepen/${route.params.id}`,
+  },
+  {
+    icon: "ic:baseline-person-add-alt-1",
+    title: "Lid toevoegen",
+    to: `/groepen/${route.params.id}/toevoegen`,
+  },
+  {
+    icon: "ic:baseline-person-remove",
+    title: "Uitschrijvingen",
+    to: `/groepen/${route.params.id}/uitschrijvingen`,
+  },
+  {
+    icon: "ic:baseline-manage-accounts",
+    title: "Leden Beheren",
+    to: `/groepen/${route.params.id}/leden`,
+  },
+  {
+    icon: "ic:baseline-settings",
+    title: "Instellingen",
+    to: `/groepen/${route.params.id}/instellingen`,
+  },
+]);
+</script>

pages/groepen/[id].vue

@@ -0,0 +1,14 @@
+<template>
+  <Breadcrumbs :crumbs="groupCrumbs(group).value" />
+  <NuxtPage :group="group" />
+</template>
+
+<script lang="ts" setup>
+import { Group } from "~/server/types";
+
+const { groupCrumbs } = useBreadcrumbs();
+
+const { data: group } = await useFetch<Group>(
+  "/api/groups/" + useRoute().params.id,
+);
+</script>