Skip to content
Snippets Groups Projects
Verified Commit ff5f2ab8 authored by Jonathan Weth's avatar Jonathan Weth :keyboard:
Browse files

Use common base component for lesson details and event bar

parent 20f9c7f1
No related branches found
No related tags found
1 merge request!339Fix some bugs with displaying lesson events
Pipeline #177590 failed
Stage: prepare
Stage: test
Stage: build
Stage: publish
Stage: docker
Stage: deploy
Hide whitespace changes
Inline Side-by-side
aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
+ 11
− 7
View file @ ff5f2ab8
......@@ -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
......
aleksis/apps/chronos/frontend/components/calendar_feeds/details/SupervisionDetails.vue
+ 6
− 88
View file @ ff5f2ab8
<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>
aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/LessonEventBar.vue
+ 14
− 4
View file @ ff5f2ab8
......@@ -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;
}
......
aleksis/apps/chronos/frontend/components/calendar_feeds/event_bar/SupervisionEventBar.vue
+ 8
− 79
View file @ ff5f2ab8
<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment