Add member filter
This commit is contained in:
Philipp Lang
parent
188429af55
commit
d41aa466b1
|
|
@ -5,8 +5,8 @@ namespace App\Member\Actions;
|
|||
use App\Member\FilterScope;
|
||||
use App\Member\Member;
|
||||
use App\Member\MemberResource;
|
||||
use Illuminate\Database\Eloquent\Collection;
|
||||
use Illuminate\Http\Resources\Json\AnonymousResourceCollection;
|
||||
use Illuminate\Pagination\LengthAwarePaginator;
|
||||
use Lorisleiva\Actions\ActionRequest;
|
||||
use Lorisleiva\Actions\Concerns\AsAction;
|
||||
|
||||
|
|
@ -15,14 +15,14 @@ class SearchAction
|
|||
use AsAction;
|
||||
|
||||
/**
|
||||
* @return Collection<int, Member>
|
||||
* @return LengthAwarePaginator<int, Member>
|
||||
*/
|
||||
public function handle(FilterScope $filter): Collection
|
||||
public function handle(FilterScope $filter): LengthAwarePaginator
|
||||
{
|
||||
return Member::search($filter->search)->query(fn ($q) => $q->select('*')
|
||||
->withFilter($filter)
|
||||
->ordered()
|
||||
)->get();
|
||||
)->paginate(15);
|
||||
}
|
||||
|
||||
public function asController(ActionRequest $request): AnonymousResourceCollection
|
||||
|
|
|
|||
|
|
@ -1,17 +1,7 @@
|
|||
<template>
|
||||
<div class="flex gap-1 justify-center items-center">
|
||||
<svg-sprite
|
||||
class="flex-none"
|
||||
v-if="member.is_leader"
|
||||
:class="[ageColors.leiter, iconClass]"
|
||||
src="lilie"
|
||||
></svg-sprite>
|
||||
<svg-sprite
|
||||
class="flex-none"
|
||||
v-if="member.age_group_icon"
|
||||
:class="[ageColors[member.age_group_icon], iconClass]"
|
||||
src="lilie"
|
||||
></svg-sprite>
|
||||
<svg-sprite class="flex-none" v-if="member.is_leader" :class="[ageColors.leiter, iconClass]" src="lilie"></svg-sprite>
|
||||
<svg-sprite class="flex-none" v-if="member.age_group_icon" :class="[ageColors[member.age_group_icon], iconClass]" src="lilie"></svg-sprite>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,10 +9,13 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
filterString() {
|
||||
return btoa(encodeURIComponent(JSON.stringify(this.inner.meta.filter)));
|
||||
return this.toFilterString(this.inner.meta.filter);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toFilterString(data) {
|
||||
return btoa(encodeURIComponent(JSON.stringify(data)));
|
||||
},
|
||||
reload(resetPage = true) {
|
||||
var _self = this;
|
||||
var data = {
|
||||
|
|
|
|||
|
|
@ -7,31 +7,62 @@
|
|||
<f-save-button form="form"></f-save-button>
|
||||
<ui-box heading="Filterregeln">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<f-select id="activity_id" name="activity_id" :options="meta.activities" v-model="model.activity_id" @input="reload" label="Tätigkeit" size="sm" required></f-select>
|
||||
<f-select id="subactivity_id" name="subactivity_id" :options="meta.activities" v-model="model.subactivity_id" @input="reload" label="Unterttätigkeit" size="sm" required></f-select>
|
||||
<f-multipleselect
|
||||
id="activity_ids"
|
||||
name="activity_ids"
|
||||
:options="meta.activities"
|
||||
v-model="model.filter.activity_ids"
|
||||
@input="reload(1)"
|
||||
label="Tätigkeit"
|
||||
size="sm"
|
||||
required
|
||||
></f-multipleselect>
|
||||
<f-multipleselect
|
||||
id="subactivity_ids"
|
||||
name="subactivity_ids"
|
||||
:options="meta.subactivities"
|
||||
v-model="model.filter.subactivity_ids"
|
||||
@input="reload(1)"
|
||||
label="Unterttätigkeit"
|
||||
size="sm"
|
||||
required
|
||||
></f-multipleselect>
|
||||
</div>
|
||||
</ui-box>
|
||||
<ui-box heading="Mitglieder">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div v-for="(pos, index) in model.children" :key="index" class="flex space-x-2 items-end">
|
||||
<f-text :id="`name-${index}`" v-model="pos.name" label="Name" size="sm" required></f-text>
|
||||
<f-text :id="`amount-${index}`" v-model="pos.amount" label="Beitrag" size="sm" mode="area" required></f-text>
|
||||
<a href="#" @click.prevent="model.children.splice(index, 1)" class="btn btn-sm btn-danger icon flex-none">
|
||||
<svg-sprite src="trash" class="w-5 h-5"></svg-sprite>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
mixins: [indexHelpers],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
model: this.mode === 'create' ? {...this.meta.default_model} : {...this.data},
|
||||
members: [],
|
||||
members: null,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -42,15 +73,18 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
async reload() {
|
||||
async reload(page) {
|
||||
this.members = (
|
||||
await this.axios.post('/api/member', {
|
||||
filter: this.model,
|
||||
await this.axios.post('/api/member/search', {
|
||||
page: page || 1,
|
||||
filter: this.toFilterString(this.model.filter),
|
||||
})
|
||||
).data;
|
||||
},
|
||||
},
|
||||
|
||||
async created() {},
|
||||
async created() {
|
||||
this.reload();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</thead>
|
||||
|
||||
<tr v-for="(member, index) in inner.data" :key="index">
|
||||
<td><age-groups :member="member"></age-groups></td>
|
||||
<td><ui-age-groups :member="member"></ui-age-groups></td>
|
||||
<td v-text="member.lastname"></td>
|
||||
<td v-text="member.firstname"></td>
|
||||
<td class="hidden 2xl:table-cell" v-text="member.full_address"></td>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
<div class="md:hidden p-3 grid gap-3">
|
||||
<ui-box class="relative" :heading="member.fullname" v-for="(member, index) in data.data" :key="index">
|
||||
<div slot="in-title">
|
||||
<age-groups class="ml-2" :member="member" icon-class="w-4 h-4"></age-groups>
|
||||
<ui-age-groups class="ml-2" :member="member" icon-class="w-4 h-4"></ui-age-groups>
|
||||
</div>
|
||||
<div class="text-xs text-gray-200" v-text="member.full_address"></div>
|
||||
<div class="flex items-center mt-1 space-x-4">
|
||||
|
|
@ -153,9 +153,8 @@ export default {
|
|||
MemberMemberships,
|
||||
MemberPayments,
|
||||
MemberCourses,
|
||||
'age-groups': () => import('./AgeGroups.vue'),
|
||||
'tags': () => import('./Tags.vue'),
|
||||
'actions': () => import('./index/Actions.vue'),
|
||||
tags: () => import('./Tags.vue'),
|
||||
actions: () => import('./index/Actions.vue'),
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue