From 3d8ebc7c1e95351bbb08046a3ed4e7561175e445 Mon Sep 17 00:00:00 2001
From: Gytha Ogg <gythaoggscat@gmail.com>
Date: Tue, 8 Oct 2024 10:38:12 +0200
Subject: [PATCH] feat(generic): introduce MoreLessColumn

The MoreLessColumn is a custom column based on the TemplateColumn.
It provides a short preview of long text with a "Show more" element to
show a longer version of the text.
---
 .../generic/static/css/more-less-column.css   | 42 +++++++++++++++++++
 apis_core/generic/tables.py                   | 20 +++++++++
 .../generic/templates/columns/more-less.html  | 10 +++++
 3 files changed, 72 insertions(+)
 create mode 100644 apis_core/generic/static/css/more-less-column.css
 create mode 100644 apis_core/generic/templates/columns/more-less.html

diff --git a/apis_core/generic/static/css/more-less-column.css b/apis_core/generic/static/css/more-less-column.css
new file mode 100644
index 000000000..107ef29d6
--- /dev/null
+++ b/apis_core/generic/static/css/more-less-column.css
@@ -0,0 +1,42 @@
+summary.more-less-column {
+  list-style: none;
+  appearance: none;
+  -webkit-appearance: none; /* for WebKit browsers */
+}
+
+/* optional: remove ::marker for older browsers */
+summary.more-less-column ::marker {
+  content: none;
+}
+
+summary.more-less-column {
+  cursor: pointer;
+}
+
+/* add "Show more" text when collapsed */
+summary.more-less-column::after {
+  content: " Show more";
+  font-weight: normal;
+  font-size: smaller;
+  color: grey;
+}
+
+/* hide the summary text when expanded, show only "Show less" */
+details[open] summary.more-less-column::before {
+  content: "Show less";
+  color: grey;
+}
+
+/* hide the original summary text when expanded */
+details[open] summary.more-less-column::after {
+  content: "";
+}
+
+details[open] summary.more-less-column {
+  visibility: hidden;
+}
+
+/* make sure the generated "Show less" text is visible */
+details[open] summary.more-less-column::before {
+  visibility: visible;
+}
diff --git a/apis_core/generic/tables.py b/apis_core/generic/tables.py
index 1dca2d5aa..287485872 100644
--- a/apis_core/generic/tables.py
+++ b/apis_core/generic/tables.py
@@ -95,3 +95,23 @@ class GenericTable(tables.Table):
     class Meta:
         fields = ["id", "desc"]
         sequence = ("...", "view", "edit", "delete")
+
+
+class MoreLessColumn(tables.TemplateColumn):
+    """
+    Useful for displaying long fields.
+    A preview is shown initially with a "Show more" link
+    which is replaced with a "Show less" link when expanded.
+    """
+
+    template_name = "columns/more-less.html"
+
+    def __init__(self, preview, fulltext, *args, **kwargs):
+        self.preview = preview
+        self.fulltext = fulltext
+        super().__init__(template_name=self.template_name, *args, **kwargs)
+
+    def render(self, record, **kwargs):
+        self.extra_context["preview"] = self.preview(record)
+        self.extra_context["fulltext"] = self.fulltext(record)
+        return super().render(record, **kwargs)
diff --git a/apis_core/generic/templates/columns/more-less.html b/apis_core/generic/templates/columns/more-less.html
new file mode 100644
index 000000000..1b35f3443
--- /dev/null
+++ b/apis_core/generic/templates/columns/more-less.html
@@ -0,0 +1,10 @@
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/more-less-column.css' %}">
+{% if preview != "" and fulltext != preview %}
+  <details class="more-less-column">
+    <summary class="more-less-column">{{ preview }}</summary>
+    {{ fulltext }}
+  </details>
+{% else %}
+  {{ fulltext }}
+{% endif %}