feat(ledensysteem): add groups and member pages

.eslintrc.json

@@ -48,6 +48,7 @@
     "vue/no-multiple-template-root": "off",
     "vue/component-api-style": ["error", ["script-setup"]],
     "vue/define-emits-declaration": ["error", "type-based"],
+    "vue/no-v-for-template-key": "off",
     "import/order": [
       "warn",
       {

.gitignore

@@ -9,3 +9,4 @@ yarn.lock
 .DS_Store
 .pnp.*
 .yarn
+.idea

components/Input/Date.vue

@@ -0,0 +1,69 @@
+<template>
+  <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>
+    </label>
+    <input
+      type="date"
+      class="input"
+      :class="classes"
+      :title="title"
+      :disabled="disabled"
+      :required="required"
+      :value="modelValue"
+      @input="
+        $emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)
+      "
+    />
+    <label v-if="error" class="label">
+      <span class="label-text-alt text-error font-bold">{{ error }}</span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  modelValue?: string;
+  title?: string;
+  error?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  color?:
+    | "primary"
+    | "secondary"
+    | "accent"
+    | "info"
+    | "success"
+    | "warning"
+    | "error";
+  bordered?: boolean;
+  ghost?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+interface Emits {
+  (eventName: "update:modelValue", value: string): void;
+}
+
+const props = defineProps<Props>();
+defineEmits<Emits>();
+
+const classes = computed(() => {
+  return {
+    "input-xs": props.size === "xs",
+    "input-sm": props.size === "sm",
+    "input-md": props.size === "md",
+    "input-lg": props.size === "lg",
+    "input-primary": props.color === "primary",
+    "input-secondary": props.color === "secondary",
+    "input-accent": props.color === "accent",
+    "input-info": props.color === "info",
+    "input-success": props.color === "success",
+    "input-warning": props.color === "warning",
+    "input-error": props.color === "error" || props.error,
+    "input-bordered": props.bordered,
+    "input-ghost": props.ghost,
+  };
+});
+</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/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/zoeken",
     children: [
       {
         name: "Groepen",
         icon: "material-symbols:group",
-        target: "/groups",
+        target: "/groepen/zoeken",
       },
       {
         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,25 @@
       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>
+        <NuxtLink
+          :to="`/leden/${data?.user?.proteusId}/profiel`"
+          title="Mijn Profiel"
+          >Profiel
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink
+          :to="`/leden/${data?.user?.proteusId}/groepen`"
+          title="Lidmaatschappen"
+          >Lidmaatschappen
+        </NuxtLink>
+      </li>
+      <li>
+        <NuxtLink
+          :to="`/leden/${data?.user?.proteusId}/instellingen`"
+          title="Instellingen"
+          >Instellingen
+        </NuxtLink>
       </li>
       <li><a @click.prevent="() => signOut()">Log uit</a></li>
     </ul>

components/SideMenu.vue

@@ -0,0 +1,35 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+export interface MenuItem {
+  icon?: string;
+  title: string;
+  to?: string;
+  badge?: string;
+}
+
+defineProps<{
+  items: MenuItem[];
+}>();
+
+const classes = (route?: string): string => {
+  if (!route) return "menu-title pt-5";
+  return useRoute().path.endsWith(route) ? "bordered" : "";
+};
+</script>

composables/useDateFormatter.ts

@@ -0,0 +1,15 @@
+export const useDateFormatter = () => {
+  return function toDateString(
+    dateTimeString: string | Date | undefined | null,
+  ): string {
+    if (!dateTimeString) return "-";
+    const date =
+      typeof dateTimeString === "string"
+        ? new Date(dateTimeString)
+        : dateTimeString;
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+    return `${day}-${month}-${year}`;
+  };
+};

middleware/validateRouteUUID.global.ts

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

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,7 +39,7 @@
     "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"
   },

pages/groepen.vue

@@ -0,0 +1,58 @@
+<template>
+  <TwoColumn title="Groepen">
+    <template #content>
+      <SideMenu :items="menuItems" />
+    </template>
+    <NuxtPage />
+  </TwoColumn>
+</template>
+
+<script lang="ts" setup>
+import { MenuItem } from "~~/components/SideMenu.vue";
+
+const numberOfUitschrijvingen = undefined;
+const route = useRoute();
+
+const menuItems = computed(() => {
+  if (!route.params.id) return standard;
+  return [...standard, ...selected.value];
+});
+
+const standard: MenuItem[] = [
+  { icon: "ic:search", title: "Zoeken", to: "/groepen/zoeken" },
+  { icon: "ic:group", title: "Mijn Groepen", to: "/groepen/mijn-groepen" },
+  { icon: "ic:add", title: "Groep Maken", to: "/groepen/nieuw" },
+];
+
+const selected = computed<MenuItem[]>(() => [
+  {
+    title: "Groep",
+  },
+  {
+    icon: "ic:baseline-groups",
+    title: "Overzicht",
+    to: `/groepen/${route.params.id}/overzicht`,
+  },
+  {
+    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`,
+    badge: numberOfUitschrijvingen,
+  },
+  {
+    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,11 @@
+<template>
+  <NuxtPage :group="group" />
+</template>
+
+<script lang="ts" setup>
+const { data: group } = await useFetch<
+  Awaited<
+    ReturnType<typeof import("~/server/api/groups/[id]/index.get").default>
+  >
+>("/api/groups/" + useRoute().params.id);
+</script>

pages/groepen/[id]/instellingen.vue

@@ -0,0 +1,32 @@
+<template>
+  <h1 class="text-4xl text-primary font-bold mb-4">
+    {{ group.name }}
+    <Icon name="ic:chevron-right" />
+    Instellingen
+  </h1>
+  <div class="overflow-x-auto shadow">
+    groep dingen hiero<br />
+    <button class="btn btn-error btn-outline" @click="deleteGroup">
+      Groep Verwijderen
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Contact, Group, Membership } from ".prisma/client";
+
+defineProps<{
+  group: Group & {
+    contacts: Contact[];
+    children: Group[];
+    members: Membership[];
+  };
+}>();
+
+const deleteGroup = async () => {
+  await $fetch("/api/groups/" + useRoute().params.id, {
+    method: "DELETE",
+  });
+  await navigateTo("/groepen/zoeken");
+};
+</script>

pages/groepen/[id]/leden.vue

@@ -0,0 +1,41 @@
+<template>
+  <h1 class="text-4xl text-primary font-bold mb-4">
+    {{ group.name }}
+    <Icon name="ic:chevron-right" />
+    Leden Beheren
+  </h1>
+  <div class="overflow-x-auto shadow">
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <td>Naam</td>
+          <td>Functie</td>
+          <td>Sinds</td>
+          <td>Tot</td>
+          <td>Lid Type</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="member in group.members" :key="member.id">
+          <td>{{ member.id }}</td>
+          <td>{{ member.function }}</td>
+          <td>{{ member.startDate }}</td>
+          <td>{{ member.stopDate }}</td>
+          <td>{{ member.isAdmin ? "Beheerder" : "Lid" }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Contact, Group, Membership } from ".prisma/client";
+
+defineProps<{
+  group: Group & {
+    contacts: Contact[];
+    children: Group[];
+    members: Membership[];
+  };
+}>();
+</script>