toggle past contracts

public/javascripts/burialSite.edit.js

@@ -367,4 +367,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
             ?.addEventListener('click', openAddCommentModal);
         renderBurialSiteComments();
     }
+    /*
+     * Contracts
+     */
+    document
+        .querySelector('#burialSite--contractsToggle')
+        ?.addEventListener('click', () => {
+        const tableRowElements = document.querySelectorAll('#burialSite--contractsTbody tr[data-is-active="false"]');
+        for (const tableRowElement of tableRowElements) {
+            tableRowElement.classList.toggle('is-hidden');
+        }
+    });
 })();

public/javascripts/burialSite.edit.ts

@@ -8,7 +8,6 @@ import type {
   BurialSiteComment,
   BurialSiteTypeField
 } from '../../types/recordTypes.js'
-
 import type { Sunrise } from './types.js'
 
 declare const cityssm: cityssmGlobal
@@ -401,9 +400,9 @@ declare const exports: Record<string, unknown>
         },
         (rawResponseJSON) => {
           const responseJSON = rawResponseJSON as {
-            success: boolean
-            errorMessage?: string
             burialSiteComments: BurialSiteComment[]
+            errorMessage?: string
+            success: boolean
           }
 
           if (responseJSON.success) {
@@ -508,8 +507,8 @@ declare const exports: Record<string, unknown>
         formEvent.currentTarget,
         (rawResponseJSON) => {
           const responseJSON = rawResponseJSON as {
-            success: boolean
             burialSiteComments: BurialSiteComment[]
+            success: boolean
           }
 
           if (responseJSON.success) {
@@ -559,4 +558,20 @@ declare const exports: Record<string, unknown>
       ?.addEventListener('click', openAddCommentModal)
     renderBurialSiteComments()
   }
+
+  /*
+   * Contracts
+   */
+
+  document
+    .querySelector('#burialSite--contractsToggle')
+    ?.addEventListener('click', () => {
+      const tableRowElements = document.querySelectorAll(
+        '#burialSite--contractsTbody tr[data-is-active="false"]'
+      )
+
+      for (const tableRowElement of tableRowElements) {
+        tableRowElement.classList.toggle('is-hidden')
+      }
+    })
 })()

public/javascripts/burialSite.view.js

@@ -3,7 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
     const mapContainerElement = document.querySelector('#burialSite--cemeterySvg');
     if (mapContainerElement !== null) {
-        ;
         exports.sunrise.highlightMap(mapContainerElement, mapContainerElement.dataset.cemeterySvgId ?? '', 'success');
     }
+    document
+        .querySelector('#burialSite--contractsToggle')
+        ?.addEventListener('click', () => {
+        const tableRowElements = document.querySelectorAll('#burialSite--contractsTbody tr[data-is-active="false"]');
+        for (const tableRowElement of tableRowElements) {
+            tableRowElement.classList.toggle('is-hidden');
+        }
+    });
 })();

public/javascripts/burialSite.view.ts

@@ -1,15 +1,30 @@
 import type { Sunrise } from './types.js'
 
-declare const exports: Record<string, unknown>
+declare const exports: {
+  sunrise: Sunrise
+}
 ;(() => {
-  const mapContainerElement: HTMLElement | null =
-    document.querySelector('#burialSite--cemeterySvg')
+  const mapContainerElement: HTMLElement | null = document.querySelector(
+    '#burialSite--cemeterySvg'
+  )
 
   if (mapContainerElement !== null) {
-    ;(exports.sunrise as Sunrise).highlightMap(
+    exports.sunrise.highlightMap(
       mapContainerElement,
       mapContainerElement.dataset.cemeterySvgId ?? '',
       'success'
     )
   }
+
+  document
+    .querySelector('#burialSite--contractsToggle')
+    ?.addEventListener('click', () => {
+      const tableRowElements = document.querySelectorAll(
+        '#burialSite--contractsTbody tr[data-is-active="false"]'
+      )
+
+      for (const tableRowElement of tableRowElements) {
+        tableRowElement.classList.toggle('is-hidden')
+      }
+    })
 })()

views/burialSite-edit.ejs

@@ -416,8 +416,10 @@
             <div class="level-item">
               <h2 class="has-text-weight-bold is-size-5">
                 Contracts
-                <span class="tag"><%= burialSite.contracts.length %></span>
-              </h2> 
+              </h2>
+            </div>
+            <div class="level-item">
+              <span class="tag"><%= burialSite.contracts.length %></span>
             </div>
           </div>
           <div class="level-right">
@@ -427,6 +429,15 @@
                 <span>Create New Contract</span>
               </a>
             </div>
+            <% if (burialSite.contracts.length > 0) { %>
+              <div class="level-item">
+                <button class="button is-info is-small"
+                  id="burialSite--contractsToggle" type="button">
+                  <span class="icon"><i class="fas fa-eye" aria-hidden="true"></i></span>
+                  <span>Show/Hide Past Contracts</span>
+                </button>
+              </div>
+            <% } %>
           </div>
         </div>
       </div>
@@ -438,7 +449,7 @@
             </p>
           </div>
         <% } else { %>
-          <table class="table is-fullwidth is-striped is-hoverable">
+          <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
             <thead>
               <tr>
                 <th class="has-width-10">&nbsp;</th>
@@ -448,11 +459,11 @@
                 <th>Interments</th>
               </tr>
             </thead>
-            <tbody>
+            <tbody id="burialSite--contractsTbody">
               <% const currentDate = dateTimeFunctions.dateToInteger(new Date()); %>
               <% for (const contract of burialSite.contracts) { %>
                 <% const isActive = !(contract.contractEndDate && contract.contractEndDate < currentDate); %>
-                <tr>
+                <tr data-is-active="<%= isActive %>" class="<%= isActive ? "" : "is-hidden" %>">
                   <td class="has-text-centered">
                     <% if (isActive) { %>
                       <i class="fas fa-play" title="Current Contract"></i>

views/burialSite-view.ejs

@@ -144,10 +144,29 @@
 <% } %>
 
 <div class="panel">
-  <h2 class="panel-heading">
-    Contracts
-    <span class="tag"><%= burialSite.contracts.length %></span>
-  </h2>
+  <div class="panel-heading">
+    <div class="level is-mobile">
+      <div class="level-left">
+        <div class="level-item">
+          <h2 class="has-text-weight-bold">Contracts</h2>
+        </div>
+        <div class="level-item">
+          <span class="tag"><%= burialSite.contracts.length %></span>
+        </div>
+      </div>
+      <% if (burialSite.contracts.length > 0) { %>
+        <div class="level-right">
+          <div class="level-item">
+            <button class="button is-info is-small"
+              id="burialSite--contractsToggle" type="button">
+              <span class="icon"><i class="fas fa-eye" aria-hidden="true"></i></span>
+              <span>Show/Hide Past Contracts</span>
+            </button>
+          </div>
+        </div>
+      <% } %>
+    </div>
+  </div>
   <div class="panel-block is-block">
     <% if (burialSite.contracts.length === 0) { %>
       <div class="message is-info">
@@ -156,7 +175,7 @@
         </p>
       </div>
     <% } else { %>
-      <table class="table is-fullwidth is-striped is-hoverable">
+      <table class="table is-fullwidth is-striped is-hoverable has-sticky-header">
         <thead>
           <tr>
             <th class="has-width-10">&nbsp;</th>
@@ -166,11 +185,11 @@
             <th>Interments</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="burialSite--contractsTbody">
           <% const currentDate = dateTimeFunctions.dateToInteger(new Date()); %>
           <% for (const contract of burialSite.contracts) { %>
             <% const isActive = !(contract.contractEndDate && contract.contractEndDate < currentDate); %>
-            <tr>
+            <tr data-is-active="<%= isActive %>" class="<%= isActive ? "" : "is-hidden" %>">
               <td class="has-text-centered">
                 <% if (isActive) { %>
                   <i class="fas fa-play" title="Current Contract"></i>