[ported] Structural and minor optical cleanup

Took from flaschengeist-frontend @f712bfd4f9e36210766cec117ed8504669556a75
This commit is contained in:
Ferdinand Thiessen 2021-11-22 12:00:59 +01:00
parent 13539a675b
commit 5b657f4bf0
4 changed files with 76 additions and 51 deletions

View File

@ -78,12 +78,7 @@
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" /> <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
</q-card-section> </q-card-section>
<q-card-section v-for="(job, index) in event.jobs" :key="index"> <q-card-section v-for="(job, index) in event.jobs" :key="index">
<q-card class="q-my-auto"> <edit-job-slot v-model="event.jobs[index]" @remove-job="removeJob(index)" />
<edit-job-slot
v-model="event.jobs[index]"
@remove-job="removeJob(index)"
/>
</q-card>
</q-card-section> </q-card-section>
<q-card-actions align="around"> <q-card-actions align="around">
<q-card-actions align="left"> <q-card-actions align="left">
@ -100,11 +95,15 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
import { date, ModifyDateOptions } from 'quasar';
import { useEventStore } from '../../store';
import { notEmpty } from '@flaschengeist/api'; import { notEmpty } from '@flaschengeist/api';
import { IsoDateInput } from '@flaschengeist/api/components'; import { IsoDateInput } from '@flaschengeist/api/components';
import { useEventStore } from '../../store';
import { emptyEvent, emptyJob, EditableEvent } from '../../store/models';
import { date, ModifyDateOptions } from 'quasar';
import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
import EditJobSlot from './EditJobSlot.vue'; import EditJobSlot from './EditJobSlot.vue';
import RecurrenceRule from './RecurrenceRule.vue'; import RecurrenceRule from './RecurrenceRule.vue';
@ -120,8 +119,8 @@ export default defineComponent({
date: { date: {
required: false, required: false,
default: undefined, default: undefined,
type: String as PropType<string|undefined> type: String as PropType<string | undefined>,
} },
}, },
emits: { emits: {
done: (val: boolean) => typeof val === 'boolean', done: (val: boolean) => typeof val === 'boolean',
@ -129,33 +128,19 @@ export default defineComponent({
setup(props, { emit }) { setup(props, { emit }) {
const store = useEventStore(); const store = useEventStore();
const startDate = computed(() => { const startDate = computed(() => {
const d = date.buildDate({milliseconds: 0, seconds: 0, minutes: 0, hours: 0}) const d = date.buildDate({ milliseconds: 0, seconds: 0, minutes: 0, hours: 0 });
if (!props.date || !date.isValid(props.date)) return d if (!props.date || !date.isValid(props.date)) return d;
const split = props.date.split('-'); const split = props.date.split('-');
return date.adjustDate(d, {year: parseInt(split[0]), month: parseInt(split[1]), date: parseInt(split[2])}) return date.adjustDate(d, {
}) year: parseInt(split[0]),
month: parseInt(split[1]),
date: parseInt(split[2]),
const emptyJob = () => ({ });
id: NaN,
start: date.adjustDate(startDate.value, {hours: (new Date()).getHours()}, true),
end: date.addToDate(date.adjustDate(startDate.value, {hours: (new Date()).getHours()}, true), {hours: 1}),
services: [],
required_services: 2,
type: store.jobTypes[0],
});
const emptyEvent = () => ({
id: NaN,
start: new Date(startDate.value),
jobs: [emptyJob()],
type: store.eventTypes[0],
is_template: false,
}); });
const templates = computed(() => store.templates); const templates = computed(() => store.templates);
const template = ref<FG.Event | undefined>(undefined); const template = ref<FG.Event | undefined>(undefined);
const event = ref<FG.Event>(props.modelValue || emptyEvent()); const event = ref<EditableEvent>(props.modelValue || emptyEvent(startDate.value));
const eventtypes = computed(() => store.eventTypes); const eventtypes = computed(() => store.eventTypes);
const recurrent = ref(false); const recurrent = ref(false);
const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 }); const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 });
@ -184,7 +169,7 @@ export default defineComponent({
event.value.is_template = template; event.value.is_template = template;
try { try {
if (!isNaN(event.value.id)) { if (event.value?.id !== undefined) {
//fix //fix
} }
await store.addEvent(event.value); await store.addEvent(event.value);
@ -239,7 +224,8 @@ export default defineComponent({
template.value = undefined; template.value = undefined;
} }
const afterStart = (d: Date) => !d || (event.value.start <= d || 'Das Veranstaltungsende muss vor dem Beginn liegen') const afterStart = (d: Date) =>
!d || event.value.start <= d || 'Das Veranstaltungsende muss vor dem Beginn liegen';
return { return {
addJob, addJob,

View File

@ -1,5 +1,5 @@
<template> <template>
<q-card-section class="fit row justify-start content-center items-center"> <q-card class="fit row justify-start content-center items-center">
<q-card-section class="fit row justify-start content-center items-center"> <q-card-section class="fit row justify-start content-center items-center">
<IsoDateInput <IsoDateInput
v-model="job.start" v-model="job.start"
@ -45,8 +45,10 @@
filled filled
/> />
</q-card-section> </q-card-section>
<q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" /> <q-card-actions>
</q-card-section> <q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="removeJob" />
</q-card-actions>
</q-card>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -63,10 +65,10 @@ export default defineComponent({
required: true, required: true,
type: Object as PropType<FG.Job>, type: Object as PropType<FG.Job>,
}, },
jobCanDelete: { canDelete: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
}, },
emits: { emits: {
'remove-job': () => true, 'remove-job': () => true,
@ -82,7 +84,7 @@ export default defineComponent({
const job = new Proxy(props.modelValue, { const job = new Proxy(props.modelValue, {
get(target, prop) { get(target, prop) {
if (typeof prop === 'string') { if (typeof prop === 'string') {
return ((props.modelValue as unknown) as Record<string, unknown>)[prop]; return (props.modelValue as unknown as Record<string, unknown>)[prop];
} }
}, },
set(obj, prop, value) { set(obj, prop, value) {

View File

@ -1,9 +1,6 @@
import { api, isAxiosError } from '@flaschengeist/api'; import { api, isAxiosError } from '@flaschengeist/api';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { EditableEvent } from './models';
interface UserService {
user: FG.Service;
}
function fixJob(job: FG.Job) { function fixJob(job: FG.Job) {
job.start = new Date(job.start); job.start = new Date(job.start);
@ -142,8 +139,8 @@ export const useEventStore = defineStore({
return api.post<FG.Job>(`/events/jobs/${jobId}/assign`, service); return api.post<FG.Job>(`/events/jobs/${jobId}/assign`, service);
}, },
async addEvent(event: FG.Event) { async addEvent(event: EditableEvent) {
if (isNaN(event.id)) { if (event?.id === undefined) {
const { data } = await api.post<FG.Event>('/events', event); const { data } = await api.post<FG.Event>('/events', event);
if (data.is_template) this.templates.push(data); if (data.is_template) this.templates.push(data);
return data; return data;
@ -156,10 +153,12 @@ export const useEventStore = defineStore({
} }
}, },
async sendInvite(job: FG.Job, invitees: FG.User[], transfer = false) { async sendInvite(job: FG.Job, invitees: FG.User[], isInvite = true) {
await Promise.resolve() return api.post<FG.Event>('/events/transfer', {
console.log(job, invitees, transfer) job: job.id,
return Promise.resolve() receiver: invitees,
is_invite: isInvite
});
} }
}, },
}); });

38
src/store/models.ts Normal file
View File

@ -0,0 +1,38 @@
import { date } from 'quasar';
/** An new event does not contain an id and the type might be unset */
export type EditableEvent = Omit<Omit<Omit<FG.Event, 'jobs'>, 'type'>, 'id'> & {
type?: FG.EventType | number;
id?: number;
jobs: EditableJob[];
};
/** A new job does not have an id or type assigned */
export type EditableJob = Omit<Omit<FG.Job, 'type'>, 'id'> & {
type?: FG.EventType | number;
id?: number;
};
export function emptyJob(startDate = new Date()): EditableJob {
const start = date.adjustDate(startDate, {
hours: new Date().getHours(),
minutes: 0,
seconds: 0,
milliseconds: 0,
});
return {
start: start,
end: date.addToDate(start, { hours: 1 }),
services: [],
locked: false,
required_services: 2,
};
}
export function emptyEvent(startDate?: Date): EditableEvent {
return {
start: startDate === undefined ? new Date() : new Date(startDate),
jobs: [emptyJob(startDate)],
is_template: false,
};
}