FIX: better loading time of /reihen

controllers/reihen.go

@@ -14,13 +14,14 @@ import (
 )
 
 const (
-	URL_REIHEN   = "/reihen/"
-	PARAM_LETTER = "letter"
-	PARAM_SEARCH = "search"
-	PARAM_PERSON = "agent"
-	PARAM_PLACE  = "place"
-	PARAM_YEAR   = "year"
-	PARAM_HIDDEN = "hidden"
+	URL_REIHEN         = "/reihen/"
+	URL_REIHEN_RESULTS = "/reihen/results/"
+	PARAM_LETTER       = "letter"
+	PARAM_SEARCH       = "search"
+	PARAM_PERSON       = "agent"
+	PARAM_PLACE        = "place"
+	PARAM_YEAR         = "year"
+	PARAM_HIDDEN       = "hidden"
 )
 
 func init() {
@@ -42,54 +43,87 @@ type ReihenPage struct {
 
 func (p *ReihenPage) Setup(router *router.Router[*core.RequestEvent], ia pagemodels.IApp, engine *templating.Engine) error {
 	app := ia.Core()
-	router.GET(URL_REIHEN, func(e *core.RequestEvent) error {
-		search := e.Request.URL.Query().Get(PARAM_SEARCH)
-		if search != "" {
-			return p.SearchRequest(app, engine, e)
-		}
-		person := e.Request.URL.Query().Get(PARAM_PERSON)
-		if person != "" {
-			return p.PersonRequest(app, engine, e)
-		}
-		place := e.Request.URL.Query().Get(PARAM_PLACE)
-		if place != "" {
-			return p.PlaceRequest(app, engine, e)
-		}
-		year := e.Request.URL.Query().Get(PARAM_YEAR)
-		if year != "" {
-			return p.YearRequest(app, engine, e)
-		}
-
-		return p.LetterRequest(app, engine, e)
-	})
+	router.GET(URL_REIHEN, p.handlePage(engine, app))
+	router.GET(URL_REIHEN_RESULTS, p.handleResults(engine, app))
 
 	return nil
 }
 
-func (p *ReihenPage) YearRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
-	year := e.Request.URL.Query().Get(PARAM_YEAR)
-	data := make(map[string]any)
-	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
-	data[PARAM_YEAR] = year
-
-	y, err := strconv.Atoi(year)
-	if err != nil {
-		return engine.Response404(e, err, data)
+func (p *ReihenPage) handlePage(engine *templating.Engine, app core.App) HandleFunc {
+	return func(e *core.RequestEvent) error {
+		data, err := p.buildResultData(app, e)
+		if err != nil {
+			return engine.Response404(e, err, data)
+		}
+		data["common"] = NewCommonReihenData(app)
+		return engine.Response200(e, URL_REIHEN, data)
 	}
-
-	result, err := NewSeriesResult_Year(app, y)
-	if err != nil {
-		return engine.Response404(e, err, data)
-	}
-
-	data["result"] = result
-	return p.Get(e, engine, data)
 }
 
-func (p *ReihenPage) LetterRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
-	letter := e.Request.URL.Query().Get(PARAM_LETTER)
-	data := map[string]interface{}{}
+func (p *ReihenPage) handleResults(engine *templating.Engine, app core.App) HandleFunc {
+	return func(e *core.RequestEvent) error {
+		data, err := p.buildResultData(app, e)
+		if err != nil {
+			return engine.Response404(e, err, data)
+		}
+		return engine.Response200(e, URL_REIHEN_RESULTS, data, "fragment")
+	}
+}
+
+// TODO: Suchverhalten bei gefilterten Personen, Orten und Jahren
+func (p *ReihenPage) buildResultData(app core.App, e *core.RequestEvent) (map[string]any, error) {
+	data := map[string]any{}
 	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
+
+	search := e.Request.URL.Query().Get(PARAM_SEARCH)
+	if search != "" {
+		data[PARAM_SEARCH] = search
+		result, err := NewSeriesResult_Search(app, search)
+		if err != nil {
+			return data, err
+		}
+		data["result"] = result
+		return data, nil
+	}
+
+	person := e.Request.URL.Query().Get(PARAM_PERSON)
+	if person != "" {
+		data[PARAM_PERSON] = person
+		result, err := NewSeriesResult_Agent(app, person)
+		if err != nil {
+			return data, err
+		}
+		data["result"] = result
+		return data, nil
+	}
+
+	place := e.Request.URL.Query().Get(PARAM_PLACE)
+	if place != "" {
+		data[PARAM_PLACE] = place
+		result, err := NewSeriesResult_Place(app, place)
+		if err != nil {
+			return data, err
+		}
+		data["result"] = result
+		return data, nil
+	}
+
+	year := e.Request.URL.Query().Get(PARAM_YEAR)
+	if year != "" {
+		data[PARAM_YEAR] = year
+		y, err := strconv.Atoi(year)
+		if err != nil {
+			return data, err
+		}
+		result, err := NewSeriesResult_Year(app, y)
+		if err != nil {
+			return data, err
+		}
+		data["result"] = result
+		return data, nil
+	}
+
+	letter := e.Request.URL.Query().Get(PARAM_LETTER)
 	if letter == "" {
 		data["startpage"] = true
 		letter = "A"
@@ -98,61 +132,11 @@ func (p *ReihenPage) LetterRequest(app core.App, engine *templating.Engine, e *c
 
 	result, err := NewSeriesListResult_Letter(app, letter)
 	if err != nil {
-		return engine.Response404(e, err, data)
+		return data, err
 	}
 
 	data["result"] = result
-	return p.Get(e, engine, data)
-}
-
-func (p *ReihenPage) PersonRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
-	person := e.Request.URL.Query().Get(PARAM_PERSON)
-	data := map[string]interface{}{}
-	data[PARAM_PERSON] = person
-	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
-
-	result, err := NewSeriesResult_Agent(app, person)
-	if err != nil {
-		return engine.Response404(e, err, data)
-	}
-
-	data["result"] = result
-	return p.Get(e, engine, data)
-}
-
-func (p *ReihenPage) PlaceRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
-	place := e.Request.URL.Query().Get(PARAM_PLACE)
-	data := map[string]interface{}{}
-	data[PARAM_PLACE] = place
-	data[PARAM_HIDDEN] = e.Request.URL.Query().Get(PARAM_HIDDEN)
-
-	result, err := NewSeriesResult_Place(app, place)
-	if err != nil {
-		return engine.Response404(e, err, data)
-	}
-
-	data["result"] = result
-	return p.Get(e, engine, data)
-}
-
-// TODO: Suchverhalten bei gefilterten Personen, Orten und Jahren
-func (p *ReihenPage) SearchRequest(app core.App, engine *templating.Engine, e *core.RequestEvent) error {
-	search := e.Request.URL.Query().Get(PARAM_SEARCH)
-	data := map[string]interface{}{}
-	data[PARAM_SEARCH] = search
-
-	result, err := NewSeriesResult_Search(app, search)
-	if err != nil {
-		return engine.Response404(e, err, data)
-	}
-
-	data["result"] = result
-	return p.Get(e, engine, data)
-}
-
-func (p *ReihenPage) Get(request *core.RequestEvent, engine *templating.Engine, data map[string]interface{}) error {
-	data["common"] = NewCommonReihenData(request.App)
-	return engine.Response200(request, URL_REIHEN, data)
+	return data, nil
 }
 
 type CommonReihenData struct {

views/routes/components/_reihe.gohtml

@@ -33,7 +33,7 @@
 				<i class="ri-links-line"></i> Link
 			</a>
 			{{- if (IsAdminOrEditor $request.user) -}}
-			<a href="/reihe/{{ $r.MusenalmID }}/edit/" class="no-underline rounded bg-stone-100 px-1.5">
+			<a href="/reihe/{{ $r.MusenalmID }}/edit" class="no-underline rounded bg-stone-100 px-1.5">
 				<i class="ri-edit-line"></i>
 				Bearbeiten
 			</a>

views/routes/ort/edit/body.gohtml

@@ -29,7 +29,6 @@
 							<i class="ri-eye-line"></i> Orte
 						</a>
 					</div>
-					&middot;
 				</div>
 			{{- end -}}
 		</div>
@@ -45,7 +44,7 @@
 							<tool-tip position="top" class="!inline">
 								<div class="data-tip">{{ $model.result.Prev.Name }}</div>
 								<a
-									href="/ort/{{ $model.result.Prev.Id }}/edit/"
+									href="/ort/{{ $model.result.Prev.Id }}/edit"
 									class="text-gray-700 hover:text-slate-950 no-underline">
 									<i class="ri-arrow-left-s-line"></i>
 								</a>
@@ -62,7 +61,7 @@
 							<tool-tip position="top" class="!inline">
 								<div class="data-tip">{{ $model.result.Next.Name }}</div>
 								<a
-									href="/ort/{{ $model.result.Next.Id }}/edit/"
+									href="/ort/{{ $model.result.Next.Id }}/edit"
 									class="text-gray-700 hover:text-slate-950 no-underline">
 									<i class="ri-arrow-right-s-line"></i>
 								</a>

views/routes/orte/body.gohtml

@@ -32,7 +32,7 @@
 								</div>
 							{{- end -}}
 							{{- if (IsAdminOrEditor $model.request.user) -}}
-								<a href="/ort/{{ $place.Id }}/edit/" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline">
+								<a href="/ort/{{ $place.Id }}/edit" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline">
 									<i class="ri-edit-line"></i> Bearbeiten
 								</a>
 							{{- end -}}

views/routes/person/edit/body.gohtml

@@ -25,7 +25,6 @@
 							<i class="ri-eye-line"></i> Anschauen
 						</a>
 					</div>
-					&middot;
 				</div>
 			{{- end -}}
 		</div>

views/routes/reihe/body.gohtml

@@ -48,7 +48,7 @@
 		<div class="font-sans">
 			&middot;&nbsp;
 			<i class="ri-edit-line"></i>
-			<a href="/reihe/{{ $r.MusenalmID }}/edit/">Bearbeiten</a>
+			<a href="/reihe/{{ $r.MusenalmID }}/edit">Bearbeiten</a>
 		</div>
 	{{- end -}}
 	</div>

views/routes/reihe/edit/body.gohtml

@@ -25,7 +25,6 @@
 							<i class="ri-eye-line"></i> Anschauen
 						</a>
 					</div>
-					&middot;
 				</div>
 			{{- end -}}
 		</div>
@@ -41,7 +40,7 @@
 							<tool-tip position="top" class="!inline">
 								<div class="data-tip">{{ $model.result.Prev.Title }}</div>
 								<a
-									href="/reihe/{{ $model.result.Prev.MusenalmID }}/edit/"
+									href="/reihe/{{ $model.result.Prev.MusenalmID }}/edit"
 									class="text-gray-700 hover:text-slate-950 no-underline">
 									<i class="ri-arrow-left-s-line"></i>
 								</a>
@@ -58,7 +57,7 @@
 							<tool-tip position="top" class="!inline">
 								<div class="data-tip">{{ $model.result.Next.Title }}</div>
 								<a
-									href="/reihe/{{ $model.result.Next.MusenalmID }}/edit/"
+									href="/reihe/{{ $model.result.Next.MusenalmID }}/edit"
 									class="text-gray-700 hover:text-slate-950 no-underline">
 									<i class="ri-arrow-right-s-line"></i>
 								</a>

views/routes/reihen/body.gohtml

@@ -69,79 +69,17 @@
 		{{ end }}
 
 
-		<!-- INFO: 3. Treffer -->
-		<div id="searchcontent" class="font-serif">
-			{{ if and .search $model.result.IDSeries }}
-				<div class="mb-1 max-w-[60rem] hyphens-auto">
-					{{ range $id, $r := $model.result.IDSeries }}
-						{{ template "_reihe" (Arr $r $model.result.Entries $model.result.EntriesSeries
-						true false false $model.request) }}
-					{{ end }}
-				</div>
-			{{ end }}
-
-			{{ if $model.result.Series }}
-				<div class="mb-1 max-w-[60rem] hyphens-auto">
-					{{ range $id, $r := $model.result.Series }}
-						{{ template "_reihe" (Arr $r $model.result.Entries $model.result.EntriesSeries false false
-							false $model.request)
-						}}
-					{{ end }}
-				</div>
-			{{ end }}
-
-			{{ if and .search $model.result.AltSeries }}
-				{{ if $model.result.IDSeries }}
-					<div class="border-b text-sm font-sans text-right pb-0.5">
-						Treffer in Almanach-Nummer &uarr;
-					</div>
-				{{ end }}
-
-				{{ if $model.result.Series }}
-					<div class="border-b text-sm font-sans text-right pb-0.5">
-						Treffer in Reihentiteln &uarr;
-					</div>
-				{{ end }}
-
-				{{ if not (or $model.result.Series $model.result.IDSeries) }}
-					<div class="border-b text-sm font-sans text-right pb-0.5">
-						Keine Treffer im Reihentitel
-						<i class="ri-forbid-line inline-bloc -mr-0.5"></i>
-					</div>
-				{{ end }}
-				<div class="border-t mb-1.5 text-sm font-sans text-right pt-0.5">
-					Treffer in allen Feldern (inkl. Anmerkungen &amp; Verweise) &darr;
-				</div>
-				<div class="mb-1 max-w-[60rem] hyphens-auto">
-					{{ range $id, $r := $model.result.AltSeries }}
-						{{ template "_reihe" (Arr $r $model.result.Entries $model.result.EntriesSeries
-						false true true $model.request) }}
-					{{ end }}
-				</div>
-			{{ end }}
-			{{ if not (or $model.result.Series $model.result.AltSeries $model.result.IDSeries) }}
-				<div class="mt-8">
-					Keine Reihen
-					{{ if .search }}für {{ .search }}{{ end }}
-					gefunden.
-				</div>
-			{{ end }}
-
-			{{ if $model.search }}
-				<script type="module">
-				let elements = document.querySelectorAll('.reihen-text');
-				let mark_instance = new Mark(elements);
-				// INFO: we wait a little bit before marking, to settle everything
-					setTimeout(() => {
-						mark_instance.mark('{{ $model.search }}', {
-							"seperateWordSearch": true,
-						});
-					}, 200);
-				</script>
-			{{ end }}
-
-
-			<!-- INFO: Ende 3. Treffer -->
+		<div
+			id="reihenresults"
+			hx-get="/reihen/results/{{- if $model.request.query -}}?{{- $model.request.query -}}{{- end -}}"
+			hx-trigger="load"
+			hx-target="this"
+			hx-swap="outerHTML"
+			hx-history="false"
+			hx-indicator="body">
+			<div id="searchcontent" class="font-serif">
+				<div class="flex justify-center text-sm text-stone-600">Reihen laden…</div>
+			</div>
 		</div>
 
 		<!-- INFO: Ende 2. Breite Anzeige -->

views/routes/reihen/components/alphabet.gohtml

@@ -32,21 +32,26 @@
 			<div class="pb-0 border-b-4 border-zinc-300 grow">
 				<form
 					method="GET"
-					hx-boost="false"
+					action="/reihen/"
+					hx-get="/reihen/results/"
+					hx-indicator="body"
+					hx-push-url="false"
+					hx-swap="outerHTML"
+					hx-target="#reihenresults"
 					x-target="searchcontent"
 					role="search"
 					aria-label="Reihentitelsuche">
 					{{- if $model.letter -}}
-						<input type="hidden" name="letter" value="{{- $model.letter -}}" />
+						<input type="hidden" name="letter" value="{{- $model.letter -}}" :disabled="search" />
 					{{- end -}}
 					{{- if and $model.result $model.result.Agent -}}
-						<input type="hidden" name="agent" value="{{- $model.result.Agent.Id -}}" />
+						<input type="hidden" name="agent" value="{{- $model.result.Agent.Id -}}" :disabled="search" />
 					{{- end -}}
 					{{- if and $model.result $model.result.Place -}}
-						<input type="hidden" name="place" value="{{- $model.result.Place.Id -}}" />
+						<input type="hidden" name="place" value="{{- $model.result.Place.Id -}}" :disabled="search" />
 					{{- end -}}
 					{{- if $model.year -}}
-						<input type="hidden" name="year" value="{{- $model.year -}}" />
+						<input type="hidden" name="year" value="{{- $model.year -}}" :disabled="search" />
 					{{- end -}}
 					<input
 						class="px-1.5 font-serif placeholder:italic w-full"

views/routes/reihen/components/notifier.gohtml

@@ -44,7 +44,7 @@
 			<span class="filtercategory">Erscheinungsort</span> &middot;
 			<span class="filterterm">{{ $model.result.Place.Name }}</span>
 			{{- if (IsAdminOrEditor $model.request.user) -}}
-				<a href="/ort/{{ $model.result.Place.Id }}/edit/" class="no-underline rounded bg-stone-100 px-1.5">
+				<a href="/ort/{{ $model.result.Place.Id }}/edit" class="no-underline rounded bg-stone-100 px-1.5">
 					<i class="ri-edit-line"></i>
 				</a>
 			{{- end -}}

views/routes/reihen/filters/body.gohtml

@@ -0,0 +1,83 @@
+{{ $model := . }}
+
+<div id="reihenfilters">
+{{ $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"
+	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/?{{- if $model.query_without_agent -}}{{- $model.query_without_agent -}}&{{- end -}}agent="
+				data-queryparam="agent"
+				data-placeholder="Personen und Körperschaften filtern..."></filter-list>
+		</div>
+	<script type="module">
+		let agentList = document.getElementById("agent-list");
+		if (agentList) {
+			agentList.items = {{ $model.common.Agents }};
+
+			agentList.setSearchTextFunc((item) => {
+				return item.name;
+			});
+
+			agentList.setLinkTextFunc((item) => {
+				return `
+						<span class="filter-list-searchable">${item.name}</span>
+						<span class="text-xs text-stone-500 whitespace-nowrap font-sans">
+							${item.corporate_body ? "Verlag/Druck/Vertrieb" : item.biographical_data}
+						</span>
+						`;
+			});
+		}
+	</script>
+	{{ end }}
+
+	{{ if $model.common.Places }}
+		<div>
+			<h2 class="mb-6">Erscheinungsorte</h2>
+			<filter-list
+				id="place-list"
+				data-url="/reihen/?{{- if $model.query_without_place -}}{{- $model.query_without_place -}}&{{- end -}}place="
+				data-queryparam="place"
+				data-placeholder="Erscheinungsorte filtern..."></filter-list>
+		</div>
+	<script type="module">
+		let placeList = document.getElementById("place-list");
+		if (placeList) placeList.items = {{ $model.common.Places }};
+	</script>
+	{{ end }}
+
+	{{ if $model.common.Years }}
+		<div>
+			<h2 class="mb-6">Geltungsjahre</h2>
+			<filter-list
+				id="year-list"
+				data-url="/reihen/?{{- if $model.query_without_year -}}{{- $model.query_without_year -}}&{{- end -}}year="
+				data-queryparam="year"
+				data-filterstart="true"
+				data-placeholder="Nach Geltungsjahren filtern..."></filter-list>
+		</div>
+	<script type="module">
+		let yearList = document.getElementById("year-list");
+		if (yearList) {
+			yearList.items = {{ $model.common.Years }};
+
+			yearList.setHREFFunc((item) => {
+				return String(item);
+			});
+
+			yearList.setLinkTextFunc((item) => {
+				if (item === 0) return "ohne Jahr";
+				return String(item);
+			});
+		}
+	</script>
+	{{ end }}
+</div>
+
+</div>

views/routes/reihen/results/body.gohtml

@@ -0,0 +1,77 @@
+{{ $model := . }}
+
+<div id="reihenresults">
+	<!-- INFO: 3. Treffer -->
+	<div id="searchcontent" class="font-serif">
+		{{ if and .search $model.result.IDSeries }}
+			<div class="mb-1 max-w-[60rem] hyphens-auto">
+				{{ range $id, $r := $model.result.IDSeries }}
+					{{ template "_reihe" (Arr $r $model.result.Entries $model.result.EntriesSeries
+					true false false $model.request) }}
+				{{ end }}
+			</div>
+		{{ end }}
+
+		{{ if $model.result.Series }}
+			<div class="mb-1 max-w-[60rem] hyphens-auto">
+				{{ range $id, $r := $model.result.Series }}
+					{{ template "_reihe" (Arr $r $model.result.Entries $model.result.EntriesSeries false false
+						false $model.request)
+					}}
+				{{ end }}
+			</div>
+		{{ end }}
+
+		{{ if and .search $model.result.AltSeries }}
+			{{ if $model.result.IDSeries }}
+				<div class="border-b text-sm font-sans text-right pb-0.5">
+					Treffer in Almanach-Nummer &uarr;
+				</div>
+			{{ end }}
+
+			{{ if $model.result.Series }}
+				<div class="border-b text-sm font-sans text-right pb-0.5">
+					Treffer in Reihentiteln &uarr;
+				</div>
+			{{ end }}
+
+			{{ if not (or $model.result.Series $model.result.IDSeries) }}
+				<div class="border-b text-sm font-sans text-right pb-0.5">
+					Keine Treffer im Reihentitel
+					<i class="ri-forbid-line inline-bloc -mr-0.5"></i>
+				</div>
+			{{ end }}
+			<div class="border-t mb-1.5 text-sm font-sans text-right pt-0.5">
+				Treffer in allen Feldern (inkl. Anmerkungen &amp; Verweise) &darr;
+			</div>
+			<div class="mb-1 max-w-[60rem] hyphens-auto">
+				{{ range $id, $r := $model.result.AltSeries }}
+					{{ template "_reihe" (Arr $r $model.result.Entries $model.result.EntriesSeries
+					false true true $model.request) }}
+				{{ end }}
+			</div>
+		{{ end }}
+		{{ if not (or $model.result.Series $model.result.AltSeries $model.result.IDSeries) }}
+			<div class="mt-8">
+				Keine Reihen
+				{{ if .search }}für {{ .search }}{{ end }}
+				gefunden.
+			</div>
+		{{ end }}
+
+		{{ if $model.search }}
+			<script type="module">
+			let elements = document.querySelectorAll('.reihen-text');
+			let mark_instance = new Mark(elements);
+			// INFO: we wait a little bit before marking, to settle everything
+				setTimeout(() => {
+					mark_instance.mark('{{ $model.search }}', {
+						"seperateWordSearch": true,
+					});
+				}, 200);
+			</script>
+		{{ end }}
+
+		<!-- INFO: Ende 3. Treffer -->
+	</div>
+</div>