ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[events] AgendaView button for current week / day

This commit is contained in:
Ferdinand Thiessen 2021-03-28 03:35:10 +02:00
parent f712bfd4f9
commit a59f778851
1 changed files with 92 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/plugins/schedule/components/overview/AgendaView.vue
View File

@ -7,7 +7,11 @@
> >
<q-card> <q-card>
<div class="column"> <div class="column">
<div class="col" align="right" style="position: sticky; top: 0; z-index: 999"> <div
class="col"
align="right"
style="position: sticky; top: 5px; padding-right: 5px; z-index: 999"
>
<q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" /> <q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
</div> </div>
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em"> <div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
@ -16,82 +20,82 @@
</div> </div>
</q-card> </q-card>
</q-dialog> </q-dialog>
<q-page padding> <q-card>
<q-card> <div style="max-width: 1800px; width: 100%">
<div style="max-width: 1800px; width: 100%"> <q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center"> <q-btn flat dense class="row absolute-left q-ml-sm"
<div class="row justify-center items-center"> >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
<q-btn flat dense label="Prev" @click="calendarPrev" /> <q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
<q-separator vertical /> <q-date v-model="proxyDate">
<q-btn flat dense <div class="row items-center justify-end q-gutter-sm">
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }} <q-btn v-close-popup label="Cancel" color="primary" flat />
<q-popup-proxy <q-btn
transition-show="scale" v-close-popup
transition-hide="scale" label="OK"
@before-show="updateProxy" color="primary"
> flat
<q-date v-model="proxyDate"> @click="saveSelectedDate(proxyDate)"
<div class="row items-center justify-end q-gutter-sm"> />
<q-btn v-close-popup label="Cancel" color="primary" flat /> </div>
<q-btn </q-date>
v-close-popup </q-popup-proxy>
label="OK" </q-btn>
color="primary" <div class="row justify-center items-center">
flat <q-btn flat dense label="Zurück" @click="calendarPrev" />
@click="saveNewSelectedDate(proxyDate)" <q-separator vertical />
/> <q-btn
</div>
</q-date>
</q-popup-proxy>
</q-btn>
<q-separator vertical />
<q-btn flat dense label="Next" @click="calendarNext" />
</div>
<!-- <q-space /> -->
<q-btn-toggle
v-model="calendarView"
class="row absolute-right"
flat flat
stretch dense
toggle-color="" :label="calendarView == 'day' ? 'Heute' : 'Diese Woche'"
:options="[ @click="calendarNow"
{ label: 'Tag', value: 'day' },
{ label: 'Woche', value: 'week' },
]"
/> />
</q-toolbar> <q-separator vertical />
<q-calendar-agenda <q-btn flat dense label="Weiter" @click="calendarNext" />
v-model="selectedDate" </div>
:view="calendarRealView" <!-- <q-space /> -->
:max-days="calendarDays"
:weekdays="[1, 2, 3, 4, 5, 6, 0]" <q-btn-toggle
locale="de-de" v-model="calendarView"
style="height: 100%; min-height: 400px" class="row absolute-right"
> flat
<template #day="{ scope: { timestamp } }"> stretch
<div itemref="" class="q-pb-sm" style="min-height: 200px"> toggle-color=""
<eventslot :options="[
v-for="(agenda, index) in events[timestamp.weekday]" { label: 'Tag', value: 'day' },
:key="index" { label: 'Woche', value: 'week' },
v-model="events[timestamp.weekday][index]" ]"
@removeEvent="remove" />
@editEvent="edit" </q-toolbar>
/> <q-calendar-agenda
</div> v-model="selectedDate"
</template> :view="calendarRealView"
</q-calendar-agenda> :max-days="calendarDays"
</div> :weekdays="[1, 2, 3, 4, 5, 6, 0]"
</q-card> locale="de-de"
</q-page> style="height: 100%; min-height: 400px"
>
<template #day="{ scope: { timestamp } }">
<div itemref="" class="q-pb-sm" style="min-height: 200px">
<eventslot
v-for="(agenda, index) in events[timestamp.weekday]"
:key="index"
v-model="events[timestamp.weekday][index]"
@removeEvent="remove"
@editEvent="edit"
/>
</div>
</template>
</q-calendar-agenda>
</div>
</q-card>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from 'vue'; import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useScheduleStore } from '../../store';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';
import { startOfWeek } from 'src/utils/datetime'; import { startOfWeek } from 'src/utils/datetime';
import { useScheduleStore } from '../../store';
import { date } from 'quasar';
import Eventslot from './slots/EventSlot.vue';
import EditEvent from '../management/EditEvent.vue'; import EditEvent from '../management/EditEvent.vue';
export default defineComponent({ export default defineComponent({
@ -183,10 +187,18 @@ export default defineComponent({
void loadAgendas(); void loadAgendas();
} }
function calendarNow() {
const today = date.formatDate(new Date(), 'YYYY-MM-DD');
if (today !== selectedDate.value) {
selectedDate.value = today;
void loadAgendas();
}
}
function updateProxy() { function updateProxy() {
proxyDate.value = selectedDate.value; proxyDate.value = selectedDate.value;
} }
function saveNewSelectedDate() { function saveSelectedDate() {
proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD'); proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
selectedDate.value = proxyDate.value; selectedDate.value = proxyDate.value;
} }
@ -219,20 +231,21 @@ export default defineComponent({
return { return {
asYear, asYear,
asMonth, asMonth,
selectedDate, calendarDays,
calendarNext,
calendarNow,
calendarPrev,
calendarRealView,
calendarView,
edit, edit,
editor, editor,
editDone, editDone,
events, events,
calendarNext,
calendarPrev,
updateProxy,
saveNewSelectedDate,
proxyDate, proxyDate,
remove, remove,
calendarDays, saveSelectedDate,
calendarView, selectedDate,
calendarRealView, updateProxy,
}; };
}, },
}); });