[events] First version of ListView

This commit is contained in:
Ferdinand Thiessen 2021-03-28 21:21:53 +02:00
parent 285803a226
commit 4bc602fed2
2 changed files with 110 additions and 22 deletions

View File

@ -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>

View File

@ -1,5 +1,5 @@
<template> <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-tabs v-if="$q.screen.gt.sm" v-model="tab">
<q-tab <q-tab
v-for="(tabindex, index) in tabs" v-for="(tabindex, index) in tabs"
@ -24,7 +24,6 @@
</q-item> </q-item>
</q-list> </q-list>
</q-drawer> </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"
@ -34,24 +33,22 @@
<q-tab-panel name="agendaView"> <q-tab-panel name="agendaView">
<AgendaView /> <AgendaView />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="eventtypes"> <q-tab-panel name="listView">
<EventTypes /> <EventsListView />
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</q-page> </q-page>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue'; 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 AgendaView from '../components/overview/AgendaView.vue';
import { Screen } from 'quasar'; import { Screen } from 'quasar';
export default defineComponent({ export default defineComponent({
name: 'EventOverview', name: 'EventOverview',
components: { AgendaView, EventTypes }, components: { AgendaView, EventsListView },
setup() { setup() {
interface Tab { interface Tab {
name: string; name: string;
@ -60,8 +57,7 @@ export default defineComponent({
const tabs: Tab[] = [ const tabs: Tab[] = [
{ name: 'agendaView', label: 'Kalendar' }, { name: 'agendaView', label: 'Kalendar' },
// { name: 'eventtypes', label: 'Veranstaltungsarten' }, { name: 'listView', label: 'Liste' },
// { name: 'jobtypes', label: 'Dienstarten' }
]; ];
const drawer = ref<boolean>(false); const drawer = ref<boolean>(false);