change view of listview

src/components/overview/ListView.vue

@@ -16,8 +16,8 @@
       </div>
     </q-card>
   </q-dialog>
-  <div class="q-pa-md">
-    <q-card style="height: 70vh; max-width: 1800px" class="q-pa-md">
+  <!-- <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>
@@ -26,10 +26,10 @@
         </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
-              >
+          <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>
@@ -39,8 +39,8 @@
       </template>
     </q-infinite-scroll>
   </div>
-    </q-card>
-  </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,
     };
   },
 });