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

[schedule] Improved creating new events

This commit is contained in:
Ferdinand Thiessen 2021-03-20 00:59:44 +01:00
parent a4ce273bb1
commit 7e7f9c943d
4 changed files with 53 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/flaschengeist.d.ts vendored
View File

@ -28,11 +28,11 @@ declare namespace FG {
id: number;
time: Date;
amount: number;
reversal_id: number;
sender_id?: string;
receiver_id?: string;
reversal_id?: number;
author_id?: string;
sender_id?: string;
original_id?: number;
receiver_id?: string;
}
interface Drink {
id: number;
@ -91,7 +91,7 @@ declare namespace FG {
start: Date;
end?: Date;
description?: string;
type: EventType;
type: EventType | number;
jobs: Array<Job>;
}
interface EventType {
@ -102,8 +102,8 @@ declare namespace FG {
id: number;
start: Date;
end?: Date;
comment: string;
type: JobType;
type: JobType | number;
comment?: string;
services: Array<Service>;
required_services: number;
}

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

@ -43,13 +43,8 @@
<q-card-section v-for="(job, index) in event.jobs" :key="index">
<q-card class="q-my-auto">
<job
:job="job"
v-model="event.jobs[index]"
:job-can-delete="jobDeleteDisabled"
@set-start="setStart"
@set-required="setRequired"
@set-end="setEnd"
@set-comment="setComment"
@set-job-type="setJobType"
@remove-job="removeJob(index)"
/>
</q-card>
@ -78,59 +73,31 @@ export default defineComponent({
const eventtypes = computed(() => store.eventTypes);
const jobDeleteDisabled = computed(() => event.value.jobs.length < 2);
const newJob = ref<FG.Job>(({
const newJob = ref<FG.Job>({
id: NaN,
start: undefined,
end: undefined,
comment: '',
start: new Date(),
end: date.addToDate(new Date(), { hours: 1 }),
services: [],
required_services: 2,
} as unknown) as FG.Job);
type: store.jobTypes[0],
});
const event = ref<FG.Event>({
id: NaN,
start: new Date(),
description: '',
jobs: [Object.assign({}, newJob.value)],
} as FG.Event);
type: store.eventTypes[0],
});
onBeforeMount(() => {
void store.getEventTypes();
void store.getJobTypes();
});
function setStart(data: { job: FG.Job; value: Date }) {
data.job.start = data.value;
}
function setEnd(data: { job: FG.Job; value: Date }) {
data.job.end = data.value;
}
function setComment(data: { job: FG.Job; value: string }) {
data.job.comment = data.value;
}
function setJobType(job: FG.Job, value: FG.JobType) {
job.type = value;
}
function setRequired(data: { job: FG.Job; value: number }) {
data.job.required_services = data.value;
}
function addJob() {
const addJob = Object.assign({}, newJob.value);
event.value.jobs.unshift(addJob);
event.value.jobs.push(Object.assign({}, newJob.value));
}
//function removeJob(id: number) {
// let jobtoremove = event.value.jobs.findIndex(job => job.id == id);
// if (jobtoremove != undefined) {
// event.value.jobs.splice(jobtoremove, 1);
// }
//}
function removeJob(index: number) {
event.value.jobs.splice(index, 1);
}
@ -174,11 +141,6 @@ export default defineComponent({
reset,
event,
isAfterDate,
setStart,
setEnd,
setComment,
setJobType,
setRequired,
};
},
});

85
src/plugins/schedule/components/management/Job.vue
View File

@ -2,59 +2,52 @@
<q-card-section 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"
:value="job.start"
label="Beginn"
type="datetime"
:rules="[noValidDate, notEmpty]"
@input="setStart"
:rules="[notEmpty, noValidDate]"
/>
<IsoDateInput
ref="bla"
v-model="job.end"
class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.end"
label="Ende"
type="datetime"
:rules="[noValidDate, isAfterDate, notEmpty]"
@input="setEnd"
:rules="[notEmpty, noValidDate, isAfterDate]"
/>
</q-card-section>
<q-card-section class="row fit justify-start content-center items-center">
<q-select
:key="refreshKey"
v-model="job.type"
filled
use-input
label="Dienstart"
input-debounce="0"
class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.type"
:options="jobtypes"
option-label="name"
option-value="name"
option-value="id"
map-options
clearable
:rules="[notEmpty]"
@input="setJobType"
/>
<q-input
v-model="job.required_services"
filled
class="col-xs-12 col-sm-6 q-pa-sm"
label="Dienstanzahl"
type="number"
:value="job.required_services"
:rules="[notEmpty]"
@input="setRequired"
/>
</q-card-section>
<q-card-section class="fit row justify-start content-center items-center">
<q-input
v-model="job.comment"
class="col-xs-12 col-sm-6 q-pa-sm"
label="Beschreibung"
type="textarea"
:value="job.comment"
filled
:rules="[notEmpty]"
@input="setComment"
/>
</q-card-section>
<q-btn label="Schicht löschen" color="negative" :disabled="jobCanDelete" @click="removeJob" />
@ -63,7 +56,7 @@
<script lang="ts">
import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
import { defineComponent, computed, onBeforeMount, PropType } from 'vue';
import { useScheduleStore } from '../../store';
import { date } from 'quasar';
@ -71,19 +64,15 @@ export default defineComponent({
name: 'Job',
components: { IsoDateInput },
props: {
job: {
modelValue: {
required: true,
type: Object as PropType<FG.Job>,
},
jobCanDelete: Boolean,
},
emits: {
'set-start': (d: Date) => !!d,
'remove-job': () => true,
'set-end': (d: Date) => !!d,
'set-comment': (c: string) => !!c,
'set-job-type': (jt: FG.JobType) => !!jt,
'set-required': (r: number) => isFinite(r),
'update:modelValue': (job: FG.Job) => !!job,
},
setup(props, { emit }) {
const store = useScheduleStore();
@ -91,27 +80,22 @@ export default defineComponent({
onBeforeMount(() => store.getJobTypes());
const jobtypes = computed(() => store.jobTypes);
const refreshKey = ref<number>(0);
function setStart(value: Date) {
emit('set-start', value);
}
function setEnd(value: Date) {
emit('set-end', value);
}
function setComment(value: string) {
emit('set-comment', value);
}
function setJobType(value: FG.JobType) {
emit('set-job-type', value);
}
function setRequired(value: number) {
emit('set-required', value);
}
const job = new Proxy(props.modelValue, {
get(target, prop) {
if (typeof prop === 'string') {
return ((props.modelValue as unknown) as Record<string, unknown>)[prop];
}
},
set(obj, prop, value) {
console.log('...', obj, prop, value);
if (typeof prop === 'string') {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
emit('update:modelValue', Object.assign({}, props.modelValue, { [prop]: value }));
}
return true;
},
});
function removeJob() {
emit('remove-job');
@ -121,31 +105,20 @@ export default defineComponent({
return !!val || 'Feld darf nicht leer sein!';
}
function noValidDate(val: string) {
console.log(val);
return !!date.isValid(val) || 'Datum/Zeit muss gesetzt sein!';
}
function isAfterDate(val: Date) {
console.log('isAfterDate', props.job.start, val);
return props.job.start < new Date(val) || 'Ende muss hinter dem Start liegen';
}
function refresh() {
refreshKey.value += 1;
function isAfterDate(val: string) {
return props.modelValue.start < new Date(val) || 'Ende muss hinter dem Start liegen';
}
return {
job,
jobtypes,
setStart,
setEnd,
setComment,
setJobType,
setRequired,
removeJob,
notEmpty,
noValidDate,
isAfterDate,
refreshKey,
};
},
});

17
src/plugins/schedule/store.ts
View File

@ -27,14 +27,15 @@ export const useScheduleStore = defineStore({
getters: {},
actions: {
async getJobTypes() {
try {
const { data } = await api.get<FG.JobType[]>('/schedule/job-types');
this.jobTypes = data;
return this.jobTypes;
} catch (error) {
throw error;
}
async getJobTypes(force = false) {
if (force || this.jobTypes.length == 0)
try {
const { data } = await api.get<FG.JobType[]>('/schedule/job-types');
this.jobTypes = data;
} catch (error) {
throw error;
}
return this.jobTypes;
},
async addJobType(name: string) {