wip with data attributes

hmrc · Sep 2, 2024 · a4fb6e1 · a4fb6e1
1 parent 8f1b6b9
commit a4fb6e1
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 85 deletions.
diff --git a/app/assets/javascripts/paginationController.js b/app/assets/javascripts/paginationController.js
@@ -57,81 +57,3 @@ export function buildPaginator(itemsPerPage, itemVisibilityHandler = defaultItem
         }
     };
 }
-
-export function onPageShow(panelSelector, countId, filterFields, paginationSize) {
-    const view = (() => {
-        const apiDetailPanelEls = Array.from(document.querySelectorAll(panelSelector)),
-            elNoResultsPanel = document.getElementById('noResultsPanel'),
-            elApiCount = document.getElementById(countId),
-            elNameFilter = document.getElementById('nameFilter');
-
-        let onFiltersChangedHandler = noop;
-
-        elNameFilter ? elNameFilter.addEventListener('input', () => {
-            onFiltersChangedHandler();
-        }) : noop;
-
-        return {
-            get apiDetailPanels() {
-                return [...apiDetailPanelEls];
-            },
-            onFiltersChanged(handler) {
-                onFiltersChangedHandler = handler;
-            },
-            setApiPanelVisibility(apis) {
-                apis.forEach(apiDetail => {
-                    setVisible(apiDetail.el, !apiDetail.hiddenByFilter);
-                });
-            },
-            get nameFilterValue() {
-                return elNameFilter.value;
-            },
-            toggleNoResultsPanel(visible) {
-                setVisible(elNoResultsPanel, visible);
-            },
-            set resultCount(value) {
-                elApiCount.textContent = value;
-            }
-        };
-    })();
-
-    if (view.apiDetailPanels?.length > 0) {
-        const apiPanels = view.apiDetailPanels.map(el => (Object.assign({
-                el,
-                hiddenByFilter: false
-            }, Object.fromEntries(filterFields.map(f => [f, el.dataset[f]]))
-        )));
-        const paginator = buildPaginator(paginationSize);
-
-        function applyFilter() {
-            const normalisedNameFilterValue = normaliseText(view.nameFilterValue);
-            apiPanels.forEach(apiDetail => {
-                apiDetail.hiddenByFilter = !filterFields.some(filter =>
-                    normaliseText(apiDetail[filter]).includes(normalisedNameFilterValue)
-                );
-            });
-
-            const filteredPanels = apiPanels.filter(apiDetail => ! apiDetail.hiddenByFilter);
-            view.setApiPanelVisibility(apiPanels);
-            paginator.render(filteredPanels.map(panel => panel.el));
-
-            const resultCount = filteredPanels.length;
-            view.toggleNoResultsPanel(resultCount === 0);
-            view.resultCount = resultCount;
-        }
-
-        view.onFiltersChanged(() => {
-            applyFilter();
-        });
-
-        paginator.render(apiPanels.map(o => o.el));
-        applyFilter();
-    }
-}
-
-if (typeof window !== 'undefined') {
-    window.addEventListener(
-        "pageshow",
-        () => onPageShow('#appDetailPanels .hip-application', 'appCount', ['applicationName', 'applicationId'], 2)
-    );
-}
diff --git a/app/assets/javascripts/paginationWithFilterController.js b/app/assets/javascripts/paginationWithFilterController.js
@@ -0,0 +1,97 @@
+import {buildPaginator} from './paginationController.js';
+import {noop, normaliseText, setVisible} from "./utils.js";
+
+export function onPageShow(panelAttribute, countAttribute, filterAttribute, paginationAttribute) {
+    const view = (() => {
+        const detailsPanelEls = Array.from(document.querySelectorAll(`[${panelAttribute}]`)),
+            elNoResultsPanel = document.getElementById('noResultsPanel'),
+            elCount = document.querySelector(`[${countAttribute}]`),
+            elNameFilter = document.getElementById('nameFilter');
+
+        let onFiltersChangedHandler = noop;
+
+        elNameFilter ? elNameFilter.addEventListener('input', () => {
+            onFiltersChangedHandler();
+        }) : noop;
+
+        return {
+            get detailPanels() {
+                return [...detailsPanelEls];
+            },
+            onFiltersChanged(handler) {
+                onFiltersChangedHandler = handler;
+            },
+            setPanelVisibility(panels) {
+                panels.forEach(panel => {
+                    setVisible(panel.el, !panel.hiddenByFilter);
+                });
+            },
+            get nameFilterValue() {
+                return elNameFilter.value;
+            },
+            toggleNoResultsPanel(visible) {
+                setVisible(elNoResultsPanel, visible);
+            },
+            panelFilters(panel) {
+                return Array.from(panel.dataset[filterAttribute].replaceAll(" ", "").split(","));
+            },
+            get paginationSize() {
+                return parseInt(
+                    document.querySelector(`[${paginationAttribute}]`).getAttribute(paginationAttribute)
+                );
+            },
+            set resultCount(value) {
+                elCount.textContent = value;
+            }
+        };
+    })();
+
+    if (view.detailPanels?.length > 0) {
+        const details = view.detailPanels.map(el => {
+            const panelFilters = view.panelFilters(el);
+            const filterValues = Object.fromEntries(panelFilters.map(f => [f, el.dataset[f]]));
+            return (Object.assign({
+                el,
+                hiddenByFilter: false,
+                filters: panelFilters,
+            }, filterValues));
+        });
+        const paginator = buildPaginator(view.paginationSize);
+
+        function applyFilter() {
+            const normalisedNameFilterValue = normaliseText(view.nameFilterValue);
+            details.forEach(detail => {
+                detail.hiddenByFilter = !detail.filters.some(filter =>
+                    normaliseText(detail[filter]).includes(normalisedNameFilterValue)
+                );
+            });
+
+            const filteredPanels = details.filter(detail => ! detail.hiddenByFilter);
+            view.setPanelVisibility(details);
+            paginator.render(filteredPanels.map(panel => panel.el));
+
+            const resultCount = filteredPanels.length;
+            view.toggleNoResultsPanel(resultCount === 0);
+            view.resultCount = resultCount;
+        }
+
+        view.onFiltersChanged(() => {
+            applyFilter();
+        });
+
+        paginator.render(details.map(o => o.el));
+        applyFilter();
+    }
+}
+
+if (typeof window !== 'undefined') {
+    window.addEventListener(
+        "pageshow",
+        () => onPageShow(
+                'data-has-pagination',
+                'data-paginator-count',
+                'filterBy',
+                'data-pagination-size'
+            )
+    );
+}
diff --git a/app/views/components/Paginator.scala.html b/app/views/components/Paginator.scala.html
@@ -16,9 +16,9 @@
 
 @this()
 
-@()(implicit messages: Messages)
+@(paginationSize: Int = 10)(implicit messages: Messages)
 
-<div id="paginationContainer" class="govuk-!-display-none">
+<div id="paginationContainer" data-pagination-size="@paginationSize" class="govuk-!-display-none">
     <p class="govuk-body govuk-!-margin-top-4 hip-text--centered hip-pagination__message">
         @Html(messages("site.displayCount", <strong class="hip-pagination__showing-count"></strong>, <strong class="hip-pagination__total-count"></strong>))
     </p>

diff --git a/app/views/team/ViewTeamApplicationsView.scala.html b/app/views/team/ViewTeamApplicationsView.scala.html
@@ -37,25 +37,29 @@
 @(team: Team, applications: Seq[Application], user: UserModel)(implicit request: Request[?], messages: Messages)
 
 @scripts() = {
- <script src='@routes.Assets.versioned("javascripts/paginationController.js")' type="module" @{CSPNonce.attr}></script>
+ <script src='@routes.Assets.versioned("javascripts/paginationWithFilterController.js")' type="module" @{CSPNonce.attr}></script>
 }
 
 @layout(
  pageTitle = messages("viewTeamApplications.title"),
  user = Some(user),
  fullWidth = true,
- customScriptsBlock = Some(scripts())
+ customScriptsBlock = Some(scripts()),
 ) {
  @views.html.templates.SideNav(messages("manageApis.admin"), ManageTeamNavItems(team, ManageTeamSideNavPages.ViewTeamApplicationsPage)) {
   <h1 class="govuk-heading-m govuk-!-margin-bottom-7">
-   @messages("viewTeamApplications.heading")<span id="appCount">(@{applications.size})</span>
+   @messages("viewTeamApplications.heading") (<span data-paginator-count>@{applications.size}</span>)
   </h1>
 
   @searchBox(messages("viewTeamApplications.search.label"), Some(messages("viewTeamApplications.search.hint")), "nameFilter", "govuk-!-margin-bottom-5")
 
   <div id="appDetailPanels">
    @for(application <- applications){
-   <div class="hip-inner-card flex hip-application" data-application-name="@application.name" data-application-id="@application.id">
+   <div class="hip-inner-card flex hip-application"
+        data-has-pagination
+        data-filter-by="applicationName,applicationId"
+        data-application-name="@application.name"
+        data-application-id="@application.id">
     <div class="left">
      <h5 class="govuk-heading-s hip-inner-card-title govuk-!-margin-bottom-4">
       @if(application.deleted.isEmpty){
@@ -93,6 +97,6 @@ <h5 class="govuk-heading-s hip-inner-card-title govuk-!-margin-bottom-4">
    </div>
   </div>
 
-  @paginator()
+  @paginator(paginationSize=2)
  }
 }