[cleanup] Fixed some warnings

src/components/management/EditEvent.vue

@@ -16,7 +16,7 @@
           map-options
           clearable
           :disable="templates.length == 0"
-          @update:modelValue="fromTemplate"
+          @update:model-value="fromTemplate"
           @clear="reset()"
         />
         <q-input
@@ -60,7 +60,7 @@
           filled
         />
       </q-card-section>
-      <q-card-section v-if="event.template_id === undefined && modelValue === undefined">
+      <q-card-section v-if="event.is_template !== true && modelValue === undefined">
         <q-btn-toggle
           v-model="recurrent"
           spread
@@ -117,6 +117,11 @@ export default defineComponent({
       default: () => undefined,
       type: Object as PropType<FG.Event | undefined>,
     },
+    date: {
+      required: false,
+      default: '',
+      type: String
+    }
   },
   emits: {
     done: (val: boolean) => typeof val === 'boolean',
@@ -126,8 +131,8 @@ export default defineComponent({
 
     const emptyJob = {
       id: NaN,
-      start: new Date(),
+      start: date.adjustDate(new Date(props.date), {hours: (new Date()).getHours()}),
-      end: date.addToDate(new Date(), { hours: 1 }),
+      end: date.addToDate(date.adjustDate(new Date(props.date), {hours: (new Date()).getHours()}), {hours: 1}),
       services: [],
       required_services: 2,
       type: store.jobTypes[0],
@@ -135,7 +140,7 @@ export default defineComponent({
 
     const emptyEvent = {
       id: NaN,
-      start: new Date(),
+      start: new Date(props.date),
       jobs: [Object.assign({}, emptyJob)],
       type: store.eventTypes[0],
       is_template: false,

src/components/management/ManageTypes.vue

@@ -6,7 +6,7 @@
           <div class="text-h6">Editere {{title}} {{ actualType.name }}</div>
         </q-card-section>
         <q-card-section>
-          <q-input v-model="actualType.name" :rules="rules" ref="dialogInput" dense label="name" filled />
+          <q-input ref="dialogInput" v-model="actualType.name" :rules="rules" dense label="name" filled />
         </q-card-section>
         <q-card-actions>
           <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
@@ -20,8 +20,8 @@
         <q-table :title="title" :rows="rows" row-key="id" :columns="columns">
           <template #top-right>
             <q-input
-              v-model="actualType.name"
               ref="input"
+              v-model="actualType.name"
               :rules="rules"
               dense
               placeholder="Neuer Typ"
@@ -62,22 +62,21 @@ export default defineComponent({
   },
   setup(props) {
     const store = useScheduleStore();
-    const newType = ref('');
     const dialogOpen = ref(false);
     const emptyType = { id: -1, name: '' };
     const actualType = ref(emptyType);
-    const input = ref<QInput>(null);
+    const input = ref<QInput>();
-    const dialogInput = ref<QInput>(null);
+    const dialogInput = ref<QInput>();
-    const storeName = computed(() => props.type.charAt(0).toLowerCase() + props.type.slice(1) + 's')
+    const storeName = computed(() => props.type == 'EventType' ? 'eventTypes' : 'jobTypes')
 
     onBeforeMount(async () => await store[`get${props.type}s`]());
 
-    const rows = computed(() => store[storeName.value]);
+    const rows = computed(() => <(FG.EventType|FG.JobType)[]>store[storeName.value]);
 
     const rules = [
-      (s: any) => !!s || 'Darf nicht leer sein!',
+      (s: unknown) => !!s || 'Darf nicht leer sein!',
       (s: string) =>
-        store[storeName.value].find((e) => e.name === s) === undefined ||
+        rows.value.find((e) => e.name === s) === undefined ||
         'Der Name wird bereits verwendet',
     ];
 
@@ -98,7 +97,7 @@ export default defineComponent({
     ];
 
     function addType() {
-      if (input.value === null || input.value.validate())
+      if (input.value === undefined || input.value.validate())
         store
           [`add${props.type}`](actualType.value.name)
           .then(() => {
@@ -124,8 +123,8 @@ export default defineComponent({
     }
 
     function saveChanges() {
-      if (dialogInput.value === null || dialogInput.value.validate())
+      if (dialogInput.value === undefined || dialogInput.value.validate())
-        store[`rename${props.type}`](actualType.value.id, actualType.value.name).then(() => discardChanges());
+        void store[`rename${props.type}`](actualType.value.id, actualType.value.name).then(() => discardChanges());
     }
 
     function discardChanges() {

src/components/overview/AgendaView.vue

@@ -38,7 +38,7 @@
                       label="OK"
                       color="primary"
                       flat
-                      @click="saveNewSelectedDate(proxyDate)"
+                      @click="saveNewSelectedDate"
                     />
                   </div>
                 </q-date>
@@ -48,16 +48,16 @@
             <q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
           </div>
           <div class="col-xs-12 col-sm-3 text-center">
-          <q-btn-toggle
+            <q-btn-toggle
-            v-model="calendarView"
+              v-model="calendarView"
-            flat
+              flat
-            stretch
+              stretch
-            toggle-color="black"
+              toggle-color="black"
-            :options="[
+              :options="[
-              { label: 'Tag', value: 'day' },
+                { label: 'Tag', value: 'day' },
-              { label: 'Woche', value: 'week' },
+                { label: 'Woche', value: 'week' },
-            ]"
+              ]"
-          />
+            />
           </div>
         </div>
         <q-calendar-agenda
@@ -68,14 +68,24 @@
           locale="de-de"
           style="height: 100%; min-height: 400px"
         >
+          <template #head-day-label="{scope: {timestamp}}">
+            {{timestamp.day}}
+            <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item exact :to="{name: 'new-event', query: {date: timestamp.date}}">
+                  <q-item-section>Neue Veranstaltung</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </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"
+                @remove-event="remove"
-                @editEvent="edit"
+                @edit-event="edit"
               />
             </div>
           </template>
@@ -92,7 +102,7 @@ import Eventslot from './slots/EventSlot.vue';
 import { date } from 'quasar';
 import { startOfWeek } from '@flaschengeist/api';
 import EditEvent from '../management/EditEvent.vue';
-import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar'
+import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
 
 export default defineComponent({
   name: 'AgendaView',
@@ -108,7 +118,7 @@ export default defineComponent({
     const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
     const calendarDays = computed(() =>
       // <= 1023 is the breakpoint for sm to md
-      calendarView.value == 'day' ? 1 : (windowWidth.value <= 1023 ? 3 : 7)
+      calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
     );
     const events = ref<Agendas>({});
     const editor = ref<FG.Event | undefined>(undefined);

src/pages/Management.vue

@@ -32,7 +32,7 @@
         animated
       >
         <q-tab-panel name="create">
-          <EditEvent />
+          <EditEvent :date="date" />
         </q-tab-panel>
         <q-tab-panel name="eventtypes">
           <ManageTypes title="Veranstaltungstyp" type="EventType" />
@@ -56,6 +56,13 @@ import { Screen } from 'quasar';
 export default defineComponent({
   name: 'EventManagement',
   components: { EditEvent, ManageTypes },
+  props: {
+    date: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
   setup() {
     const tabs = computed(() => [
       { name: 'create', label: 'Veranstaltungen' },
@@ -64,6 +71,7 @@ export default defineComponent({
     ]);
 
     const drawer = ref<boolean>(false);
+    const tab = ref<string>('create');
 
     const showDrawer = computed({
       get: () => {
@@ -74,7 +82,6 @@ export default defineComponent({
       },
     });
 
-    const tab = ref<string>('create');
 
     return {
       showDrawer,

src/routes/index.ts

@@ -31,6 +31,7 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
           path: 'schedule-management',
           name: 'schedule-management',
           component: () => import('../pages/Management.vue'),
+          props: (route) => ({date: route.query.date}),
         },
       },
       {
@@ -48,6 +49,11 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
 ];
 
 export const privateRoutes: FG_Plugin.NamedRouteRecordRaw[] = [
+  {
+    name: 'new-event',
+    path: 'new-event',
+    redirect: {name: 'schedule-management'}
+  },
   {
     name: 'events-edit',
     path: 'schedule/:id/edit',