[events]: Added removal of events + minor optical improvement

deps/quasar-ui-qcalendar

@@ -1 +1 @@
-Subproject commit d0e503b1bfc65f64216042d0fe39daf5377b7901
+Subproject commit ac6d0693a062f60d539d7f6d8fdee00fbcc528c7

src/plugins/schedule/components/overview/AgendaView.vue

@@ -53,11 +53,15 @@
           locale="de-de"
           style="height: 100%; min-height: 400px"
         >
-          <template #day="{ scope: { timestamp } }" style="min-height: 200px">
-            <template v-if="!events[timestamp.weekday]" style="min-height: 200px"> </template>
-            <template v-for="(agenda, index) in events[timestamp.weekday]" :key="agenda.id">
-              <eventslot v-model="events[timestamp.weekday][index]" />
-            </template>
+          <template #day="{ scope: { timestamp } }">
+            <div itemref="" class="q-pb-sm" style="min-height: 200px">
+              <eventslot
+                v-for="(agenda, index) in events[timestamp.weekday]"
+                :key="index"
+                v-model="events[timestamp.weekday][index]"
+                @removeEvent="remove"
+              />
+            </div>
           </template>
         </q-calendar-agenda>
       </div>
@@ -86,7 +90,8 @@ export default defineComponent({
 
     const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
     const calendarDays = computed(() =>
-      calendarView.value == 'day' ? 1 : windowWidth.value < 1000 ? 3 : 7
+      // <= 1023 is the breakpoint for sm to md
+      calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
     );
     const events = ref<Agendas>({});
 
@@ -102,6 +107,22 @@ export default defineComponent({
       await loadAgendas();
     });
 
+    async function remove(id: number) {
+      if (await store.removeEvent(id)) {
+        // Successfull removed
+        for (const idx in events.value) {
+          const i = events.value[idx].findIndex((event) => event.id === id);
+          if (i !== -1) {
+            events.value[idx].splice(i, 1);
+            break;
+          }
+        }
+      } else {
+        // Not found, this means our eventa are outdated
+        await loadAgendas();
+      }
+    }
+
     async function loadAgendas() {
       const selected = new Date(selectedDate.value);
       console.log(selected);
@@ -180,6 +201,7 @@ export default defineComponent({
       updateProxy,
       saveNewSelectedDate,
       proxyDate,
+      remove,
       calendarDays,
       calendarView,
       calendarRealView,

src/plugins/schedule/components/overview/slots/EventSlot.vue

@@ -1,26 +1,52 @@
 <template>
   <q-card
-    class="justify-start content-center items-center rounded-borders border-primary shadow-5 q-mb-xs"
+    class="q-mx-xs q-mt-sm justify-start content-center items-center rounded-borders shadow-5"
     bordered
   >
-    <header class="text-primary q-px-xs">
-      <div class="col text-weight-bolder">
+    <q-card-section class="text-primary q-pa-xs">
+      <div class="text-weight-bolder text-center" style="font-size: 1.5vw">
         {{ event.type.name }}
+        <template v-if="event.name"
+          >: <span style="font-size: 1.2vw">{{ event.name }}</span>
+        </template>
       </div>
-      <div v-if="event.description" class="col text-weight-medium" style="font-size: 10px">
-        Info
+      <div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
         {{ event.description }}
       </div>
-    </header>
-    <div v-for="(job, index) in event.jobs" :key="index">
-      <q-separator style="justify-start content-center" />
-      <JobSlot v-model="event.jobs[index]" :event-id="event.id" />
-    </div>
+    </q-card-section>
+    <q-separator />
+    <q-card-section class="q-pa-xs">
+      <!-- Jobs -->
+      <JobSlot
+        v-for="(job, index) in event.jobs"
+        :key="index"
+        v-model="event.jobs[index]"
+        class="col q-my-xs"
+        :event-id="event.id"
+      />
+    </q-card-section>
+    <q-card-actions v-if="canEdit || canDelete" vertical align="center">
+      <router-link v-if="canEdit" :to="{ name: 'events-edit', params: { id: event.id } }">
+        <template #default>
+          <q-btn color="secondary" flat label="Bearbeiten" style="min-width: 95%" />
+        </template>
+      </router-link>
+      <q-btn
+        v-if="canDelete"
+        color="negative"
+        flat
+        label="Löschen"
+        style="min-width: 95%"
+        @click="remove"
+      />
+    </q-card-actions>
   </q-card>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
+import { hasPermission } from 'src/utils/permission';
+import { PERMISSIONS } from 'src/plugins/schedule/permissions';
 import JobSlot from './JobSlot.vue';
 
 export default defineComponent({
@@ -32,13 +58,26 @@ export default defineComponent({
       type: Object as PropType<FG.Event>,
     },
   },
-  emits: { 'update:modelValue': (val: FG.Event) => !!val },
+  emits: {
+    'update:modelValue': (val: FG.Event) => !!val,
+    removeEvent: (val: number) => typeof val === 'number',
+  },
   setup(props, { emit }) {
+    const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
+    const canEdit = computed(() => hasPermission(PERMISSIONS.EDIT));
     const event = computed({
       get: () => props.modelValue,
       set: (v) => emit('update:modelValue', v),
     });
+
+    function remove() {
+      emit('removeEvent', props.modelValue.id);
+    }
+
     return {
+      canDelete,
+      canEdit,
+      remove,
       event,
     };
   },

src/plugins/schedule/components/overview/slots/JobSlot.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card-section>
+  <q-card bordered>
     <div class="text-weight-medium q-px-xs">
       {{ asHour(modelValue.start) }}
       <template v-if="modelValue.end">- {{ asHour(modelValue.end) }}</template>
@@ -31,7 +31,7 @@
         <q-btn v-if="isEnrolled" flat color="negative" label="Austragen" @click="signOutFromJob" />
       </div>
     </div>
-  </q-card-section>
+  </q-card>
 </template>
 
 <script lang="ts">

src/plugins/schedule/store.ts

@@ -85,6 +85,16 @@ export const useScheduleStore = defineStore({
         throw error;
       }
     },
+    async removeEvent(id: number) {
+      try {
+        await api.delete(`/schedule/events/${id}`);
+      } catch (e) {
+        const error = <AxiosError>e;
+        if (error.response && error.response.status === 404) return false;
+        throw e;
+      }
+      return true;
+    },
 
     async removeEventType(id: number) {
       await api.delete(`/schedule/event-types/${id}`);