Compare commits

...

2 Commits

Author SHA1 Message Date
Ferdinand Thiessen 511014d043 [style] Fix style on extra small devices
* Show only one day in the agenda view if devices has a very low width.
* Fix very tiny font on small devices
2021-11-16 23:30:21 +01:00
Ferdinand Thiessen a0192418e2 [deps] Fix compatibility of EditJob with current API.
This should, by the way, fix issues with Safari browser.
2021-11-16 23:27:20 +01:00
5 changed files with 25 additions and 32 deletions

View File

@ -78,7 +78,7 @@
</q-card-section>
<q-card-section v-for="(job, index) in event.jobs" :key="index">
<q-card class="q-my-auto">
<job
<edit-job-slot
v-model="event.jobs[index]"
:job-can-delete="jobDeleteDisabled"
@remove-job="removeJob(index)"
@ -105,12 +105,12 @@ import { date, ModifyDateOptions } from 'quasar';
import { useScheduleStore } from '../../store';
import { notEmpty } from '@flaschengeist/api';
import { IsoDateInput } from '@flaschengeist/api/components';
import Job from './Job.vue';
import EditJobSlot from './EditJobSlot.vue';
import RecurrenceRule from './RecurrenceRule.vue';
export default defineComponent({
name: 'EditEvent',
components: { IsoDateInput, Job, RecurrenceRule },
components: { IsoDateInput, EditJobSlot, RecurrenceRule },
props: {
modelValue: {
required: false,

View File

@ -56,7 +56,7 @@ import { notEmpty } from '@flaschengeist/api';
import { useScheduleStore } from '../../store';
export default defineComponent({
name: 'Job',
name: 'JobSlot',
components: { IsoDateInput },
props: {
modelValue: {
@ -95,8 +95,8 @@ export default defineComponent({
emit('remove-job');
}
function isAfterDate(val: string) {
return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
function isAfterDate(val: Date) {
return props.modelValue.start < val || 'Ende muss hinter dem Start liegen';
}
return {

View File

@ -49,6 +49,7 @@
</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
@ -80,7 +81,7 @@
</template>
<template #day="{ scope: { timestamp } }">
<div itemref="" class="q-pb-sm" style="min-height: 200px">
<eventslot
<event-slot
v-for="(agenda, index) in events[timestamp.weekday]"
:key="index"
v-model="events[timestamp.weekday][index]"
@ -98,27 +99,27 @@
<script lang="ts">
import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useScheduleStore } from '../../store';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';
import EventSlot from './slots/EventSlot.vue';
import { date, useQuasar } from 'quasar';
import { startOfWeek } from '@flaschengeist/api';
import EditEvent from '../management/EditEvent.vue';
import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
export default defineComponent({
name: 'AgendaView',
components: { Eventslot, EditEvent, QCalendarAgenda: <ComponentPublicInstance>QCalendarAgenda },
components: { EventSlot, EditEvent, QCalendarAgenda: <ComponentPublicInstance>QCalendarAgenda },
setup() {
const store = useScheduleStore();
const windowWidth = ref(window.innerWidth);
const quasar = useQuasar();
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(() =>
// <= 1023 is the breakpoint for sm to md
calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 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);
@ -128,10 +129,6 @@ export default defineComponent({
}
onBeforeMount(async () => {
window.addEventListener('resize', () => {
windowWidth.value = window.innerWidth;
});
await loadAgendas();
});

View File

@ -4,13 +4,13 @@
bordered
>
<q-card-section class="text-primary q-pa-xs">
<div class="text-weight-bolder text-center" style="font-size: 1.5vw">
<div class="text-weight-bolder text-center">
{{ event.type.name }}
<template v-if="event.name"
>: <span style="font-size: 1.2vw">{{ event.name }}</span>
>: <span>{{ event.name }}</span>
</template>
</div>
<div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
<div v-if="event.description" class="text-weight-medium">
{{ event.description }}
</div>
</q-card-section>
@ -53,7 +53,7 @@ import { PERMISSIONS } from '../../../permissions';
import JobSlot from './JobSlot.vue';
export default defineComponent({
name: 'Eventslot',
name: 'EventSlot',
components: { JobSlot },
props: {
modelValue: {

View File

@ -34,7 +34,7 @@
<q-tab-panel name="agendaView">
<AgendaView />
</q-tab-panel>
<q-tab-panel name="eventtypes">
<q-tab-panel name="listView">
</q-tab-panel>
</q-tab-panels>
</q-page>
@ -44,27 +44,23 @@
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import AgendaView from '../components/overview/AgendaView.vue';
import { Screen } from 'quasar';
import { useQuasar } from 'quasar';
export default defineComponent({
name: 'EventOverview',
components: { AgendaView },
setup() {
interface Tab {
name: string;
label: string;
}
const quasar = useQuasar();
const tabs: Tab[] = [
const tabs = computed(() => ([
{ name: 'listView', label: 'Liste' },
{ name: 'agendaView', label: 'Kalendar' }
];
]));
const drawer = ref<boolean>(false);
const showDrawer = computed({
get: () => {
return !Screen.gt.sm && drawer.value;
},
get: () => !quasar.screen.gt.sm && drawer.value,
set: (val: boolean) => {
drawer.value = val;
},