From 575090552fcda8046346d627e271fa0f3113d64a Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Fri, 19 Mar 2021 21:01:50 +0100
Subject: [PATCH 1/3] [schedule] Improved calendar view

* Load events on next and prev
* Resize if display is not wide enough
* Fixed permissions
---
 .../components/overview/AgendaView.vue        | 64 +++++++++++--------
 src/plugins/schedule/pages/Management.vue     |  6 +-
 src/plugins/schedule/pages/Overview.vue       | 19 ++----
 src/plugins/schedule/permissions.ts           | 24 ++++---
 src/plugins/schedule/routes/index.ts          |  4 +-
 src/utils/datetime.ts                         |  8 +++
 6 files changed, 71 insertions(+), 54 deletions(-)

diff --git a/src/plugins/schedule/components/overview/AgendaView.vue b/src/plugins/schedule/components/overview/AgendaView.vue
index 022ab2e..4a229e2 100644
--- a/src/plugins/schedule/components/overview/AgendaView.vue
+++ b/src/plugins/schedule/components/overview/AgendaView.vue
@@ -47,14 +47,15 @@
         <q-calendar-agenda
           ref="calendar"
           v-model="selectedDate"
-          :view="calendarView"
+          :view="calendarRealView"
+          :max-days="calendarDays"
           :weekdays="[1, 2, 3, 4, 5, 6, 0]"
           locale="de-de"
           style="height: 100%; min-height: 400px"
         >
           <template #day="{ scope: { timestamp } }" style="min-height: 200px">
-            <template v-if="!getAgenda(timestamp)" style="min-height: 200px"> </template>
-            <template v-for="agenda in getAgenda(timestamp)" :key="agenda.id">
+            <template v-if="!events[timestamp.weekday]" style="min-height: 200px"> </template>
+            <template v-for="agenda in events[timestamp.weekday]" :key="agenda.id">
               <eventslot :event="agenda" />
             </template>
           </template>
@@ -65,10 +66,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, ref } from 'vue';
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
 import { useScheduleStore } from '../../store';
 import Eventslot from './slots/EventSlot.vue';
 import { date } from 'quasar';
+import { startOfWeek } from 'src/utils/datetime';
 
 export default defineComponent({
   name: 'AgendaView',
@@ -76,10 +78,16 @@ export default defineComponent({
 
   setup() {
     const store = useScheduleStore();
+    const windowWidth = ref(window.innerWidth);
     const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
     const proxyDate = ref('');
     const calendar = ref<QCalendar.QCalendar>();
-    const calendarView = 'week';
+    const calendarView = ref('week');
+
+    const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
+    const calendarDays = computed(() =>
+      calendarView.value == 'day' ? 1 : windowWidth.value < 1000 ? 3 : 7
+    );
     const events = ref<Agendas>({});
 
     interface Agendas {
@@ -87,35 +95,40 @@ export default defineComponent({
     }
 
     onBeforeMount(async () => {
-      let agenda: Agendas = {};
-      console.log('Hier Passiert was');
-      const list = await store.getEvents({ from: new Date(selectedDate.value) });
-      if (list)
-        list.forEach((event) => {
-          let day = event.start.getDay();
+      window.addEventListener('resize', () => {
+        windowWidth.value = window.innerWidth;
+      });
 
-          if (!agenda[day]) {
-            agenda[day] = [];
-          }
-          agenda[day].push(event);
-        });
-      console.log('finish agenda:', agenda);
-      events.value = agenda;
+      await loadAgendas();
     });
 
-    function getAgenda(day: { weekday: string }) {
-      return events.value[parseInt(day.weekday, 10)];
+    async function loadAgendas() {
+      const selected = new Date(selectedDate.value);
+      const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
+      const end = date.addToDate(start, { days: calendarDays.value });
+
+      events.value = {};
+      const list = await store.getEvents({ from: start, to: end });
+      list.forEach((event) => {
+        const day = event.start.getDay();
+
+        if (!events.value[day]) {
+          events.value[day] = [];
+        }
+        events.value[day].push(event);
+      });
     }
 
     function calendarNext() {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
-      return calendar.value?.next();
+      calendar.value?.next();
+      void loadAgendas();
     }
 
     function calendarPrev() {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
-      return calendar.value?.prev();
+      calendar.value?.prev();
+      void loadAgendas();
     }
+
     function updateProxy() {
       proxyDate.value = selectedDate.value;
     }
@@ -155,13 +168,14 @@ export default defineComponent({
       calendar,
       selectedDate,
       events,
-      getAgenda,
       calendarNext,
       calendarPrev,
       updateProxy,
       saveNewSelectedDate,
       proxyDate,
+      calendarDays,
       calendarView,
+      calendarRealView,
     };
   },
 });
diff --git a/src/plugins/schedule/pages/Management.vue b/src/plugins/schedule/pages/Management.vue
index 1981eb3..fa80491 100644
--- a/src/plugins/schedule/pages/Management.vue
+++ b/src/plugins/schedule/pages/Management.vue
@@ -38,7 +38,7 @@
           <Eventtypes />
         </q-tab-panel>
         <q-tab-panel name="jobtypes">
-          <JobTypes v-if="canEditRoles" />
+          <JobTypes v-if="canEditJobTypes" />
         </q-tab-panel>
       </q-tab-panels>
     </q-page>
@@ -58,7 +58,7 @@ export default defineComponent({
   name: 'EventManagement',
   components: { CreateEvent, Eventtypes, JobTypes },
   setup() {
-    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
+    const canEditJobTypes = computed(() => hasPermission(PERMISSIONS.JOB_TYPE));
 
     interface Tab {
       name: string;
@@ -85,7 +85,7 @@ export default defineComponent({
     const tab = ref<string>('create');
 
     return {
-      canEditRoles,
+      canEditJobTypes,
       showDrawer,
       tab,
       tabs,
diff --git a/src/plugins/schedule/pages/Overview.vue b/src/plugins/schedule/pages/Overview.vue
index bc6aafe..c8a6d75 100644
--- a/src/plugins/schedule/pages/Overview.vue
+++ b/src/plugins/schedule/pages/Overview.vue
@@ -37,9 +37,6 @@
         <q-tab-panel name="eventtypes">
           <Eventtypes />
         </q-tab-panel>
-        <q-tab-panel name="jobtypes">
-          <JobTypes v-if="canEditRoles" />
-        </q-tab-panel>
       </q-tab-panels>
     </q-page>
   </div>
@@ -48,26 +45,21 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
 import Eventtypes from '../components/management/Eventtypes.vue';
-import JobTypes from '../components/management/JobTypes.vue';
 //import CreateEvent from '../components/management/CreateEvent.vue';
 import AgendaView from '../components/overview/AgendaView.vue';
-import { hasPermission } from 'src/utils/permission';
-import { PERMISSIONS } from '../permissions';
 import { Screen } from 'quasar';
 
 export default defineComponent({
   name: 'EventOverview',
-  components: { AgendaView, Eventtypes, JobTypes },
+  components: { AgendaView, Eventtypes },
   setup() {
-    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
-
     interface Tab {
       name: string;
       label: string;
     }
 
     const tabs: Tab[] = [
-      { name: 'agendaView', label: 'Kalendar' }
+      { name: 'agendaView', label: 'Kalendar' },
       // { name: 'eventtypes', label: 'Veranstaltungsarten' },
       // { name: 'jobtypes', label: 'Dienstarten' }
     ];
@@ -80,17 +72,16 @@ export default defineComponent({
       },
       set: (val: boolean) => {
         drawer.value = val;
-      }
+      },
     });
 
     const tab = ref<string>('agendaView');
 
     return {
-      canEditRoles,
       showDrawer,
       tab,
-      tabs
+      tabs,
     };
-  }
+  },
 });
 </script>
diff --git a/src/plugins/schedule/permissions.ts b/src/plugins/schedule/permissions.ts
index 2ba1b10..40a5b92 100644
--- a/src/plugins/schedule/permissions.ts
+++ b/src/plugins/schedule/permissions.ts
@@ -1,12 +1,16 @@
 export const PERMISSIONS = {
-  // Kann andere Nutzer bearbeiten
-  EDIT_OTHER: 'users_edit_other',
-  // Kann Rollen von Nutzern setzen
-  SET_ROLES: 'users_set_roles',
-  // Kann Nutzer löschen
-  DELETE: 'users_delete_other',
-  // Kann neue Nutzer hinzufügen
-  REGISTER: 'users_register',
-  // Kann Rollen löschen oder bearbeiten, z.b. Rechte hinzufügen etc
-  ROLES_EDIT: 'roles_edit',
+  // Can create events
+  CREATE: 'schedule_create',
+  // Can edit events
+  EDIT: 'schedule_edit',
+  // Can delete events
+  DELETE: 'schedule_delete',
+  // Can create and edit EventTypes
+  EVENT_TYPE: 'schedule_event_type',
+  // Can create and edit JobTypes
+  JOB_TYPE: 'schedule_job_type',
+  // Can self assign to jobs
+  ASSIGN: 'schedule_assign',
+  // Can assign other users to jobs
+  ASSIGN_OTHER: 'schedule_assign_other',
 };
diff --git a/src/plugins/schedule/routes/index.ts b/src/plugins/schedule/routes/index.ts
index b7cc912..7c816a6 100644
--- a/src/plugins/schedule/routes/index.ts
+++ b/src/plugins/schedule/routes/index.ts
@@ -1,4 +1,5 @@
 import { FG_Plugin } from 'src/plugins';
+import { PERMISSIONS } from '../permissions';
 
 const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
   {
@@ -14,9 +15,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
       {
         title: 'Dienstübersicht',
         icon: 'mdi-account-group',
-
         shortcut: true,
-        permissions: [],
         route: {
           path: 'schedule-overview',
           name: 'schedule-overview',
@@ -27,6 +26,7 @@ const mainRoutes: FG_Plugin.PluginRouteConfig[] = [
         title: 'Dienstverwaltung',
         icon: 'mdi-account-details',
         shortcut: false,
+        permissions: [PERMISSIONS.CREATE],
         route: {
           path: 'schedule-management',
           name: 'schedule-management',
diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
index 48e2599..3fc0139 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/datetime.ts
@@ -20,3 +20,11 @@ export function formatDateTime(
 export function asHour(date?: Date) {
   if (date) return formatDateTime(date, false, true);
 }
+
+export function startOfWeek(date: Date, startMonday = true) {
+  const start = new Date(date);
+  const day = date.getDay() || 7;
+  if (startMonday && day !== 1) start.setHours(-24 * (day - 1));
+  else if (!startMonday && day !== 7) start.setHours(-24 * day);
+  return start;
+}

From a4ce273bb1002cfe5064ac036aa77fcaaa67def3 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Fri, 19 Mar 2021 21:34:49 +0100
Subject: [PATCH 2/3] [plugin] Fixed setting permission if non are set

---
 src/boot/plugins.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/boot/plugins.ts b/src/boot/plugins.ts
index 21edae8..a049a17 100644
--- a/src/boot/plugins.ts
+++ b/src/boot/plugins.ts
@@ -33,8 +33,10 @@ interface Backend {
 export { Backend };
 
 function setPermissions(object: FG_Plugin.PluginRouteConfig) {
-  if (object.route.meta === undefined) object.route.meta = {};
-  object.route.meta['permissions'] = object.permissions;
+  if (object.permissions !== undefined) {
+    if (object.route.meta === undefined) object.route.meta = {};
+    object.route.meta['permissions'] = object.permissions;
+  }
 }
 
 function convertRoutes(parent: RouteRecordRaw, children?: FG_Plugin.PluginRouteConfig[]) {

From 7e7f9c943d10385bedd087a0412d62b309f8a501 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Sat, 20 Mar 2021 00:59:44 +0100
Subject: [PATCH 3/3] [schedule] Improved creating new events

---
 src/flaschengeist.d.ts                        | 12 +--
 .../components/management/CreateEvent.vue     | 56 ++----------
 .../schedule/components/management/Job.vue    | 85 +++++++------------
 src/plugins/schedule/store.ts                 | 17 ++--
 4 files changed, 53 insertions(+), 117 deletions(-)

diff --git a/src/flaschengeist.d.ts b/src/flaschengeist.d.ts
index afd25e1..28f38ba 100644
--- a/src/flaschengeist.d.ts
+++ b/src/flaschengeist.d.ts
@@ -28,11 +28,11 @@ declare namespace FG {
     id: number;
     time: Date;
     amount: number;
-    reversal_id: number;
-    sender_id?: string;
-    receiver_id?: string;
+    reversal_id?: number;
     author_id?: string;
+    sender_id?: string;
     original_id?: number;
+    receiver_id?: string;
   }
   interface Drink {
     id: number;
@@ -91,7 +91,7 @@ declare namespace FG {
     start: Date;
     end?: Date;
     description?: string;
-    type: EventType;
+    type: EventType | number;
     jobs: Array<Job>;
   }
   interface EventType {
@@ -102,8 +102,8 @@ declare namespace FG {
     id: number;
     start: Date;
     end?: Date;
-    comment: string;
-    type: JobType;
+    type: JobType | number;
+    comment?: string;
     services: Array<Service>;
     required_services: number;
   }
diff --git a/src/plugins/schedule/components/management/CreateEvent.vue b/src/plugins/schedule/components/management/CreateEvent.vue
index 99ac748..7c5aca2 100644
--- a/src/plugins/schedule/components/management/CreateEvent.vue
+++ b/src/plugins/schedule/components/management/CreateEvent.vue
@@ -43,13 +43,8 @@
         <q-card-section v-for="(job, index) in event.jobs" :key="index">
           <q-card class="q-my-auto">
             <job
-              :job="job"
+              v-model="event.jobs[index]"
               :job-can-delete="jobDeleteDisabled"
-              @set-start="setStart"
-              @set-required="setRequired"
-              @set-end="setEnd"
-              @set-comment="setComment"
-              @set-job-type="setJobType"
               @remove-job="removeJob(index)"
             />
           </q-card>
@@ -78,59 +73,31 @@ export default defineComponent({
     const eventtypes = computed(() => store.eventTypes);
     const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
 
-    const newJob = ref<FG.Job>(({
+    const newJob = ref<FG.Job>({
       id: NaN,
-      start: undefined,
-      end: undefined,
-      comment: '',
+      start: new Date(),
+      end: date.addToDate(new Date(), { hours: 1 }),
       services: [],
       required_services: 2,
-    } as unknown) as FG.Job);
+      type: store.jobTypes[0],
+    });
 
     const event = ref<FG.Event>({
       id: NaN,
       start: new Date(),
-      description: '',
       jobs: [Object.assign({}, newJob.value)],
-    } as FG.Event);
+      type: store.eventTypes[0],
+    });
 
     onBeforeMount(() => {
       void store.getEventTypes();
       void store.getJobTypes();
     });
 
-    function setStart(data: { job: FG.Job; value: Date }) {
-      data.job.start = data.value;
-    }
-
-    function setEnd(data: { job: FG.Job; value: Date }) {
-      data.job.end = data.value;
-    }
-
-    function setComment(data: { job: FG.Job; value: string }) {
-      data.job.comment = data.value;
-    }
-
-    function setJobType(job: FG.Job, value: FG.JobType) {
-      job.type = value;
-    }
-
-    function setRequired(data: { job: FG.Job; value: number }) {
-      data.job.required_services = data.value;
-    }
-
     function addJob() {
-      const addJob = Object.assign({}, newJob.value);
-      event.value.jobs.unshift(addJob);
+      event.value.jobs.push(Object.assign({}, newJob.value));
     }
 
-    //function removeJob(id: number) {
-    //  let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
-    //  if (jobtoremove != undefined) {
-    //    event.value.jobs.splice(jobtoremove, 1);
-    //  }
-    //}
-
     function removeJob(index: number) {
       event.value.jobs.splice(index, 1);
     }
@@ -174,11 +141,6 @@ export default defineComponent({
       reset,
       event,
       isAfterDate,
-      setStart,
-      setEnd,
-      setComment,
-      setJobType,
-      setRequired,
     };
   },
 });
diff --git a/src/plugins/schedule/components/management/Job.vue b/src/plugins/schedule/components/management/Job.vue
index 462d5d0..89a1a10 100644
--- a/src/plugins/schedule/components/management/Job.vue
+++ b/src/plugins/schedule/components/management/Job.vue
@@ -2,59 +2,52 @@
   <q-card-section class="fit row justify-start content-center items-center">
     <q-card-section class="fit row justify-start content-center items-center">
       <IsoDateInput
+        v-model="job.start"
         class="col-xs-12 col-sm-6 q-pa-sm"
-        :value="job.start"
         label="Beginn"
         type="datetime"
-        :rules="[noValidDate, notEmpty]"
-        @input="setStart"
+        :rules="[notEmpty, noValidDate]"
       />
       <IsoDateInput
-        ref="bla"
+        v-model="job.end"
         class="col-xs-12 col-sm-6 q-pa-sm"
-        :value="job.end"
         label="Ende"
         type="datetime"
-        :rules="[noValidDate, isAfterDate, notEmpty]"
-        @input="setEnd"
+        :rules="[notEmpty, noValidDate, isAfterDate]"
       />
     </q-card-section>
     <q-card-section class="row fit justify-start content-center items-center">
       <q-select
-        :key="refreshKey"
+        v-model="job.type"
         filled
         use-input
         label="Dienstart"
         input-debounce="0"
         class="col-xs-12 col-sm-6 q-pa-sm"
-        :value="job.type"
         :options="jobtypes"
         option-label="name"
-        option-value="name"
+        option-value="id"
         map-options
         clearable
         :rules="[notEmpty]"
-        @input="setJobType"
       />
       <q-input
+        v-model="job.required_services"
         filled
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Dienstanzahl"
         type="number"
-        :value="job.required_services"
         :rules="[notEmpty]"
-        @input="setRequired"
       />
     </q-card-section>
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
+        v-model="job.comment"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Beschreibung"
         type="textarea"
-        :value="job.comment"
         filled
         :rules="[notEmpty]"
-        @input="setComment"
       />
     </q-card-section>
     <q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
@@ -63,7 +56,7 @@
 
 <script lang="ts">
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
+import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
 import { useScheduleStore } from '../../store';
 import { date } from 'quasar';
 
@@ -71,19 +64,15 @@ export default defineComponent({
   name: 'Job',
   components: { IsoDateInput },
   props: {
-    job: {
+    modelValue: {
       required: true,
       type: Object as PropType<FG.Job>,
     },
     jobCanDelete: Boolean,
   },
   emits: {
-    'set-start': (d: Date) => !!d,
     'remove-job': () => true,
-    'set-end': (d: Date) => !!d,
-    'set-comment': (c: string) => !!c,
-    'set-job-type': (jt: FG.JobType) => !!jt,
-    'set-required': (r: number) => isFinite(r),
+    'update:modelValue': (job: FG.Job) => !!job,
   },
   setup(props, { emit }) {
     const store = useScheduleStore();
@@ -91,27 +80,22 @@ export default defineComponent({
     onBeforeMount(() => store.getJobTypes());
 
     const jobtypes = computed(() => store.jobTypes);
-    const refreshKey = ref<number>(0);
 
-    function setStart(value: Date) {
-      emit('set-start', value);
-    }
-
-    function setEnd(value: Date) {
-      emit('set-end', value);
-    }
-
-    function setComment(value: string) {
-      emit('set-comment', value);
-    }
-
-    function setJobType(value: FG.JobType) {
-      emit('set-job-type', value);
-    }
-
-    function setRequired(value: number) {
-      emit('set-required', value);
-    }
+    const job = new Proxy(props.modelValue, {
+      get(target, prop) {
+        if (typeof prop === 'string') {
+          return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
+        }
+      },
+      set(obj, prop, value) {
+        console.log('...', obj, prop, value);
+        if (typeof prop === 'string') {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          emit('update:modelValue', Object.assign({}, props.modelValue, { [prop]: value }));
+        }
+        return true;
+      },
+    });
 
     function removeJob() {
       emit('remove-job');
@@ -121,31 +105,20 @@ export default defineComponent({
       return !!val || 'Feld darf nicht leer sein!';
     }
     function noValidDate(val: string) {
-      console.log(val);
       return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
     }
 
-    function isAfterDate(val: Date) {
-      console.log('isAfterDate', props.job.start, val);
-      return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
-    }
-
-    function refresh() {
-      refreshKey.value += 1;
+    function isAfterDate(val: string) {
+      return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
     }
 
     return {
+      job,
       jobtypes,
-      setStart,
-      setEnd,
-      setComment,
-      setJobType,
-      setRequired,
       removeJob,
       notEmpty,
       noValidDate,
       isAfterDate,
-      refreshKey,
     };
   },
 });
diff --git a/src/plugins/schedule/store.ts b/src/plugins/schedule/store.ts
index b6a4586..621a0f5 100644
--- a/src/plugins/schedule/store.ts
+++ b/src/plugins/schedule/store.ts
@@ -27,14 +27,15 @@ export const useScheduleStore = defineStore({
   getters: {},
 
   actions: {
-    async getJobTypes() {
-      try {
-        const { data } = await api.get<FG.JobType[]>('/schedule/job-types');
-        this.jobTypes = data;
-        return this.jobTypes;
-      } catch (error) {
-        throw error;
-      }
+    async getJobTypes(force = false) {
+      if (force || this.jobTypes.length == 0)
+        try {
+          const { data } = await api.get<FG.JobType[]>('/schedule/job-types');
+          this.jobTypes = data;
+        } catch (error) {
+          throw error;
+        }
+      return this.jobTypes;
     },
 
     async addJobType(name: string) {