[events] Validate jobs before adding new
This commit is contained in:
parent
6a35f3c669
commit
7d1993e3fa
|
|
@ -82,9 +82,12 @@
|
|||
</q-card-section>
|
||||
<template v-for="(job, index) in event.jobs" :key="index">
|
||||
<job
|
||||
:ref="active === index ? 'activeRef' : undefined"
|
||||
v-model="event.jobs[index]"
|
||||
:can-delete="jobDeleteDisabled"
|
||||
:active="active === index"
|
||||
class="q-mb-xs"
|
||||
@remove-job="removeJob(index)"
|
||||
@update:active="active = index"
|
||||
/>
|
||||
</template>
|
||||
</q-card-section>
|
||||
|
|
@ -117,13 +120,13 @@ export default defineComponent({
|
|||
components: { IsoDateInput, Job, RecurrenceRule },
|
||||
props: {
|
||||
modelValue: {
|
||||
default: () => emptyEvent,
|
||||
default: () => emptyEvent(),
|
||||
type: Object as PropType<EditableEvent>,
|
||||
},
|
||||
date: {
|
||||
required: false,
|
||||
default: () => new Date(),
|
||||
type: [Object, String, Number] as PropType<Date | string | number>,
|
||||
type: [Object, Number] as PropType<Date | number>,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
|
|
@ -131,20 +134,19 @@ export default defineComponent({
|
|||
},
|
||||
setup(props, { emit }) {
|
||||
const store = useScheduleStore();
|
||||
|
||||
const date = computed(() => new Date(props.date));
|
||||
const event = ref<EditableEvent>(
|
||||
props.modelValue.id
|
||||
? props.modelValue
|
||||
: Object.assign({}, props.modelValue, { start: date.value })
|
||||
);
|
||||
const active = ref(0);
|
||||
const activeRef = ref(Job);
|
||||
const eventtypes = computed(() => store.eventTypes);
|
||||
const form = ref<QForm>();
|
||||
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
|
||||
const recurrent = ref(false);
|
||||
const recurrenceRule = ref<FG.RecurrenceRule>({ frequency: 'daily', interval: 1 });
|
||||
const templates = computed(() => store.templates);
|
||||
const template = ref<FG.Event>();
|
||||
const event = ref<EditableEvent>(
|
||||
props.modelValue.id
|
||||
? props.modelValue
|
||||
: Object.assign({}, props.modelValue, { start: new Date(props.date) })
|
||||
);
|
||||
|
||||
onBeforeMount(() => {
|
||||
void store.getEventTypes();
|
||||
|
|
@ -152,25 +154,34 @@ export default defineComponent({
|
|||
void store.getTemplates();
|
||||
});
|
||||
|
||||
function addJob() {
|
||||
event.value.jobs.push(Object.assign({}, emptyJob));
|
||||
async function addJob() {
|
||||
if (event.value.jobs.length > 0) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
||||
if (!(await activeRef.value?.validate())) return;
|
||||
event.value.jobs.sort((a, b) => {
|
||||
if (a.end && b.end)
|
||||
if (a.end < b.end) return -1;
|
||||
else if (a.end > b.end) return 1;
|
||||
|
||||
return a.start.getTime() - b.start.getTime();
|
||||
});
|
||||
}
|
||||
event.value.jobs.push(
|
||||
emptyJob(event.value.jobs[event.value.jobs.length - 1]?.end || new Date(props.date))
|
||||
);
|
||||
active.value = event.value.jobs.length - 1;
|
||||
}
|
||||
|
||||
function removeJob(index: number) {
|
||||
event.value.jobs.splice(index, 1);
|
||||
active.value = index == active.value ? event.value.jobs.length - 1 : index;
|
||||
}
|
||||
|
||||
function fromTemplate(tpl: FG.Event) {
|
||||
template.value = tpl;
|
||||
event.value = Object.assign({}, tpl);
|
||||
event.value.start = new Date(
|
||||
date.value.getUTCFullYear(),
|
||||
date.value.getUTCMonth(),
|
||||
date.value.getUTCDate()
|
||||
);
|
||||
event.value.start = qdate.buildDate({ hours: 0, minutes: 0, seconds: 0 });
|
||||
const diff = event.value.start.getTime() - tpl.start.getTime();
|
||||
console.log(event.value);
|
||||
console.log(diff);
|
||||
if (event.value.end) event.value.end = new Date(event.value.end.getTime() + diff);
|
||||
|
||||
event.value.jobs.forEach((job) => {
|
||||
|
|
@ -231,12 +242,13 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
function reset() {
|
||||
event.value = Object.assign({}, props.modelValue || emptyEvent);
|
||||
event.value = Object.assign({}, props.modelValue || emptyEvent());
|
||||
template.value = undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
jobDeleteDisabled,
|
||||
active,
|
||||
activeRef,
|
||||
addJob,
|
||||
eventtypes,
|
||||
templates,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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 class="fit row justify-start content-center items-center" @click="activate">
|
||||
<q-form v-if="active" 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"
|
||||
|
|
@ -40,44 +40,57 @@
|
|||
<q-input
|
||||
v-model="job.comment"
|
||||
class="col-12 q-pa-sm"
|
||||
label="Beschreibung"
|
||||
label="Kommentar"
|
||||
type="textarea"
|
||||
filled
|
||||
/>
|
||||
</q-form>
|
||||
<q-card-section v-else class="fit row justify-start content-center items-center text-center">
|
||||
<div class="text-h6 col-12">{{ formatStartEnd(job.start, job.end) }}</div>
|
||||
<div class="text-subtitle1 col-12">
|
||||
{{ job?.type?.name || 'Typ fehlt' }} ({{ job.required_services }})
|
||||
</div>
|
||||
<div class="text-body2 text-italic text-left col-12">{{ job.comment }}</div>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-btn label="Schicht löschen" color="negative" :disabled="canDelete" @click="removeJob" />
|
||||
<q-card-actions class="fit row" align="right">
|
||||
<q-btn label="Schicht löschen" color="negative" @click="removeJob" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
|
||||
import { defineComponent, computed, onBeforeMount, PropType, ref } from 'vue';
|
||||
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
|
||||
import { notEmpty } from 'src/utils/validators';
|
||||
import { useScheduleStore } from '../../store';
|
||||
import { QForm } from 'quasar';
|
||||
import { asDate, asHour } from 'src/utils/datetime';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Job',
|
||||
components: { IsoDateInput },
|
||||
props: {
|
||||
active: {
|
||||
default: () => true,
|
||||
type: Boolean,
|
||||
},
|
||||
modelValue: {
|
||||
required: true,
|
||||
type: Object as PropType<FG.Job>,
|
||||
},
|
||||
canDelete: Boolean,
|
||||
},
|
||||
emits: {
|
||||
'remove-job': () => true,
|
||||
'update:active': (active: boolean) => typeof active === 'boolean',
|
||||
'update:modelValue': (job: FG.Job) => !!job,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
setup(props, { emit, expose }) {
|
||||
const store = useScheduleStore();
|
||||
|
||||
onBeforeMount(() => store.getJobTypes());
|
||||
|
||||
const form = ref<QForm>();
|
||||
const jobtypes = computed(() => store.jobTypes);
|
||||
|
||||
const job = new Proxy(props.modelValue, {
|
||||
get(target, prop) {
|
||||
if (typeof prop === 'string') {
|
||||
|
|
@ -93,6 +106,15 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
|
||||
function formatStartEnd(start: Date, end?: Date) {
|
||||
const startDate = asDate(start);
|
||||
const endDate = end ? asDate(end) : end;
|
||||
return (
|
||||
`${startDate}, ${asHour(start)}` +
|
||||
(endDate ? ` - ${endDate !== startDate ? endDate + ', ' : ''}` + asHour(end) : '')
|
||||
);
|
||||
}
|
||||
|
||||
function removeJob() {
|
||||
emit('remove-job');
|
||||
}
|
||||
|
|
@ -101,7 +123,19 @@ export default defineComponent({
|
|||
return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
|
||||
}
|
||||
|
||||
function activate() {
|
||||
emit('update:active', true);
|
||||
}
|
||||
|
||||
function validate() {
|
||||
return form.value?.validate() || new Promise((r) => r(false));
|
||||
}
|
||||
expose({ validate });
|
||||
|
||||
return {
|
||||
activate,
|
||||
form,
|
||||
formatStartEnd,
|
||||
job,
|
||||
jobtypes,
|
||||
removeJob,
|
||||
|
|
|
|||
Loading…
Reference in New Issue