release v2.0.0 #4
|
@ -3,29 +3,9 @@
|
||||||
<q-card>
|
<q-card>
|
||||||
<q-form @submit="save" @reset="reset">
|
<q-form @submit="save" @reset="reset">
|
||||||
<q-card-section class="fit row justify-start content-center items-center">
|
<q-card-section class="fit row justify-start content-center items-center">
|
||||||
<q-input
|
<q-card-section class="fit ">
|
||||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
<div class="text-h6">Veranstaltung erstellen</div>
|
||||||
label="Veranstaltungsname"
|
</q-card-section>
|
||||||
v-model="eventname"
|
|
||||||
filled
|
|
||||||
:rules="[notEmpty]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
|
||||||
label="Beschreibung"
|
|
||||||
type="textarea"
|
|
||||||
v-model="event.description"
|
|
||||||
filled
|
|
||||||
/>
|
|
||||||
|
|
||||||
<IsoDateInput
|
|
||||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
|
||||||
v-model="event.start"
|
|
||||||
label="Veranstaltungstermin"
|
|
||||||
:rules="[noValidDate, notEmpty]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-select
|
<q-select
|
||||||
filled
|
filled
|
||||||
use-input
|
use-input
|
||||||
|
@ -40,6 +20,21 @@
|
||||||
clearable
|
clearable
|
||||||
:rules="[notEmpty]"
|
:rules="[notEmpty]"
|
||||||
/>
|
/>
|
||||||
|
<IsoDateInput
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
v-model="event.start"
|
||||||
|
label="Veranstaltungsbeginn"
|
||||||
|
:rules="[noValidDate, notEmpty]"
|
||||||
|
/>
|
||||||
|
<q-card-section class="fit justify-start content-center items-center">
|
||||||
|
<q-input
|
||||||
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
|
label="Beschreibung"
|
||||||
|
type="textarea"
|
||||||
|
v-model="event.description"
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
</q-card-section>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
|
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
|
||||||
|
@ -52,21 +47,21 @@
|
||||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
v-model="job.start"
|
v-model="job.start"
|
||||||
label="Beginn"
|
label="Beginn"
|
||||||
type="time"
|
type="datetime"
|
||||||
:rules="[noValidDate, notEmpty]"
|
:rules="[noValidDate, notEmpty]"
|
||||||
/>
|
/>
|
||||||
<IsoDateInput
|
<IsoDateInput
|
||||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
v-model="job.end"
|
v-model="job.end"
|
||||||
label="Ende"
|
label="Ende"
|
||||||
type="time"
|
type="datetime"
|
||||||
:rules="[noValidDate, notEmpty]"
|
:rules="[noValidDate, isAfterDate, notEmpty]"
|
||||||
/>
|
/>
|
||||||
<q-input
|
<q-input
|
||||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||||
label="Beschreibung"
|
label="Beschreibung"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
v-model="job.description"
|
v-model="job.comment"
|
||||||
filled
|
filled
|
||||||
:rules="[notEmpty]"
|
:rules="[notEmpty]"
|
||||||
/>
|
/>
|
||||||
|
@ -85,7 +80,12 @@
|
||||||
:rules="[notEmpty]"
|
:rules="[notEmpty]"
|
||||||
/>
|
/>
|
||||||
<q-input label="Dienstanzahl" type="number" v-model="job.required_services" filled />
|
<q-input label="Dienstanzahl" type="number" v-model="job.required_services" filled />
|
||||||
<q-btn label="Schicht löschen" color="negative" @click="removeJob(job.id)" />
|
<q-btn
|
||||||
|
label="Schicht löschen"
|
||||||
|
color="negative"
|
||||||
|
@click="removeJob(job.id)"
|
||||||
|
:disabled="jobDeleteDisabled"
|
||||||
|
/>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
@ -112,61 +112,43 @@ export default defineComponent({
|
||||||
setup(_, { root }) {
|
setup(_, { root }) {
|
||||||
const store = <Store<StateInterface>>root.$store;
|
const store = <Store<StateInterface>>root.$store;
|
||||||
const state = <ScheduleInterface>store.state.schedule;
|
const state = <ScheduleInterface>store.state.schedule;
|
||||||
const eventname = ref('');
|
|
||||||
const eventdescription = ref('');
|
|
||||||
const eventdate = ref<Date>();
|
|
||||||
// const eventtype = ref<FG.EventType | null>('');
|
|
||||||
const eventtypes = computed(() => state.eventTypes);
|
const eventtypes = computed(() => state.eventTypes);
|
||||||
const jobtypes = computed(() => state.jobTypes);
|
const jobtypes = computed(() => state.jobTypes);
|
||||||
let jobnum = 1;
|
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
|
||||||
const newJob: FG.Job = {
|
|
||||||
id: jobnum,
|
const newJob = ref<FG.Job>(({
|
||||||
start: new Date(),
|
id: NaN,
|
||||||
end: new Date(),
|
start: undefined,
|
||||||
|
end: undefined,
|
||||||
comment: '',
|
comment: '',
|
||||||
type: { id: NaN, name: '' },
|
|
||||||
services: [],
|
services: [],
|
||||||
required_services: 2
|
required_services: 2
|
||||||
};
|
} as unknown) as FG.Job);
|
||||||
// interface EventTypeToPost {
|
|
||||||
// name: string;
|
|
||||||
// }
|
|
||||||
// interface EventToPost {
|
|
||||||
// id: number;
|
|
||||||
// start: Date;
|
|
||||||
// description?: string;
|
|
||||||
// type: EventTypeToPost;
|
|
||||||
// jobs: Array<FG.Job>;
|
|
||||||
// }
|
|
||||||
const event = ref<FG.Event>({
|
const event = ref<FG.Event>({
|
||||||
id: NaN,
|
id: NaN,
|
||||||
start: new Date(),
|
start: new Date(),
|
||||||
description: '',
|
description: '',
|
||||||
type: { id: NaN, name: '' },
|
jobs: [Object.assign({}, newJob.value)]
|
||||||
jobs: [newJob]
|
} as FG.Event);
|
||||||
});
|
|
||||||
|
|
||||||
const jobs = ref<FG.Job[]>([newJob]);
|
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
void store.dispatch('schedule/getEventTypes');
|
void store.dispatch('schedule/getEventTypes');
|
||||||
void store.dispatch('schedule/getJobTypes');
|
void store.dispatch('schedule/getJobTypes');
|
||||||
});
|
});
|
||||||
|
|
||||||
function addJob() {
|
function addJob() {
|
||||||
console.log('Jobs: ', jobs);
|
const addJob = Object.assign({}, newJob.value);
|
||||||
event.value.jobs.unshift(newJob);
|
event.value.jobs.unshift(addJob);
|
||||||
jobnum++;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeJob(id: number) {
|
function removeJob(id: number) {
|
||||||
let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
|
let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
|
||||||
if (jobtoremove != undefined) {
|
if (jobtoremove != undefined) {
|
||||||
jobs.value.splice(jobtoremove, 1);
|
|
||||||
event.value.jobs.splice(jobtoremove, 1);
|
event.value.jobs.splice(jobtoremove, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function save() {
|
function save() {
|
||||||
// console.log('Eventtype:', eventtype);
|
|
||||||
console.log('Event:', event);
|
console.log('Event:', event);
|
||||||
store.dispatch('schedule/addEvent', event.value).catch(error => {
|
store.dispatch('schedule/addEvent', event.value).catch(error => {
|
||||||
console.warn(error);
|
console.warn(error);
|
||||||
|
@ -174,9 +156,11 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
let nothing = 2;
|
event.value.id = NaN;
|
||||||
nothing++;
|
event.value.start = new Date();
|
||||||
nothing = 3;
|
event.value.description = '';
|
||||||
|
delete event.value['type'];
|
||||||
|
event.value.jobs = [Object.assign({}, newJob.value)];
|
||||||
}
|
}
|
||||||
function notEmpty(val: string) {
|
function notEmpty(val: string) {
|
||||||
return !!val || 'Feld darf nicht leer sein!';
|
return !!val || 'Feld darf nicht leer sein!';
|
||||||
|
@ -184,11 +168,12 @@ export default defineComponent({
|
||||||
function noValidDate(val: string) {
|
function noValidDate(val: string) {
|
||||||
return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
|
return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isAfterDate(val: Date) {
|
||||||
|
// return event.value.jobsstart.getTime() > val.getTime() || 'Ende muss hinter dem Start liegen';
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
eventname,
|
jobDeleteDisabled,
|
||||||
eventdescription,
|
|
||||||
eventdate,
|
|
||||||
jobs,
|
|
||||||
addJob,
|
addJob,
|
||||||
eventtypes,
|
eventtypes,
|
||||||
removeJob,
|
removeJob,
|
||||||
|
@ -197,7 +182,8 @@ export default defineComponent({
|
||||||
noValidDate,
|
noValidDate,
|
||||||
save,
|
save,
|
||||||
reset,
|
reset,
|
||||||
event
|
event,
|
||||||
|
isAfterDate
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue