[events] AgendaView button for current week / day
This commit is contained in:
parent
f712bfd4f9
commit
a59f778851
|
|
@ -7,7 +7,11 @@
|
|||
>
|
||||
<q-card>
|
||||
<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)" />
|
||||
</div>
|
||||
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
|
||||
|
|
@ -16,82 +20,82 @@
|
|||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-page padding>
|
||||
<q-card>
|
||||
<div style="max-width: 1800px; width: 100%">
|
||||
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
|
||||
<div class="row justify-center items-center">
|
||||
<q-btn flat dense label="Prev" @click="calendarPrev" />
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense
|
||||
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||
<q-popup-proxy
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
@before-show="updateProxy"
|
||||
>
|
||||
<q-date v-model="proxyDate">
|
||||
<div class="row items-center justify-end q-gutter-sm">
|
||||
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
||||
<q-btn
|
||||
v-close-popup
|
||||
label="OK"
|
||||
color="primary"
|
||||
flat
|
||||
@click="saveNewSelectedDate(proxyDate)"
|
||||
/>
|
||||
</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"
|
||||
<q-card>
|
||||
<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-btn flat dense class="row absolute-left q-ml-sm"
|
||||
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||
<q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
|
||||
<q-date v-model="proxyDate">
|
||||
<div class="row items-center justify-end q-gutter-sm">
|
||||
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
||||
<q-btn
|
||||
v-close-popup
|
||||
label="OK"
|
||||
color="primary"
|
||||
flat
|
||||
@click="saveSelectedDate(proxyDate)"
|
||||
/>
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
<div class="row justify-center items-center">
|
||||
<q-btn flat dense label="Zurück" @click="calendarPrev" />
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
flat
|
||||
stretch
|
||||
toggle-color=""
|
||||
:options="[
|
||||
{ label: 'Tag', value: 'day' },
|
||||
{ label: 'Woche', value: 'week' },
|
||||
]"
|
||||
dense
|
||||
:label="calendarView == 'day' ? 'Heute' : 'Diese Woche'"
|
||||
@click="calendarNow"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-calendar-agenda
|
||||
v-model="selectedDate"
|
||||
:view="calendarRealView"
|
||||
:max-days="calendarDays"
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
locale="de-de"
|
||||
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>
|
||||
</q-page>
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense label="Weiter" @click="calendarNext" />
|
||||
</div>
|
||||
<!-- <q-space /> -->
|
||||
|
||||
<q-btn-toggle
|
||||
v-model="calendarView"
|
||||
class="row absolute-right"
|
||||
flat
|
||||
stretch
|
||||
toggle-color=""
|
||||
:options="[
|
||||
{ label: 'Tag', value: 'day' },
|
||||
{ label: 'Woche', value: 'week' },
|
||||
]"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-calendar-agenda
|
||||
v-model="selectedDate"
|
||||
:view="calendarRealView"
|
||||
:max-days="calendarDays"
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
locale="de-de"
|
||||
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>
|
||||
|
||||
<script lang="ts">
|
||||
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 { useScheduleStore } from '../../store';
|
||||
import { date } from 'quasar';
|
||||
import Eventslot from './slots/EventSlot.vue';
|
||||
import EditEvent from '../management/EditEvent.vue';
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -183,10 +187,18 @@ export default defineComponent({
|
|||
void loadAgendas();
|
||||
}
|
||||
|
||||
function calendarNow() {
|
||||
const today = date.formatDate(new Date(), 'YYYY-MM-DD');
|
||||
if (today !== selectedDate.value) {
|
||||
selectedDate.value = today;
|
||||
void loadAgendas();
|
||||
}
|
||||
}
|
||||
|
||||
function updateProxy() {
|
||||
proxyDate.value = selectedDate.value;
|
||||
}
|
||||
function saveNewSelectedDate() {
|
||||
function saveSelectedDate() {
|
||||
proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
|
||||
selectedDate.value = proxyDate.value;
|
||||
}
|
||||
|
|
@ -219,20 +231,21 @@ export default defineComponent({
|
|||
return {
|
||||
asYear,
|
||||
asMonth,
|
||||
selectedDate,
|
||||
calendarDays,
|
||||
calendarNext,
|
||||
calendarNow,
|
||||
calendarPrev,
|
||||
calendarRealView,
|
||||
calendarView,
|
||||
edit,
|
||||
editor,
|
||||
editDone,
|
||||
events,
|
||||
calendarNext,
|
||||
calendarPrev,
|
||||
updateProxy,
|
||||
saveNewSelectedDate,
|
||||
proxyDate,
|
||||
remove,
|
||||
calendarDays,
|
||||
calendarView,
|
||||
calendarRealView,
|
||||
saveSelectedDate,
|
||||
selectedDate,
|
||||
updateProxy,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue