452 lines
16 KiB
Vue
452 lines
16 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-2">
|
|
Mitgliederliste
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-4" />
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<button
|
|
@click="viewMode = viewMode === 'cards' ? 'table' : 'cards'"
|
|
class="flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-lg transition-colors"
|
|
>
|
|
<component :is="viewMode === 'cards' ? Table2 : Grid3x3" :size="20" class="mr-2" />
|
|
{{ viewMode === 'cards' ? 'Tabelle' : 'Karten' }}
|
|
</button>
|
|
<button
|
|
v-if="canEdit"
|
|
@click="openAddModal"
|
|
class="flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
|
|
>
|
|
<UserPlus :size="20" class="mr-2" />
|
|
Mitglied hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="flex items-center justify-center py-12">
|
|
<Loader2 :size="40" class="animate-spin text-primary-600" />
|
|
</div>
|
|
|
|
<!-- Table View -->
|
|
<div v-else-if="viewMode === 'table'" class="bg-white rounded-xl shadow-lg overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-Mail</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefon</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
<th v-if="canEdit" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr v-for="member in members" :key="member.id" class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<div class="text-sm font-medium text-gray-900">{{ member.name }}</div>
|
|
<div v-if="member.notes" class="text-xs text-gray-500">{{ member.notes }}</div>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<template v-if="canViewContactData">
|
|
<a v-if="member.email" :href="`mailto:${member.email}`" class="text-sm text-primary-600 hover:text-primary-800">
|
|
{{ member.email }}
|
|
</a>
|
|
<span v-else class="text-sm text-gray-400">-</span>
|
|
</template>
|
|
<span v-else class="text-sm text-gray-400">Nur für Vorstand</span>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<template v-if="canViewContactData">
|
|
<a v-if="member.phone" :href="`tel:${member.phone}`" class="text-sm text-primary-600 hover:text-primary-800">
|
|
{{ member.phone }}
|
|
</a>
|
|
<span v-else class="text-sm text-gray-400">-</span>
|
|
</template>
|
|
<span v-else class="text-sm text-gray-400">Nur für Vorstand</span>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap">
|
|
<div class="flex items-center space-x-2">
|
|
<span
|
|
v-if="member.hasLogin"
|
|
class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"
|
|
>
|
|
Login
|
|
</span>
|
|
<span
|
|
:class="member.source === 'manual' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'"
|
|
class="px-2 py-1 text-xs font-medium rounded-full"
|
|
>
|
|
{{ member.source === 'manual' ? 'Manuell' : 'System' }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td v-if="canEdit" class="px-4 py-3 whitespace-nowrap text-right text-sm font-medium">
|
|
<div v-if="member.editable" class="flex justify-end space-x-2">
|
|
<button
|
|
@click="openEditModal(member)"
|
|
class="text-blue-600 hover:text-blue-900"
|
|
title="Bearbeiten"
|
|
>
|
|
<Edit :size="18" />
|
|
</button>
|
|
<button
|
|
@click="confirmDelete(member)"
|
|
class="text-red-600 hover:text-red-900"
|
|
title="Löschen"
|
|
>
|
|
<Trash2 :size="18" />
|
|
</button>
|
|
</div>
|
|
<span v-else class="text-gray-400 text-xs">Nicht editierbar</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div v-if="members.length === 0" class="text-center py-12 text-gray-500">
|
|
Keine Mitglieder gefunden.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards View -->
|
|
<div v-else class="space-y-4">
|
|
<div
|
|
v-for="member in members"
|
|
:key="member.id"
|
|
class="bg-white p-6 rounded-xl shadow-lg border border-gray-100"
|
|
>
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<div class="flex items-center mb-2">
|
|
<h3 class="text-xl font-semibold text-gray-900">{{ member.name }}</h3>
|
|
<span
|
|
v-if="member.hasLogin"
|
|
class="ml-3 px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full"
|
|
>
|
|
Hat Login
|
|
</span>
|
|
<span
|
|
v-if="member.source === 'manual'"
|
|
class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full"
|
|
>
|
|
Manuell
|
|
</span>
|
|
<span
|
|
v-else
|
|
class="ml-2 px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full"
|
|
>
|
|
Aus Login-System
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 gap-3 text-gray-600">
|
|
<template v-if="canViewContactData">
|
|
<div v-if="member.email" class="flex items-center">
|
|
<Mail :size="16" class="mr-2 text-primary-600" />
|
|
<a :href="`mailto:${member.email}`" class="hover:text-primary-600">{{ member.email }}</a>
|
|
</div>
|
|
<div v-if="member.phone" class="flex items-center">
|
|
<Phone :size="16" class="mr-2 text-primary-600" />
|
|
<a :href="`tel:${member.phone}`" class="hover:text-primary-600">{{ member.phone }}</a>
|
|
</div>
|
|
</template>
|
|
<div v-else class="col-span-2 flex items-center text-gray-500 text-sm italic">
|
|
<Mail :size="16" class="mr-2" />
|
|
Kontaktdaten nur für Vorstand sichtbar
|
|
</div>
|
|
<div v-if="member.address" class="flex items-start col-span-2">
|
|
<MapPin :size="16" class="mr-2 text-primary-600 mt-0.5" />
|
|
<span>{{ member.address }}</span>
|
|
</div>
|
|
<div v-if="member.notes" class="flex items-start col-span-2">
|
|
<FileText :size="16" class="mr-2 text-primary-600 mt-0.5" />
|
|
<span>{{ member.notes }}</span>
|
|
</div>
|
|
<div v-if="member.lastLogin" class="flex items-center col-span-2 text-sm text-gray-500">
|
|
<Clock :size="16" class="mr-2" />
|
|
Letzter Login: {{ formatDate(member.lastLogin) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="canEdit && member.editable" class="flex space-x-2 ml-4">
|
|
<button
|
|
@click="openEditModal(member)"
|
|
class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|
title="Bearbeiten"
|
|
>
|
|
<Edit :size="20" />
|
|
</button>
|
|
<button
|
|
@click="confirmDelete(member)"
|
|
class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
|
title="Löschen"
|
|
>
|
|
<Trash2 :size="20" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="members.length === 0" class="text-center py-12 text-gray-500">
|
|
Keine Mitglieder gefunden.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit/Add Modal -->
|
|
<div
|
|
v-if="showModal"
|
|
class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
|
|
@click.self="closeModal"
|
|
>
|
|
<div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
{{ editingMember ? 'Mitglied bearbeiten' : 'Mitglied hinzufügen' }}
|
|
</h2>
|
|
|
|
<form @submit.prevent="saveMember" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Vorname *</label>
|
|
<input
|
|
v-model="formData.firstName"
|
|
type="text"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Nachname *</label>
|
|
<input
|
|
v-model="formData.lastName"
|
|
type="text"
|
|
required
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">E-Mail</label>
|
|
<input
|
|
v-model="formData.email"
|
|
type="email"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Telefon</label>
|
|
<input
|
|
v-model="formData.phone"
|
|
type="tel"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Adresse</label>
|
|
<input
|
|
v-model="formData.address"
|
|
type="text"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Notizen</label>
|
|
<textarea
|
|
v-model="formData.notes"
|
|
rows="3"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
:disabled="isSaving"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="errorMessage" class="flex items-center p-3 rounded-md bg-red-50 text-red-700 text-sm">
|
|
<AlertCircle :size="20" class="mr-2" />
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-4 pt-4">
|
|
<button
|
|
type="button"
|
|
@click="closeModal"
|
|
class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
|
:disabled="isSaving"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-6 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors flex items-center"
|
|
:disabled="isSaving"
|
|
>
|
|
<Loader2 v-if="isSaving" :size="20" class="animate-spin mr-2" />
|
|
<span>{{ isSaving ? 'Speichert...' : 'Speichern' }}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { Users, UserPlus, Mail, Phone, MapPin, FileText, Clock, Edit, Trash2, Loader2, AlertCircle, Table2, Grid3x3 } from 'lucide-vue-next'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const isLoading = ref(true)
|
|
const isSaving = ref(false)
|
|
const members = ref([])
|
|
const showModal = ref(false)
|
|
const editingMember = ref(null)
|
|
const errorMessage = ref('')
|
|
const viewMode = ref('cards') // 'table' or 'cards'
|
|
|
|
const formData = ref({
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
phone: '',
|
|
address: '',
|
|
notes: ''
|
|
})
|
|
|
|
const canEdit = computed(() => {
|
|
return authStore.role === 'admin' || authStore.role === 'vorstand'
|
|
})
|
|
|
|
const canViewContactData = computed(() => {
|
|
// Explicitly check for 'vorstand' role only
|
|
const role = authStore.role
|
|
console.log('Current role:', role, 'Can view contact:', role === 'vorstand')
|
|
return role === 'vorstand'
|
|
})
|
|
|
|
const loadMembers = async () => {
|
|
isLoading.value = true
|
|
try {
|
|
const response = await $fetch('/api/members')
|
|
members.value = response.members
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Mitglieder:', error)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const openAddModal = () => {
|
|
editingMember.value = null
|
|
formData.value = {
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
phone: '',
|
|
address: '',
|
|
notes: ''
|
|
}
|
|
showModal.value = true
|
|
errorMessage.value = ''
|
|
}
|
|
|
|
const openEditModal = (member) => {
|
|
editingMember.value = member
|
|
formData.value = {
|
|
firstName: member.firstName || '',
|
|
lastName: member.lastName || '',
|
|
email: member.email || '',
|
|
phone: member.phone || '',
|
|
address: member.address || '',
|
|
notes: member.notes || ''
|
|
}
|
|
showModal.value = true
|
|
errorMessage.value = ''
|
|
}
|
|
|
|
const closeModal = () => {
|
|
showModal.value = false
|
|
editingMember.value = null
|
|
errorMessage.value = ''
|
|
}
|
|
|
|
const saveMember = async () => {
|
|
isSaving.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/members', {
|
|
method: 'POST',
|
|
body: {
|
|
id: editingMember.value?.id,
|
|
...formData.value
|
|
}
|
|
})
|
|
|
|
closeModal()
|
|
await loadMembers()
|
|
} catch (error) {
|
|
errorMessage.value = error.data?.message || 'Fehler beim Speichern des Mitglieds.'
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
const confirmDelete = async (member) => {
|
|
window.showConfirmModal('Mitglied löschen', `Möchten Sie "${member.name}" wirklich löschen?`, async () => {
|
|
try {
|
|
await $fetch('/api/members', {
|
|
method: 'DELETE',
|
|
body: { id: member.id }
|
|
})
|
|
|
|
await loadMembers()
|
|
window.showSuccessModal('Erfolg', 'Mitglied wurde erfolgreich gelöscht')
|
|
} catch (error) {
|
|
console.error('Fehler beim Löschen:', error)
|
|
window.showErrorModal('Fehler', 'Fehler beim Löschen des Mitglieds')
|
|
}
|
|
})
|
|
}
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return ''
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('de-DE', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadMembers()
|
|
})
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
layout: 'default'
|
|
})
|
|
|
|
useHead({
|
|
title: 'Mitgliederliste - Harheimer TC',
|
|
})
|
|
</script>
|
|
|