Merged in feature/notifications (pull request #14)

Add fake notification page

client/src/components/ui/ItListRow.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+
+<template>
+  <li
+    class="py-4 leading-[45px] border-b border-gray-500 last:border-0 flex flex-row justify-between"
+  >
+    <div class="flex flex-row">
+      <slot name="left"></slot>
+    </div>
+    <div class="leading-[45px]">
+      <slot name="center"></slot>
+    </div>
+    <div class="leading-[45px]">
+      <slot name="link"></slot>
+    </div>
+  </li>
+</template>
+
+<style lang="scss" scoped></style>

client/src/components/ui/ItPersonRow.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ItListRow from "./ItListRow.vue";
+
 const props = defineProps<{
   avatarUrl: string;
   name: string;
@@ -15,11 +17,11 @@ const props = defineProps<{
     </div>
     <div class="flex-1 flex items-center">
       <slot name="center"></slot>
-    </div>
+    </template>
-    <div class="flex items-center">
+    <template #link>
       <slot name="link"></slot>
-    </div>
+    </template>
-  </li>
+  </ItListRow>
 </template>
 
 <style lang="scss" scoped></style>

client/src/locales/de.json

@@ -17,7 +17,8 @@
     "feedback": "Feedback | Feedbacks",
     "exam": "Prüfung | Prüfungen",
     "examResult": "Prüfungsresultat | Prüfungsresultate",
-    "certificate": "Zertifikat | Zertifikate"
+    "certificate": "Zertifikat | Zertifikate",
+    "notification": "Benachrichtigung | Benachrichtigungen"
   },
   "mainNavigation": {
     "logout": "Abmelden",

client/src/pages/NotificationsPage.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import ItListRow from "@/components/ui/ItListRow.vue";
+import * as log from "loglevel";
+
+log.debug("ProfileView created");
+
+const fakeData = {
+  notifications: [
+    {
+      id: 1,
+      source: {
+        name: "Daniel",
+        title: "EFZ Kaufmann/-frau",
+        course: "üK",
+        avatar: "https://picsum.photos/200",
+      },
+      ago: "Vor 1 Stunde",
+      title: "hat den Transferauftrag «Die Motorhaftpflicht» mit dir geteilt.",
+      unread: true,
+    },
+    {
+      id: 2,
+      source: {
+        name: "Sofia",
+        title: "EFZ Kaufmann/-frau",
+        course: "üK",
+        avatar: "https://picsum.photos/200",
+      },
+      ago: "Vor 1 Tag",
+      title: "hat dir ein Feedback zum Kreis «Analyse» mit dir geteilt.",
+      unread: false,
+    },
+  ],
+};
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <div class="container-large">
+      <header class="mt-12 mb-8">
+        <h1>{{ $t("general.notification", 2) }}</h1>
+      </header>
+      <main>
+        <div class="bg-white px-8 py-2">
+          <ItListRow
+            v-for="notification in fakeData.notifications"
+            :key="notification.id"
+          >
+            <template #left>
+              <img
+                class="h-[45px] rounded-full mr-2"
+                :src="notification.source.avatar"
+              />
+              <div class="ml-1">
+                <p class="leading-6">
+                  {{ `${notification.source.name} ${notification.title}` }}
+                </p>
+                <p class="leading-6 text-sm text-gray-800">
+                  {{ `${notification.source.title} &hyphen; ${notification.ago}` }}
+                </p>
+              </div>
+            </template>
+            <template #link>
+              <div
+                v-if="notification.unread"
+                class="flex items-center h-[45px] flex-row"
+              >
+                <div class="w-[10px] h-[10px] bg-blue-500 rounded-full"></div>
+              </div>
+            </template>
+          </ItListRow>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/router/index.ts

@@ -128,6 +128,10 @@ const router = createRouter({
       path: "/profile",
       component: () => import("@/pages/ProfilePage.vue"),
     },
+    {
+      path: "/notifications",
+      component: () => import("@/pages/NotificationsPage.vue"),
+    },
     {
       path: "/styleguide",
       component: () => import("../pages/StyleGuidePage.vue"),