120 lines
4.6 KiB
Vue
120 lines
4.6 KiB
Vue
<template>
|
|
<page-layout>
|
|
<template #toolbar>
|
|
<page-toolbar-button :href="meta.links.index" color="primary" icon="undo">Zurück</page-toolbar-button>
|
|
</template>
|
|
<template #right>
|
|
<f-save-button form="form"></f-save-button>
|
|
</template>
|
|
<form id="form" class="p-3 grid gap-3" @submit.prevent="submit">
|
|
<ui-box heading="Metadatem">
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<f-text id="name" name="name" v-model="model.name" label="Name" size="sm" required></f-text>
|
|
<f-select id="gateway_id" name="gateway_id" :options="meta.gateways" v-model="model.gateway_id" label="Verbindung" size="sm" required></f-select>
|
|
</div>
|
|
</ui-box>
|
|
<ui-box heading="Filterregeln" v-if="members !== null">
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<f-multipleselect
|
|
id="activity_ids"
|
|
name="activity_ids"
|
|
:options="members.meta.filterActivities"
|
|
v-model="model.filter.activity_ids"
|
|
@update:modelValue="reload(1)"
|
|
label="Tätigkeit"
|
|
size="sm"
|
|
></f-multipleselect>
|
|
<f-multipleselect
|
|
id="subactivity_ids"
|
|
name="subactivity_ids"
|
|
:options="members.meta.filterSubactivities"
|
|
v-model="model.filter.subactivity_ids"
|
|
@update:modelValue="reload(1)"
|
|
label="Unterttätigkeit"
|
|
size="sm"
|
|
></f-multipleselect>
|
|
<f-multipleselect
|
|
id="additional"
|
|
name="additional"
|
|
:options="members.meta.members"
|
|
v-model="model.filter.additional"
|
|
@update:modelValue="reload(1)"
|
|
label="Zusätzliche Mitglieder"
|
|
size="sm"
|
|
></f-multipleselect>
|
|
<f-multipleselect
|
|
id="groupIds"
|
|
name="groupIds"
|
|
:options="members.meta.groups"
|
|
v-model="model.filter.group_ids"
|
|
@update:modelValue="reload(1)"
|
|
label="Gruppierungen"
|
|
size="sm"
|
|
></f-multipleselect>
|
|
</div>
|
|
</ui-box>
|
|
<ui-box heading="Mitglieder" v-if="members !== null">
|
|
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm hidden md:table">
|
|
<thead>
|
|
<th></th>
|
|
<th>Nachname</th>
|
|
<th>Vorname</th>
|
|
<th>E-Mail-Adresse</th>
|
|
<th>E-Mail-Adresse Eltern</th>
|
|
</thead>
|
|
|
|
<tr v-for="(member, index) in members.data" :key="index">
|
|
<td><ui-age-groups :member="member"></ui-age-groups></td>
|
|
<td v-text="member.lastname"></td>
|
|
<td v-text="member.firstname"></td>
|
|
<td v-text="member.email"></td>
|
|
<td v-text="member.email_parents"></td>
|
|
</tr>
|
|
</table>
|
|
<ui-pagination class="mt-4" @reload="reload" :value="members.meta" :only="['data']"></ui-pagination>
|
|
</ui-box>
|
|
</form>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import indexHelpers from '../../mixins/indexHelpers.js';
|
|
import hasFlash from '../../mixins/hasFlash.js';
|
|
|
|
export default {
|
|
mixins: [indexHelpers, hasFlash],
|
|
|
|
data: function () {
|
|
return {
|
|
model: this.data === undefined ? {...this.meta.default_model} : {...this.data},
|
|
members: null,
|
|
};
|
|
},
|
|
|
|
props: {
|
|
data: {},
|
|
meta: {},
|
|
},
|
|
|
|
methods: {
|
|
async reload(page) {
|
|
this.members = (
|
|
await this.axios.post('/api/member/search', {
|
|
page: page || 1,
|
|
filter: this.toFilterString(this.model.filter),
|
|
})
|
|
).data;
|
|
},
|
|
|
|
async submit() {
|
|
this.model.id ? await this.axios.patch(this.model.links.update, this.model) : await this.axios.post('/maildispatcher', this.model);
|
|
this.$inertia.visit(this.meta.links.index);
|
|
},
|
|
},
|
|
|
|
async created() {
|
|
this.reload();
|
|
},
|
|
};
|
|
</script>
|