From 31c6410ebacff0d85f6607d41db6ad4f6ba093f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Fri, 28 Apr 2023 20:45:47 +0200
Subject: [PATCH] change view of listview

---
 src/components/overview/ListView.vue | 58 ++++++++++++++++------------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/overview/ListView.vue b/src/components/overview/ListView.vue
index fd47f2d..4ad719d 100644
--- a/src/components/overview/ListView.vue
+++ b/src/components/overview/ListView.vue
@@ -16,31 +16,31 @@
       </div>
     </q-card>
   </q-dialog>
-  <div class="q-pa-md">
-    <q-card style="height: 70vh; max-width: 1800px" class="q-pa-md">
-      <div ref="scrollDiv" class="scroll" 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 class="q-pa-md"> -->
+  <!-- <q-card style="height: 70vh; max-width: 1800px" class="q-pa-md"> -->
+  <div ref="scrollDiv" class="scroll" 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 header>{{ asDate(index) }}</q-item-label>
+          <q-item v-for="(event, idx) in events" :key="idx">
+            <event-slot :model-value="event" />
+          </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">
@@ -157,6 +157,15 @@ export default defineComponent({
       }
     }
 
+    function asDate(value: string) {
+      if (value) {
+        const year = parseInt(value.substring(0, 4));
+        const month = parseInt(value.substring(4, 6)) - 1;
+        const day = parseInt(value.substring(6, 8));
+        return date.formatDate(new Date(year, month, day), 'DD.MM.YYYY');
+      }
+    }
+
     return {
       agendas,
       asYear,
@@ -167,6 +176,7 @@ export default defineComponent({
       editDone,
       load,
       remove,
+      asDate,
     };
   },
 });