[ported] Validate jobs before adding new and minimize inactive jobs

Ported from flaschengeist-frontend @7d1993e3faecdca3af47bc19f444857c49c3f3c4
This commit is contained in:
Ferdinand Thiessen 2021-11-23 17:32:48 +01:00
parent c31b804102
commit ff15ceb7d0
5 changed files with 151 additions and 94 deletions

View File

@ -27,7 +27,7 @@
"quasar": "^2.3.3",
"axios": "^0.24.0",
"prettier": "^2.4.1",
"typescript": "^4.4.4",
"typescript": "^4.5.2",
"pinia": "^2.0.4",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",

View File

@ -82,7 +82,14 @@
</div>
</div>
<template v-for="(job, index) in event.jobs" :key="index">
<edit-job-slot v-model="event.jobs[index]" @remove-job="removeJob(index)" />
<edit-job-slot
:ref="active === index ? 'activeJob' : undefined"
v-model="event.jobs[index]"
:active="index === active"
class="q-mb-md"
@activate="activate(index)"
@remove-job="removeJob(index)"
/>
</template>
</q-card-section>
<q-card-actions align="around">
@ -143,6 +150,8 @@ export default defineComponent({
});
});
const active = ref(0);
const activeJob = ref<{ validate: () => Promise<boolean> }>();
const templates = computed(() => store.templates);
const template = ref<FG.Event>();
const event = ref<EditableEvent>(props.modelValue || emptyEvent(startDate.value));
@ -157,34 +166,40 @@ export default defineComponent({
});
function addJob() {
event.value.jobs.push(emptyJob());
if (!activeJob.value) event.value.jobs.push(emptyJob());
else
void activeJob.value.validate().then((success) => {
if (success) {
event.value.jobs.push(emptyJob());
active.value = event.value.jobs.length - 1;
}
});
}
function removeJob(index: number) {
event.value.jobs.splice(index, 1);
if (active.value >= index) active.value--;
}
function fromTemplate(tpl: FG.Event) {
const today = new Date()
const today = new Date();
template.value = tpl;
event.value = Object.assign({}, tpl, {id: undefined});
event.value = Object.assign({}, tpl, { id: undefined });
// Adjust the start to match today
event.value.start = date.adjustDate(event.value.start,{
event.value.start = date.adjustDate(event.value.start, {
date: today.getDate(),
month: today.getMonth() + 1, // js inconsitency between getDate (1-31) and getMonth (0-11)
year: today.getFullYear()
})
year: today.getFullYear(),
});
// Use timestamp difference for faster adjustment
const diff = event.value.start.getTime() - tpl.start.getTime()
const diff = event.value.start.getTime() - tpl.start.getTime();
// Adjust end of event and all jobs
if (event.value.end)
event.value.end.setTime(event.value.end.getTime() + diff)
event.value.jobs.forEach(job => {
job.start.setTime(job.start.getTime() + diff)
if (job.end)
job.end.setTime(job.end.getTime() + diff)
})
if (event.value.end) event.value.end.setTime(event.value.end.getTime() + diff);
event.value.jobs.forEach((job) => {
job.start.setTime(job.start.getTime() + diff);
if (job.end) job.end.setTime(job.end.getTime() + diff);
});
}
async function save(template = false) {
@ -242,14 +257,24 @@ export default defineComponent({
function reset() {
event.value = Object.assign({}, props.modelValue || emptyEvent());
active.value = 0;
template.value = undefined;
}
const afterStart = (d: Date) =>
!d || event.value.start <= d || 'Das Veranstaltungsende muss vor dem Beginn liegen';
function activate(idx: number) {
void activeJob.value?.validate().then((s) => {
if (s) active.value = idx;
});
}
return {
activate,
active,
addJob,
activeJob,
afterStart,
event,
eventtypes,

View File

@ -1,66 +1,82 @@
<template>
<q-card class="fit row justify-start content-center items-center">
<q-card-section class="fit row justify-start content-center items-center">
<IsoDateInput
v-model="job.start"
class="col-xs-12 col-sm-6 q-pa-sm"
label="Beginn"
type="datetime"
:rules="[notEmpty]"
/>
<IsoDateInput
v-model="job.end"
class="col-xs-12 col-sm-6 q-pa-sm"
label="Ende"
type="datetime"
:rules="[notEmpty, isAfterDate]"
/>
<q-select
v-model="job.type"
filled
use-input
label="Dienstart"
input-debounce="0"
class="col-xs-12 col-sm-6 q-pa-sm"
:options="jobtypes"
option-label="name"
option-value="id"
map-options
clearable
:rules="[notEmpty]"
/>
<q-input
v-model="job.required_services"
filled
class="col-xs-12 col-sm-6 q-pa-sm"
label="Dienstanzahl"
type="number"
:rules="[notEmpty]"
/>
<q-input
v-model="job.comment"
class="col-12 q-pa-sm"
label="Beschreibung"
type="textarea"
filled
/>
<q-card class="fit">
<q-card-section
v-if="!active"
class="fit row justify-start content-center items-center text-center"
@click="$emit('activate')"
>
<div class="text-h6 col-12">{{ formatStartEnd(modelValue.start, modelValue.end) }}</div>
<div class="text-subtitle1 col-12">{{ typeName }} ({{ modelValue.required_services }})</div>
<div class="text-body2 text-italic text-left col-12">{{ modelValue.comment }}</div>
</q-card-section>
<q-card-section v-else>
<q-form ref="form" class="fit row justify-start content-center items-center">
<IsoDateInput
v-model="job.start"
class="col-xs-12 col-sm-6 q-pa-sm"
label="Beginn"
type="datetime"
:rules="[notEmpty]"
/>
<IsoDateInput
v-model="job.end"
class="col-xs-12 col-sm-6 q-pa-sm"
label="Ende"
type="datetime"
:rules="[notEmpty, isAfterDate]"
/>
<q-select
v-model="job.type"
filled
use-input
label="Dienstart"
input-debounce="0"
class="col-xs-12 col-sm-6 q-pa-sm"
:options="jobtypes"
option-label="name"
option-value="id"
map-options
clearable
:rules="[notEmpty]"
/>
<q-input
v-model="job.required_services"
filled
class="col-xs-12 col-sm-6 q-pa-sm"
label="Dienstanzahl"
type="number"
:rules="[notEmpty]"
/>
<q-input
v-model="job.comment"
class="col-12 q-pa-sm"
label="Kommentar"
type="textarea"
filled
/>
</q-form>
</q-card-section>
<q-card-actions>
<q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="removeJob" />
<q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="$emit('remove-job')" />
</q-card-actions>
</q-card>
</template>
<script lang="ts">
import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
import { defineComponent, computed, onBeforeMount, ref, PropType } from 'vue';
import { IsoDateInput } from '@flaschengeist/api/components';
import { notEmpty } from '@flaschengeist/api';
import { formatStartEnd, notEmpty } from '@flaschengeist/api';
import { useEventStore } from '../../store';
import { QForm } from 'quasar';
export default defineComponent({
name: 'JobSlot',
components: { IsoDateInput },
props: {
active: {
type: Boolean,
required: true,
},
modelValue: {
required: true,
type: Object as PropType<FG.Job>,
@ -71,16 +87,25 @@ export default defineComponent({
},
},
emits: {
activate: () => true,
'remove-job': () => true,
'update:modelValue': (job: FG.Job) => !!job,
},
setup(props, { emit }) {
setup(props, { emit, expose }) {
const store = useEventStore();
onBeforeMount(() => store.getJobTypes());
const form = ref<QForm>();
const jobtypes = computed(() => store.jobTypes);
const typeName = computed(() =>
typeof props.modelValue.type === 'object'
? props.modelValue.type.name
: jobtypes.value.find((j) => j.id === props.modelValue.type)?.name || 'Kein Typ gesetzt!'
);
const job = new Proxy(props.modelValue, {
get(target, prop) {
if (typeof prop === 'string') {
@ -96,23 +121,26 @@ export default defineComponent({
},
});
function removeJob() {
emit('remove-job');
}
function isAfterDate(val: Date) {
return props.modelValue.start < val || 'Ende muss hinter dem Start liegen';
}
expose({
validate: () => form.value?.validate() || Promise.resolve(true)
});
return {
form,
formatStartEnd,
isAfterDate,
job,
jobtypes,
removeJob,
notEmpty,
isAfterDate,
typeName,
};
},
});
</script>
<style></style>

View File

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

View File

@ -46,16 +46,14 @@ export const useEventStore = defineStore({
removeJobType(id: number) {
return api
.delete(`/events/job-types/${id}`)
.then(() => this.jobTypes = this.jobTypes.filter(v => v.id !== id));
.then(() => (this.jobTypes = this.jobTypes.filter((v) => v.id !== id)));
},
renameJobType(id: number, newName: string) {
return api
.put(`/events/job-types/${id}`, { name: newName })
.then(() => {
const idx = this.jobTypes.findIndex(v=>v.id===id);
if (idx >= 0) this.jobTypes[idx].name = newName;
})
return api.put(`/events/job-types/${id}`, { name: newName }).then(() => {
const idx = this.jobTypes.findIndex((v) => v.id === id);
if (idx >= 0) this.jobTypes[idx].name = newName;
});
},
async getEventTypes(force = false) {
@ -76,7 +74,7 @@ export const useEventStore = defineStore({
addEventType(name: string) {
return api
.post<FG.EventType>('/events/event-types', { name: name })
.then(({data}) => this.eventTypes.push(data))
.then(({ data }) => this.eventTypes.push(data));
},
async removeEvent(id: number) {
@ -85,7 +83,7 @@ export const useEventStore = defineStore({
const idx = this.templates.findIndex((v) => v.id === id);
if (idx !== -1) this.templates.splice(idx, 1);
} catch (e) {
if (isAxiosError(e, 404)) return false
if (isAxiosError(e, 404)) return false;
throw e;
}
return true;
@ -94,16 +92,14 @@ export const useEventStore = defineStore({
removeEventType(id: number) {
return api
.delete(`/events/event-types/${id}`)
.then(() => this.eventTypes = this.eventTypes.filter(v => v.id !== id));
.then(() => (this.eventTypes = this.eventTypes.filter((v) => v.id !== id)));
},
renameEventType(id: number, newName: string) {
return api
.put(`/events/event-types/${id}`, { name: newName })
.then(() => {
const idx = this.eventTypes.findIndex(v=>v.id===id);
if (idx >= 0) this.eventTypes[idx].name = newName;
})
return api.put(`/events/event-types/${id}`, { name: newName }).then(() => {
const idx = this.eventTypes.findIndex((v) => v.id === id);
if (idx >= 0) this.eventTypes[idx].name = newName;
});
},
async getTemplates(force = false) {
@ -115,7 +111,11 @@ export const useEventStore = defineStore({
return this.templates;
},
async getEvents(filter: { from?: Date; to?: Date, limit?: number, offset?: number, descending?: boolean } | undefined = undefined) {
async getEvents(
filter:
| { from?: Date; to?: Date; limit?: number; offset?: number; descending?: boolean }
| undefined = undefined
) {
try {
const { data } = await api.get<FG.Event[]>('/events', { params: filter });
data.forEach((element) => fixEvent(element));
@ -136,10 +136,11 @@ export const useEventStore = defineStore({
},
async assignToJob(jobId: number, service: FG.Service) {
return api.post<FG.Job>(`/events/jobs/${jobId}/assign`, service);
return api.post<FG.Job>(`/events/jobs/${jobId}/assign`, service);
},
async addEvent(event: EditableEvent) {
console.log('addEvent', event);
if (event?.id === undefined) {
const { data } = await api.post<FG.Event>('/events', event);
if (data.is_template) this.templates.push(data);
@ -147,7 +148,10 @@ export const useEventStore = defineStore({
} else {
if (typeof event.type === 'object') event.type = event.type.id;
const { data } = await api.put<FG.Event>(`/events/${event.id}`, Object.assign(event, {jobs: undefined}));
const { data } = await api.put<FG.Event>(
`/events/${event.id}`,
Object.assign(event, { jobs: undefined })
);
if (data.is_template) this.templates.push(data);
return data;
}
@ -157,8 +161,8 @@ export const useEventStore = defineStore({
return api.post<FG.Event>('/events/transfer', {
job: job.id,
receiver: invitees,
is_invite: isInvite
is_invite: isInvite,
});
}
},
},
});