Add filter option for members with hall key in member management UI. Update member listing logic to reflect filtered results based on hall key status.
Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 56s
Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 56s
This commit is contained in:
@@ -53,6 +53,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4 flex items-center">
|
||||||
|
<label class="inline-flex items-center gap-2 text-sm text-gray-700">
|
||||||
|
<input
|
||||||
|
v-model="filterHasHallKey"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||||||
|
>
|
||||||
|
Nur mit Hallenschlüssel
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Loading State -->
|
<!-- Loading State -->
|
||||||
<div
|
<div
|
||||||
v-if="isLoading"
|
v-if="isLoading"
|
||||||
@@ -101,7 +112,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody class="bg-white divide-y divide-gray-200">
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
<tr
|
<tr
|
||||||
v-for="member in members"
|
v-for="member in filteredMembers"
|
||||||
:key="member.id"
|
:key="member.id"
|
||||||
class="hover:bg-gray-50"
|
class="hover:bg-gray-50"
|
||||||
>
|
>
|
||||||
@@ -239,7 +250,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="members.length === 0"
|
v-if="filteredMembers.length === 0"
|
||||||
class="text-center py-12 text-gray-500"
|
class="text-center py-12 text-gray-500"
|
||||||
>
|
>
|
||||||
Keine Mitglieder gefunden.
|
Keine Mitglieder gefunden.
|
||||||
@@ -252,7 +263,7 @@
|
|||||||
class="space-y-4"
|
class="space-y-4"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="member in members"
|
v-for="member in filteredMembers"
|
||||||
:key="member.id"
|
:key="member.id"
|
||||||
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
|
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
|
||||||
>
|
>
|
||||||
@@ -408,7 +419,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="members.length === 0"
|
v-if="filteredMembers.length === 0"
|
||||||
class="text-center py-12 text-gray-500"
|
class="text-center py-12 text-gray-500"
|
||||||
>
|
>
|
||||||
Keine Mitglieder gefunden.
|
Keine Mitglieder gefunden.
|
||||||
@@ -769,6 +780,7 @@ const showModal = ref(false)
|
|||||||
const editingMember = ref(null)
|
const editingMember = ref(null)
|
||||||
const errorMessage = ref('')
|
const errorMessage = ref('')
|
||||||
const viewMode = ref('cards')
|
const viewMode = ref('cards')
|
||||||
|
const filterHasHallKey = ref(false)
|
||||||
|
|
||||||
// Bulk import state
|
// Bulk import state
|
||||||
const showBulkImportModal = ref(false)
|
const showBulkImportModal = ref(false)
|
||||||
@@ -799,6 +811,11 @@ const canViewContactData = computed(() => {
|
|||||||
return authStore.hasRole('vorstand')
|
return authStore.hasRole('vorstand')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const filteredMembers = computed(() => {
|
||||||
|
if (!filterHasHallKey.value) return members.value
|
||||||
|
return members.value.filter(member => member.hasHallKey)
|
||||||
|
})
|
||||||
|
|
||||||
const loadMembers = async () => {
|
const loadMembers = async () => {
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -55,13 +55,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sortieroptionen -->
|
<!-- Sortieroptionen -->
|
||||||
<div class="mb-4 flex items-center space-x-2">
|
<div class="mb-4 flex items-center justify-between gap-4 flex-wrap">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
<label for="sortMode" class="text-sm text-gray-700">Sortieren nach:</label>
|
<label for="sortMode" class="text-sm text-gray-700">Sortieren nach:</label>
|
||||||
<select id="sortMode" v-model="sortMode" class="px-2 py-1 border rounded">
|
<select id="sortMode" v-model="sortMode" class="px-2 py-1 border rounded">
|
||||||
<option value="name">Name (Vorname Nachname)</option>
|
<option value="name">Name (Vorname Nachname)</option>
|
||||||
<option value="lastname">Nachname (Nachname Vorname)</option>
|
<option value="lastname">Nachname (Nachname Vorname)</option>
|
||||||
<option value="birthday">Geburtstag</option>
|
<option value="birthday">Geburtstag</option>
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
|
<label class="inline-flex items-center gap-2 text-sm text-gray-700">
|
||||||
|
<input
|
||||||
|
v-model="filterHasHallKey"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||||||
|
>
|
||||||
|
Nur mit Hallenschlüssel
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Loading State -->
|
<!-- Loading State -->
|
||||||
@@ -246,7 +256,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="members.length === 0"
|
v-if="sortedMembers.length === 0"
|
||||||
class="text-center py-12 text-gray-500"
|
class="text-center py-12 text-gray-500"
|
||||||
>
|
>
|
||||||
Keine Mitglieder gefunden.
|
Keine Mitglieder gefunden.
|
||||||
@@ -412,7 +422,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="members.length === 0"
|
v-if="sortedMembers.length === 0"
|
||||||
class="text-center py-12 text-gray-500"
|
class="text-center py-12 text-gray-500"
|
||||||
>
|
>
|
||||||
Keine Mitglieder gefunden.
|
Keine Mitglieder gefunden.
|
||||||
@@ -811,10 +821,13 @@
|
|||||||
// ...existing code...
|
// ...existing code...
|
||||||
|
|
||||||
const sortMode = ref('name')
|
const sortMode = ref('name')
|
||||||
|
const filterHasHallKey = ref(false)
|
||||||
|
|
||||||
const sortedMembers = computed(() => {
|
const sortedMembers = computed(() => {
|
||||||
if (!Array.isArray(members.value)) return []
|
if (!Array.isArray(members.value)) return []
|
||||||
const arr = [...members.value]
|
const arr = filterHasHallKey.value
|
||||||
|
? members.value.filter(member => member.hasHallKey)
|
||||||
|
: [...members.value]
|
||||||
if (sortMode.value === 'name') {
|
if (sortMode.value === 'name') {
|
||||||
arr.sort((a, b) => {
|
arr.sort((a, b) => {
|
||||||
// Sortiere nach Vorname Nachname (firstName lastName)
|
// Sortiere nach Vorname Nachname (firstName lastName)
|
||||||
|
|||||||
Reference in New Issue
Block a user