[events] First version of ListView

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

@@ -0,0 +1,92 @@
+<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 style="height: 700px">
+    <q-infinite-scroll ref="scroll" :offset="250" @load="loadEvents">
+      <div v-for="(event, index) in events" :key="index" class="caption">
+        <event-slot v-model="events[index]" size="md" />
+      </div>
+      <template #loading>
+        <div class="row justify-center q-my-md">
+          <q-spinner-dots color="primary" size="40px" />
+        </div>
+      </template>
+    </q-infinite-scroll>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { useScheduleStore } from '../../store';
+import { date, QInfiniteScroll } from 'quasar';
+import EventSlot from './slots/EventSlot.vue';
+import EditEvent from '../management/EditEvent.vue';
+
+export default defineComponent({
+  name: 'EventsListView',
+  components: { EditEvent, EventSlot },
+
+  setup() {
+    const store = useScheduleStore();
+    const events = ref<FG.Event[]>([]);
+    const editor = ref<FG.Event>();
+    const scroll = ref<QInfiniteScroll>();
+
+    async function edit(id: number) {
+      editor.value = await store.getEvent(id);
+    }
+    function editDone(changed: boolean) {
+      //if (changed) void loadEvents();
+      editor.value = undefined;
+    }
+
+    async function remove(id: number) {
+      if (await store.removeEvent(id)) {
+        const idx = events.value.findIndex((v) => v.id === id);
+        if (idx !== -1) events.value.splice(idx, 1);
+      } else {
+        events.value = [];
+        scroll.value?.reset();
+      }
+    }
+
+    async function loadEvents(index: number, done?: (stop: boolean) => void) {
+      console.log(index);
+      const today = new Date();
+      today.setHours(0, 0);
+      const from = date.addToDate(today, { days: (index - 1) * 3 });
+      const to = date.addToDate(today, { days: index * 3 });
+      const ev = await store.getEvents({ from, to });
+      if (ev.length > 0) events.value.push(...ev);
+      if (done !== undefined) done(ev.length == 0);
+    }
+
+    return {
+      scroll,
+      edit,
+      editor,
+      editDone,
+      events,
+      remove,
+      loadEvents,
+    };
+  },
+});
+</script>
+
+<style></style>

src/plugins/schedule/pages/Overview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
@@ -24,34 +24,31 @@
         </q-item>
       </q-list>
     </q-drawer>
-    <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
+    <q-tab-panels
-      <q-tab-panels
+      v-model="tab"
-        v-model="tab"
+      style="background-color: transparent"
-        style="background-color: transparent"
+      class="q-ma-none q-pa-none fit row justify-center content-start items-start"
-        class="q-ma-none q-pa-none fit row justify-center content-start items-start"
+      animated
-        animated
+    >
-      >
+      <q-tab-panel name="agendaView">
-        <q-tab-panel name="agendaView">
+        <AgendaView />
-          <AgendaView />
+      </q-tab-panel>
-        </q-tab-panel>
+      <q-tab-panel name="listView">
-        <q-tab-panel name="eventtypes">
+        <EventsListView />
-          <EventTypes />
+      </q-tab-panel>
-        </q-tab-panel>
+    </q-tab-panels>
-      </q-tab-panels>
+  </q-page>
-    </q-page>
-  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import EventTypes from '../components/management/EventTypes.vue';
+import EventsListView from '../components/overview/ListView.vue';
-//import CreateEvent from '../components/management/CreateEvent.vue';
 import AgendaView from '../components/overview/AgendaView.vue';
 import { Screen } from 'quasar';
 
 export default defineComponent({
   name: 'EventOverview',
-  components: { AgendaView, EventTypes },
+  components: { AgendaView, EventsListView },
   setup() {
     interface Tab {
       name: string;
@@ -60,8 +57,7 @@ export default defineComponent({
 
     const tabs: Tab[] = [
       { name: 'agendaView', label: 'Kalendar' },
-      // { name: 'eventtypes', label: 'Veranstaltungsarten' },
+      { name: 'listView', label: 'Liste' },
-      // { name: 'jobtypes', label: 'Dienstarten' }
     ];
 
     const drawer = ref<boolean>(false);