@ministryofjustice/hmpps-digital-prison-reporting-frontend 3.34.0 → 3.34.2

package/dpr/assets/js/all.mjs

@@ -376,13 +376,13 @@ class DprQueryParamClass extends DprClientClass {
       } else {
         const { name } = input;
         let { value } = input;
-        let { staticOptionValue } = input;
+        let { staticOptionNameValue } = input;
         let isDateInput = input.classList.contains('moj-js-datepicker-input');
         if (isDateInput) {
           const formatted = dayjs(value, 'D/M/YYYY').format('YYYY-MM-DD');
           value = formatted !== 'Invalid Date' ? formatted : '';
         }
-        let valueToUpdate = !isDateInput && staticOptionValue ? staticOptionValue : value;
+        let valueToUpdate = !isDateInput && staticOptionNameValue ? staticOptionNameValue : value;
         if (name) this.updateQueryParam(name, valueToUpdate);
       }
     }
@@ -1009,8 +1009,8 @@ class Filters extends DprClientClass {
       const formData = new FormData(filtersForm);
       let serializedFormData = '';
       document.querySelectorAll('.autocomplete-text-input-box').forEach((input) => {
-        if(input.staticOptionValue) {
-          formData.set(input.name, input.staticOptionValue);
+        if(input.staticOptionNameValue) {
+          formData.set(input.name, input.staticOptionNameValue);
         }
       });
       formData.forEach((v, n) => {
@@ -1538,7 +1538,8 @@ class Autocomplete extends DprClientClass {
       this.getElement()
         .querySelectorAll(this.listItemsSelector)
         .forEach((item) => {
-          if (searchValue.length >= minLength && item.innerText.trim().toLowerCase().includes(searchValue)) {
+          if (searchValue.length >= minLength &&
+            this.isMatchingStaticOptionNameOrDisplayPrefix(this.getInputListButton(item), searchValue, item)) {
             item.classList.remove('autocomplete-text-input-item-hide');
           } else {
             item.classList.add('autocomplete-text-input-item-hide');
@@ -1552,6 +1553,19 @@ class Autocomplete extends DprClientClass {
     }
   }
 
+  getInputListButton(item) {
+    return item.querySelector('.autocomplete-text-input-list-button')
+  }
+
+  isMatchingStaticOptionNameOrDisplayPrefix(inputListButton, searchValue, item) {
+    return this.isStaticOptionsNamePrefix(inputListButton.dataset.staticOptionNameValue, searchValue)
+      || item.innerText.trim().toLowerCase().startsWith(searchValue)
+  }
+
+  isStaticOptionsNamePrefix(staticOptionNameValue, searchValue) {
+    return staticOptionNameValue && staticOptionNameValue.trim().toLowerCase().startsWith(searchValue)
+  }
+
   async populateOptionsDynamically(resourceEndpoint, searchValue, textInput, templateProvider) {
     try {
       const response = await fetch(resourceEndpoint.replace('{prefix}', encodeURI(searchValue)));
@@ -1575,7 +1589,7 @@ class Autocomplete extends DprClientClass {
     event.preventDefault();
     // eslint-disable-next-line no-param-reassign
     textInput.value = event.target.innerText.trim();
-    textInput.staticOptionValue = event.target.dataset.staticOptionValue;
+    textInput.staticOptionNameValue = event.target.dataset.staticOptionNameValue;
     textInput.focus();
     const changeEvent = new Event('change');
     textInput.dispatchEvent(changeEvent);

package/dpr/components/_inputs/autocomplete-text-input/view.njk

@@ -69,7 +69,7 @@
                                 classes: "govuk-button--inverse autocomplete-text-input-list-button",
                                 attributes: {
                                     "data-parent-input": options.id,
-                                    "data-static-option-value": item.value
+                                    "data-static-option-name-value": item.value
                                 }
                             }) }}
                         </li>

package/dpr/components/user-reports/utils.js

@@ -108,10 +108,10 @@ const formatTableRow = (data, type) => {
         },
     ];
 };
-const getTotals = (reportData, maxRows) => {
+const getTotals = (formattedCount, maxRows) => {
     return {
-        amount: reportData.length,
-        shown: reportData.length > maxRows ? maxRows : reportData.length,
+        amount: formattedCount,
+        shown: formattedCount > maxRows ? maxRows : formattedCount,
         max: maxRows,
     };
 };
@@ -192,6 +192,7 @@ const renderList = async ({ res, storeService, maxRows, filterFunction, type, })
     const { csrfToken, userId } = localsHelper_1.default.getValues(res);
     const reportsData = await storeService.getAllReports(userId);
     let formatted = reportsData.filter(filterFunction).map(formatData);
+    const formattedCount = formatted.length;
     if (maxRows)
         formatted = formatted.slice(0, maxRows);
     const tableData = formatTable(formatted, type);
@@ -202,7 +203,7 @@ const renderList = async ({ res, storeService, maxRows, filterFunction, type, })
     const result = {
         head,
         tableData,
-        total: getTotals(reportsData, maxRows),
+        total: getTotals(formattedCount, maxRows),
         meta: getMeta(formatted),
         csrfToken,
         maxRows,

package/dpr/components/user-reports/utils.ts

@@ -140,10 +140,10 @@ const formatTableRow = (data: FormattedUserReportData, type: 'requested' | 'view
   ]
 }
 
-const getTotals = (reportData: UserReportData[], maxRows: number) => {
+const getTotals = (formattedCount: number, maxRows: number) => {
   return {
-    amount: reportData.length,
-    shown: reportData.length > maxRows ? maxRows : reportData.length,
+    amount: formattedCount,
+    shown: formattedCount > maxRows ? maxRows : formattedCount,
     max: maxRows,
   }
 }
@@ -242,6 +242,7 @@ const renderList = async ({
   const reportsData: UserReportData[] = await storeService.getAllReports(userId)
 
   let formatted = reportsData.filter(filterFunction).map(formatData)
+  const formattedCount = formatted.length
   if (maxRows) formatted = formatted.slice(0, maxRows)
   const tableData = formatTable(formatted, type)
 
@@ -252,7 +253,7 @@ const renderList = async ({
   const result = {
     head,
     tableData,
-    total: getTotals(reportsData, maxRows),
+    total: getTotals(formattedCount, maxRows),
     meta: getMeta(formatted),
     csrfToken,
     maxRows,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ministryofjustice/hmpps-digital-prison-reporting-frontend",
   "description": "The Digital Prison Reporting Frontend contains templates and code to help display data effectively in UI applications.",
-  "version": "3.34.0",
+  "version": "3.34.2",
   "main": "dpr/assets/js/all.mjs",
   "sass": "dpr/all.scss",
   "engines": {