Set cards as default view and restrict contact data to vorstand only

This commit is contained in:
Torsten Schulz (local)
2025-10-21 14:42:20 +02:00
parent bd677c26ae
commit 37994f39b2
21 changed files with 610 additions and 515 deletions

View File

@@ -52,16 +52,22 @@
<div v-if="member.notes" class="text-xs text-gray-500">{{ member.notes }}</div>
</td>
<td class="px-4 py-3 whitespace-nowrap">
<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 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">
<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 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">
@@ -140,13 +146,19 @@
</div>
<div class="grid sm:grid-cols-2 gap-3 text-gray-600">
<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>
<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" />
@@ -304,7 +316,7 @@ const members = ref([])
const showModal = ref(false)
const editingMember = ref(null)
const errorMessage = ref('')
const viewMode = ref('table') // 'table' or 'cards'
const viewMode = ref('cards') // 'table' or 'cards'
const formData = ref({
firstName: '',
@@ -319,6 +331,10 @@ const canEdit = computed(() => {
return authStore.role === 'admin' || authStore.role === 'vorstand'
})
const canViewContactData = computed(() => {
return authStore.role === 'vorstand'
})
const loadMembers = async () => {
isLoading.value = true
try {