Commit 2f930fb0 authored by schrieveslaach's avatar schrieveslaach

Implement Search for Members

By making use of nextclouds search API, the javascript part enables
a search for members by their names.
parent 652f8305
Pipeline #81242713 passed with stages
in 2 minutes and 6 seconds
......@@ -15,7 +15,7 @@
<font-awesome-icon icon="spinner" size="lg" spin />
Vereinsdaten werden geladen…
</div>
<members v-else v-bind:members="members" v-bind:cities="cities" :club="selectedClub"></members>
<members v-else v-bind:members="membersByFilter" v-bind:cities="cities" :club="selectedClub"></members>
</div>
<footer>
......@@ -40,6 +40,7 @@
cities: [],
members: [],
selectedClub: '',
nameFilter: null,
printAllLabels: false
};
},
......@@ -47,6 +48,17 @@
computed: {
isLoading() {
return this.clubs.length === 0 || this.cities.length === 0 || this.members.length === 0;
},
membersByFilter() {
if (this.nameFilter == null) {
return this.members;
}
const filter = this.nameFilter;
return this.members.filter(member => {
return member.fullnames.filter(name => name.indexOf(filter) !== -1).length > 0;
})
}
},
......@@ -63,6 +75,12 @@
this.printAllLabels = false;
},
filter(nameFilter) {
this.nameFilter = nameFilter;
},
cleanSearch() {
this.nameFilter = null;
},
fetchMembers() {
fetch(OC.generateUrl(`/apps/spgverein/members/${this.selectedClub}`))
......@@ -105,6 +123,7 @@
},
mounted() {
OC.Search = new OCA.Search(this.filter, this.cleanSearch);
this.fetchMembers();
},
......
<template>
<div style="width: 100%">
<section class="city" v-for="city in cities">
<div class="city-header">
<h2> {{ city }} </h2>
<a class="button" v-on:click="openLabelsDialog(city)">
<font-awesome-icon icon="print"/>
</a>
</div>
<template v-for="city in cities">
<section class="city" v-if="getMembersOf(city).length > 0">
<div class="city-header">
<h2> {{ city }} </h2>
<a class="button" v-on:click="openLabelsDialog(city)">
<font-awesome-icon icon="print"/>
</a>
</div>
<table>
<colgroup>
<col style="width:25%">
<col style="width:20%">
<col style="width:5%">
<col style="width:20%">
<col style="width:30%">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Straße</th>
<th>Postleitzahl</th>
<th>Ort</th>
<th>Datümer</th>
<th>Anhänge</th>
</tr>
</thead>
<tbody>
<member :club="club" v-bind:member="member" v-for="member in getMembersOf(city)" :key="member.id"/>
</tbody>
</table>
</section>
<table>
<colgroup>
<col style="width:25%">
<col style="width:20%">
<col style="width:5%">
<col style="width:20%">
<col style="width:30%">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Straße</th>
<th>Postleitzahl</th>
<th>Ort</th>
<th>Datümer</th>
<th>Anhänge</th>
</tr>
</thead>
<tbody>
<member :club="club" v-bind:member="member" v-for="member in getMembersOf(city)" :key="member.id"/>
</tbody>
</table>
</section>
</template>
<labels-modal :club="club" :cities="[selectedCityForLabels]" v-if="showModal" @close="closeLabelsDialog" />
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment