2321: Added checkbox options component for use in calendar modifiers

Author: tuj

CHANGELOG.md

@@ -5,9 +5,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#264](https://github.com/os2display/display-admin-client/pull/264)
+  - Added checkbox options component for use in calendar modifiers.
 - [#260](https://github.com/os2display/display-admin-client/pull/260)
-  - Bug in multiselect, fixed by removing duplicates by key both `@id`and `id` 
-
+  - Bug in multiselect, fixed by removing duplicates by key both `@id`and `id`
 - [#259](https://github.com/os2display/display-admin-client/pull/259)
   - Add saving of playlists/groups with screen (as opposed to _after_)
   - Clean up `screen-manager.jsx`

src/components/slide/content/content-form.jsx

@@ -9,6 +9,7 @@ import FormTable from "../../util/forms/form-table/form-table";
 import FileSelector from "./file-selector";
 import StationSelector from "./station/station-selector";
 import RadioButtons from "../../util/forms/radio-buttons";
+import CheckboxOptions from "../../util/forms/checkbox-options.jsx";
 
 /**
  * Render form elements for content form.
@@ -52,6 +53,9 @@ function ContentForm({
     let returnElement;
     let defaultMimetypes = null;
     switch (formData.input) {
+      case "checkbox-options":
+        returnElement = <CheckboxOptions formData={formData} data={formStateObject} onChange={onChange} />;
+        break;
       case "image":
       case "video":
       case "file":

src/components/util/forms/checkbox-options.jsx

@@ -0,0 +1,37 @@
+import { React } from "react";
+
+function CheckboxOptions({formData, data, onChange}) {
+  const values = data[formData.name];
+
+  const containsValue = (value) => {
+    return values.includes(value);
+  }
+
+  const onOptionChange = ({target}) => {
+    const value = target.value;
+
+    const newValues = [...values];
+
+    if (newValues.includes(value)) {
+      newValues.splice(newValues.indexOf(value), 1);
+    } else {
+      newValues.push(value);
+    }
+
+    onChange({
+      target: { id: formData.name, value: newValues },
+    });
+  }
+
+  return (<>
+    {
+      formData.options.map(option =>
+        <div className={formData.formGroupClasses}>
+          <input type="checkbox" key={option.value} value={option.value} onChange={onOptionChange} checked={containsValue(option.value)} /> {option.title}
+        </div>
+      )
+    }
+  </>);
+}
+
+export default CheckboxOptions;