123 lines
4.3 KiB
Vue
123 lines
4.3 KiB
Vue
<template>
|
|
<page-layout>
|
|
<form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
|
|
<f-text id="eventName" name="eventName" class="col-span-2" v-model="values.eventName" label="Veranstaltungs-Name" required></f-text>
|
|
<f-text id="dateFrom" name="dateFrom" type="date" v-model="values.dateFrom" label="Datum von" required></f-text>
|
|
<f-text id="dateUntil" name="dateUntil" type="date" v-model="values.dateUntil" label="Datum bis" required></f-text>
|
|
|
|
<f-text id="zipLocation" name="zipLocation" v-model="values.zipLocation" label="PLZ / Ort" required></f-text>
|
|
<f-select id="country" :options="countries" name="country" v-model="values.country" label="Land" required></f-select>
|
|
|
|
<div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
|
|
<f-text
|
|
class="col-span-2"
|
|
id="search_text"
|
|
name="search_text"
|
|
v-model="searchText"
|
|
label="Suchen …"
|
|
size="sm"
|
|
ref="search_text_field"
|
|
@keypress.enter.prevent="onSubmitFirstMemberResult"
|
|
></f-text>
|
|
<div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
|
|
<f-switch
|
|
:id="`members-${member.id}`"
|
|
:key="member.id"
|
|
:label="`${member.firstname} ${member.lastname}`"
|
|
v-for="member in search.results"
|
|
name="members[]"
|
|
:value="member.id"
|
|
v-model="values.members"
|
|
size="sm"
|
|
@keypress.enter.prevent="onSubmitMemberResult(member)"
|
|
inline
|
|
></f-switch>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
v-for="(compiler, index) in compilers"
|
|
@click.prevent="
|
|
values.type = compiler.class;
|
|
submit();
|
|
"
|
|
class="btn btn-primary mt-3 inline-block"
|
|
v-text="compiler.title"
|
|
></button>
|
|
</form>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from 'lodash/debounce';
|
|
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
search: {
|
|
s: '',
|
|
results: [],
|
|
},
|
|
values: {
|
|
type: null,
|
|
members: [],
|
|
event_name: '',
|
|
dateFrom: '',
|
|
dateUntil: '',
|
|
zipLocation: '',
|
|
country: null,
|
|
...this.data,
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
data: {},
|
|
countries: {},
|
|
compilers: {},
|
|
},
|
|
computed: {
|
|
searchText: {
|
|
get() {
|
|
return this.search.s;
|
|
},
|
|
set: debounce(async function (event) {
|
|
this.search.s = event;
|
|
|
|
var response = await this.axios.post('/api/member/search', {search: event, minLength: 3});
|
|
|
|
this.search.results = response.data.data;
|
|
}, 300),
|
|
},
|
|
},
|
|
methods: {
|
|
async submit() {
|
|
try {
|
|
await this.axios.post('/contribution-validate', this.values);
|
|
var payload = btoa(JSON.stringify(this.values));
|
|
window.open(`/contribution-generate?payload=${payload}`);
|
|
} catch (e) {
|
|
this.errorsFromException(e);
|
|
}
|
|
},
|
|
onSubmitMemberResult(selected) {
|
|
if (this.values.members.find((m) => m === selected.id) !== undefined) {
|
|
this.values.members = this.values.members.filter((m) => m === selected.id);
|
|
} else {
|
|
this.values.members.push(selected.id);
|
|
}
|
|
|
|
this.searchText = '';
|
|
this.$refs.search_text_field.$el.querySelector('input').focus();
|
|
},
|
|
onSubmitFirstMemberResult() {
|
|
if (this.search.results.length === 0) {
|
|
this.searchText = '';
|
|
return;
|
|
}
|
|
|
|
this.onSubmitMemberResult(this.search.results[0]);
|
|
},
|
|
},
|
|
};
|
|
</script>
|