[events] Allow creating new events from AgendaView

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

@@ -15,7 +15,7 @@
           <q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
         </div>
         <div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
-          <edit-event v-model="editor" @done="editDone" />
+          <edit-event v-model="editor" :date="editor.start" @done="editDone" />
         </div>
       </div>
     </q-card>
@@ -74,6 +74,27 @@
         locale="de-de"
         style="height: 100%; min-height: 400px"
       >
+        <template #head-day-button="{ scope: { dayLabel, timestamp, activeDate } }">
+          <q-btn
+            round
+            dense
+            size="sm"
+            class="q-mb-xs"
+            :label="dayLabel"
+            :color="formatDayColor(timestamp.current, activeDate)"
+          >
+            <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item clickable @click="showDay(timestamp.date)">
+                  <q-item-section>Anzeigen</q-item-section>
+                </q-item>
+                <q-item clickable @click="newEvent(timestamp.date)">
+                  <q-item-section>Neue Veranstaltung</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </template>
         <template #day="{ scope: { timestamp } }">
           <div itemref="" class="q-pb-sm" style="min-height: 200px">
             <eventslot
@@ -97,6 +118,7 @@ import { useScheduleStore } from '../../store';
 import { date } from 'quasar';
 import Eventslot from './slots/EventSlot.vue';
 import EditEvent from '../management/EditEvent.vue';
+import { EditableEvent, emptyEvent } from '../../store/models';
 
 export default defineComponent({
   name: 'AgendaView',
@@ -107,7 +129,7 @@ export default defineComponent({
     const windowWidth = ref(window.innerWidth);
     const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
     const proxyDate = ref('');
-    const calendarView = ref('week');
+    const calendarView = ref<'week' | 'day'>('week');
 
     const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
     const calendarDays = computed(() =>
@@ -115,7 +137,7 @@ export default defineComponent({
       calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
     );
     const events = ref<Agendas>({});
-    const editor = ref<FG.Event | undefined>(undefined);
+    const editor = ref<EditableEvent | undefined>(undefined);
 
     interface Agendas {
       [index: number]: FG.Event[];
@@ -195,6 +217,11 @@ export default defineComponent({
       }
     }
 
+    function showDay(date: string) {
+      calendarView.value = 'day';
+      selectedDate.value = date;
+    }
+
     function updateProxy() {
       proxyDate.value = selectedDate.value;
     }
@@ -228,6 +255,15 @@ export default defineComponent({
       }
     }
 
+    function formatDayColor(today: boolean, selected: boolean) {
+      if (today) return 'primary';
+      if (selected) return 'secondary';
+    }
+
+    function newEvent(start: Date | string | number) {
+      editor.value = Object.assign({}, emptyEvent, { start: start });
+    }
+
     return {
       asYear,
       asMonth,
@@ -241,10 +277,13 @@ export default defineComponent({
       editor,
       editDone,
       events,
+      formatDayColor,
+      newEvent,
       proxyDate,
       remove,
       saveSelectedDate,
       selectedDate,
+      showDay,
       updateProxy,
     };
   },