From 26225e522993c9e69f3bfedd4087f9c7e531b0e3 Mon Sep 17 00:00:00 2001
From: Wilson Gaturu <wilsongaturu@gmail.com>
Date: Wed, 22 May 2024 17:22:30 +0300
Subject: [PATCH] adds improvements to legislation

---
 liiweb/templates/liiweb/legislation_list.html | 26 +++++--
 liiweb/urls.py                                |  5 ++
 liiweb/views/legislation.py                   |  2 +
 .../js/components/LegislationTable/Row.vue    | 71 +++++++++++++++++++
 .../js/components/LegislationTable/index.vue  | 50 ++++++++++++-
 .../templates/peachjam/judgment_detail.html   | 24 +++++++
 .../peachjam/layouts/document_detail.html     |  1 +
 7 files changed, 169 insertions(+), 10 deletions(-)
 create mode 100644 peachjam/js/components/LegislationTable/Row.vue

diff --git a/liiweb/templates/liiweb/legislation_list.html b/liiweb/templates/liiweb/legislation_list.html
index 7c1716865..b8221763f 100644
--- a/liiweb/templates/liiweb/legislation_list.html
+++ b/liiweb/templates/liiweb/legislation_list.html
@@ -21,19 +21,31 @@ <h1 class="my-4">{% trans 'Legislation' %}</h1>
           <li class="nav-item">
             <a class="nav-link {% if view.variant == 'current' %}active{% endif %}"
                href="{% url 'legislation_list' %}">
-              {% trans 'Current legislation' %}
+              {% block current_tab_title %}
+                {% trans 'Current legislation' %}
+              {% endblock %}
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link {% if view.variant == 'repealed' %}active{% endif %}"
-               href="{% url 'legislation_list_repealed' %}">
-              {% trans 'Repealed legislation' %}
+            <a class="nav-link {% if view.variant == 'subleg' %}active{% endif %}"
+               href="{% url 'legislation_list_subsidiary' %}">
+              {% block sublegislation_tab_title %}{{ PEACHJAM_SETTINGS.subleg_label }}{% endblock %}
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link {% if view.variant == 'subleg' %}active{% endif %}"
-               href="{% url 'legislation_list_subsidiary' %}">
-              {{ PEACHJAM_SETTINGS.subleg_label }}
+            <a class="nav-link {% if view.variant == 'uncommenced' %}active{% endif %}"
+               href="{% url 'legislation_list_uncommenced' %}">
+              {% block uncommenced_tab_title %}
+                {% trans 'Uncommenced legislation' %}
+              {% endblock %}
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link {% if view.variant == 'repealed' %}active{% endif %}"
+               href="{% url 'legislation_list_repealed' %}">
+              {% block repealed_tab_title %}
+                {% trans 'Repealed legislation' %}
+              {% endblock %}
             </a>
           </li>
           <li class="nav-item">
diff --git a/liiweb/urls.py b/liiweb/urls.py
index fe49200d0..3217931fc 100644
--- a/liiweb/urls.py
+++ b/liiweb/urls.py
@@ -22,6 +22,11 @@
         views.LegislationListView.as_view(variant="subleg"),
         name="legislation_list_subsidiary",
     ),
+    path(
+        "legislation/uncommenced",
+        views.LegislationListView.as_view(variant="uncommenced"),
+        name="legislation_list_uncommenced",
+    ),
     # This redirects old Ulii case laws to work with peachjam urls
     re_path(
         r"^(?P<country>[a-z]{2})/judgment/(?P<court>[-\w]+)/(?P<year>\d+)/(?P<number>\d+)$",
diff --git a/liiweb/views/legislation.py b/liiweb/views/legislation.py
index dee1a0c89..92dc426e2 100644
--- a/liiweb/views/legislation.py
+++ b/liiweb/views/legislation.py
@@ -37,6 +37,8 @@ def filter_queryset(self, qs):
             qs = qs.exclude(parent_work=None).filter(
                 repealed=False, metadata_json__principal=True
             )
+        elif self.variant == "uncommenced":
+            qs = qs.filter(metadata_json__commencement_date=None)
         return qs
 
     def get_context_data(self, **kwargs):
diff --git a/peachjam/js/components/LegislationTable/Row.vue b/peachjam/js/components/LegislationTable/Row.vue
new file mode 100644
index 000000000..ecfd31b5e
--- /dev/null
+++ b/peachjam/js/components/LegislationTable/Row.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-for="(row, index) in filteredData"
+    :key="index"
+    :class="`table-row legislation-table__row ${
+      row.children.length ? 'has-children' : ''
+    }`"
+    role="button"
+    @click="handleRowClick"
+  >
+    <div
+      v-if="row.children.length"
+      class="column-caret indent"
+    >
+      <i class="bi bi-caret-right-fill" />
+      <i class="bi bi-caret-down-fill" />
+    </div>
+    <div
+      v-else
+      class="indent"
+    />
+    <div class="table-row__content-col">
+      <div class="content d-flex justify-content-between">
+        <div class="content__title">
+          <a :href="`${row.work_frbr_uri}`">{{ row.title }}</a>
+          <i
+            v-if="row.languages.length > 1"
+            class="bi bi-translate ps-2"
+            :title="$t('Multiple languages available')"
+          />
+        </div>
+        <div v-if="showDates" class="content__secondary">
+          {{ row.date }}
+        </div>
+        <div v-else class="content__secondary">
+          {{ row.citation }}
+        </div>
+        <div
+          v-if="row.children.length"
+          :id="`row-accordion-${index}`"
+          class="accordion-collapse collapse accordion content__children"
+          data-bs-parent=".legislation-table__row"
+        >
+          <div class="accordion-body p-0">
+            <div
+              v-for="(subleg, subleg_index) in row.children"
+              :key="subleg_index"
+              class="content mb-3"
+            >
+              <div class="content__title">
+                <a :href="`${subleg.work_frbr_uri}`">{{ subleg.title }}</a>
+              </div>
+              <div v-if="showDates" class="content__secondary">
+                {{ subleg.date }}
+              </div>
+              <div v-else class="content__secondary">
+                {{ subleg.citation }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LegislationRows',
+  props: ['filteredData', 'showDates', 'handleRowClick']
+};
+</script>
diff --git a/peachjam/js/components/LegislationTable/index.vue b/peachjam/js/components/LegislationTable/index.vue
index de7a36cc4..6b20a07d0 100644
--- a/peachjam/js/components/LegislationTable/index.vue
+++ b/peachjam/js/components/LegislationTable/index.vue
@@ -61,7 +61,7 @@
           <div class="table-row legislation-table__row headings">
             <div class="indent" />
             <div class="table-row__content-col">
-              <div class="content">
+              <div class="content d-flex">
                 <div
                   class="content__title align-items-center"
                   role="button"
@@ -190,24 +190,39 @@
             </a>.
           </div>
         </div>
+        <div v-if="yearGroups.length" class="legislation-table">
+          <div v-for="(row, index) in yearGroups" :key="index" class="my-3">
+            <p class="h5">
+              {{ row.year }}
+            </p>
+            <LegislationRows
+              class="d-flex"
+              :filtered-data="row.documents"
+              :show-dates="showDates"
+              @handleRowClick="handleRowClick"
+            />
+          </div>
+        </div>
       </div>
     </div>
     <!-- DOM Hack for i18next to parse facet to locale json. i18next skips t functions in script element -->
     <div v-if="false">
       {{ $t('Years') }}
       {{ $t('Taxonomies') }}
+      {{ $t('Alphabetical') }}
     </div>
   </div>
 </template>
 
 <script>
 import FilterFacets from '../FilterFacets/index.vue';
+import LegislationRows from './Row.vue';
 import debounce from 'lodash/debounce';
 
 export default {
   name: 'LegislationTable',
   components: {
-    FilterFacets
+    FilterFacets, LegislationRows
   },
   props: ['showDates'],
   data: () => ({
@@ -215,6 +230,7 @@ export default {
     facets: [],
     tableData: [],
     filteredData: [],
+    yearGroups: [],
     lockAccordion: false,
     q: '',
     windowWith: window.innerWidth,
@@ -227,6 +243,7 @@ export default {
   watch: {
     q () {
       this.filterData();
+      this.groupByYear();
     },
     sortableFields () {
       this.filterData();
@@ -234,6 +251,7 @@ export default {
     facets () {
       this.offCanvasFacets.hide();
       this.filterData();
+      this.groupByYear();
     }
   },
   beforeUnmount () {
@@ -250,6 +268,7 @@ export default {
     const tableJsonElement = document.getElementById('legislation-table');
     this.tableData = JSON.parse(tableJsonElement.textContent);
     this.filterData();
+    this.groupByYear();
     this.setFacets();
   },
 
@@ -310,8 +329,18 @@ export default {
       taxonomyOptions.sort((a, b) => a.value.localeCompare(b.value));
       // Sort descending
       yearsOptions.sort((a, b) => b.value - a.value);
-
+      const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter => ({
+        label: letter.toUpperCase(),
+        value: letter
+      }));
       this.facets = [
+        {
+          title: this.$t('Alphabetical'),
+          name: 'alphabetical',
+          type: 'letter-radio',
+          value: [],
+          options: alphabet
+        },
         {
           title: this.$t('Years'),
           name: 'year',
@@ -367,6 +396,9 @@ export default {
       });
       Object.keys(facetDict).forEach((key) => {
         data = data.filter((item) => {
+          if (key === 'alphabetical') {
+            return item.title.toLowerCase().startsWith(facetDict[key]);
+          }
           if (Array.isArray(facetDict[key])) {
             const arr1 = facetDict[key].map((x) => String(x));
             const arr2 = item[key].map((x) => String(x));
@@ -391,6 +423,18 @@ export default {
         }
       });
       this.filteredData = data;
+    },
+    groupByYear () {
+      const yearGroup = this.filteredData.reduce((acc, item) => {
+        let year = acc.find((group) => group.year === item.year);
+        if (!year) {
+          year = { year: item.year, documents: [] };
+          acc.push(year);
+        }
+        year.documents.push(item);
+        return acc;
+      }, []);
+      this.yearGroups = yearGroup.sort((a, b) => b.year - a.year);
     }
   }
 };
diff --git a/peachjam/templates/peachjam/judgment_detail.html b/peachjam/templates/peachjam/judgment_detail.html
index 42149b5d9..bcd99f90a 100644
--- a/peachjam/templates/peachjam/judgment_detail.html
+++ b/peachjam/templates/peachjam/judgment_detail.html
@@ -1,5 +1,29 @@
 {% extends 'peachjam/layouts/document_detail.html' %}
 {% load i18n %}
+{% block breadcrumbs %}
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item">
+        <a href="{% url 'judgment_list' %}">{% trans 'Judgments' %}</a>
+      </li>
+      {% if document.court.court_class.show_listing_page %}
+        <li class="breadcrumb-item">
+          <a href="{% url 'court_class' document.court.court_class.slug %}">{{ document.court.court_class.name }}</a>
+        </li>
+      {% endif %}
+      {% if document.court %}
+        <li class="breadcrumb-item">
+          <a href="{% url 'court' document.court.code %}">{{ document.court.name }}</a>
+        </li>
+      {% endif %}
+      {% if document.registry %}
+        <li class="breadcrumb-item">
+          <a href="{% url 'court_registry' document.court.code document.registry.code %}">{{ document.registry.name }}</a>
+        </li>
+      {% endif %}
+    </ol>
+  </nav>
+{% endblock %}
 {% block document-metadata-content-citation %}
   {{ block.super }}
   {% if document.mnc %}
diff --git a/peachjam/templates/peachjam/layouts/document_detail.html b/peachjam/templates/peachjam/layouts/document_detail.html
index ffc06a106..2b77db7f8 100644
--- a/peachjam/templates/peachjam/layouts/document_detail.html
+++ b/peachjam/templates/peachjam/layouts/document_detail.html
@@ -27,6 +27,7 @@
           <div class="d-md-flex justify-content-md-between py-4">
             <div>
               <h1>{{ document.title }}</h1>
+              {% block sub-title %}{% endblock %}
               {% include 'peachjam/_labels.html' %}
             </div>
             <div class="d-flex align-items-center">