From 8bc1fdb79ccbb0cc25bb311428b4800012771f34 Mon Sep 17 00:00:00 2001
From: Simon Martens <simon.martens@mailbox.org>
Date: Sat, 1 Mar 2025 03:13:16 +0100
Subject: [PATCH] filter styling

---
 views/routes/reihen/components/filter.gohtml  |  4 +-
 views/routes/suche/beitraege/body.gohtml      | 23 +++++---
 .../routes/suche/beitraege/pagination.gohtml  | 21 +++++++
 views/routes/suche/beitraege/tablehead.gohtml | 20 +------
 .../suche/components/_filterlist.gohtml       | 58 ++++++++++++++-----
 views/transform/main.js                       | 47 ++++++++++++---
 views/transform/site.css                      | 12 ++++
 7 files changed, 136 insertions(+), 49 deletions(-)
 create mode 100644 views/routes/suche/beitraege/pagination.gohtml

diff --git a/views/routes/reihen/components/filter.gohtml b/views/routes/reihen/components/filter.gohtml
index d55b9c3..34b38d0 100644
--- a/views/routes/reihen/components/filter.gohtml
+++ b/views/routes/reihen/components/filter.gohtml
@@ -1,11 +1,13 @@
 {{ $model := . }}
 <div
 	class="hidden lg:flex min-w-[32rem] max-w-[32rem] float-right ml-6 flex-col gap-y-8 [&>*]:pb-12
-	[&>*]:px-12 [&>*]:pt-8 [&>*]:bg-slate-100">
+	[&>*]:px-12 [&>*]:pt-8 [&>*]:bg-slate-100"
+	id="reihenfilter">
 	{{ if $model.common.Agents }}
 		<div class="">
 			<h2 class="mb-6">Herausgeber:innen, Verlage &amp; Druckereien</h2>
 			<filter-list
+				class="min-h-[20rem] border-b border-zinc-300"
 				id="agent-list"
 				data-url="/reihen/?agent="
 				data-placeholder="Personen und Körperschaften filtern..."></filter-list>
diff --git a/views/routes/suche/beitraege/body.gohtml b/views/routes/suche/beitraege/body.gohtml
index ebc4e80..cc38be8 100644
--- a/views/routes/suche/beitraege/body.gohtml
+++ b/views/routes/suche/beitraege/body.gohtml
@@ -38,13 +38,13 @@
 	IncipitString      string
 	}
 
-.filters
-type BeitraegeFilterParameters struct {
+	.filters
+	type BeitraegeFilterParameters struct {
 	Agent     string
 	Type      string
 	Year      string
 	OnlyScans bool
-}
+	}
 	*/}}
 
 {{ $isAlm := false }}
@@ -139,11 +139,15 @@ type BeitraegeFilterParameters struct {
 </div>
 
 {{- template "_fieldscript" -}}
-
 {{- if $model.parameters.IsBeitraegeSearch -}}
-	<div class="container-normal" id="searchresults">
-		{{ template "_filterlist" $model }}
-		{{ template "tablehead" $model }}
+	<div class="cotents" id="searchresult">
+		{{- if $model.result.Hits -}}
+			{{ template "_filterlist" $model }}
+		{{- end -}}
+
+
+		<div class="container-normal">
+			{{ template "tablehead" $model }}
 			{{- if $model.result.Hits -}}
 				<div class="mt-8" id="almanachcontents">
 					{{- range $_, $hit := $model.result.Hits -}}
@@ -171,6 +175,11 @@ type BeitraegeFilterParameters struct {
 					{{- end -}}
 				</div>
 			{{- end -}}
+
+
+			<div class="flex flex-row justify-end items-start border-t border-zinc-300 pt-4">
+				{{- template "pagination" $model -}}
+			</div>
 		</div>
 
 	<script type="module">
diff --git a/views/routes/suche/beitraege/pagination.gohtml b/views/routes/suche/beitraege/pagination.gohtml
new file mode 100644
index 0000000..d57a0a7
--- /dev/null
+++ b/views/routes/suche/beitraege/pagination.gohtml
@@ -0,0 +1,21 @@
+{{ $model := . }}
+{{- if gt (len $model.result.Pages) 1 }}
+	<div class="[&>_a]:no-underline">
+		{{ if gt $model.parameters.Page 1 -}}
+			<a
+				href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Prev }}"
+				class="mr-1.5">
+				<i class="ri-arrow-left-long-line"></i>
+			</a>
+		{{- end -}}
+		Seite
+		<b>{{ $model.parameters.Page }}&thinsp;/&thinsp;{{ $model.result.PagesCount }}</b>
+		{{ if lt $model.parameters.Page ($model.result.PagesCount) -}}
+			<a
+				href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Next }}"
+				class="ml-1.5">
+				<i class="ri-arrow-right-long-line"></i>
+			</a>
+		{{- end -}}
+	</div>
+{{- end -}}
diff --git a/views/routes/suche/beitraege/tablehead.gohtml b/views/routes/suche/beitraege/tablehead.gohtml
index 3c70951..fd3b718 100644
--- a/views/routes/suche/beitraege/tablehead.gohtml
+++ b/views/routes/suche/beitraege/tablehead.gohtml
@@ -43,27 +43,11 @@
 				{{ $model.result.Entries | len }} Bänden
 			{{- end -}}
 		</div>
+
 		{{- if gt (len $model.result.Pages) 1 }}
 			<div>&middot;</div>
-			<div class="[&>_a]:no-underline">
-				{{ if gt $model.parameters.Page 1 -}}
-					<a
-						href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Prev }}"
-						class="mr-1.5">
-						<i class="ri-arrow-left-long-line"></i>
-					</a>
-				{{- end -}}
-				Seite {{ $model.parameters.Page }} /
-				{{ $model.result.PagesCount }}
-				{{ if lt $model.parameters.Page ($model.result.PagesCount) -}}
-					<a
-						href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Next }}"
-						class="ml-1.5">
-						<i class="ri-arrow-right-long-line"></i>
-					</a>
-				{{- end -}}
-			</div>
 		{{- end -}}
+		{{ template "pagination" $model }}
 	</div>
 
 	{{- if not $isAlm -}}
diff --git a/views/routes/suche/components/_filterlist.gohtml b/views/routes/suche/components/_filterlist.gohtml
index 5fdd1fb..b5c140a 100644
--- a/views/routes/suche/components/_filterlist.gohtml
+++ b/views/routes/suche/components/_filterlist.gohtml
@@ -1,24 +1,50 @@
 {{ $model := . }}
 
+{{- $isFiltered := or $model.filters.Agent $model.filters.Year $model.filters.Type -}}
 
-<div class="flex flex-row gap-x-6 mb-4">
-	<filter-list
-		id="agent-list"
-		data-queryparam="personsstring"
-		data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&agentfilter="
-		data-placeholder="Personen und Körperschaften filtern..."></filter-list>
 
-	<filter-list
-		id="year-list"
-		data-queryparam="yearstring"
-		data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&yearfilter="
-		data-placeholder="Jahre filtern..."></filter-list>
+<div class="container-oversize " x-data="{ filters: '{{- $isFiltered -}}' }">
+	<button
+		class="w-full flex flex-row bg-slate-100 py-3 border-2 border-slate-100 hover:border-slate-900
+		cursor-pointer box-content hover:[&>_h2]:font-slate-900 select-none"
+		@click="filters = !filters">
+		<h2 class="text-2xl text-stone-700 px-32">
+			Filter
+			<i class="ri-arrow-right-s-line" x-show="!filters"></i>
+			<i class="ri-arrow-down-s-line" x-show="filters"></i>
+		</h2>
+	</button>
+	<div
+		class="flex flex-row px-24 justify-between bg-slate-100 py-12 border-t-4 border-stone-50"
+		id="searchfilter"
+		x-show="filters">
+		<div class="w-[30%] grow-0 shrink-0">
+			<filter-list
+				class=""
+				id="agent-list"
+				data-queryparam="agentfilter"
+				data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&agentfilter="
+				data-placeholder="Personen und Körperschaften filtern..."></filter-list>
+		</div>
 
-	<filter-list
-		id="types-list"
-		data-queryparam="type"
-		data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&typefilter="
-		data-placeholder="Betragskategorien filtern..."></filter-list>
+		<div class="w-[30%] grow-0 shrink-0">
+			<filter-list
+				class=""
+				id="year-list"
+				data-queryparam="yearfilter"
+				data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&yearfilter="
+				data-placeholder="Jahre filtern..."></filter-list>
+		</div>
+
+		<div class="w-[30%] grow-0 shrink-0">
+			<filter-list
+				class=""
+				id="types-list"
+				data-queryparam="typefilter"
+				data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&typefilter="
+				data-placeholder="Betragskategorien filtern..."></filter-list>
+		</div>
+	</div>
 </div>
 
 	<script type="module">
diff --git a/views/transform/main.js b/views/transform/main.js
index 03d6102..29e2051 100644
--- a/views/transform/main.js
+++ b/views/transform/main.js
@@ -109,12 +109,16 @@ function setup_templates() {
 
 class FilterList extends HTMLElement {
 	#hiddenlist = false;
+	#activequery = "";
+
 	constructor() {
 		super();
 		this._items = [];
 		this._url = "";
 		this._filterstart = false;
 		this._placeholder = "Liste filtern...";
+		this._queryparam = "";
+		this._startparams = null;
 		this.render();
 	}
 
@@ -127,6 +131,8 @@ class FilterList extends HTMLElement {
 			this._items = data;
 			this.render();
 		}
+		if (!htmx) return;
+		htmx.process(this);
 	}
 
 	get items() {
@@ -137,6 +143,10 @@ class FilterList extends HTMLElement {
 		this._url = this.getAttribute("data-url") || "./";
 		this._filterstart = this.getAttribute("data-filterstart") === "true";
 		this._placeholder = this.getAttribute("data-placeholder") || "Liste filtern...";
+		this._queryparam = this.getAttribute("data-queryparam") || "";
+
+		if (this._queryparam) {
+		}
 
 		if (this._filterstart) {
 			this.#hiddenlist = true;
@@ -146,10 +156,6 @@ class FilterList extends HTMLElement {
 		this.addEventListener("keydown", this.onEnter.bind(this));
 		this.addEventListener("focusin", this.onGainFocus.bind(this));
 		this.addEventListener("focusout", this.onLoseFocus.bind(this));
-
-		if (htmx) {
-			htmx.process(this);
-		}
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
@@ -165,6 +171,10 @@ class FilterList extends HTMLElement {
 			this._placeholder = newValue;
 			this.render();
 		}
+		if (name === "data-queryparam" && oldValue !== newValue) {
+			this._queryparam = newValue;
+			this.render();
+		}
 	}
 
 	onInput(e) {
@@ -276,7 +286,19 @@ class FilterList extends HTMLElement {
 		}
 
 		let href = this.getHREF(item);
-		if (href === "" || !window.location.href.endsWith(href)) {
+		if (href === "") {
+			return false;
+		}
+
+		if (this._queryparam) {
+			let params = new URLSearchParams(window.location.search);
+			let activequery = params.get(this._queryparam) || "";
+			if (activequery === href) {
+				return true;
+			}
+		}
+
+		if (!window.location.href.endsWith(href)) {
 			return false;
 		}
 
@@ -291,6 +313,17 @@ class FilterList extends HTMLElement {
 		return `<span class="${FILTER_LIST_SEARCHABLE}">${text}</span>`;
 	}
 
+	getURL(item) {
+		if (this._queryparam) {
+			let url = new URL(window.location);
+			let params = new URLSearchParams(url.search);
+			params.set(this._queryparam, this.getHREF(item));
+			url.search = params.toString();
+			return url.toString();
+		}
+		return this._url + this.getHREFEncoded(item);
+	}
+
 	renderList() {
 		let list = this.querySelector("#" + FILTER_LIST_LIST);
 		if (list) {
@@ -354,12 +387,12 @@ class FilterList extends HTMLElement {
 		}
 
 		return `
-							<div id="${FILTER_LIST_LIST}" class="${FILTER_LIST_LIST} pt-1 min-h-[19rem] max-h-60 overflow-auto border-b border-zinc-300 bg-stone-50 ${this.#hiddenlist ? "hidden" : ""}">
+							<div id="${FILTER_LIST_LIST}" class="${FILTER_LIST_LIST} pt-1 max-h-60 overflow-auto bg-stone-50 ${this.#hiddenlist ? "hidden" : ""}">
 								${filtereditems
 									.map(
 										(item, index) => `
 									<a
-										href="${this._url}${this.getHREFEncoded(item)}"
+										href="${this.getURL(item)}"
 										class="${FILTER_LIST_ITEM} block px-2.5 py-0.5 hover:bg-slate-200 no-underline ${
 											index % 2 === 0 ? "bg-stone-100" : "bg-stone-50"
 										}"
diff --git a/views/transform/site.css b/views/transform/site.css
index 016a6d5..8ca8424 100644
--- a/views/transform/site.css
+++ b/views/transform/site.css
@@ -110,6 +110,10 @@
 		@apply font-variant-small-caps;
 	}
 
+	#reihenfilter .filter-list-list {
+		@apply border-b border-zinc-300 min-h-[17rem];
+	}
+
 	#alphabet a[aria-current="page"]:not(.inactive) {
 		@apply pb-3 pt-2 font-bold italic !bg-stone-50 relative -bottom-3 border-b;
 	}
@@ -300,6 +304,14 @@
 		@apply grid grid-cols-12 gap-y-3 w-full gap-x-4;
 	}
 
+	#searchfilter .filter-list-list {
+		@apply text-base;
+	}
+
+	#searchfilter .filter-list-list {
+		@apply border shadow-inner;
+	}
+
 	#persontype a {
 		@apply px-1.5 border-b-[5px] border-transparent hover:border-zinc-200 no-underline font-serif mx-2.5;
 	}