Respond to user input

CityOfDetroit · Mar 18, 2024 · d29b602 · d29b602
1 parent 9ed78d9
commit d29b602
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/src/components/organisms/Calendar/Calendar.js b/src/components/organisms/Calendar/Calendar.js
@@ -180,6 +180,11 @@ class Calendar extends HTMLElement {
           radioButtonInput.setAttribute('id', value);
           radioButtonInput.setAttribute('name', filter.key);
           radioButtonInput.setAttribute('value', value);
+          // Bind event handler to this instance.
+          radioButtonInput.addEventListener(
+            'click',
+            this.filterEvents.bind(this),
+          );
           radioButtonContainer.appendChild(radioButtonInput);
           const radioButtonLabel = document.createElement('label');
           radioButtonLabel.setAttribute('for', value);
@@ -199,6 +204,29 @@ class Calendar extends HTMLElement {
     }
   }
 
+  /**
+   * Handles filter element events by filter down events to the
+   * user-selected criteria.
+   *
+   * @param {Event} browserEvent - The browser event triggered on the filter
+   *        form element.
+   */
+  filterEvents(browserEvent) {
+    const inputKey = browserEvent.target.name;
+    const inputValue = browserEvent.target.value;
+    const currentEventsJSON = this.getAttribute('events');
+    let events = [];
+    try {
+      events = JSON.parse(currentEventsJSON ?? '[]');
+    } catch (error) {
+      // TODO: Introduce proper error logging.
+      // eslint-disable-next-line no-console
+      console.error(`Failed to parse list of events:\n${currentEventsJSON}`);
+    }
+    events = events.filter((calEvent) => calEvent[inputKey] === inputValue);
+    this.updateEventArraySource(JSON.stringify(events));
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (name in Calendar.observedAttributeCbs) {
       this.handleObservedAttribute(

diff --git a/src/stories/calendar.stories.js b/src/stories/calendar.stories.js
@@ -29,16 +29,29 @@ export default {
   args: {
     events: JSON.stringify([
       {
-        title: 'event1',
+        title: 'event @ Say Detroit Play Center',
         start: new Date().toISOString(),
         allDay: true,
+        location: 'Say Detroit Play Center',
+      },
+      {
+        title: 'event @ Senior Facility',
+        start: new Date().toISOString(),
+        allDay: true,
+        location: 'Senior Facility',
+      },
+      {
+        title: 'event @ Detroit Housing Commission',
+        start: new Date().toISOString(),
+        allDay: true,
+        location: 'Detroit Housing Commission',
       },
     ]),
     eventFilters: JSON.stringify({
       dei_category_filter: {
         type: 'radio',
         legend: 'Select a location filter:',
-        key: 'dei_location',
+        key: 'location',
         values: [
           'Say Detroit Play Center',
           'Senior Facility',