[schedule] Improved calendar view

* Load events on next and prev
* Resize if display is not wide enough
* Fixed permissions

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,
     };
   },
 });

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,

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>

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',
 };

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',

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;
+}