Refine admin workflows and team access

This commit is contained in:
AzuTear
2026-06-26 18:09:29 +02:00
parent b7804e10ea
commit 8b69dfbafb
71 changed files with 5066 additions and 751 deletions
@@ -33,26 +33,23 @@
</Button>
</div>
<div class="grid gap-4 xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1fr)_300px]">
<label class="space-y-2">
<div class="grid gap-4 lg:grid-cols-2 2xl:grid-cols-[minmax(220px,0.85fr)_minmax(260px,1fr)_minmax(260px,0.8fr)]">
<label class="min-w-0 space-y-2">
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
<input v-model="social.label" type="text" class="h-11 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Twitch" />
<input v-model="social.label" type="text" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Twitch" />
</label>
<label class="space-y-2">
<label class="min-w-0 space-y-2">
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform auswählen</span>
<select :value="selectedSocialIconValue(social)" class="h-11 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" @change="handleSocialIconSelection($event, index)">
<optgroup v-for="group in SOCIAL_ICON_OPTION_GROUPS" :key="group.label" :label="group.label">
<option v-for="option in group.options" :key="option.key" :value="option.key">
{{ option.label }}
</option>
</optgroup>
<option value="custom">Andere Plattform / eigenes Icon</option>
</select>
<NativeSelect
:model-value="selectedSocialIconValue(social)"
:options="socialIconSelectOptions"
@update:model-value="handleSocialIconSelection(String($event), index)"
/>
<span class="block text-xs text-slate-400">Bekannte Plattformen nutzen automatisch Bibliotheks-Icons. Neue oder eingestellte Plattformen bleiben über Custom-Key plus Upload möglich.</span>
</label>
<div class="space-y-2">
<div class="min-w-0 space-y-2">
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Custom Icon</span>
<label class="group flex h-11 min-w-0 cursor-pointer items-center justify-between gap-3 rounded-2xl border border-dashed border-violet-300 bg-white px-3 text-sm font-semibold text-violet-700 transition hover:border-violet-500 hover:bg-violet-50">
<label class="group flex h-11 w-full min-w-0 cursor-pointer items-center justify-between gap-3 rounded-2xl border border-dashed border-violet-300 bg-white px-3 text-sm font-semibold text-violet-700 transition hover:border-violet-500 hover:bg-violet-50">
<span class="flex min-w-0 items-center gap-2">
<span class="grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-xl bg-violet-100 text-violet-600">
<Upload class="h-4 w-4" />
@@ -62,12 +59,12 @@
<input type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="sr-only" @change="handleSocialIconUpload($event, index)" />
</label>
</div>
<label v-if="selectedSocialIconValue(social) === 'custom'" class="space-y-2 xl:col-span-3">
<label v-if="selectedSocialIconValue(social) === 'custom'" class="min-w-0 space-y-2 lg:col-span-2 2xl:col-span-3">
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Andere Plattform / eigener Key</span>
<input v-model="social.platform" type="text" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z.B. cake, booth, neue-plattform" />
<span class="block text-xs text-slate-400">Für neue oder nicht mehr gepflegte Plattformen: Key speichern, eigenes Icon hochladen oder Stern-Fallback nutzen.</span>
</label>
<label class="space-y-2 xl:col-span-3">
<label class="min-w-0 space-y-2 lg:col-span-2 2xl:col-span-3">
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">URL</span>
<input v-model="social.url" type="url" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="https://..." />
</label>
@@ -117,6 +114,7 @@ import { Plus, Save, Trash2, Upload } from '@lucide/vue'
import { SOCIAL_ICON_OPTION_GROUPS } from '../../lib/socialIcons'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import NativeSelect from '../ui/NativeSelect.vue'
import type { AdminContentForm, SocialLinkForm } from './adminContentTypes'
const props = defineProps<{
@@ -127,7 +125,7 @@ const props = defineProps<{
removeSocialLink: (index: number) => void
isUploadedIcon: (icon: string) => boolean
selectedSocialIconValue: (social: SocialLinkForm) => string
handleSocialIconSelection: (event: Event, index: number) => void
handleSocialIconSelection: (value: string, index: number) => void
hasSocialIconPreview: (social: SocialLinkForm) => boolean
socialIconModeLabel: (social: SocialLinkForm) => string
socialSimpleIconPath: (social: SocialLinkForm) => string
@@ -137,6 +135,17 @@ const props = defineProps<{
saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()
const socialIconSelectOptions = [
...SOCIAL_ICON_OPTION_GROUPS.flatMap((group) =>
group.options.map((option) => ({
label: option.label,
value: option.key,
group: group.label,
})),
),
{ label: 'Andere Plattform / eigenes Icon', value: 'custom' },
]
function onSave() {
return props.saveSiteSettings('Social Links')
}