(quality) rename check-list to checklist and added an uncheck all button

app/frontend/src/javascript/components/form/form-checklist.tsx

@@ -1,4 +1,4 @@
-import React, { BaseSyntheticEvent } from 'react';
+import React from 'react';
 import { Controller, Path, FieldPathValue } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
@@ -13,16 +13,16 @@ import { FabButton } from '../base/fab-button';
  */
 export type ChecklistOption<TOptionValue> = { value: TOptionValue, label: string };
 
-interface FormCheckListProps<TFieldValues, TOptionValue, TContext extends object> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
+interface FormChecklistProps<TFieldValues, TOptionValue, TContext extends object> extends FormControlledComponent<TFieldValues, TContext>, AbstractFormItemProps<TFieldValues> {
   defaultValue?: Array<TOptionValue>,
   options: Array<ChecklistOption<TOptionValue>>,
   onChange?: (values: Array<TOptionValue>) => void,
 }
 
 /**
- * This component is a template for an check list component to use within React Hook Form
+ * This component is a template for a checklist component to use within React Hook Form
  */
-export const FormCheckList = <TFieldValues extends FieldValues, TOptionValue, TContext extends object>({ id, control, label, tooltip, defaultValue, className, rules, disabled, error, warning, formState, onChange, options }: FormCheckListProps<TFieldValues, TOptionValue, TContext>) => {
+export const FormChecklist = <TFieldValues extends FieldValues, TOptionValue, TContext extends object>({ id, control, label, tooltip, defaultValue, className, rules, disabled, error, warning, formState, onChange, options }: FormChecklistProps<TFieldValues, TOptionValue, TContext>) => {
   const { t } = useTranslation('shared');
 
   /**
@@ -35,15 +35,15 @@ export const FormCheckList = <TFieldValues extends FieldValues, TOptionValue, TC
   /**
    * Callback triggered when a checkbox is ticked or unticked.
    */
-  const toggleCheckbox = (option: ChecklistOption<TOptionValue>, values: Array<TOptionValue> = [], cb: (value: Array<TOptionValue>) => void) => {
-    return (event: BaseSyntheticEvent) => {
+  const toggleCheckbox = (option: ChecklistOption<TOptionValue>, rhfValues: Array<TOptionValue> = [], rhfCallback: (value: Array<TOptionValue>) => void) => {
+    return (event: React.ChangeEvent<HTMLInputElement>) => {
       let newValues: Array<TOptionValue> = [];
       if (event.target.checked) {
-        newValues = values.concat(option.value);
+        newValues = rhfValues.concat(option.value);
       } else {
-        newValues = values.filter(v => v !== option.value);
+        newValues = rhfValues.filter(v => v !== option.value);
       }
-      cb(newValues);
+      rhfCallback(newValues);
       if (typeof onChange === 'function') {
         onChange(newValues);
       }
@@ -51,26 +51,33 @@ export const FormCheckList = <TFieldValues extends FieldValues, TOptionValue, TC
   };
 
   /**
-   * Callback triggered to select all options
+   * Mark all options as selected
    */
-  const allSelect = (cb: (value: Array<TOptionValue>) => void) => {
+  const selectAll = (rhfCallback: (value: Array<TOptionValue>) => void) => {
     return () => {
       const newValues: Array<TOptionValue> = options.map(o => o.value);
-      cb(newValues);
+      rhfCallback(newValues);
       if (typeof onChange === 'function') {
         onChange(newValues);
       }
     };
   };
 
-  // Compose classnames from props
-  const classNames = [
-    `${className || ''}`
-  ].join(' ');
+  /**
+   * Mark all options as non-selected
+   */
+  const unselectAll = (rhfCallback: (value: Array<TOptionValue>) => void) => {
+    return () => {
+      rhfCallback([]);
+      if (typeof onChange === 'function') {
+        onChange([]);
+      }
+    };
+  };
 
   return (
     <AbstractFormItem id={id} formState={formState} label={label}
-                      className={`form-check-list form-input ${classNames}`} tooltip={tooltip}
+                      className={`form-checklist form-input ${className || ''}`} tooltip={tooltip}
                       disabled={disabled}
                       rules={rules} error={error} warning={warning}>
         <Controller name={id as FieldPath<TFieldValues>}
@@ -90,7 +97,10 @@ export const FormCheckList = <TFieldValues extends FieldValues, TOptionValue, TC
                               );
                             })}
                           </div>
-                          <FabButton type="button" onClick={allSelect(onChange)} className="checklist-all-button">{t('app.shared.form_check_list.select_all')}</FabButton>
+                          <div className="actions">
+                            <FabButton type="button" onClick={selectAll(onChange)} className="checklist-all-button">{t('app.shared.form_checklist.select_all')}</FabButton>
+                            <FabButton type="button" onClick={unselectAll(onChange)} className="checklist-none-button">{t('app.shared.form_checklist.unselect_all')}</FabButton>
+                          </div>
                         </>
                       );
                     }} />

app/frontend/src/javascript/components/store/product-form.tsx

@@ -8,7 +8,7 @@ import { Product } from '../../models/product';
 import { FormInput } from '../form/form-input';
 import { FormSwitch } from '../form/form-switch';
 import { FormSelect } from '../form/form-select';
-import { FormCheckList } from '../form/form-check-list';
+import { FormChecklist } from '../form/form-checklist';
 import { FormRichText } from '../form/form-rich-text';
 import { FabButton } from '../base/fab-button';
 import { FabAlert } from '../base/fab-alert';
@@ -177,7 +177,7 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
           <FabAlert level="warning">
             <HtmlTranslate trKey="app.admin.store.product_form.assigning_machines_info" />
           </FabAlert>
-          <FormCheckList options={machines}
+          <FormChecklist options={machines}
                          control={control}
                          id="machine_ids"
                          formState={formState} />

app/frontend/src/stylesheets/application.scss

@@ -38,7 +38,7 @@
 @import "modules/form/form-input";
 @import "modules/form/form-rich-text";
 @import "modules/form/form-switch";
-@import "modules/form/form-check-list";
+@import "modules/form/form-checklist";
 @import "modules/group/change-group";
 @import "modules/machines/machine-card";
 @import "modules/machines/machines-filters";

app/frontend/src/stylesheets/modules/form/form-check-list.scss

@@ -1,17 +0,0 @@
-.form-check-list {
-  position: relative;
-
-  .form-item-field {
-    display: block !important;
-  }
-
-  .checklist {
-    display: flex;
-    padding: 16px;
-    flex-wrap: wrap;
-  }
-
-  .checklist-item {
-    flex: 0 0 33.333333%;
-  }
-}

app/frontend/src/stylesheets/modules/form/form-checklist.scss

@@ -0,0 +1,28 @@
+.form-checklist {
+  position: relative;
+
+  .form-item-field {
+    display: block !important;
+  }
+
+  .checklist {
+    display: flex;
+    padding: 16px;
+    flex-wrap: wrap;
+
+    .checklist-item {
+      flex: 0 0 33.333333%;
+
+      & > input {
+        margin-right: 1em;
+      }
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-evenly;
+    width: 50%;
+    margin: auto auto 1.2em;
+  }
+}

config/locales/app.shared.en.yml

@@ -550,5 +550,6 @@ en:
         validate_button: "Validate the new card"
       form_multi_select:
         create_label: "Add {VALUE}"
-      form_check_list:
+      form_checklist:
         select_all: "Select all"
+        unselect_all: "Unselect all"