change view of listview

This commit is contained in:
Tim Gröger 2023-04-28 20:45:47 +02:00
parent 144bc1d58e
commit 31c6410eba
1 changed files with 34 additions and 24 deletions

View File

@ -16,31 +16,31 @@
</div> </div>
</q-card> </q-card>
</q-dialog> </q-dialog>
<div class="q-pa-md"> <!-- <div class="q-pa-md"> -->
<q-card style="height: 70vh; max-width: 1800px" class="q-pa-md"> <!-- <q-card style="height: 70vh; max-width: 1800px" class="q-pa-md"> -->
<div ref="scrollDiv" class="scroll" style="height: 100%"> <div ref="scrollDiv" class="scroll" style="height: 100%">
<q-infinite-scroll :offset="250" @load="load"> <q-infinite-scroll :offset="250" @load="load">
<q-list> <q-list>
<q-item id="bbb"> <q-item id="bbb">
<q-btn label="Ältere Veranstaltungen laden" @click="load(-1)" /> <q-btn label="Ältere Veranstaltungen laden" @click="load(-1)" />
</q-item> </q-item>
<template v-for="(events, index) in agendas" :key="index"> <template v-for="(events, index) in agendas" :key="index">
<q-separator /> <q-separator />
<q-item-label overline>{{ index }}</q-item-label> <q-item-label header>{{ asDate(index) }}</q-item-label>
<q-item v-for="(event, idx) in events" :key="idx" <q-item v-for="(event, idx) in events" :key="idx">
><event-slot :model-value="event" />{{ idx }}</q-item <event-slot :model-value="event" />
> </q-item>
</template> </template>
</q-list> </q-list>
<template #loading> <template #loading>
<div class="row justify-center q-my-md"> <div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" /> <q-spinner-dots color="primary" size="40px" />
</div> </div>
</template> </template>
</q-infinite-scroll> </q-infinite-scroll>
</div>
</q-card>
</div> </div>
<!-- </q-card> -->
<!-- </div> -->
</template> </template>
<script lang="ts"> <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 { return {
agendas, agendas,
asYear, asYear,
@ -167,6 +176,7 @@ export default defineComponent({
editDone, editDone,
load, load,
remove, remove,
asDate,
}; };
}, },
}); });