[ported] AgendaView button for current week / day
Ported from flaschengeist-frontend @a59f7788511f9ce4fd4522621c82b389809ac7ab
This commit is contained in:
parent
5b657f4bf0
commit
6985904a3b
|
|
@ -16,92 +16,82 @@
|
|||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-page padding>
|
||||
<q-card>
|
||||
<div style="max-width: 1800px; width: 100%">
|
||||
<div class="bg-primary text-white q-my-sm shadow-2 row justify-center">
|
||||
<div class="col-xs-12 col-sm-9 row justify-center items-center">
|
||||
<q-btn flat dense icon="mdi-chevron-left" title="previous" @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"
|
||||
/>
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 text-center">
|
||||
<q-btn-toggle
|
||||
v-if="$q.screen.gt.xs"
|
||||
v-model="calendarView"
|
||||
flat
|
||||
stretch
|
||||
toggle-color="black"
|
||||
:options="[
|
||||
{ label: 'Tag', value: 'day' },
|
||||
{ label: 'Woche', value: 'week' },
|
||||
]"
|
||||
<q-card>
|
||||
<div style="max-width: 1800px; width: 100%">
|
||||
<div class="bg-primary text-white q-my-sm shadow-2 row justify-center">
|
||||
<div class="col-xs-12 col-sm-9 row justify-center items-center">
|
||||
<q-btn flat dense icon="mdi-chevron-left" title="previous" @click="calendarPrev" />
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense
|
||||
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||
<q-popup-proxy transition-show="scale" transition-hide="scale">
|
||||
<q-date
|
||||
ref="datepicker"
|
||||
v-model="selectedDate"
|
||||
v-close-popup
|
||||
mask="YYYY-MM-DD"
|
||||
no-unset
|
||||
><q-btn v-close-popup label="jetzt" dense flat @click="datepicker?.setToday()"
|
||||
/></q-date>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 text-center">
|
||||
<q-btn-toggle
|
||||
v-if="$q.screen.gt.xs"
|
||||
v-model="calendarView"
|
||||
flat
|
||||
stretch
|
||||
toggle-color="black"
|
||||
:options="[
|
||||
{ label: 'Tag', value: 'day' },
|
||||
{ label: 'Woche', value: 'week' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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 #head-day-label="{ scope: { timestamp } }">
|
||||
{{ timestamp.day }}
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item exact :to="{ name: 'new-event', query: { date: timestamp.date } }">
|
||||
<q-item-section>Neue Veranstaltung</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</template>
|
||||
<template #day="{ scope: { timestamp } }">
|
||||
<div itemref="" class="q-pa-sm" style="min-height: 200px">
|
||||
<event-slot
|
||||
v-for="(agenda, index) in events[timestamp.weekday]"
|
||||
:key="index"
|
||||
v-model="events[timestamp.weekday][index]"
|
||||
class="q-mb-sm"
|
||||
@remove-event="remove"
|
||||
@edit-event="edit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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 #head-day-label="{scope: {timestamp}}">
|
||||
{{timestamp.day}}
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item exact :to="{name: 'new-event', query: {date: timestamp.date}}">
|
||||
<q-item-section>Neue Veranstaltung</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</template>
|
||||
<template #day="{ scope: { timestamp } }">
|
||||
<div itemref="" class="q-pa-sm" style="min-height: 200px">
|
||||
<event-slot
|
||||
v-for="(agenda, index) in events[timestamp.weekday]"
|
||||
:key="index"
|
||||
v-model="events[timestamp.weekday][index]"
|
||||
class="q-mb-sm"
|
||||
@remove-event="remove"
|
||||
@edit-event="edit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-calendar-agenda>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-page>
|
||||
</template>
|
||||
</q-calendar-agenda>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
|
||||
import { useEventStore } from '../../store';
|
||||
import EventSlot from './slots/EventSlot.vue';
|
||||
import { date, useQuasar } from 'quasar';
|
||||
import { date, QDate, useQuasar } from 'quasar';
|
||||
import { startOfWeek } from '@flaschengeist/api';
|
||||
import EditEvent from '../management/EditEvent.vue';
|
||||
import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
|
||||
|
|
@ -114,13 +104,14 @@ export default defineComponent({
|
|||
const store = useEventStore();
|
||||
const quasar = useQuasar();
|
||||
|
||||
const datepicker = ref<QDate>();
|
||||
|
||||
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
||||
const proxyDate = ref('');
|
||||
const calendarView = ref('week');
|
||||
|
||||
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
|
||||
const calendarDays = computed(() =>
|
||||
(calendarView.value == 'day' || quasar.screen.xs) ? 1 : quasar.screen.sm ? 3 : 7
|
||||
calendarView.value == 'day' || quasar.screen.xs ? 1 : quasar.screen.sm ? 3 : 7
|
||||
);
|
||||
const events = ref<Agendas>({});
|
||||
const editor = ref<FG.Event | undefined>(undefined);
|
||||
|
|
@ -158,7 +149,12 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
async function loadAgendas() {
|
||||
const selected = date.adjustDate(selectedDate.value, {milliseconds: 0, seconds: 0, minutes: 0, hours: 0});
|
||||
const selected = date.adjustDate(selectedDate.value, {
|
||||
milliseconds: 0,
|
||||
seconds: 0,
|
||||
minutes: 0,
|
||||
hours: 0,
|
||||
});
|
||||
const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
|
||||
const end = date.addToDate(start, { days: calendarDays.value });
|
||||
|
||||
|
|
@ -190,13 +186,6 @@ export default defineComponent({
|
|||
void loadAgendas();
|
||||
}
|
||||
|
||||
function updateProxy() {
|
||||
proxyDate.value = selectedDate.value;
|
||||
}
|
||||
function saveNewSelectedDate() {
|
||||
proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
|
||||
selectedDate.value = proxyDate.value;
|
||||
}
|
||||
function asMonth(value: string) {
|
||||
if (value) {
|
||||
return date.formatDate(new Date(value), 'MMMM', {
|
||||
|
|
@ -226,20 +215,18 @@ export default defineComponent({
|
|||
return {
|
||||
asYear,
|
||||
asMonth,
|
||||
selectedDate,
|
||||
calendarDays,
|
||||
calendarNext,
|
||||
calendarPrev,
|
||||
calendarRealView,
|
||||
calendarView,
|
||||
edit,
|
||||
editor,
|
||||
editDone,
|
||||
events,
|
||||
calendarNext,
|
||||
calendarPrev,
|
||||
updateProxy,
|
||||
saveNewSelectedDate,
|
||||
proxyDate,
|
||||
datepicker,
|
||||
remove,
|
||||
calendarDays,
|
||||
calendarView,
|
||||
calendarRealView,
|
||||
selectedDate,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue