feat: Add view for single textile record and updated table layout

config/urls.py

@@ -6,7 +6,7 @@
 from wagtail.admin import urls as wagtailadmin_urls
 from wagtail.documents import urls as wagtaildocs_urls
 
-from material.views import database, index
+from material.views import database, index, textile_records_single
 
 urlpatterns = [
     path("admin/", admin.site.urls),
@@ -16,5 +16,7 @@
     path("pages/", include(wagtail_urls)),
     path("", index, name="index"),
     path("database/", database, name="database"),
-    # path("textile-records/", textile_records_list, name="textile_records_list"),
+    path(
+        "database/<int:item_id>/", textile_records_single, name="textile_records_single"
+    ),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

material/filters.py

@@ -1,9 +1,10 @@
-from django.forms import CheckboxSelectMultiple, Select, TextInput
+from django.db.models import Q
+from django.forms import Select, TextInput
 from django_filters import (
+    CharFilter,
     ChoiceFilter,
     FilterSet,
     ModelChoiceFilter,
-    ModelMultipleChoiceFilter,
     NumberFilter,
 )
 from taggit.models import Tag
@@ -30,6 +31,12 @@ class TextileRecordFilter(FilterSet):
         lookup_expr="contains",
         widget=TextInput(attrs={"placeholder": "Year"}),
     )
+    # text_search = CharFilter(method="search_text", label="Search", widget=TextInput(attrs={"placeholder": "Search"}))
+    # def text_search_filter(self, queryset, name, value):
+    #     return queryset.filter(
+    #         Q(summary_of_record__icontains=value) |
+    #         Q(transcription__icontains=value)
+    #     )
     textile_type = ModelChoiceFilter(
         queryset=TextileType.objects.all(),
         field_name="textile_types",
@@ -59,11 +66,11 @@ class TextileRecordFilter(FilterSet):
         field_name="circulation",
         widget=Select(attrs={"placeholder": "Circulation"}),
     )
-    keywords = ModelMultipleChoiceFilter(
-        queryset=Tag.objects.all(),
-        widget=CheckboxSelectMultiple(),
-        field_name="keywords",
-    )
+    # keywords = ModelMultipleChoiceFilter(
+    #     queryset=Tag.objects.all(),
+    #     widget=CheckboxSelectMultiple(),
+    #     field_name="keywords",
+    # )
     origin_location = ModelChoiceFilter(
         queryset=Area.objects.all(),
         field_name="from_area",
@@ -89,7 +96,7 @@ class Meta:
             "textile_type",
             "textile_subtype",
             "circulation",
-            "keywords",
+            # "keywords",
             "origin_location",
             "destination_location",
             "source_type",

material/tables.py

@@ -1,6 +1,8 @@
 import django_tables2 as tables
+from django.urls import reverse
 from django.utils.html import format_html
 from django.utils.safestring import mark_safe
+from django_tables2 import A, TemplateColumn
 
 from material.models import TextileRecord
 
@@ -10,41 +12,27 @@ class TextileRecordTable(tables.Table):
     textile_type = tables.Column(empty_values=(), verbose_name="Textile type")
     textile_subtype = tables.Column(empty_values=(), verbose_name="Textile subtype")
 
-    def render_summary_of_record(self, value):
-        return format_html(
-            '<details><summary>Summary</summary><div class="details-content"><p>{}</p></div></details>',
-            value,
-        )
-
-    def render_transcription(self, value):
-        return format_html(
-            '<details><summary>Transcription</summary><div class="details-content"><p>{}</p></div></details>',
-            value,
-        )
-
-    # def render_image(self, record):
-    #     first_image = record.images.first()
-    #     if first_image:
-    #         return mark_safe(f'<img src="{first_image.image.url}" width="100" height="100" />')
-    #     return 'No images attached'
-
     def render_image(self, record):
         images = list(record.images.all())
-        if not images:
-            return "No images attached"
 
-        # Always display the first image
-        html_output = mark_safe(
-            f'<img src="{images[0].image.url}" width="100" height="100" />'
+        # Generate the URL for the item's detail page
+        item_detail_url = reverse(
+            "textile_records_single", kwargs={"item_id": record.id}
         )
 
-        # If there are more images, add them in a details/summary format
-        if len(images) > 1:
-            for image in images[1:]:
-                html_output += format_html(
-                    '<details><summary>More Images</summary><div><img src="{}" width="100" height="100" /></div></details>',
-                    image.image.url,
-                )
+        if not images:
+            html_output = format_html(
+                'No images attached. <br/><a class="text-sm" href="{}">View item details</a>',
+                item_detail_url,
+            )
+            return html_output
+
+        # Always display the first image with a link to the item detail page
+        html_output = format_html(
+            '<img src="{}" width="100" height="100" /><br/><a class="text-sm" href="{}">View item details</a>',
+            images[0].image.url,
+            item_detail_url,
+        )
 
         return html_output
 
@@ -98,9 +86,7 @@ class Meta:
             "circulation",
             "from_area",
             "to_area",
-            "keywords",
-            "summary_of_record",
-            "transcription",
+            # "keywords",
         ]
         empty_text = "No records match your filter."
         attrs = {

material/views.py

@@ -1,6 +1,6 @@
 from django.core.paginator import EmptyPage, Paginator
 from django.http import JsonResponse
-from django.shortcuts import render
+from django.shortcuts import get_object_or_404, render
 from django_filters.views import FilterView
 from django_tables2 import RequestConfig
 from taggit.models import Tag
@@ -24,3 +24,8 @@ def database(request):
         "database/textile_records_list.html",
         {"filter": filter, "table": table},
     )
+
+
+def textile_records_single(request, item_id):
+    item = get_object_or_404(TextileRecord, pk=item_id)
+    return render(request, "database/textile_records_single.html", {"item": item})

templates/database/textile_records_list.html

@@ -13,8 +13,9 @@ <h1 class="text-2xl mb-4">Textile Records</h1>
         {{ filter.form.year }}
       </div>
     {% endif %}
+
     <div class="grid grid-cols-3 gap-4">
-        {# Group together the dropdown fields of textile_type and textile_subtype #}
+      {# Group together the dropdown fields of textile_type and textile_subtype #}
       <div>
         {% if filter.form.textile_type %}
           <div class="mb-2">
@@ -115,12 +116,5 @@ <h1 class="text-2xl mb-4">Textile Records</h1>
   </form>
   <div class="overflow-x-auto">
     {% render_table table %}
-    {# modal view for data #}
-    <div id="modal" class="modal" style="display:none;">
-      <div class="modal-content">
-        <span class="close-button">&times;</span>
-        <p id="modal-text"></p>
-      </div>
-    </div>
   </div>
 {% endblock content %}

templates/database/textile_records_single.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% load render_table from django_tables2 %}
+
+{% block content %}
+    <h1 class="text-3xl mb-4">{{ item.year }}</h1>
+
+    <h2 class="text-xl mb-4">Summary</h2>
+    <div class="font-serif text-lg mb-4">
+        <p class="mb-2">{{ item.summary }}</p>
+    </div>
+
+    <h2 class="text-xl mb-4">Record Excerpt</h2>
+    <div class="font-serif text-lg mb-4">
+        <blockquote class="pl-4 border-l-2 border-red-200 italic">{{ item.transcription }}</blockquote>
+    </div>
+
+{# if images are attached, display them all #}
+    <h2 class="text-xl mb-4">Images</h2>
+    {% if item.images.all %}
+        <div class="grid grid-cols-2 gap-4">
+            {% for image in item.images.all %}
+                <figure>
+                    <img src="{{ image.image.url }}" alt="{{ image.caption }}" class="w-full h-auto">
+                    <figcaption class="text-center text-sm">{{ image.caption }}</figcaption>
+                </figure>
+            {% endfor %}
+        </div>
+    {% else %}
+        <p>No images are available for this item.</p>
+    {% endif %}
+
+    <hr class="my-8">
+
+    <div class="bg-amber-50 p-3">
+        <h3 class="text-lg mb-4">Item Data</h3>
+        <div>
+            <p class="text-xs">Textile type: {{ item.textile_type }}</p>
+            <p class="text-xs">Textile sub-type: {{ item.textile_subtype }}</p>
+            <p class="text-xs">Subject type: {{ item.subject_type }}</p>
+            <p class="text-xs">Subject sub-type: {{ item.subject_subtype }}</p>
+        </div>
+        <div>
+            <p class="text-xs">Circulation: {{ item.circulation }}</p>
+            <p class="text-xs">Source type: {{ item.source_type }}</p>
+            <p class="text-xs">Year: {{ item.year }}</p>
+        </div>
+    </div>
+{% endblock content %}