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.

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;
+}

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)

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 %}