EREGCSC-2113 -- Reflect edited statute dates in frontend (#929)

* feat: bring in statute column dates to statute view * feat: get column dates into Statutes SPA * feat: first pass as getting type and date into col header * chore: python linting, method cleanup * chore: return better empty struct * chore: guard against invalid dates * chore: style subtitle; fix code error * feat: handle null date * chore: empty obj is better than var * fix: JS dates are fun * test: update headerCell snapshot tests * test: better unit tests for headerCells * test: add unit tests for date formatting method * chore: order imports alphabetically * chore: upate header on error_base template
Enterprise-CMCS · Aug 16, 2023 · cf1c5e0 · cf1c5e0
1 parent a628f46
commit cf1c5e0
Show file tree

Hide file tree

Showing 12 changed files with 581 additions and 55 deletions.
diff --git a/solution/backend/regulations/templates/error_base.html b/solution/backend/regulations/templates/error_base.html
@@ -4,26 +4,7 @@
 {% block title %}Page Not Found | Medicaid & CHIP eRegulations {% endblock %}
 
 {% block header %}
-    <header id="header" class="sticky">
-        <header-component
-            home-url="{% url 'homepage' %}"
-        >
-            <jump-to
-                slot="jump-to"
-                api-url="{{ API_BASE }}"
-                home-url="{% url 'homepage' %}"
-            ></jump-to>
-            <header-links
-                slot="links"
-                about-url="{% url 'about' %}"
-                resources-url="{% url 'resources' %}"
-            ></header-links>
-            <header-search
-                slot="search"
-                search-url="{% url 'search' %}"
-            ></header-search>
-        </header-component>
-    </header>
+    {% include "regulations/partials/header.html" %}
 {% endblock %}
 
 {% block body %}

diff --git a/solution/backend/regulations/templates/regulations/statute.html b/solution/backend/regulations/templates/regulations/statute.html
@@ -18,6 +18,7 @@
 {% endblock %}
 
 {% block body %}
+{{ site_config|json_script:"site_config" }}
 <div
     id="vite-app"
     data-api-url="{{ API_BASE }}"

diff --git a/solution/backend/regulations/views/statute.py b/solution/backend/regulations/views/statute.py
@@ -1,15 +1,39 @@
 from django.views.generic.base import TemplateView
 
+from regulations.models import (
+    SiteConfiguration,
+)
+
 
 class StatuteView(TemplateView):
     template_name = 'regulations/statute.html'
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         host = self.request.get_host()
+        site_config = SiteConfiguration.get_solo()
+        site_config = {
+            'us_code_house_gov': {
+                'type': site_config.us_code_house_gov_date_type,
+                'date': site_config.us_code_house_gov_date,
+            },
+            'us_code_annual': {
+                'type': site_config.us_code_annual_date_type,
+                'date': site_config.us_code_annual_date,
+            },
+            'statute_compilation': {
+                'type': site_config.statute_compilation_date_type,
+                'date': site_config.statute_compilation_date,
+            },
+            'ssa_gov_compilation': {
+                'type': site_config.ssa_gov_compilation_date_type,
+                'date': site_config.ssa_gov_compilation_date,
+            },
+        }
 
         c = {
-            'host': host
+            'host': host,
+            'site_config': site_config,
          }
 
         return {**context, **c, **self.request.GET.dict()}
diff --git a/solution/ui/e2e/cypress/fixtures/statute-dates.json b/solution/ui/e2e/cypress/fixtures/statute-dates.json
@@ -0,0 +1,6 @@
+{
+    "ssa_gov_compilation": {"date": "2023-08", "type": "effective"},
+    "statute_compilation": {"date": "2023-08", "type": "effective"},
+    "us_code_annual": {"date": "2023-08", "type": "effective"},
+    "us_code_house_gov": {"date": "2023-08", "type": "effective"}
+}
diff --git a/solution/ui/regulations/css/scss/partials/_statutes.scss b/solution/ui/regulations/css/scss/partials/_statutes.scss
@@ -190,6 +190,7 @@
                             line-height: 22px;
                             font-weight: normal;
                             font-style: italic;
+                            text-transform: capitalize;
                         }
 
                         .cell__usc-label {

diff --git a/...egulations/eregs-component-lib/src/components/shared-components/Statutes/StatuteTable.vue b/...egulations/eregs-component-lib/src/components/shared-components/Statutes/StatuteTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
 import { acaSchema, ssaSchema } from "./schemas/tableSchemas";
 import { ACT_TYPES, DISPLAY_TYPES } from "./utils/enums";
@@ -36,6 +36,20 @@ const tableSchema = computed(() => {
             return ssaSchema;
     }
 });
+
+
+// Get column dates from Django template
+const getColumnDates = () => {
+    if (!document.getElementById("site_config")) return {};
+
+    const rawDates = JSON.parse(
+        document.getElementById("site_config").textContent
+    );
+
+    return rawDates;
+}
+
+const columnDates = getColumnDates();
 </script>
 
 <template>
@@ -68,6 +82,7 @@ const tableSchema = computed(() => {
                     :key="`statute-table-header-${i}`"
                     :cell-data="column.header"
                     :display-type="props.displayType"
+                    :column-dates="columnDates"
                 />
             </tr>
             <tbody class="table__body">

diff --git a/...ons/eregs-component-lib/src/components/shared-components/Statutes/schemas/tableSchemas.js b/...ons/eregs-component-lib/src/components/shared-components/Statutes/schemas/tableSchemas.js
@@ -1,4 +1,10 @@
-import { houseGovUrl, statuteCompilationUrl, usCodeUrl, ssaGovUrl } from "../utils/urlMethods.js";
+import {
+    houseGovUrl,
+    ssaGovUrl,
+    statuteCompilationUrl,
+    usCodeUrl,
+} from "../utils/urlMethods.js";
+import { getDateLabel } from "../utils/dateMethods.js";
 
 // placeholder for future schema
 const acaSchema = [
@@ -12,8 +18,9 @@ const acaSchema = [
             label: "ACA Label",
             name: "ACA Name",
             primary: true,
-        }
-    },{
+        },
+    },
+    {
         header: {
             title: "Secondary Column",
             secondary: true,
@@ -43,9 +50,14 @@ const ssaSchema = [
     },
     {
         header: {
+            testId: "house-gov-link",
             title: "US Code House.gov",
             secondary: true,
-            subtitles: ["Web Page", "Effective Jul 2023"],
+            subtitles: [
+                () => "Web Page",
+                (columnDates) =>
+                    getDateLabel(columnDates?.us_code_house_gov ?? {}),
+            ],
         },
         body: {
             url: (statute) => houseGovUrl(statute),
@@ -56,9 +68,14 @@ const ssaSchema = [
     },
     {
         header: {
+            testId: "statute-compilation-link",
             title: "Statute Compilation",
             secondary: true,
-            subtitles: ["PDF Document", "Amended Dec 2022"],
+            subtitles: [
+                () => "PDF Document",
+                (columnDates) =>
+                    getDateLabel(columnDates?.statute_compilation ?? {}),
+            ],
         },
         body: {
             url: (statute) => statuteCompilationUrl(statute),
@@ -69,9 +86,14 @@ const ssaSchema = [
     },
     {
         header: {
+            testId: "us-code-annual-link",
             title: "US Code Annual",
             secondary: true,
-            subtitles: ["PDF Document", "Effective Jan 2022"],
+            subtitles: [
+                () => "PDF Document",
+                (columnDates) =>
+                    getDateLabel(columnDates?.us_code_annual ?? {}),
+            ],
         },
         body: {
             url: (statute) => usCodeUrl(statute),
@@ -82,9 +104,14 @@ const ssaSchema = [
     },
     {
         header: {
+            testId: "ssa-gov-link",
             title: "SSA.gov Compilation",
             secondary: true,
-            subtitles: ["Web Page", "Amended Dec 2019"],
+            subtitles: [
+                () => "Web Page",
+                (columnDates) =>
+                    getDateLabel(columnDates?.ssa_gov_compilation ?? {}),
+            ],
         },
         body: {
             url: (statute) => ssaGovUrl(statute),
@@ -95,7 +122,4 @@ const ssaSchema = [
     },
 ];
 
-export {
-    acaSchema,
-    ssaSchema,
-};
+export { acaSchema, ssaSchema };
diff --git a/...component-lib/src/components/shared-components/Statutes/table-elements/HeaderCell.test.js b/...component-lib/src/components/shared-components/Statutes/table-elements/HeaderCell.test.js
@@ -2,21 +2,45 @@ import flushPromises from "flush-promises";
 import { render } from "@testing-library/vue";
 import { describe, it, expect } from "vitest";
 
+import statuteDatesFixture from "cypress/fixtures/statute-dates.json";
+
 import { ssaSchema } from "../schemas/tableSchemas";
 
 import HeaderCell from "./HeaderCell.vue";
 
 describe("Statute Table Header Cell", () => {
     describe("SSA table header", () => {
-        ssaSchema.forEach((column, index) => {
-            it(`Creates a snapshot of header cell for column ${index + 1}`, async () => {
+        const secondaryCells = ssaSchema.filter((column) => column.header.secondary);
+
+        secondaryCells.forEach((column, index) => {
+            it(`Creates a snapshot of header cell for column ${index + 1} without dates`, async () => {
+                const wrapper = render(HeaderCell, {
+                    props: {
+                        cellData: column.header,
+                        displayType: "table",
+                    },
+                });
+                await flushPromises();
+
+                const dateCell = wrapper.getByTestId(`${column.header.testId}-subtitle-1`).textContent;
+                expect(dateCell.trim()).toEqual("");
+
+                expect(wrapper).toMatchSnapshot();
+            });
+
+            it(`Creates a snapshot of header cell for column ${index + 1} with dates`, async () => {
                 const wrapper = render(HeaderCell, {
                     props: {
                         cellData: column.header,
                         displayType: "table",
+                        columnDates: statuteDatesFixture,
                     },
                 });
                 await flushPromises();
+
+                const dateCell = wrapper.getByTestId(`${column.header.testId}-subtitle-1`).textContent;
+                expect(dateCell.trim()).toEqual("effective Aug 2023");
+
                 expect(wrapper).toMatchSnapshot();
             });
         });

diff --git a/...egs-component-lib/src/components/shared-components/Statutes/table-elements/HeaderCell.vue b/...egs-component-lib/src/components/shared-components/Statutes/table-elements/HeaderCell.vue
@@ -11,6 +11,11 @@ const props = defineProps({
         required: false,
         default: "table",
     },
+    columnDates: {
+        type: Object,
+        required: false,
+        default: () => {},
+    },
 });
 </script>
 
@@ -30,8 +35,9 @@ const props = defineProps({
                 v-for="(subtitle, i) in cellData.subtitles"
                 :key="`${props.displayType}-subtitle-${i}`"
                 class="cell__subtitle"
+                :data-testid="`${props.cellData.testId}-subtitle-${i}`"
             >
-                {{ subtitle }}
+                {{ subtitle(columnDates) }}
             </div>
         </template>
     </th>