@ministryofjustice/hmpps-digital-prison-reporting-frontend 9.3.1 → 9.4.0

package/all.bundle.js

@@ -54,106 +54,94 @@ class DprClientClass {
     }
 }
 
-var BookmarkAction;
-(function (BookmarkAction) {
-    BookmarkAction["ADD"] = "add";
-    BookmarkAction["REMOVE"] = "remove";
-})(BookmarkAction || (BookmarkAction = {}));
 class BookmarkButton extends DprClientClass {
-    csrfToken;
-    reportId;
-    id;
-    linkType;
-    reportType;
-    endpoint;
-    baseUrl;
-    isRunning = false;
+    isSubmitting = false;
+    form;
+    button;
+    typeInput;
     static getModuleName() {
         return 'bookmark-button';
     }
     initialise() {
-        const element = this.getElement();
-        element.style.pointerEvents = '';
-        element.style.opacity = '1';
-        this.id = element.getAttribute('data-id');
-        this.reportId = element.getAttribute('data-report-id');
-        this.linkType = this.element.getAttribute('data-link-type') || BookmarkAction.ADD;
-        this.setReportType();
-        this.endpoint = element.getAttribute('data-endpoint') || '';
-        this.csrfToken = element.getAttribute('data-csrf-token') || '';
-        this.initEventListener();
-    }
-    /**
-     * Updates the bookmark button UI so that it shows:
-     * - the correct text
-     * - toggles the bookmark on and off correctly
-     *
-     * @memberof BookmarkButton
-     */
-    updateUI() {
-        this.linkType = this.linkType === BookmarkAction.ADD ? BookmarkAction.REMOVE : BookmarkAction.ADD;
-        const textContent = this.linkType === BookmarkAction.ADD ? 'Add bookmark' : 'Remove bookmark';
-        const element = this.getElement();
-        element.setAttribute('data-link-type', this.linkType);
-        element.textContent = textContent;
-    }
-    /**
-     * Inits the bookmark button click event
-     *
-     * @memberof BookmarkButton
-     */
-    initEventListener() {
-        this.getElement().addEventListener('click', (e) => this.activateBookmark(e));
-        this.getElement().addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                this.activateBookmark(e);
-            }
+        this.form = this.getElement();
+        this.button = this.form.querySelector('[data-bookmark-button="true"]');
+        this.typeInput = this.form.querySelector('input[name="type"]');
+        this.form.addEventListener('submit', event => {
+            void this.handleSubmit(event);
         });
     }
-    async activateBookmark(e) {
-        e.preventDefault();
-        if (this.isRunning)
+    async handleSubmit(event) {
+        event.preventDefault();
+        if (this.isSubmitting) {
             return;
-        this.isRunning = true;
-        this.getElement().classList.add('bookmark-disabled');
+        }
+        if (!this.button || !this.typeInput) {
+            return;
+        }
         try {
-            await fetch(this.endpoint, {
-                method: 'POST',
-                headers: {
-                    Accept: 'application/json',
-                    'Content-Type': 'application/json',
-                    'CSRF-Token': this.csrfToken,
-                },
-                body: JSON.stringify({
-                    type: this.linkType,
-                    id: this.id,
-                    reportId: this.reportId,
-                    reportType: this.reportType,
-                }),
-            })
-                .then(() => {
-                // The page should not reload if on the report/dashboard page so not to have to reload the data and cause a delay
-                // Should instead update the UI labels to signify the change has been made
-                if (!window.location.href.includes('/report') && !window.location.href.includes('/dashboard')) {
-                    window.location.reload();
-                }
-                else {
-                    this.updateUI();
-                }
-            })
-                .catch(error => console.error('Error:', error));
+            this.startSubmitting(this.button);
+            const data = await this.submitBookmark();
+            if (!data.success) {
+                return;
+            }
+            this.updateUi(this.button, this.typeInput, data);
+            this.announceBookmarkUpdate(data.bookmarked);
         }
-        finally {
-            this.isRunning = false;
-            this.getElement().classList.remove('bookmark-disabled');
+        catch (error) {
+            console.error('Bookmark update failed', error);
         }
-    }
-    setReportType() {
-        const rawReportTypeValue = this.element.getAttribute('data-report-type') || '';
-        if (!['dashboard', 'report'].includes(rawReportTypeValue)) {
-            throw new Error(`Report type for bookmark setup was unexpected: ${rawReportTypeValue}`);
+        finally {
+            this.finishSubmitting(this.button);
+        }
+    }
+    startSubmitting(button) {
+        this.isSubmitting = true;
+        button.classList.add('bookmark-disabled');
+        button.disabled = true;
+        button.setAttribute('aria-disabled', 'true');
+    }
+    finishSubmitting(button) {
+        this.isSubmitting = false;
+        button.classList.remove('bookmark-disabled');
+        button.disabled = false;
+        button.removeAttribute('aria-disabled');
+    }
+    async submitBookmark() {
+        const csrfToken = this.form.querySelector('input[name="_csrf"]')?.value ?? '';
+        const payload = Object.fromEntries(new FormData(this.form).entries());
+        const response = await fetch(this.form.action, {
+            method: this.form.method || 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'CSRF-Token': csrfToken,
+            },
+            body: JSON.stringify(payload),
+        });
+        if (!response.ok) {
+            throw new Error(`Bookmark request failed (${response.status})`);
+        }
+        return response.json();
+    }
+    updateUi(button, typeInput, data) {
+        const addText = button.dataset['addText'] ?? 'Add bookmark';
+        const removeText = button.dataset['removeText'] ?? 'Remove bookmark';
+        const isBookmarked = data.type === 'remove';
+        typeInput.value = data.type;
+        button.textContent = isBookmarked ? removeText : addText;
+        button.setAttribute('aria-pressed', String(isBookmarked));
+        button.dataset['bookmarked'] = String(data.bookmarked);
+    }
+    announceBookmarkUpdate(isBookmarked) {
+        const liveRegion = document.getElementById('dpr-bookmark-announcements');
+        if (!liveRegion) {
+            return;
         }
-        this.reportType = rawReportTypeValue;
+        liveRegion.textContent = '';
+        const announcement = isBookmarked ? 'Bookmark added' : 'Bookmark removed';
+        window.setTimeout(() => {
+            liveRegion.textContent = announcement;
+        }, 10);
     }
 }
 
@@ -655,10 +643,12 @@ class DprSelectedAsyncFilters extends DprClientClass {
         name.className = 'dpr-selected-filter__name';
         name.textContent = filter.displayName;
         const value = document.createTextNode(`: ${filter.displayValue}`);
-        button.append(name, value);
+        const hiddenText = document.createElement('span');
+        hiddenText.className = 'govuk-visually-hidden';
+        hiddenText.textContent = ', remove filter';
+        button.append(name, value, hiddenText);
         button.addEventListener('click', () => {
             const params = new URLSearchParams(window.location.search);
-            // Remove ALL values for this filter from the query string
             filter.inputs.forEach(control => {
                 params.delete(control.name);
                 if (control instanceof HTMLSelectElement) {
@@ -675,6 +665,7 @@ class DprSelectedAsyncFilters extends DprClientClass {
                 this.removeAutocompleteHiddenInput(control.name, params);
                 control.dispatchEvent(new Event('change', { bubbles: true }));
             });
+            this.announceFilterRemoval(filter.displayName, filter.displayValue);
             const query = params.toString();
             const url = query ? `?${query}` : window.location.pathname;
             window.history.replaceState(null, '', url);
@@ -706,6 +697,16 @@ class DprSelectedAsyncFilters extends DprClientClass {
     humanise(value) {
         return value.replace(/-/g, ' ');
     }
+    announceFilterRemoval(filterName, filterValue) {
+        const liveRegion = document.getElementById('dpr-selected-filters-announcements');
+        if (!liveRegion) {
+            return;
+        }
+        liveRegion.textContent = '';
+        window.setTimeout(() => {
+            liveRegion.textContent = `${filterName}: ${filterValue} removed`;
+        }, 10);
+    }
 }
 
 class DprFiltersFormClass extends DprClientClass {