adrema/resources/js/views/contribution/VIndex.vue

127 lines
4.4 KiB
Vue
Raw Normal View History

2022-05-17 01:37:07 +02:00
<template>
2023-04-29 23:41:26 +02:00
<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>
2022-05-20 01:18:11 +02:00
2023-04-29 23:41:26 +02:00
<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>
2022-08-23 23:49:19 +02:00
2023-04-29 23:41:26 +02:00
<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 …"
2023-02-26 20:51:59 +01:00
size="sm"
2023-04-29 23:41:26 +02:00
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>
2022-05-20 01:18:11 +02:00
2023-04-29 23:41:26 +02:00
<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>
2022-05-17 01:37:07 +02:00
</template>
<script>
2023-02-26 20:51:59 +01:00
import debounce from 'lodash/debounce';
2022-05-17 01:37:07 +02:00
export default {
data: function () {
return {
2023-02-26 20:51:59 +01:00
search: {
s: '',
results: [],
},
2022-05-17 01:37:07 +02:00
values: {
2023-03-09 02:14:24 +01:00
type: null,
2022-05-20 01:18:11 +02:00
members: [],
2022-05-17 01:37:07 +02:00
event_name: '',
dateFrom: '',
dateUntil: '',
2022-08-23 23:49:19 +02:00
zipLocation: '',
country: null,
2023-02-26 20:51:59 +01:00
...this.data,
2022-05-17 01:37:07 +02:00
},
};
},
props: {
2023-02-26 20:51:59 +01:00
data: {},
2022-08-23 23:49:19 +02:00
countries: {},
2022-11-17 21:47:45 +01:00
compilers: {},
2022-05-17 01:37:07 +02:00
},
computed: {
2023-02-26 20:51:59 +01:00
searchText: {
get() {
return this.search.s;
},
2023-03-09 02:14:24 +01:00
set: debounce(async function (event) {
2023-02-26 20:51:59 +01:00
this.search.s = event;
var response = await this.axios.post('/api/member/search', {
filter: {
search: event,
},
});
2023-02-26 20:51:59 +01:00
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);
}
2023-03-09 02:14:24 +01:00
},
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);
}
2023-02-26 20:51:59 +01:00
this.searchText = '';
this.$refs.search_text_field.$el.querySelector('input').focus();
},
onSubmitFirstMemberResult() {
2023-02-26 20:51:59 +01:00
if (this.search.results.length === 0) {
this.searchText = '';
return;
}
2023-02-26 20:51:59 +01:00
this.onSubmitMemberResult(this.search.results[0]);
},
},
2022-05-17 01:37:07 +02:00
};
</script>