Merge pull request #112 from filips123/change-details-dialog

Add links to details dialog
filips123 · Oct 30, 2024 · 9fe734f · 9fe734f
2 parents a7483b7 + b4dd16c
commit 9fe734f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/website/src/components/TimetableDetails.vue b/website/src/components/TimetableDetails.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
+import TimetableLessonLink from '@/components/TimetableLessonLink.vue'
+import { useSettingsStore } from '@/stores/settings'
 import type { MergedLesson } from '@/stores/timetable'
 import { getCurrentDate } from '@/utils/days'
 import { localizeDate, localizedWeekdays } from '@/utils/localization'
@@ -9,6 +12,8 @@ import { lessonTimes } from '@/utils/times'
 const dialog = defineModel<boolean>()
 const props = defineProps<{ day: number; time: number; lessons: MergedLesson[] }>()
 
+const { showLinksInTimetable } = storeToRefs(useSettingsStore())
+
 const lessonDay = computed(() => localizedWeekdays[props.day])
 const lessonDuration = computed(() => lessonTimes[props.time].join('–'))
 
@@ -30,6 +35,10 @@ function displayDifferent(value1: string | null, value2: string | null): string
   if (value1 === value2) return value1
   return `${value1} → ${value2}`
 }
+
+function closeDialogOnRedirect() {
+  if (showLinksInTimetable) dialog.value = false
+}
 </script>
 
 <template>
@@ -45,19 +54,53 @@ function displayDifferent(value1: string | null, value2: string | null): string
           <v-list dense class="lesson-details pa-0">
             <v-list-item class="px-0">
               <v-list-item-title>Razred</v-list-item-title>
-              <v-list-item-subtitle>{{ substitution.class }}</v-list-item-subtitle>
+              <v-list-item-subtitle>
+                <TimetableLessonLink
+                  link-type="classes"
+                  :link-value="substitution.class"
+                  @click="closeDialogOnRedirect"
+                />
+              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item class="px-0">
               <v-list-item-title>Predmet</v-list-item-title>
               <v-list-item-subtitle>{{ displayDifferent(substitution.subject, substitution.substitutionSubject) }}</v-list-item-subtitle>
             </v-list-item>
             <v-list-item class="px-0">
               <v-list-item-title>Profesor</v-list-item-title>
-              <v-list-item-subtitle>{{ displayDifferent(substitution.teacher, substitution.substitutionTeacher) }}</v-list-item-subtitle>
+              <v-list-item-subtitle>
+                <TimetableLessonLink
+                  link-type="teachers"
+                  :link-value="substitution.teacher"
+                  @click="closeDialogOnRedirect"
+                />
+                <template v-if="substitution.teacher !== substitution.substitutionTeacher">
+                  →
+                  <TimetableLessonLink
+                    link-type="teachers"
+                    :link-value="substitution.substitutionTeacher"
+                    @click="closeDialogOnRedirect"
+                  />
+                </template>
+              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item class="px-0">
               <v-list-item-title>Učilnica</v-list-item-title>
-              <v-list-item-subtitle>{{ displayDifferent(substitution.classroom, substitution.substitutionClassroom) }}</v-list-item-subtitle>
+              <v-list-item-subtitle>
+                <TimetableLessonLink
+                  link-type="classrooms"
+                  :link-value="substitution.classroom"
+                  @click="closeDialogOnRedirect"
+                />
+                <template v-if="substitution.classroom !== substitution.substitutionClassroom">
+                  →
+                  <TimetableLessonLink
+                    link-type="classrooms"
+                    :link-value="substitution.substitutionClassroom"
+                    @click="closeDialogOnRedirect"
+                  />
+                </template>
+              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item v-if="substitution.notes" class="px-0">
               <v-list-item-title>Opombe</v-list-item-title>

diff --git a/website/src/components/TimetableLessonLink.vue b/website/src/components/TimetableLessonLink.vue
@@ -18,5 +18,6 @@ const { showLinksInTimetable } = storeToRefs(useSettingsStore())
     class="text-decoration-none"
     >{{ linkValue }}</router-link
   >
-  <template v-else>{{ linkValue }}</template>
+  <template v-else-if="linkValue">{{ linkValue }}</template>
+  <template v-else>/</template>
 </template>