Minor changes to createEvent
This commit is contained in:
Dominik
parent
c05877fa46
commit
1ccddb228d
|
|
@ -6,24 +6,88 @@
|
|||
<q-input
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Veranstaltungsname"
|
||||
:rules="[notEmpty]"
|
||||
v-model="eventname"
|
||||
filled
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Beschreibung"
|
||||
type="textarea"
|
||||
v-model="eventdescription"
|
||||
v-model="event.description"
|
||||
filled
|
||||
/>
|
||||
|
||||
<IsoDateInput
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
v-model="eventdate"
|
||||
v-model="event.start"
|
||||
label="Veranstaltungstermin"
|
||||
:rules="[noValidDate, notEmpty]"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
filled
|
||||
use-input
|
||||
label="Veranstaltungstyp"
|
||||
input-debounce="0"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
v-model="event.type"
|
||||
:options="eventtypes"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
map-options
|
||||
clearable
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-for="job in event.jobs" v-bind:key="job.id">
|
||||
<q-card class="q-my-auto">
|
||||
<q-card-section class="fit row justify-start content-center items-center">
|
||||
<IsoDateInput
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
v-model="job.start"
|
||||
label="Beginn"
|
||||
type="time"
|
||||
: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]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
label="Beschreibung"
|
||||
type="textarea"
|
||||
v-model="job.description"
|
||||
filled
|
||||
:rules="[notEmpty]"
|
||||
/>
|
||||
<q-select
|
||||
filled
|
||||
use-input
|
||||
label="Dienstart"
|
||||
input-debounce="0"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
v-model="job.type"
|
||||
:options="jobtypes"
|
||||
option-label="name"
|
||||
option-value="name"
|
||||
map-options
|
||||
clearable
|
||||
: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-card-section>
|
||||
</q-card>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="Reset" type="reset" />
|
||||
|
|
@ -35,28 +99,107 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from '@vue/composition-api';
|
||||
import { defineComponent, ref, onBeforeMount, computed } from '@vue/composition-api';
|
||||
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
|
||||
import { Store } from 'vuex';
|
||||
import { StateInterface } from 'src/store';
|
||||
import { ScheduleInterface } from '../../store/schedule';
|
||||
import { date } from 'quasar';
|
||||
// import { emit } from 'process';
|
||||
export default defineComponent({
|
||||
name: 'CreateEvent',
|
||||
components: {},
|
||||
components: { IsoDateInput },
|
||||
setup(_, { root }) {
|
||||
const store = <Store<StateInterface>>root.$store;
|
||||
const user = ref<FG.User>({
|
||||
userid: '',
|
||||
display_name: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
mail: '',
|
||||
roles: []
|
||||
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(),
|
||||
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>;
|
||||
// }
|
||||
const event = ref<FG.Event>({
|
||||
id: NaN,
|
||||
start: new Date(),
|
||||
description: '',
|
||||
type: '',
|
||||
jobs: [newJob]
|
||||
});
|
||||
function setUser(value: FG.User) {
|
||||
store.dispatch('user/setUser', value).catch(error => {
|
||||
|
||||
const jobs = ref<FG.Job[]>([newJob]);
|
||||
|
||||
onBeforeMount(() => {
|
||||
void store.dispatch('schedule/getEventTypes');
|
||||
void store.dispatch('schedule/getJobTypes');
|
||||
});
|
||||
function addJob() {
|
||||
console.log('Jobs: ', jobs);
|
||||
event.value.jobs.unshift(newJob);
|
||||
jobnum++;
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
return { user, setUser };
|
||||
|
||||
function reset() {
|
||||
let nothing = 2;
|
||||
nothing++;
|
||||
nothing = 3;
|
||||
}
|
||||
function notEmpty(val: string) {
|
||||
return !!val || 'Feld darf nicht leer sein!';
|
||||
}
|
||||
function noValidDate(val: string) {
|
||||
return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
|
||||
}
|
||||
return {
|
||||
eventname,
|
||||
eventdescription,
|
||||
eventdate,
|
||||
eventtype,
|
||||
jobs,
|
||||
addJob,
|
||||
eventtypes,
|
||||
removeJob,
|
||||
jobtypes,
|
||||
notEmpty,
|
||||
noValidDate,
|
||||
save,
|
||||
reset,
|
||||
event
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@ export default defineComponent({
|
|||
|
||||
onBeforeMount(() => {
|
||||
void store.dispatch('schedule/getJobTypes');
|
||||
console.log(store);
|
||||
});
|
||||
|
||||
const rows = computed(() => state.jobTypes);
|
||||
|
|
|
|||
|
|
@ -16,13 +16,33 @@ export interface EventType {
|
|||
export interface ScheduleInterface {
|
||||
jobTypes: JobType[];
|
||||
eventTypes: EventType[];
|
||||
events: FG.Event[];
|
||||
}
|
||||
|
||||
const state: ScheduleInterface = {
|
||||
jobTypes: [],
|
||||
eventTypes: []
|
||||
eventTypes: [],
|
||||
events: []
|
||||
};
|
||||
|
||||
interface Event {
|
||||
start: Date;
|
||||
end?: Date;
|
||||
description: string;
|
||||
type: EventType;
|
||||
jobs: Job[];
|
||||
}
|
||||
|
||||
interface Job {
|
||||
id: number;
|
||||
start: Date | null;
|
||||
end?: Date | null;
|
||||
comment: string;
|
||||
type: FG.JobType | null;
|
||||
services: Array<FG.Service>;
|
||||
required_services: number;
|
||||
}
|
||||
|
||||
const mutations: MutationTree<ScheduleInterface> = {
|
||||
setJobTypes(state, jobTypes: JobType[]) {
|
||||
state.jobTypes = jobTypes;
|
||||
|
|
@ -55,6 +75,9 @@ const mutations: MutationTree<ScheduleInterface> = {
|
|||
if (_eventtype) {
|
||||
_eventtype.name = eventType.name;
|
||||
}
|
||||
},
|
||||
addEvent(state, event: FG.Event) {
|
||||
state.events.unshift(event);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -146,9 +169,20 @@ const actions: ActionTree<ScheduleInterface, StateInterface> = {
|
|||
.catch(err => {
|
||||
console.warn(err);
|
||||
});
|
||||
},
|
||||
|
||||
addEvent({ commit }, event: Event) {
|
||||
axios
|
||||
.post('/schedule/events', event)
|
||||
.then((response: AxiosResponse<EventType>) => {
|
||||
commit('addEvent', response.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.warn(err);
|
||||
});
|
||||
console.log('Events: ', state.events);
|
||||
}
|
||||
};
|
||||
|
||||
const getters: GetterTree<ScheduleInterface, StateInterface> = {
|
||||
jobTypes(state) {
|
||||
return state.jobTypes;
|
||||
|
|
|
|||
Loading…
Reference in New Issue