Add first version of ListView

src/components/overview/AgendaView.vue

@@ -80,11 +80,12 @@
             </q-menu>
           </template>
           <template #day="{ scope: { timestamp } }">
-            <div itemref="" class="q-pb-sm" style="min-height: 200px">
+            <div itemref="" class="q-pa-sm" style="min-height: 200px">
               <event-slot
                 v-for="(agenda, index) in events[timestamp.weekday]"
                 :key="index"
                 v-model="events[timestamp.weekday][index]"
+                class="q-mb-sm"
                 @remove-event="remove"
                 @edit-event="edit"
               />

src/components/overview/ListView.vue

@@ -0,0 +1,183 @@
+<template>
+  <q-dialog
+    :model-value="editor !== undefined"
+    persistent
+    transition-show="scale"
+    transition-hide="scale"
+  >
+    <q-card>
+      <div class="column">
+        <div class="col" align="right" style="position: sticky; top: 0; z-index: 999">
+          <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" />
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+  <div class="q-pa-md">
+    <q-card style="height: 70vh; max-width: 1800px" class="q-pa-md">
+      <div class="scroll" ref="scrollDiv" style="height: 100%">
+        <q-infinite-scroll :offset="250" @load="load">
+          <q-list>
+            <q-item id="bbb">
+              <q-btn label="Ältere Veranstaltungen laden" @click="load(-1)" />
+            </q-item>
+            <template v-for="(events, index) in agendas" :key="index">
+              <q-separator />
+              <q-item-label overline>{{index}}</q-item-label>
+              <q-item v-for="(event, idx) in events" :key="idx"
+                ><event-slot :model-value="event" />{{ idx }}</q-item
+              >
+            </template>
+          </q-list>
+          <template #loading>
+            <div class="row justify-center q-my-md">
+              <q-spinner-dots color="primary" size="40px" />
+            </div>
+          </template>
+        </q-infinite-scroll>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
+import { useScheduleStore } from '../../store';
+import { date, scroll } from 'quasar';
+import EditEvent from '../management/EditEvent.vue';
+import EventSlot from '../overview/slots/EventSlot.vue';
+
+export default defineComponent({
+  name: 'ListView',
+  components: { EditEvent, EventSlot },
+
+  setup() {
+    interface Agendas {
+      [index: string]: FG.Event[];
+    }
+
+    const store = useScheduleStore();
+
+    const editor = ref<FG.Event | undefined>(undefined);
+    const events = ref<FG.Event[]>([]);
+    const scrollDiv = ref<Element>()
+
+    const agendas = computed<Agendas>(() => {
+      const ag = {} as Agendas;
+      events.value?.forEach((event) => {
+        const day = date.formatDate(event.start, 'YYYYMMDD');
+
+        if (!ag[day]) {
+          ag[day] = [];
+        }
+        ag[day].push(event);
+      });
+      return ag;
+    });
+
+    onBeforeMount(async () => {
+      //await loadAgendas();
+    });
+
+    async function edit(id: number) {
+      editor.value = await store.getEvent(id);
+    }
+
+    function editDone(changed: boolean) {
+      //if (changed) void loadAgendas();
+      editor.value = undefined;
+    }
+
+    async function load(index: number, done?: (stop: boolean) => void) {
+      const start = new Date();
+      if (index < 0) {
+        events.value.unshift(...(await store.getEvents({ to: start, limit: 5, descending: true })));
+        if (done) done(false);
+      } else {
+        const len = events.value.length;
+        if (
+          len ==
+          events.value.push(
+            ...(await store.getEvents({ from: start, offset: (index - 1) * 10, limit: 10 }))
+          )
+        ) {
+          if (done) return done(true);
+          } else if (done) done(false);
+      }
+      if (index <= 1) {
+        window.setTimeout(() => {(<Element>scrollDiv.value).scrollTop = document.getElementById("bbb")?.scrollHeight || 0}, 150);
+      }
+    }
+
+    async function remove(id: number) {
+      if (await store.removeEvent(id)) {
+        // Successfull removed
+        for (const idx in agendas.value) {
+          const i = agendas.value[idx].findIndex((event) => event.id === id);
+          if (i !== -1) {
+            agendas.value[idx].splice(i, 1);
+            break;
+          }
+        }
+      } else {
+        // Not found, this means our eventa are outdated
+      }
+    }
+
+    function asMonth(value: string) {
+      if (value) {
+        return date.formatDate(new Date(value), 'MMMM', {
+          months: [
+            'Januar',
+            'Februar',
+            'März',
+            'April',
+            'Mai',
+            'Juni',
+            'Juli',
+            'August',
+            'September',
+            'Oktober',
+            'November',
+            'Dezember',
+          ],
+        });
+      }
+    }
+
+    function asYear(value: string) {
+      if (value) {
+        return date.formatDate(new Date(value), 'YYYY');
+      }
+    }
+
+    return {
+      agendas,
+      asYear,
+      asMonth,
+      edit,
+      editor,scrollDiv,
+      editDone,
+      load,
+      remove,
+    };
+  },
+});
+</script>
+
+<style>
+@import '@quasar/quasar-ui-qcalendar/dist/index.css';
+
+/* Fill full height of card */
+.q-calendar-agenda__pane {
+  height: 100%;
+}
+
+/* Same as Qcard */
+.q-calendar {
+  --calendar-background-dark: --q-dark;
+}
+</style>

src/components/overview/slots/EventSlot.vue

@@ -1,6 +1,7 @@
 <template>
   <q-card
-    class="q-mx-xs q-mt-sm justify-start content-center items-center rounded-borders shadow-5"
+    style="width: 100%"
+    class="justify-start content-center items-center rounded-borders shadow-5"
     bordered
   >
     <q-card-section class="text-primary q-pa-xs">
@@ -95,5 +96,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped></style>

src/pages/Overview.vue

@@ -32,9 +32,10 @@
         animated
       >
         <q-tab-panel name="agendaView">
-          <AgendaView />
+          <agenda-view />
         </q-tab-panel>
         <q-tab-panel name="listView">
+          <list-view />
         </q-tab-panel>
       </q-tab-panels>
     </q-page>
@@ -43,12 +44,13 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import AgendaView from '../components/overview/AgendaView.vue';
 import { useQuasar } from 'quasar';
+import AgendaView from '../components/overview/AgendaView.vue';
+import ListView from '../components/overview/ListView.vue';
 
 export default defineComponent({
   name: 'EventOverview',
-  components: { AgendaView },
+  components: { AgendaView, ListView },
   setup() {
     const quasar = useQuasar();
 

src/store.ts

@@ -120,7 +120,7 @@ export const useScheduleStore = defineStore({
       return this.templates;
     },
 
-    async getEvents(filter: { from?: Date; to?: Date } | undefined = undefined) {
+    async getEvents(filter: { from?: Date; to?: Date, limit?: number, offset?: number, descending?: boolean } | undefined = undefined) {
       try {
         const { data } = await api.get<FG.Event[]>('/events', { params: filter });
         data.forEach((element) => fixEvent(element));