Flaschengeist
/
flaschengeist-schedule
7
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Activity

fix(ui) AgendaView now shows correct events on small devices

This commit is contained in:
Ferdinand Thiessen 2021-11-28 22:21:07 +01:00
parent 38cc0d43d6
commit c8ae458775
1 changed files with 68 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/overview/AgendaView.vue
View File

@ -27,7 +27,7 @@
<q-popup-proxy ref="proxy" transition-show="scale" transition-hide="scale">
<q-date
ref="datepicker"
:model-value="selectedDate"
:model-value="date(selectedDate)"
mask="YYYY-MM-DD"
no-unset
@update:model-value="updateDate"
@ -53,7 +53,7 @@
</div>
</div>
<q-calendar-agenda
v-model="selectedDate"
:model-value="date(realDate)"
:view="calendarRealView"
:max-days="calendarDays"
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
@ -89,13 +89,14 @@
<script lang="ts">
import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useEventStore } from '../../store';
import EventSlot from './slots/EventSlot.vue';
import { date, QDate, QPopupProxy, useQuasar } from 'quasar';
import { startOfWeek } from '@flaschengeist/api';
import EditEvent from '../management/EditEvent.vue';
import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
import { date, QDate, QPopupProxy, useQuasar } from 'quasar';
import { EditableEvent, emptyEvent } from '../../store/models';
import { startOfWeek } from '@flaschengeist/api';
import { useEventStore } from '../../store';
import EventSlot from './slots/EventSlot.vue';
import EditEvent from '../management/EditEvent.vue';
export default defineComponent({
name: 'AgendaView',
@ -108,13 +109,30 @@ export default defineComponent({
const datepicker = ref<QDate>();
const proxy = ref<QPopupProxy>();
const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
// User selectable (day vs week)
const calendarView = ref('week');
// User selected date
const selectedDate = ref(date.buildDate({ hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }));
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
const calendarDays = computed(() =>
calendarView.value == 'day' || quasar.screen.xs ? 1 : quasar.screen.sm ? 3 : 7
// Real view depending on the screen size
const calendarRealView = computed(() =>
calendarView.value === 'day' || quasar.screen.xs || quasar.screen.sm ? 'day' : 'week'
);
const calendarDays = computed(() => {
if (calendarView.value == 'day' || quasar.screen.xs) return 1;
if (calendarRealView.value == 'week') return 7;
return realDate.value.getDay() === 1 ? 3 : 4;
});
const realDate = computed(() => {
if (calendarView.value === 'day' || calendarRealView.value === 'week' || quasar.screen.xs)
return selectedDate.value;
const start = startOfWeek(selectedDate.value);
if (selectedDate.value.getDay() > 0 && selectedDate.value.getDay() <= 3) return start;
else return date.addToDate(start, { days: 3 });
});
const events = ref<Agendas>({});
const editor = ref<EditableEvent>();
@ -154,17 +172,12 @@ export default defineComponent({
}
async function loadAgendas() {
const selected = date.adjustDate(selectedDate.value, {
milliseconds: 0,
seconds: 0,
minutes: 0,
hours: 0,
});
const start = calendarView.value === 'day' ? selected : startOfWeek(selected);
const end = date.addToDate(start, { days: calendarDays.value });
const from =
calendarView.value === 'day' ? selectedDate.value : startOfWeek(selectedDate.value);
const to = date.addToDate(from, { days: calendarView.value === 'day' ? 1 : 7 });
events.value = {};
const { result } = await store.getEvents({ from: start, to: end });
const { result } = await store.getEvents({ from, to });
result.forEach((event) => {
const day = event.start.getDay();
@ -175,26 +188,17 @@ export default defineComponent({
});
}
function calendarNext() {
selectedDate.value = date.formatDate(
date.addToDate(selectedDate.value, { days: calendarDays.value }),
'YYYY-MM-DD'
);
function addDays(reverse: boolean) {
const oww = Math.floor((startOfWeek(selectedDate.value).getTime() / 1000) * 60 * 60 * 24);
selectedDate.value = date.addToDate(realDate.value, {
days: reverse ? -1 : calendarDays.value,
});
if (oww != Math.floor((startOfWeek(selectedDate.value).getTime() / 1000) * 60 * 60 * 24))
void loadAgendas();
}
function calendarPrev() {
selectedDate.value = date.formatDate(
date.subtractFromDate(selectedDate.value, { days: calendarDays.value }),
'YYYY-MM-DD'
);
void loadAgendas();
}
function asMonth(value: string) {
if (value) {
return date.formatDate(new Date(value), 'MMMM', {
months: [
function asMonth(value?: Date) {
return [
'Januar',
'Februar',
'März',
@ -207,35 +211,39 @@ export default defineComponent({
'Oktober',
'November',
'Dezember',
],
});
}
}
function asYear(value: string) {
if (value) {
return date.formatDate(new Date(value), 'YYYY');
'-',
][value?.getMonth() || 12];
}
function asYear(value?: Date) {
return value?.getFullYear() || '-';
}
return {
asYear,
asMonth,
calendarDays,
calendarNext,
calendarPrev,
calendarNext: () => addDays(false),
calendarPrev: () => addDays(true),
calendarRealView,
calendarView,
create,
date: (d: Date) => date.formatDate(d, 'YYYY-MM-DD'),
edit,
editor,
editDone,
events,
datepicker,
proxy,
realDate,
remove,
selectedDate,
updateDate: (ds: string) => {
selectedDate.value = ds;
selectedDate.value = date.adjustDate(date.extractDate(ds, 'YYYY-MM-DD'), {
hours: 0,
minutes: 0,
seconds: 0,
milliseconds: 0,
});
proxy.value?.hide();
},
};