From bd96622d37318a29fe6f61f8b5a600c310917eb8 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 27 Jul 2022 15:35:57 +0200 Subject: [PATCH] (quality) rename check-list to checklist and added an uncheck all button --- ...form-check-list.tsx => form-checklist.tsx} | 46 +++++++++++-------- .../components/store/product-form.tsx | 4 +- app/frontend/src/stylesheets/application.scss | 2 +- .../modules/form/form-check-list.scss | 17 ------- .../modules/form/form-checklist.scss | 28 +++++++++++ config/locales/app.shared.en.yml | 3 +- 6 files changed, 61 insertions(+), 39 deletions(-) rename app/frontend/src/javascript/components/form/{form-check-list.tsx => form-checklist.tsx} (67%) delete mode 100644 app/frontend/src/stylesheets/modules/form/form-check-list.scss create mode 100644 app/frontend/src/stylesheets/modules/form/form-checklist.scss diff --git a/app/frontend/src/javascript/components/form/form-check-list.tsx b/app/frontend/src/javascript/components/form/form-checklist.tsx similarity index 67% rename from app/frontend/src/javascript/components/form/form-check-list.tsx rename to app/frontend/src/javascript/components/form/form-checklist.tsx index 1299dcd56..63914e2e7 100644 --- a/app/frontend/src/javascript/components/form/form-check-list.tsx +++ b/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 = { value: TOptionValue, label: string }; -interface FormCheckListProps extends FormControlledComponent, AbstractFormItemProps { +interface FormChecklistProps extends FormControlledComponent, AbstractFormItemProps { defaultValue?: Array, options: Array>, onChange?: (values: Array) => 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 = ({ id, control, label, tooltip, defaultValue, className, rules, disabled, error, warning, formState, onChange, options }: FormCheckListProps) => { +export const FormChecklist = ({ id, control, label, tooltip, defaultValue, className, rules, disabled, error, warning, formState, onChange, options }: FormChecklistProps) => { const { t } = useTranslation('shared'); /** @@ -35,15 +35,15 @@ export const FormCheckList = , values: Array = [], cb: (value: Array) => void) => { - return (event: BaseSyntheticEvent) => { + const toggleCheckbox = (option: ChecklistOption, rhfValues: Array = [], rhfCallback: (value: Array) => void) => { + return (event: React.ChangeEvent) => { let newValues: Array = []; 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 = ) => void) => { + const selectAll = (rhfCallback: (value: Array) => void) => { return () => { const newValues: Array = 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) => void) => { + return () => { + rhfCallback([]); + if (typeof onChange === 'function') { + onChange([]); + } + }; + }; return ( } @@ -90,7 +97,10 @@ export const FormCheckList = - {t('app.shared.form_check_list.select_all')} +
+ {t('app.shared.form_checklist.select_all')} + {t('app.shared.form_checklist.unselect_all')} +
); }} /> diff --git a/app/frontend/src/javascript/components/store/product-form.tsx b/app/frontend/src/javascript/components/store/product-form.tsx index e4198bbd5..cb388da7f 100644 --- a/app/frontend/src/javascript/components/store/product-form.tsx +++ b/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 = ({ product, title, onSucc - diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss index b3543e447..6f01cd5cd 100644 --- a/app/frontend/src/stylesheets/application.scss +++ b/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"; diff --git a/app/frontend/src/stylesheets/modules/form/form-check-list.scss b/app/frontend/src/stylesheets/modules/form/form-check-list.scss deleted file mode 100644 index f2b255c7d..000000000 --- a/app/frontend/src/stylesheets/modules/form/form-check-list.scss +++ /dev/null @@ -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%; - } -} diff --git a/app/frontend/src/stylesheets/modules/form/form-checklist.scss b/app/frontend/src/stylesheets/modules/form/form-checklist.scss new file mode 100644 index 000000000..13b058739 --- /dev/null +++ b/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; + } +} diff --git a/config/locales/app.shared.en.yml b/config/locales/app.shared.en.yml index 14ff7ba51..123885afa 100644 --- a/config/locales/app.shared.en.yml +++ b/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"