Merge pull request #11 from chnm/refactor/table

Additional adjustments to database view

material/filters.py

@@ -62,6 +62,26 @@ class TextileFilter(django_filters.FilterSet):
     keywords = django_filters.CharFilter(
         field_name="keywords__name", lookup_expr="icontains", label="Keywords"
     )
+    text_search = django_filters.CharFilter(
+        method="search_text",
+        label="Text search",
+    )
+
+    def search_text(self, queryset, name, value):
+        return queryset.filter(
+            Q(year__icontains=value)
+            | Q(primary_textile_types__name__icontains=value)
+            | Q(secondary_textile_types__name__icontains=value)
+            | Q(source_type__icontains=value)
+            | Q(circulation__icontains=value)
+            | Q(source_reference__icontains=value)
+            | Q(from_area__name__icontains=value)
+            | Q(to_area__name__icontains=value)
+            | Q(from_place__city__icontains=value)
+            | Q(to_place__city__icontains=value)
+            | Q(summary_of_record__icontains=value)
+            | Q(transcription__icontains=value)
+        )
 
     class Meta:
         model = TextileRecord
@@ -79,5 +99,6 @@ class Meta:
             "summary_of_record",
             "transcription",
             "keywords",
+            "text_search",
         ]
         empty_text = "No results match the search criteria."

material/tables.py

@@ -10,9 +10,18 @@
 class TextileTable(tables.Table):
     image = tables.TemplateColumn(
         template_name="database/image_display.html",
-        verbose_name="Image",
+        verbose_name="Preview",
         orderable=False,
     )
+    id = tables.TemplateColumn(
+        template_code="""
+        <div class="flex justify-center items-center">
+        <a class="text-blue-500 hover:underline pointer" href="{% url 'textile_single' item_id=record.id %}">View Item {{ record.id }} record</a>
+        </div>
+        """,
+        orderable=False,
+        verbose_name="Item ID",
+    )
     year = tables.Column(verbose_name="Year", orderable=False)
     textile_type = tables.TemplateColumn(
         template_name="database/textile_type.html",
@@ -46,6 +55,7 @@ class Meta:
             "class": "min-w-full divide-y divide-gray-200",
         }
         fields = (
+            "id",
             "image",
             "year",
             "textile_type",

static/js/database.js

@@ -122,23 +122,32 @@ function openModal(recordId, recordUrl) {
       // Populate the modal content with the fetched data
       const modalContent = document.getElementById("modal-content");
       modalContent.innerHTML = `
-        <p><strong>To Area:</strong> ${safeData(data.to_area)}</p>
-        <p><strong>From Area:</strong> ${safeData(data.from_area)}</p>
-        <p><strong>To Place:</strong> ${safeData(data.to_place)}</p>
-        <p><strong>From Place:</strong> ${safeData(data.from_place)}</p>
-        <p><strong>Transcription:</strong></p> 
+        <p><strong>Record ID:</strong> ${recordId}</p>
+        <p><strong>Originating Area:</strong> ${safeData(data.from_area)}</p>
+        <p><strong>Originating Place:</strong> ${safeData(data.from_place)}</p>
+        <p><strong>Destination Area:</strong> ${safeData(data.to_area)}</p>
+        <p><strong>Destination Place:</strong> ${safeData(data.to_place)}</p>
+        <p><strong>Summary of Record:</strong> ${safeData(
+          data.summary_of_record,
+        )}</p>
+
+        <p><strong>Excerpt from Record:</strong></p> 
         <blockquote class="pl-4 ml-4 border-l-2 border-yellow-500">${safeData(
           data.transcription,
         )}</blockquote>
         <p class="text-sm text-right pb-2 mb-2">${safeData(
           data.source_reference,
         )}</p>
-        <p><strong>Summary of Record:</strong> ${safeData(
-          data.summary_of_record,
+        <p><strong>Source Reference:</strong> ${safeData(
+          data.source_reference,
         )}</p>
         <p><strong>Source Type:</strong> ${safeData(data.source_type)}</p>
+        <p><strong>Description of Source:</strong> ${safeData(
+          data.description_of_source,
+        )}</p>
+        <p><strong>Record Creator:</strong> ${safeData(data.record_creator)}</p>
         <div class="flex justify-center mt-4">
-            <a href="${recordUrl}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">View Full Record Details</a>
+            <a href="${recordUrl}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-500 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">View Full Record Details</a>
         </div>
         `;
 

templates/database/image_display.html

@@ -1,10 +1,14 @@
 <div class="text-center item-center">
-    {% if record.images.exists %}
-        <a href="{% url 'textile_single' item_id=record.id %}">
-            <img src="{{ record.images.first.image.url }}" alt="{{ record.images.first.alt_text }}" class="w-32 h-32 object-cover mx-auto">
-        </a>
-    {% else %}
-        <p>No images attached.</p>
-    {% endif %}
-    <a href="{% url 'textile_single' item_id=record.id %}" class="text-sm text-blue-500 hover:underline mt-2 block">View item details</a>
-</div>
+  {% if record.images.exists %}
+    <a href="{% url 'textile_single' item_id=record.id %}">
+      <img
+        src="{{ record.images.first.image.url }}"
+        alt="{{ record.images.first.alt_text }}"
+        class="w-32 h-32 object-cover mx-auto"
+      />
+    </a>
+  {% else %}
+    <p>No images attached.</p>
+  {% endif %}
+</div>
+

templates/database/textile_records_single.html

@@ -16,9 +16,9 @@ <h2 class="text-xl mb-4">Summary</h2>
     <h2 class="text-xl mb-4">Record Excerpt</h2>
     <div class="font-serif text-lg mb-4">
         {% if item.transcription %}
-            <blockquote class="pl-4 border-l-2 border-red-200 italic">{{ item.transcription }}</blockquote>
+            <blockquote class="pl-4 border-l-2 border-yellow-500 italic">{{ item.transcription }}</blockquote>
         {% else %}
-            <blockquote class="pl-4 border-l-2 border-red-200 italic">No transcription available.</blockquote>
+            <blockquote class="pl-4 border-l-2 border-yellow-500 italic">No transcription available.</blockquote>
         {% endif %}
         {% if item.source_reference %}
             <p class="text-sm text-right">Source: {{ item.source_reference }}</p>
@@ -48,7 +48,7 @@ <h3 class="text-3xl">Map</h3>
 
     <hr class="my-8">
 
-    <div class="bg-gray-50 p-3">
+    <div class="bg-slate-200 p-3">
         <h3 class="text-lg mb-4">Item Metadata</h3>
         <div>
             <p class="text-base"><strong>Primary Textile Types</strong>:

templates/database/textile_table.html

@@ -63,4 +63,4 @@
             <span aria-hidden="true">&raquo;</span>
         </div>
     </li>
-{% endblock pagination.next %}
+{% endblock pagination.next %}

templates/database/textiles.html

@@ -14,7 +14,7 @@ <h1>Textiles Database</h1>
     </section>
 
     {# Search form #}
-    <div x-data="{ open: false }" class="mb-4 border border-gray-300 rounded-lg">
+    <div x-data="{ open: true }" class="mb-4 border border-gray-300 rounded-lg">
         <div @click="open = !open" class="bg-slate-600 text-white px-4 py-2 rounded-t-lg cursor-pointer flex justify-between items-center">
             <span>Filters</span>
             <svg :class="{'transform rotate-180': open}" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -91,7 +91,7 @@ <h1>Textiles Database</h1>
                     </select>
                 </div>
                 <div class="form-group" x-data="{ open: false, results: [] }">
-                    <label for="id_keywords" class="block text-sm font-medium text-gray-700">{% trans "Keywords" %}</label>
+                    <label for="id_keywords" class="block text-sm font-medium text-gray-700">Keywords Search</label>
                     <input type="text" name="keywords" id="id_keywords" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" value="{{ request.GET.keywords }}" @input="fuzzySearch($event)" @focus="open = true" @blur="setTimeout(() => open = false, 200)">
                     <div x-show="open" id="keywords-dropdown" class="absolute bg-white border border-gray-300 mt-1 w-full z-10">
                         <template x-for="result in results" :key="result.name">
@@ -101,9 +101,13 @@ <h1>Textiles Database</h1>
                         </template>
                     </div>
                 </div>
+                <div class="form-group">
+                    <label for="text_search" class="block text-sm font-medium text-gray-700">Text Search</label>
+                    <input type="text" name="text_search" id="text_search" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" value="{{ request.GET.text_search }}">
+                </div>
                 <div class="form-group col-span-1 md:col-span-2 lg:col-span-3">
-                    <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded">Filter</button>
-                    <button type="button" class="bg-gray-500 text-white px-4 py-2 rounded" onclick="resetForm()">Reset</button>
+                    <button type="submit" class="bg-green-500 hover:bg-green-700 text-white px-4 py-2 rounded">Filter</button>
+                    <button type="button" class="bg-gray-500 hover:bg-gray-700 text-white px-4 py-2 rounded" onclick="resetForm()">Reset</button>
                 </div>
             </form>
         </div>
@@ -146,4 +150,4 @@ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Record
 
 {% block extrajs %}
     <script src="{% static 'js/database.js' %}"></script>
-{% endblock extrajs %}
+{% endblock extrajs %}