rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-18 07:52:23 +01:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Sylvain 2022-07-27 15:35:57 +02:00 committed by Sylvain
parent 1d5141d073
commit ab6d91fd12
6 changed files with 61 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/frontend/src/javascript/components/form/form-check-list.tsx → app/frontend/src/javascript/components/form/form-checklist.tsx
View File

@ -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>
</>
);
}} />

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

@ -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} />

2
app/frontend/src/stylesheets/application.scss
View File

@ -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";

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

@ -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%;
}
}

28
app/frontend/src/stylesheets/modules/form/form-checklist.scss Normal file
View File

@ -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;
}
}

3
config/locales/app.shared.en.yml
View File

@ -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"