Compare commits

...

2 Commits

5 changed files with 61 additions and 34 deletions

View File

@ -16,7 +16,7 @@
map-options map-options
clearable clearable
:disable="templates.length == 0" :disable="templates.length == 0"
@update:modelValue="fromTemplate" @update:model-value="fromTemplate"
@clear="reset()" @clear="reset()"
/> />
<q-input <q-input
@ -60,7 +60,7 @@
filled filled
/> />
</q-card-section> </q-card-section>
<q-card-section v-if="event.template_id === undefined && modelValue === undefined"> <q-card-section v-if="event.is_template !== true && modelValue === undefined">
<q-btn-toggle <q-btn-toggle
v-model="recurrent" v-model="recurrent"
spread spread
@ -117,6 +117,11 @@ export default defineComponent({
default: () => undefined, default: () => undefined,
type: Object as PropType<FG.Event | undefined>, type: Object as PropType<FG.Event | undefined>,
}, },
date: {
required: false,
default: '',
type: String
}
}, },
emits: { emits: {
done: (val: boolean) => typeof val === 'boolean', done: (val: boolean) => typeof val === 'boolean',
@ -126,8 +131,8 @@ export default defineComponent({
const emptyJob = { const emptyJob = {
id: NaN, id: NaN,
start: new Date(), start: date.adjustDate(new Date(props.date), {hours: (new Date()).getHours()}),
end: date.addToDate(new Date(), { hours: 1 }), end: date.addToDate(date.adjustDate(new Date(props.date), {hours: (new Date()).getHours()}), {hours: 1}),
services: [], services: [],
required_services: 2, required_services: 2,
type: store.jobTypes[0], type: store.jobTypes[0],
@ -135,7 +140,7 @@ export default defineComponent({
const emptyEvent = { const emptyEvent = {
id: NaN, id: NaN,
start: new Date(), start: new Date(props.date),
jobs: [Object.assign({}, emptyJob)], jobs: [Object.assign({}, emptyJob)],
type: store.eventTypes[0], type: store.eventTypes[0],
is_template: false, is_template: false,

View File

@ -6,7 +6,7 @@
<div class="text-h6">Editere {{title}} {{ actualType.name }}</div> <div class="text-h6">Editere {{title}} {{ actualType.name }}</div>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section>
<q-input v-model="actualType.name" :rules="rules" ref="dialogInput" dense label="name" filled /> <q-input ref="dialogInput" v-model="actualType.name" :rules="rules" dense label="name" filled />
</q-card-section> </q-card-section>
<q-card-actions> <q-card-actions>
<q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" /> <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
@ -20,8 +20,8 @@
<q-table :title="title" :rows="rows" row-key="id" :columns="columns"> <q-table :title="title" :rows="rows" row-key="id" :columns="columns">
<template #top-right> <template #top-right>
<q-input <q-input
v-model="actualType.name"
ref="input" ref="input"
v-model="actualType.name"
:rules="rules" :rules="rules"
dense dense
placeholder="Neuer Typ" placeholder="Neuer Typ"
@ -62,22 +62,21 @@ export default defineComponent({
}, },
setup(props) { setup(props) {
const store = useScheduleStore(); const store = useScheduleStore();
const newType = ref('');
const dialogOpen = ref(false); const dialogOpen = ref(false);
const emptyType = { id: -1, name: '' }; const emptyType = { id: -1, name: '' };
const actualType = ref(emptyType); const actualType = ref(emptyType);
const input = ref<QInput>(null); const input = ref<QInput>();
const dialogInput = ref<QInput>(null); const dialogInput = ref<QInput>();
const storeName = computed(() => props.type.charAt(0).toLowerCase() + props.type.slice(1) + 's') const storeName = computed(() => props.type == 'EventType' ? 'eventTypes' : 'jobTypes')
onBeforeMount(async () => await store[`get${props.type}s`]()); onBeforeMount(async () => await store[`get${props.type}s`]());
const rows = computed(() => store[storeName.value]); const rows = computed(() => <(FG.EventType|FG.JobType)[]>store[storeName.value]);
const rules = [ const rules = [
(s: any) => !!s || 'Darf nicht leer sein!', (s: unknown) => !!s || 'Darf nicht leer sein!',
(s: string) => (s: string) =>
store[storeName.value].find((e) => e.name === s) === undefined || rows.value.find((e) => e.name === s) === undefined ||
'Der Name wird bereits verwendet', 'Der Name wird bereits verwendet',
]; ];
@ -98,7 +97,7 @@ export default defineComponent({
]; ];
function addType() { function addType() {
if (input.value === null || input.value.validate()) if (input.value === undefined || input.value.validate())
store store
[`add${props.type}`](actualType.value.name) [`add${props.type}`](actualType.value.name)
.then(() => { .then(() => {
@ -124,8 +123,8 @@ export default defineComponent({
} }
function saveChanges() { function saveChanges() {
if (dialogInput.value === null || dialogInput.value.validate()) if (dialogInput.value === undefined || dialogInput.value.validate())
store[`rename${props.type}`](actualType.value.id, actualType.value.name).then(() => discardChanges()); void store[`rename${props.type}`](actualType.value.id, actualType.value.name).then(() => discardChanges());
} }
function discardChanges() { function discardChanges() {

View File

@ -38,7 +38,7 @@
label="OK" label="OK"
color="primary" color="primary"
flat flat
@click="saveNewSelectedDate(proxyDate)" @click="saveNewSelectedDate"
/> />
</div> </div>
</q-date> </q-date>
@ -48,16 +48,16 @@
<q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" /> <q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
</div> </div>
<div class="col-xs-12 col-sm-3 text-center"> <div class="col-xs-12 col-sm-3 text-center">
<q-btn-toggle <q-btn-toggle
v-model="calendarView" v-model="calendarView"
flat flat
stretch stretch
toggle-color="black" toggle-color="black"
:options="[ :options="[
{ label: 'Tag', value: 'day' }, { label: 'Tag', value: 'day' },
{ label: 'Woche', value: 'week' }, { label: 'Woche', value: 'week' },
]" ]"
/> />
</div> </div>
</div> </div>
<q-calendar-agenda <q-calendar-agenda
@ -68,14 +68,24 @@
locale="de-de" locale="de-de"
style="height: 100%; min-height: 400px" 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 } }"> <template #day="{ scope: { timestamp } }">
<div itemref="" class="q-pb-sm" style="min-height: 200px"> <div itemref="" class="q-pb-sm" style="min-height: 200px">
<eventslot <eventslot
v-for="(agenda, index) in events[timestamp.weekday]" v-for="(agenda, index) in events[timestamp.weekday]"
:key="index" :key="index"
v-model="events[timestamp.weekday][index]" v-model="events[timestamp.weekday][index]"
@removeEvent="remove" @remove-event="remove"
@editEvent="edit" @edit-event="edit"
/> />
</div> </div>
</template> </template>
@ -92,7 +102,7 @@ import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar'; import { date } from 'quasar';
import { startOfWeek } from '@flaschengeist/api'; import { startOfWeek } from '@flaschengeist/api';
import EditEvent from '../management/EditEvent.vue'; import EditEvent from '../management/EditEvent.vue';
import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar' import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
export default defineComponent({ export default defineComponent({
name: 'AgendaView', name: 'AgendaView',
@ -108,7 +118,7 @@ export default defineComponent({
const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week')); const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
const calendarDays = computed(() => const calendarDays = computed(() =>
// <= 1023 is the breakpoint for sm to md // <= 1023 is the breakpoint for sm to md
calendarView.value == 'day' ? 1 : (windowWidth.value <= 1023 ? 3 : 7) calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
); );
const events = ref<Agendas>({}); const events = ref<Agendas>({});
const editor = ref<FG.Event | undefined>(undefined); const editor = ref<FG.Event | undefined>(undefined);

View File

@ -32,7 +32,7 @@
animated animated
> >
<q-tab-panel name="create"> <q-tab-panel name="create">
<EditEvent /> <EditEvent :date="date" />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="eventtypes"> <q-tab-panel name="eventtypes">
<ManageTypes title="Veranstaltungstyp" type="EventType" /> <ManageTypes title="Veranstaltungstyp" type="EventType" />
@ -56,6 +56,13 @@ import { Screen } from 'quasar';
export default defineComponent({ export default defineComponent({
name: 'EventManagement', name: 'EventManagement',
components: { EditEvent, ManageTypes }, components: { EditEvent, ManageTypes },
props: {
date: {
type: String,
required: false,
default: undefined
}
},
setup() { setup() {
const tabs = computed(() => [ const tabs = computed(() => [
{ name: 'create', label: 'Veranstaltungen' }, { name: 'create', label: 'Veranstaltungen' },
@ -64,6 +71,7 @@ export default defineComponent({
]); ]);
const drawer = ref<boolean>(false); const drawer = ref<boolean>(false);
const tab = ref<string>('create');
const showDrawer = computed({ const showDrawer = computed({
get: () => { get: () => {
@ -74,7 +82,6 @@ export default defineComponent({
}, },
}); });
const tab = ref<string>('create');
return { return {
showDrawer, showDrawer,

View File

@ -31,6 +31,7 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
path: 'schedule-management', path: 'schedule-management',
name: 'schedule-management', name: 'schedule-management',
component: () => import('../pages/Management.vue'), component: () => import('../pages/Management.vue'),
props: (route) => ({date: route.query.date}),
}, },
}, },
{ {
@ -48,6 +49,11 @@ export const innerRoutes: FG_Plugin.MenuRoute[] = [
]; ];
export const privateRoutes: FG_Plugin.NamedRouteRecordRaw[] = [ export const privateRoutes: FG_Plugin.NamedRouteRecordRaw[] = [
{
name: 'new-event',
path: 'new-event',
redirect: {name: 'schedule-management'}
},
{ {
name: 'events-edit', name: 'events-edit',
path: 'schedule/:id/edit', path: 'schedule/:id/edit',