From ff5f2ab8a6deb130706566d4a9d31d5a140574c0 Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Thu, 28 Mar 2024 17:29:00 +0100
Subject: [PATCH] Use common base component for lesson details and event bar
---
.../calendar_feeds/details/LessonDetails.vue | 18 ++--
.../details/SupervisionDetails.vue | 94 ++-----------------
.../event_bar/LessonEventBar.vue | 18 +++-
.../event_bar/SupervisionEventBar.vue | 87 ++---------------
4 files changed, 39 insertions(+), 178 deletions(-)
diff --git a/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue b/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
index d82baa74..cd91c0cd 100644
--- a/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
+++ b/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
@@ -5,13 +5,17 @@
without-location
>
<template #title>
- <div
- :style="{
- color: currentSubject ? currentSubject.colour_fg || 'white' : 'white',
- }"
- >
- <lesson-event-subject :event="selectedEvent" />
- </div>
+ <slot name="title">
+ <div
+ :style="{
+ color: currentSubject
+ ? currentSubject.colour_fg || 'white'
+ : 'white',
+ }"
+ >
+ <lesson-event-subject :event="selectedEvent" />
+ </div>
+ </slot>
</template>
<template #badge>
<cancelled-calendar-status-chip
diff --git a/aleksis/apps/chronos/frontend/components/calendar_feeds/details/SupervisionDetails.vue b/aleksis/apps/chronos/frontend/components/calendar_feeds/details/SupervisionDetails.vue
index dce19848..2aa6f026 100644
--- a/aleksis/apps/chronos/frontend/components/calendar_feeds/details/SupervisionDetails.vue
+++ b/aleksis/apps/chronos/frontend/components/calendar_feeds/details/SupervisionDetails.vue
@@ -1,102 +1,20 @@
<template>
- <base-calendar-feed-details
- v-bind="$props"
- :color="currentSubject ? currentSubject.colour_bg : null"
- without-location
- >
+ <lesson-details v-bind="$attrs" v-on="$listeners">
<template #title>
<v-icon class="mr-1">mdi-coffee</v-icon>
{{ $t("chronos.supervisions.title") }}
</template>
- <template #badge>
- <cancelled-calendar-status-chip
- v-if="selectedEvent.meta.cancelled"
- class="ml-4"
- />
- <calendar-status-chip
- color="warning"
- icon="mdi-clipboard-alert-outline"
- v-else-if="selectedEvent.meta.amended"
- class="ml-4"
- >
- {{ $t("chronos.event.current_changes") }}
- </calendar-status-chip>
- </template>
- <template #description>
- <v-divider inset />
- <v-list-item>
- <v-list-item-icon>
- <v-icon color="primary">mdi-human-male-board </v-icon>
- </v-list-item-icon>
- <v-list-item-content>
- <v-list-item-title>
- <span v-if="teachers.length === 0" class="body-2 text--secondary">{{
- $t("chronos.event.no_teacher")
- }}</span>
- <lesson-related-object-chip
- v-for="teacher in teachers"
- :status="teacher.status"
- :key="teacher.id"
- new-icon="mdi-account-plus-outline"
- >{{ teacher.full_name }}</lesson-related-object-chip
- >
- </v-list-item-title>
- </v-list-item-content>
- </v-list-item>
- <v-list-item>
- <v-list-item-icon>
- <v-icon color="primary">mdi-door </v-icon>
- </v-list-item-icon>
- <v-list-item-content>
- <v-list-item-title>
- <span v-if="rooms.length === 0" class="body-2 text--secondary">{{
- $t("chronos.event.no_room")
- }}</span>
- <lesson-related-object-chip
- v-for="room in rooms"
- :status="room.status"
- :key="room.id"
- new-icon="mdi-door-open"
- >{{ room.name }}</lesson-related-object-chip
- >
- </v-list-item-title>
- </v-list-item-content>
- </v-list-item>
- <v-divider inset />
- <v-list-item v-if="selectedEvent.meta.comment">
- <v-list-item-content>
- <v-list-item-title>
- <v-alert
- dense
- outlined
- type="warning"
- icon="mdi-information-outline"
- >
- {{ selectedEvent.meta.comment }}
- </v-alert>
- </v-list-item-title>
- </v-list-item-content>
- </v-list-item>
- </template>
- </base-calendar-feed-details>
+ </lesson-details>
</template>
<script>
-import calendarFeedDetailsMixin from "aleksis.core/mixins/calendarFeedDetails.js";
-import BaseCalendarFeedDetails from "aleksis.core/components/calendar/BaseCalendarFeedDetails.vue";
-import CalendarStatusChip from "aleksis.core/components/calendar/CalendarStatusChip.vue";
-import CancelledCalendarStatusChip from "aleksis.core/components/calendar/CancelledCalendarStatusChip.vue";
+import LessonDetails from "./LessonDetails.vue";
-import LessonRelatedObjectChip from "../../LessonRelatedObjectChip.vue";
-import lessonEvent from "../mixins/lessonEvent";
export default {
- name: "LessonDetails",
+ name: "SupervisionDetails",
+ extends: [LessonDetails],
components: {
- LessonRelatedObjectChip,
- BaseCalendarFeedDetails,
- CalendarStatusChip,
- CancelledCalendarStatusChip,
+ LessonDetails,
},
- mixins: [calendarFeedDetailsMixin, lessonEvent],
};
</script>
diff --git a/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/LessonEventBar.vue b/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/LessonEventBar.vue
index fa5d2fb1..b63154d6 100644
--- a/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/LessonEventBar.vue
+++ b/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/LessonEventBar.vue
@@ -11,9 +11,9 @@
class="d-flex justify-start"
:class="{
'px-1': true,
- 'orange-border':
+ 'current-changes':
selectedEvent.meta.amended && !selectedEvent.meta.cancelled,
- 'red-border': selectedEvent.meta.cancelled,
+ cancelled: selectedEvent.meta.cancelled,
'text-decoration-line-through': selectedEvent.meta.cancelled,
}"
:style="{
@@ -32,6 +32,8 @@
class="d-flex justify-center align-center flex-grow-1 text-truncate"
>
<div class="d-flex justify-center align-center flex-wrap text">
+ <slot name="additionalElements"></slot>
+
<lesson-event-link-iterator
v-if="!selectedEvent.meta.is_member"
:items="selectedEvent.meta.groups"
@@ -47,6 +49,7 @@
/>
<lesson-event-subject
+ v-if="withSubject"
:event="selectedEvent"
attr="short_name"
class="font-weight-medium mr-1"
@@ -84,16 +87,23 @@ export default {
return this.event;
},
},
+ props: {
+ withSubject: {
+ type: Boolean,
+ default: true,
+ required: false,
+ },
+ },
mixins: [calendarFeedEventBarMixin, lessonEvent],
};
</script>
<style scoped>
-.orange-border {
+.current-changes {
border: 3px orange solid;
}
-.red-border {
+.cancelled {
border: 3px red solid;
}
diff --git a/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/SupervisionEventBar.vue b/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/SupervisionEventBar.vue
index 5a8ccb01..59894990 100644
--- a/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/SupervisionEventBar.vue
+++ b/aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/SupervisionEventBar.vue
@@ -1,90 +1,19 @@
<template>
- <base-calendar-feed-event-bar
- :with-padding="false"
- :without-time="true"
- v-bind="$props"
- >
- <template #icon> </template>
-
- <template #title>
- <div
- class="d-flex justify-start"
- :class="{
- 'px-1': true,
- 'orange-border':
- selectedEvent.meta.amended && !selectedEvent.meta.cancelled,
- 'red-border': selectedEvent.meta.cancelled,
- 'text-decoration-line-through': selectedEvent.meta.cancelled,
- }"
- :style="{
- height: '100%',
- borderRadius: '4px',
- }"
- >
- <span
- v-if="calendarType === 'month' && eventParsed.start.hasTime"
- class="mr-1 font-weight-bold ml-1"
- >
- {{ eventParsed.start.time }}
- </span>
- <div
- class="d-flex justify-center align-center flex-grow-1 text-truncate"
- >
- <div class="d-flex justify-center align-center flex-wrap text">
- <v-icon size="12" color="white" class="mr-1">mdi-coffee</v-icon>
-
- <lesson-event-old-new
- v-if="!selectedEvent.meta.is_teacher || newTeachers.length > 0"
- :new-items="newTeachers"
- :old-items="oldTeachers"
- attr="short_name"
- class="mr-1"
- />
-
- <lesson-event-old-new
- :new-items="newRooms"
- :old-items="oldRooms"
- attr="short_name"
- />
- </div>
- </div>
- </div>
+ <lesson-event-bar :with-subject="false" v-bind="$attrs" v-on="$listeners">
+ <template #additionalElements>
+ <v-icon size="12" color="white" class="mr-1">mdi-coffee</v-icon>
</template>
- </base-calendar-feed-event-bar>
+ </lesson-event-bar>
</template>
<script>
-import calendarFeedEventBarMixin from "aleksis.core/mixins/calendarFeedEventBar.js";
-import BaseCalendarFeedEventBar from "aleksis.core/components/calendar/BaseCalendarFeedEventBar.vue";
-import lessonEvent from "../mixins/lessonEvent";
-import LessonEventOldNew from "../../LessonEventOldNew.vue";
+import LessonEventBar from "./LessonEventBar.vue";
export default {
- name: "LessonEventBar",
+ name: "SupervisionEventBar",
components: {
- LessonEventOldNew,
- BaseCalendarFeedEventBar,
- },
- computed: {
- selectedEvent() {
- return this.event;
- },
+ LessonEventBar,
},
- mixins: [calendarFeedEventBarMixin, lessonEvent],
+ extends: [LessonEventBar],
};
</script>
-
-<style scoped>
-.orange-border {
- border: 3px orange solid;
-}
-
-.red-border {
- border: 3px red solid;
-}
-
-.text {
- line-height: 1.1;
- font-size: 12px;
-}
-</style>
--
GitLab