Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
7
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

Cleaned CreateEvent

This commit is contained in:
Dominik 2021-01-27 22:37:12 +01:00
parent 45bf4aa223
commit 0844b0997d
1 changed files with 53 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/plugins/schedule/components/management/CreateEvent.vue
View File

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