From 3b0e891bd774f363e37ad5a7ed3535e01b90fa13 Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Sun, 11 Jun 2023 13:09:52 +0200
Subject: [PATCH] Move chip for event status to own component
---
.../calendar/BaseCalendarFeedDetails.vue | 13 ++++------
.../calendar/CalendarStatusChip.vue | 24 +++++++++++++++++++
.../calendar/CancelledCalendarStatusChip.vue | 14 +++++++++++
3 files changed, 42 insertions(+), 9 deletions(-)
create mode 100644 aleksis/core/frontend/components/calendar/CalendarStatusChip.vue
create mode 100644 aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue
diff --git a/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue b/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue
index 1d0fdd7ad..a9dc64fdb 100644
--- a/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue
+++ b/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue
@@ -14,16 +14,9 @@
</v-toolbar-title>
<v-spacer></v-spacer>
<slot name="badge" :selected-event="selectedEvent">
- <v-chip
+ <cancelled-calendar-status-chip
v-if="selectedEvent.status === 'CANCELLED' && !withoutBadge"
- color="error"
- label
- >
- <v-avatar left>
- <v-icon>mdi-cancel</v-icon>
- </v-avatar>
- {{ $t("calendar.cancelled") }}
- </v-chip>
+ />
</slot>
</v-toolbar>
<slot name="time" :selected-event="selectedEvent">
@@ -64,9 +57,11 @@
<script>
import calendarFeedDetailsMixin from "../../mixins/calendarFeedDetails.js";
+import CancelledCalendarStatusChip from "./CancelledCalendarStatusChip.vue";
export default {
name: "BaseCalendarFeedDetails",
+ components: { CancelledCalendarStatusChip },
mixins: [calendarFeedDetailsMixin],
};
</script>
diff --git a/aleksis/core/frontend/components/calendar/CalendarStatusChip.vue b/aleksis/core/frontend/components/calendar/CalendarStatusChip.vue
new file mode 100644
index 000000000..679749135
--- /dev/null
+++ b/aleksis/core/frontend/components/calendar/CalendarStatusChip.vue
@@ -0,0 +1,24 @@
+<script>
+export default {
+ name: "CalendarStatusChip",
+ props: {
+ color: {
+ type: String,
+ required: true,
+ },
+ icon: {
+ type: String,
+ required: true,
+ },
+ },
+};
+</script>
+
+<template>
+ <v-chip :color="color" label>
+ <v-avatar left>
+ <v-icon>{{ icon }}</v-icon>
+ </v-avatar>
+ <slot></slot>
+ </v-chip>
+</template>
diff --git a/aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue b/aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue
new file mode 100644
index 000000000..00b816943
--- /dev/null
+++ b/aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue
@@ -0,0 +1,14 @@
+<script>
+import CalendarStatusChip from "./CalendarStatusChip.vue";
+
+export default {
+ name: "CancelledCalendarStatusChip",
+ components: { CalendarStatusChip },
+};
+</script>
+
+<template>
+ <calendar-status-chip icon="mdi-cancel" color="error">
+ {{ $t("calendar.cancelled") }}
+ </calendar-status-chip>
+</template>
--
GitLab