Improve delete using htmx only

Author: svera

Diff for: internal/webserver/controller/author/search.go

@@ -1,7 +1,6 @@
 package author
 
 import (
-	"fmt"
 	"log"
 	"strconv"
 
@@ -50,16 +49,26 @@ func (a *Controller) Search(c *fiber.Ctx) error {
 		searchResults = a.hlRepository.HighlightedPaginatedResult(int(session.ID), searchResults)
 	}
 
-	err = c.Render("author/results", fiber.Map{
+	templateVars := fiber.Map{
 		"Author":                 author,
 		"Results":                searchResults,
 		"Paginator":              view.Pagination(model.MaxPagesNavigator, searchResults, map[string]string{}),
-		"Title":                  fmt.Sprintf("Coreander - %s", author.Name),
+		"Title":                  author.Name,
 		"EmailSendingConfigured": emailSendingConfigured,
 		"EmailFrom":              a.sender.From(),
 		"WordsPerMinute":         a.config.WordsPerMinute,
-	}, "layout")
+		"URL":                    view.URL(c),
+	}
+
+	if c.Get("hx-request") == "true" {
+		if err = c.Render("partials/docs-list", templateVars); err != nil {
+			log.Println(err)
+			return fiber.ErrInternalServerError
+		}
+		return nil
+	}
 
+	err = c.Render("author/results", templateVars, "layout")
 	if err != nil {
 		log.Println(err)
 		return fiber.ErrInternalServerError

Diff for: internal/webserver/controller/document/detail.go

@@ -42,7 +42,7 @@ func (d *Controller) Detail(c *fiber.Ctx) error {
 		return fiber.ErrNotFound
 	}
 
-	title := fmt.Sprintf("%s", document.Title)
+	title := document.Title
 	if len(document.Authors) > 0 {
 		title = fmt.Sprintf("%s - %s", strings.Join(document.Authors, ", "), document.Title)
 	}
@@ -58,7 +58,7 @@ func (d *Controller) Detail(c *fiber.Ctx) error {
 		msg = "Document uploaded successfully."
 	}
 
-	return c.Render("document", fiber.Map{
+	return c.Render("document/detail", fiber.Map{
 		"Title":                  title,
 		"Document":               document,
 		"EmailSendingConfigured": emailSendingConfigured,

Diff for: internal/webserver/controller/document/reader.go

@@ -25,14 +25,12 @@ func (d *Controller) Reader(c *fiber.Ctx) error {
 		return fiber.ErrNotFound
 	}
 
-	template := "reader"
-
-	title := fmt.Sprintf("%s", document.Title)
+	title := document.Title
 	authors := strings.Join(document.Authors, ", ")
 	if authors != "" {
 		title = fmt.Sprintf("%s - %s", authors, document.Title)
 	}
-	return c.Render(template, fiber.Map{
+	return c.Render("document/reader", fiber.Map{
 		"Title":       title,
 		"Author":      strings.Join(document.Authors, ", "),
 		"Description": document.Description,

Diff for: internal/webserver/controller/document/search.go

@@ -48,19 +48,29 @@ func (d *Controller) Search(c *fiber.Ctx) error {
 		searchResults = d.hlRepository.HighlightedPaginatedResult(int(session.ID), searchResults)
 	}
 
-	err = c.Render("results", fiber.Map{
+	templateVars := fiber.Map{
 		"Keywords":               keywords,
 		"Results":                searchResults,
 		"Paginator":              view.Pagination(model.MaxPagesNavigator, searchResults, map[string]string{"search": keywords}),
 		"Title":                  "Search results",
 		"EmailSendingConfigured": emailSendingConfigured,
 		"EmailFrom":              d.sender.From(),
 		"WordsPerMinute":         d.config.WordsPerMinute,
-	}, "layout")
+		"URL":                    view.URL(c),
+	}
 
-	if err != nil {
+	if c.Get("hx-request") == "true" {
+		if err = c.Render("partials/docs-list", templateVars); err != nil {
+			log.Println(err)
+			return fiber.ErrInternalServerError
+		}
+		return nil
+	}
+
+	if err = c.Render("document/results", templateVars, "layout"); err != nil {
 		log.Println(err)
 		return fiber.ErrInternalServerError
 	}
+
 	return nil
 }

Diff for: internal/webserver/controller/document/upload.go

@@ -16,7 +16,7 @@ import (
 )
 
 func (d *Controller) UploadForm(c *fiber.Ctx) error {
-	return c.Render("upload", fiber.Map{
+	return c.Render("document/upload", fiber.Map{
 		"Title":   "Upload document",
 		"MaxSize": d.config.UploadDocumentMaxSize,
 	}, "layout")
@@ -26,7 +26,7 @@ func (d *Controller) Upload(c *fiber.Ctx) error {
 	file, err := c.FormFile("filename")
 	if err != nil {
 		if errors.Is(err, fasthttp.ErrMissingFile) {
-			return c.Status(fiber.StatusBadRequest).Render("upload", fiber.Map{
+			return c.Status(fiber.StatusBadRequest).Render("document/upload", fiber.Map{
 				"Title": "Upload document",
 				"Error": "Invalid file type",
 			}, "layout")
@@ -35,21 +35,21 @@ func (d *Controller) Upload(c *fiber.Ctx) error {
 
 	allowedTypes := []string{"application/epub+zip", "application/pdf"}
 	if !slices.Contains(allowedTypes, file.Header.Get("Content-Type")) {
-		return c.Status(fiber.StatusBadRequest).Render("upload", fiber.Map{
+		return c.Status(fiber.StatusBadRequest).Render("document/upload", fiber.Map{
 			"Title": "Upload document",
 			"Error": "Invalid file type",
 		}, "layout")
 	}
 
 	if file.Size > int64(d.config.UploadDocumentMaxSize*1024*1024) {
-		return c.Status(fiber.StatusRequestEntityTooLarge).Render("upload", fiber.Map{
+		return c.Status(fiber.StatusRequestEntityTooLarge).Render("document/upload", fiber.Map{
 			"Title": "Upload Document",
 			"Error": fmt.Sprintf("Document too large, the maximum allowed size is %d megabytes", d.config.UploadDocumentMaxSize),
 		}, "layout")
 	}
 
 	destination := filepath.Join(d.config.LibraryPath, file.Filename)
-	internalServerErrorStatus := c.Status(fiber.StatusInternalServerError).Render("upload", fiber.Map{
+	internalServerErrorStatus := c.Status(fiber.StatusInternalServerError).Render("document/upload", fiber.Map{
 		"Title": "Upload Document",
 		"Error": "Error uploading document",
 	}, "layout")

Diff for: internal/webserver/controller/highlight/list.go

@@ -1,7 +1,6 @@
 package highlight
 
 import (
-	"fmt"
 	"log"
 	"strconv"
 
@@ -17,6 +16,7 @@ func (h *Controller) List(c *fiber.Ctx) error {
 	page, err := strconv.Atoi(c.Query("page"))
 	if err != nil {
 		page = 1
+		c.Query("page", "1")
 	}
 
 	var session model.Session
@@ -63,25 +63,31 @@ func (h *Controller) List(c *fiber.Ctx) error {
 		highlights,
 	)
 
-	url := fmt.Sprintf("/highlights?view=list&page=%d", page)
-
 	layout := "layout"
 	if c.Query("view") == "list" {
 		layout = ""
 	}
 
-	err = c.Render("highlights", fiber.Map{
+	templateVars := fiber.Map{
 		"Results":                paginatedResults,
 		"Paginator":              view.Pagination(model.MaxPagesNavigator, paginatedResults, nil),
 		"Title":                  "Highlights",
 		"EmailSendingConfigured": emailSendingConfigured,
 		"EmailFrom":              h.sender.From(),
 		"WordsPerMinute":         h.wordsPerMinute,
-		"Url":                    url,
-	}, layout)
+		"URL":                    view.URL(c),
+	}
 
-	if err != nil {
+	if c.Get("hx-request") == "true" {
+		if err = c.Render("partials/docs-list", templateVars); err != nil {
+			log.Println(err)
+			return fiber.ErrInternalServerError
+		}
+		return nil
+	}
+	if err = c.Render("highlight/index", templateVars, layout); err != nil {
 		log.Println(err)
+		return fiber.ErrInternalServerError
 	}
 
 	return nil

Diff for: internal/webserver/controller/user/list.go

@@ -16,10 +16,18 @@ func (u *Controller) List(c *fiber.Ctx) error {
 	}
 
 	users, _ := u.repository.List(page, model.ResultsPerPage)
-	return c.Render("user/index", fiber.Map{
+
+	templateVars := fiber.Map{
 		"Title":     "Users",
 		"Users":     users.Hits(),
 		"Paginator": view.Pagination(model.MaxPagesNavigator, users, map[string]string{}),
 		"Admins":    u.repository.Admins(),
-	}, "layout")
+		"URL":       view.URL(c),
+	}
+
+	if c.Get("hx-request") == "true" {
+		return c.Render("partials/users-list", templateVars)
+	}
+
+	return c.Render("user/index", templateVars, "layout")
 }

Diff for: internal/webserver/embedded/css/display.css

@@ -152,4 +152,20 @@ a.collapse-control.collapsed:after {
 
 .htmx-request.spinner-border ~ .bi-envelope-fill {
     display: none;
-}
+}
+
+.list-group-placeholder {
+    display: none;
+}
+
+.htmx-request .list-group-placeholder {
+    display: inline-block;
+}
+
+.htmx-request.list-group-placeholder {
+    display: inline-block;
+}
+
+.htmx-request.list-group-placeholder ~ div {
+    display: none;
+}

Diff for: internal/webserver/embedded/js/datetime.js

@@ -2,10 +2,20 @@
 
 import { DateTime } from "./luxon.min.js";
 
-document.addEventListener('DOMContentLoaded', function() {
+const datetimeFormatter = () => {
     const datetime = document.querySelectorAll('.datetime span');
     datetime.forEach(function(element) {
         const dt = DateTime.fromISO(element.textContent);
-        element.textContent = dt.toRelative({ locale: document.documentElement.lang });
+        if (dt.isValid) {
+            element.textContent = dt.toRelative({ locale: document.documentElement.lang });
+        }
     });
-});
+}
+
+document.addEventListener('DOMContentLoaded', datetimeFormatter());
+
+const observer = new MutationObserver(datetimeFormatter);
+
+// Start observing the target node for configured mutations
+const node = document.getElementById("list");
+observer.observe(node, { attributes: true, childList: false, subtree: true });

Diff for: internal/webserver/embedded/js/delete.js

@@ -1,5 +1,7 @@
 "use strict"
 
+import { handleResponseError } from './handle-response-error.js'
+
 // We use several conventions to be able to use the same code to delete different resources.
 // The link that initiates the action needs to have an attribute called data-id which must contain an unique identifier
 // for the resource to delete.
@@ -9,34 +11,25 @@
 
 const deleteModal = document.getElementById('delete-modal');
 const deleteForm = document.getElementById('delete-form');
-let id
 
 deleteModal.addEventListener('show.bs.modal', event => {
     const link = event.relatedTarget
-    id = link.getAttribute('data-id')
+    deleteForm.setAttribute('hx-delete', link.getAttribute('data-url'))
+    htmx.process(deleteForm)
 })
 
-deleteModal.addEventListener('hidden.bs.modal', event => {
-    let message = document.getElementById('error-message-container');
-    message.classList.add("visually-hidden");
+document.body.addEventListener('htmx:responseError', function (evt) {
+    const del = evt.detail.elt.getAttribute("hx-delete")
+    if (!del) {
+        return
+    }
+
+    return handleResponseError(evt)
 })
 
-deleteForm.addEventListener('submit', event => {
-    event.preventDefault();
-    fetch(deleteForm.getAttribute("action") + '/' + id, {
-        method: "DELETE"
-    })
-    .then((response) => {
-        if (response.ok || response.status == "403") {
-            location.reload();
-        } else {
-            let message = document.getElementById("error-message-container");
-            message.classList.remove("visually-hidden");
-            message.innerHTML = deleteForm.getAttribute("data-error-message");
-        }
-    })
-    .catch(function (error) {
-        // Catch errors
-        console.log(error);
-    });
+document.body.addEventListener('htmx:afterRequest', function (evt) {
+    const del = evt.detail.elt.getAttribute("hx-delete")
+    if (!evt.detail.failed && del && !del.includes("/highlights")) {
+        htmx.trigger("#list", "update")
+    }
 })

Diff for: internal/webserver/embedded/js/handle-response-error.js

@@ -0,0 +1,11 @@
+export const handleResponseError = (evt) => {
+    if (evt.detail.xhr.status === 403) {
+        location.reload()
+        return
+    }
+
+    const toast = document.getElementById('live-toast-danger')
+    toast.querySelector(".toast-body").innerHTML = evt.detail.elt.getAttribute("data-error-message")
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toast)
+    toastBootstrap.show()
+}

Diff for: internal/webserver/embedded/js/send-email.js

@@ -1,5 +1,7 @@
 "use strict"
 
+import { handleResponseError } from './handle-response-error.js'
+
 document.body.addEventListener('htmx:configRequest', function (evt) {
     const post = evt.detail.elt.getAttribute("hx-post")
 
@@ -17,15 +19,12 @@ document.body.addEventListener('htmx:configRequest', function (evt) {
 })
 
 document.body.addEventListener('htmx:responseError', function (evt) {
-    if (evt.detail.xhr.status === 403) {
-        location.reload()
+    const post = evt.detail.elt.getAttribute("hx-post")
+    if (!post || !post.includes("/send")) {
         return
     }
 
-    const toast = document.getElementById('live-toast-danger')
-    toast.querySelector(".toast-body").innerHTML = evt.detail.elt.getAttribute("data-error-message")
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toast)
-    toastBootstrap.show()
+    handleResponseError(evt)
 })
 
 document.body.addEventListener('htmx:afterRequest', function (evt) {

Diff for: internal/webserver/embedded/translations/es.yml

@@ -12,11 +12,6 @@
 "Search for more titles by %s": "Buscar más títulos de %s"
 "Search for more titles in %s": "Buscar más títulos en %s"
 "Search tips": Consejos de búsqueda
-"Use %s prefix in search box to search by authors only": Usa el prefijo %s en la caja de búsqueda para buscar solo por autor/a
-"Use %s prefix in search box to search by title only": Usa el prefijo %s en la caja de búsqueda para buscar solo por título
-"Use %s prefix in search box to search by series only": Usa el prefijo %s en la caja de búsqueda para buscar solo por serie
-"Use %s prefix in search box to search by subjects only": Usa el prefijo %s en la caja de búsqueda para buscar solo por tema
-"Enclose your search terms in double quotes to require all those terms and with the same order": Entrecomilla tu búsqueda con comillas dobles para requerir todos los términos y con el mismo orden
 "Send to email": Enviar a correo electrónico
 "Send": Enviar
 "Actions": Acciones

Diff for: internal/webserver/embedded/translations/fr.yml

@@ -12,11 +12,6 @@
 "Search for more titles by %s": "Rechercher plus de titres par %s"
 "Search for more titles in %s": "Rechercher plus de titres de %s"
 "Search tips": Conseils de recherche
-"Use %s prefix in search box to search by authors only": Utilisez le préfixe %s dans la zone de recherche pour rechercher uniquement par auteur
-"Use %s prefix in search box to search by title only": Utilisez le préfixe %s dans la zone de recherche pour effectuer une recherche par titre uniquement
-"Use %s prefix in search box to search by series only": Utilisez le préfixe %s dans la zone de recherche pour rechercher uniquement par série
-"Use %s prefix in search box to search by subjects only": Utilisez le préfixe %s dans la zone de recherche pour rechercher uniquement par sujet
-"Enclose your search terms in double quotes to require all those terms and with the same order": Placez vos termes de recherche entre guillemets pour exiger tous ces termes et dans le même ordre
 "Send to email": Envoyer par e-mail
 "Send": Envoyer
 "Actions": Actions