Restructure calendar components and fix remote tentative event styles (…

…#437) * ❌ Remove deprecated calendar components Reduce calendar month to mini version only * ➕ Split calendar event into 4 classes * ➕ Move calendar event classes into corresponding components * 🔨 Fix tentative remote events styles * 🔨 Fix all day events styles
thunderbird · May 29, 2024 · 41ca26a · 41ca26a
1 parent 89d4328
commit 41ca26a
Show file tree

Hide file tree

Showing 16 changed files with 336 additions and 907 deletions.
diff --git a/frontend/src/components/CalendarDay.vue b/frontend/src/components/CalendarDay.vue
diff --git a/frontend/src/components/CalendarMonth.vue → ...tend/src/components/CalendarMiniMonth.vue b/frontend/src/components/CalendarMonth.vue → ...tend/src/components/CalendarMiniMonth.vue
@@ -19,18 +19,16 @@
         v-for="h in isoWeekdays"
         :key="h"
         class="bg-gray-100 py-2 text-center text-gray-500 dark:bg-gray-600 dark:text-gray-300"
-        :class="{ 'font-bold': !mini}"
       >
         {{ h.min }}
       </div>
-      <calendar-month-day
+      <calendar-mini-month-day
         v-for="d in days"
         :key="d.date"
         :day="d.date"
         :is-active="d.active"
         :is-selected="d.date === date"
         :is-today="d.date === today"
-        :mini="mini"
         :placeholder="placeholder"
         :events="eventsByDate(d.date)"
         :show-details="!placeholder"
@@ -44,10 +42,8 @@
 </template>
 
 <script setup>
-import {
-  ref, computed, inject, watch,
-} from 'vue';
-import CalendarMonthDay from '@/elements/CalendarMonthDay';
+import { ref, computed, inject, watch } from 'vue';
+import CalendarMiniMonthDay from '@/elements/calendar/CalendarMiniMonthDay';
 
 // icons
 import {
@@ -64,7 +60,6 @@ const isoFirstDayOfWeek = inject('isoFirstDayOfWeek');
 // component properties
 const props = defineProps({
   selected: Object, // currently active date (dayjs object)
-  mini: Boolean, // show small version of monthly calendar
   nav: Boolean, // show month navigation
   placeholder: Boolean, // format appointments as placeholder
   minDate: Object, // minimum active date in view (dayjs object)

diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import { Qalendar } from 'qalendar';
 import 'qalendar/dist/style.css';
-import CalendarEvent from '@/elements/CalendarEvent.vue';
+import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
   appointmentState,
   bookingStatus,
@@ -377,9 +377,7 @@ watch(route, () => {
     >
       <template #weekDayEvent="eventProps">
         <calendar-event
-          :isActive="true"
           :isSelected="selectedDate === eventProps.eventData.id"
-          :isToday="false"
           :showDetails="!isBookingRoute"
           :disabled="false"
           :placeholder="isBookingRoute"
@@ -392,9 +390,7 @@ watch(route, () => {
       <template #monthEvent="monthEventProps">
         <calendar-event
           class="max-w-[12.5rem]"
-          :isActive="true"
           :isSelected="selectedDate === monthEventProps.eventData.id"
-          :isToday="false"
           :showDetails="!isBookingRoute"
           :disabled="false"
           :placeholder="isBookingRoute"