Set cards as default view and restrict contact data to vorstand only
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user