Personenliste fertig

views/routes/personen/components/alphabet.gohtml

@@ -0,0 +1,18 @@
+{{ $model := . }}
+
+{{- if and $model.letters (not $model.search) -}}
+	<div id="personalphabet" class="flex flex-col text-xl pt-20 relative">
+		{{- range $id, $r := .letters -}}
+			<a
+				class="{{ if not $model.letter -}}inactive{{- end -}}"
+				:class="search ? 'inactive' : 'active'"
+				href="?letter={{ $r }}{{- if $model.filter }}&filter={{ $model.filter }}{{- end -}}"
+				{{ if eq $model.letter $r }}aria-current="page"{{ end }}
+				hx-select="main"
+				hx-target="main"
+				hx-swap="outerHTML scroll:#pageheading:top"
+				>{{ $r }}</a
+			>
+		{{- end -}}
+	</div>
+{{- end -}}

views/routes/personen/components/heading.gohtml

@@ -0,0 +1,20 @@
+{{ $model := . }}
+
+{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
+
+{{ $isNoOrg := and $model.filter (eq $model.filter "noorg") }}
+
+{{ $isOrg := and $model.filter (eq $model.filter "org") }}
+
+
+<h1
+	class="text-3xl font-bold px-3 relative -translate-y-[55%] w-min whitespace-nowrap bg-stone-50 ml-24 z-20">
+	<span x-show="!search">
+		{{- if $isPerson -}}
+			Personen
+		{{- else if $isOrg -}}
+			Verlage, Druckereien &amp; Vertriebe
+		{{- end -}}
+	</span>
+	<span x-show="search"> Suche &middot; Alle Personen &amp; Körperschaften </span>
+</h1>

views/routes/personen/components/menu.gohtml

@@ -0,0 +1,25 @@
+{{ $model := . }}
+
+{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
+
+{{ $isOrg := and $model.filter (eq $model.filter "org") }}
+
+{{- if not $model.search -}}
+	{{/* INFO: We always redrect to letter = A bc some letters dont exist for other types */}}
+	<div
+		id="persontype"
+		class="flex flex-row justify-end align-right text-right mr-4 gap-x-3"
+		:class="search ? 'inactive' : ''">
+		<a
+			href="/personen?letter=A"
+			{{ if $isPerson -}}aria-current="page"{{- end -}}
+			>Personen</a
+		>
+
+		<a
+			href="/personen?filter=org"
+			{{ if $isOrg -}}aria-current="page"{{- end -}}
+			>Verlage, Druckereien &amp; Vertriebe</a
+		>
+	</div>
+{{- end -}}

views/routes/personen/components/professionselectbox.gohtml

@@ -0,0 +1,40 @@
+{{ $model := . }}
+
+{{ $isPerson := and $model.filter (or (eq $model.filter "noorg") (eq $model.filter "musik") (eq $model.filter "autor") (eq $model.filter "graphik") (eq $model.filter "hrsg")) }}
+
+{{ $isNoOrg := and $model.filter (eq $model.filter "noorg") }}
+
+{{ $isOrg := and $model.filter (eq $model.filter "org") }}
+
+{{ $isMusik := and $model.filter (eq $model.filter "musik") }}
+
+{{ $isAutor := and $model.filter (eq $model.filter "autor") }}
+
+{{ $isGraphik := and $model.filter (eq $model.filter "graphik") }}
+
+{{ $isHrsg := and $model.filter (eq $model.filter "hrsg") }}
+
+{{- if $isPerson -}}
+	<div x-show="!search" class="flex flex-row gap-x-3 font-serif mr-6 items-end">
+		<label for="filter" class="align-bottom h-min self-end pb-1 text-sm	font-sans text-stone-700"
+			>Berufe</label
+		>
+
+		{{/* INFO:  We always redrect to letter = A bc some letters dont exist for other professions */}}
+		<select
+			class="h-min pb-1 border-b-4 border-zinc-300 px-1.5"
+			name="filter"
+			id="filter"
+			hx-get="/personen?letter=A"
+			trigger="change"
+			hx-push-url="true"
+			hx-select="main"
+			hx-target="main">
+			<option value="noorg" {{ if $isNoOrg }}selected{{ end }}>Alle</option>
+			<option value="musik" {{ if $isMusik }}selected{{ end }}>Musiker:innen</option>
+			<option value="autor" {{ if $isAutor }}selected{{ end }}>Autor:innen</option>
+			<option value="graphik" {{ if $isGraphik }}selected{{ end }}>Graphiker:innen</option>
+			<option value="hrsg" {{ if $isHrsg }}selected{{ end }}>Herausgeber:innen</option>
+		</select>
+	</div>
+{{- end -}}

views/routes/personen/components/searchbox.gohtml

@@ -0,0 +1,40 @@
+{{ $model := . }}
+
+
+<div class="ml-12 shrink-0 grow-0 mr-2.5">
+	<div class="min-w-[22.5rem] max-w-96 flex flex-row relative mt-9 ml-auto">
+		<div class="">
+			<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
+		</div>
+		<div class="pb-0 border-b-4 border-zinc-300 grow">
+			<input
+				class="px-1.5 font-serif placeholder:italic w-full"
+				type="search"
+				name="search"
+				value="{{ $model.search }}"
+				placeholder="Suchbegriff"
+				x-model="search"
+				hx-get=""
+				hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
+				hx-sync="this:replace"
+				hx-select="#searchresults"
+				hx-target="#searchresults"
+				autocomplete="off"
+				{{ if $model.active }}autofocus="true"{{ end }}
+				{{ if $model.search }}disabled="true"{{ end }} />
+		</div>
+		<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
+			<tool-tip position="right" x-show="search">
+				<a
+					:href="'/personen/?search=' + search"
+					x-show="search"
+					class="inline-block px-1
+				text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
+					hx-boost="false">
+					<i class="ri-links-line"></i
+				></a>
+				<div class="data-tip">Link zu dieser Suchanfrage</div>
+			</tool-tip>
+		</div>
+	</div>
+</div>