From fd885d7b5e2ffaeee82374195bb1b10cb57cf698 Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Mon, 2 Oct 2023 13:53:26 +0200
Subject: [PATCH] chore: styling

---
 client/src/components/ui/ItDropdownSelect.vue |  7 +-
 client/src/pages/AppointmentsPage.vue         | 99 ++++++++++++-------
 2 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index 0c896c4b..9421c218 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -10,6 +10,7 @@ interface Props {
     name: string;
   };
   items?: DropdownSelectable[];
+  borderless?: boolean;
 }
 
 const emit = defineEmits<{
@@ -36,7 +37,11 @@ const dropdownSelected = computed<DropdownSelectable>({
   <Listbox v-model="dropdownSelected" as="div">
     <div class="relative mt-1 w-full">
       <ListboxButton
-        class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left font-bold"
+        class="relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left"
+        :class="{
+          border: !props.borderless,
+          'font-bold': !props.borderless,
+        }"
       >
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
diff --git a/client/src/pages/AppointmentsPage.vue b/client/src/pages/AppointmentsPage.vue
index f96edb9b..b615408c 100644
--- a/client/src/pages/AppointmentsPage.vue
+++ b/client/src/pages/AppointmentsPage.vue
@@ -2,11 +2,14 @@
 import { computed, ref, watch } from "vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useLearningPathStore } from "@/stores/learningPath";
+import { useTranslation } from "i18next-vue";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type { DueDate } from "@/types";
+import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
+
+const { t } = useTranslation();
 
 const UNFILTERED = Number.MAX_SAFE_INTEGER;
-
 const courseSessionsStore = useCourseSessionsStore();
 const learningPathStore = useLearningPathStore();
 
@@ -15,22 +18,33 @@ type Item = {
   name: string;
 };
 
-const initialItem: Item = {
+const initialItemCircle: Item = {
   id: UNFILTERED,
-  name: "Alle",
+  name: t("a.AlleCircle"),
 };
 
-const circles = ref<Item[]>([initialItem]);
-
+const circles = ref<Item[]>([initialItemCircle]);
 const courseSessions: Item[] = [
-  initialItem,
+  {
+    id: UNFILTERED,
+    name: t("a.AlleDurchführungen"),
+  },
   ...courseSessionsStore.allCourseSessions.map((cs) => ({ id: cs.id, name: cs.title })),
 ];
 
 const selectedSession = ref<Item>(courseSessions[0]);
 const selectedCircle = ref<Item>(circles.value[0]);
 
+if (courseSessionsStore.currentCourseSession) {
+  selectedSession.value = {
+    id: courseSessionsStore.currentCourseSession.id,
+    name: courseSessionsStore.currentCourseSession.title,
+  };
+}
+
 watch(selectedSession, async () => {
+  // We don't have all circles for the unfiltered session,
+  // we fetch them from the learning path when the session changes
   const isUnfiltered = selectedSession.value.id === UNFILTERED;
   const courseSession = courseSessionsStore.allCourseSessions.find(
     (item) => item.id === selectedSession.value.id
@@ -48,21 +62,23 @@ watch(selectedSession, async () => {
     false
   );
 
-  updateCircles(data?.circles);
+  if (data) {
+    updateCircles(data.circles);
+  } else {
+    resetCircles();
+  }
 });
 
 const resetCircles = () => {
-  circles.value = [initialItem];
+  circles.value = [initialItemCircle];
   selectedCircle.value = circles.value[0];
 };
 
-const updateCircles = (newCircles?: { id: number; title: string }[]) => {
-  circles.value = newCircles
-    ? [
-        initialItem,
-        ...newCircles.map((circle) => ({ id: circle.id, name: circle.title })),
-      ]
-    : [initialItem];
+const updateCircles = (newCircles: { id: number; title: string }[]) => {
+  circles.value = [
+    initialItemCircle,
+    ...newCircles.map((circle) => ({ id: circle.id, name: circle.title })),
+  ];
   selectedCircle.value = circles.value[0];
 };
 
@@ -88,32 +104,43 @@ const isMatchingCircle = (dueDate: DueDate) =>
         <h1>{{ $t("a.AlleTermine") }}</h1>
       </header>
       <main>
-        <div class="col flex">
-          <span>{{ $t("a.Durchfuehrung") }}:</span>
-          <ItDropdownSelect
-            v-model="selectedSession"
-            class="mt-4 w-full lg:mt-0 lg:w-96"
-            :items="courseSessions"
-          ></ItDropdownSelect>
-          <template v-if="selectedSession.id !== UNFILTERED">
-            <span>{{ $t("a.Circle") }}:</span>
+        <div class="flex flex-col space-y-2">
+          <div class="flex flex-col space-x-3 bg-white lg:flex-row">
             <ItDropdownSelect
-              v-model="selectedCircle"
-              class="mt-4 w-full lg:mt-0 lg:w-96"
-              :items="circles"
+              v-model="selectedSession"
+              :items="courseSessions"
+              borderless
             ></ItDropdownSelect>
-          </template>
-        </div>
-        <div class="bg-white px-4 py-4">
-          <ul>
-            <li v-for="appointment in appointments" :key="appointment.id">
-              {{ appointment.title }} - {{ appointment.start }}
-            </li>
-          </ul>
+            <template v-if="selectedSession.id !== UNFILTERED">
+              <ItDropdownSelect
+                v-model="selectedCircle"
+                :items="circles"
+                borderless
+              ></ItDropdownSelect>
+            </template>
+          </div>
+          <div class="bg-white px-5">
+            <ul class="no-border-last">
+              <li
+                v-for="appointment in appointments"
+                :key="appointment.id"
+                class="border-b"
+              >
+                <DueDateSingle :due-date="appointment"></DueDateSingle>
+              </li>
+            </ul>
+            <div v-if="appointments.length === 0" class="w-full py-5">
+              {{ $t("dueDates.noDueDatesAvailable") }}
+            </div>
+          </div>
         </div>
       </main>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="postcss" scoped>
+.no-border-last li:last-child {
+  border-bottom: none !important;
+}
+</style>