From 0b3d17bab98c6695f5c258b76e06fddea0d4fa13 Mon Sep 17 00:00:00 2001 From: Poornima Vijayakrishnan Date: Wed, 12 Jul 2023 16:20:13 -0700 Subject: [PATCH 1/2] Allow input value to be copied to selected rows instead of all rows --- src/assets/scss/_input-switch.scss | 5 +- src/assets/scss/_recordedit.scss | 17 +++- src/components/recordedit/form-container.tsx | 82 +++++++++++++++++--- 3 files changed, 90 insertions(+), 14 deletions(-) diff --git a/src/assets/scss/_input-switch.scss b/src/assets/scss/_input-switch.scss index 64bfd5494..e39258590 100644 --- a/src/assets/scss/_input-switch.scss +++ b/src/assets/scss/_input-switch.scss @@ -22,6 +22,8 @@ .chaise-input-control { height: auto; padding: 0 !important; + // Adding this to make the div clickable for apply some feature + cursor: pointer; textarea, .disabled-textarea { @@ -178,7 +180,8 @@ .chaise-image-preview { margin-top: 5px; } + .chaise-input-control { cursor: text; } -} +} \ No newline at end of file diff --git a/src/assets/scss/_recordedit.scss b/src/assets/scss/_recordedit.scss index eb814f51c..f1289fc6f 100644 --- a/src/assets/scss/_recordedit.scss +++ b/src/assets/scss/_recordedit.scss @@ -114,7 +114,9 @@ .select-all-row { width: 100%; - .select-all-text, .select-all-input, .select-all-buttons { + .select-all-text, + .select-all-input, + .select-all-buttons { float: left; } @@ -164,6 +166,7 @@ background: map-get(variables.$color-map, 'disabled-background'); opacity: 0.55; } + .spinner-border-sm { left: 50%; top: 15px; @@ -186,6 +189,13 @@ border-radius: 0; min-height: 47px; padding: 8px 10px; + // Adding this to make the div clickable for apply some feature + cursor: pointer; + } + + // This is added to show the form is selected to apply the change + .entity-active { + border: 2px solid #4674a7; } // only form inputs @@ -221,6 +231,7 @@ .form-header-buttons-container { float: right; + .remove-form-btn { padding: 1px 7px 0px 7px; } @@ -265,7 +276,7 @@ } @-moz-document url-prefix() { - #form-edit > table > tbody > tr > td:first-child { + #form-edit>table>tbody>tr>td:first-child { margin-top: -1px; } } @@ -330,4 +341,4 @@ // width: 0%; // background-color: #8cacc7 !important; // } -} +} \ No newline at end of file diff --git a/src/components/recordedit/form-container.tsx b/src/components/recordedit/form-container.tsx index 77fb8b833..ef1988c14 100644 --- a/src/components/recordedit/form-container.tsx +++ b/src/components/recordedit/form-container.tsx @@ -96,7 +96,9 @@ const FormContainer = (): JSX.Element => { }; type FormRowProps = { - columnModelIndex: number + columnModelIndex: number, + activeForm?: any[], + clearAllForms?:any }; /** @@ -112,7 +114,7 @@ const FormRow = ({ columnModelIndex }: FormRowProps): JSX.Element => { canUpdateValues, columnPermissionErrors, foreignKeyData, waitingForForeignKeyData, getRecordeditLogStack, getRecordeditLogAction, } = useRecordedit(); - + const [activeForm, setActiveForm] = useState([]); /** * which columns should show the permission error. * if a user cannot edit a column in one of the rows, we cannot allow them @@ -165,6 +167,27 @@ const FormRow = ({ columnModelIndex }: FormRowProps): JSX.Element => { }); }; + /** + * callback to handle form click. + * It sets the forms selected in the state variable on select and remove it on deselect + */ + const handleFormClick = (formNumber: number) => { + setActiveForm((prevActiveForms: number[]) => { + if (prevActiveForms.includes(formNumber)) { + return prevActiveForms.filter((prevFormNumber) => prevFormNumber !== formNumber); + } else { + return [...prevActiveForms, formNumber]; + } + }); + }; + + /** + * callback to clear all active states on Apply All and Clear All + */ + const clearAllForms = () => { + setActiveForm([]); + }; + // -------------------------- render logic ---------------------- // const showSelectAll = activeSelectAll === columnModelIndex; @@ -197,7 +220,7 @@ const FormRow = ({ columnModelIndex }: FormRowProps): JSX.Element => { return false; } - + const renderInput = (formNumber: number, formIndex?: number) => { const colName = columnModel.column.name; @@ -259,13 +282,20 @@ const FormRow = ({ columnModelIndex }: FormRowProps): JSX.Element => { return (
- {forms.map((formNumber: number, formIndex: number) => ( -
- {renderInput(formNumber, formIndex)} -
- ))} + {forms.map((formNumber: number, formIndex: number) => ( +
handleFormClick(formNumber)} + > + {renderInput(formNumber, formIndex)}
- {showSelectAll && } + ))} +
+ {showSelectAll && }
) @@ -275,7 +305,7 @@ const FormRow = ({ columnModelIndex }: FormRowProps): JSX.Element => { * shows the select all row * NOTE this is its own component to avoid rerendering the whole row on each change. */ -const SelectAllRow = ({ columnModelIndex }: FormRowProps) => { +const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms }: FormRowProps) => { const { columnModels, forms, reference, waitingForForeignKeyData, foreignKeyData, appMode, canUpdateValues, toggleActiveSelectAll, logRecordeditClientAction @@ -284,6 +314,7 @@ const SelectAllRow = ({ columnModelIndex }: FormRowProps) => { const { watch, reset, getValues, formState: { errors } } = useFormContext(); const [isEmpty, setIsEmpty] = useState(true); + /** * if the selected value is empty, we should disable the apply-all @@ -351,6 +382,8 @@ const SelectAllRow = ({ columnModelIndex }: FormRowProps) => { ); toggleActiveSelectAll(columnModelIndex); + // Clear the selection. + clearAllForms(); }; /** @@ -367,8 +400,26 @@ const SelectAllRow = ({ columnModelIndex }: FormRowProps) => { } reset(copyOrClearValue(cm, getValues(), foreignKeyData.current, formValue, SELECT_ALL_INPUT_FORM_VALUE, clearValue)); }); + // Clear the selection. + clearAllForms(); }; + /** + * The callback used by functions above to set the selected values of the row. + * Loop for the selected forms instead of all forms. + */ + const applyValueToSome = () => { + const cm = columnModels[columnModelIndex]; + + activeForm?.forEach((formValue: number) => { + // ignore the ones that cannot be updated + if (appMode === appModes.EDIT && canUpdateValues && !canUpdateValues[`${formValue}-${cm.column.name}`]) { + return; + } + reset(copyOrClearValue(cm, getValues(), foreignKeyData.current, formValue, SELECT_ALL_INPUT_FORM_VALUE)); + }); + }; + // -------------------------- render logic ---------------------- // const columnModel = columnModels[columnModelIndex]; @@ -400,6 +451,17 @@ const SelectAllRow = ({ columnModelIndex }: FormRowProps) => { />
+ + + +
))} - {showSelectAll && } + {showSelectAll && } ) @@ -305,17 +314,37 @@ const FormRow = ({ columnModelIndex }: FormRowProps): JSX.Element => { * shows the select all row * NOTE this is its own component to avoid rerendering the whole row on each change. */ -const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms }: FormRowProps) => { +const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms, setActiveForm }: FormRowProps) => { const { columnModels, forms, reference, waitingForForeignKeyData, foreignKeyData, appMode, canUpdateValues, toggleActiveSelectAll, logRecordeditClientAction } = useRecordedit(); - const { watch, reset, getValues, formState: { errors } } = useFormContext(); - + let ref = useRef(null); const [isEmpty, setIsEmpty] = useState(true); + const [selected, setSelected] = useState(false); + + // This useeffect is to set the first form as active on load + useEffect(() => { + setActiveForm([forms[0]]); + }, []) + /* This useffect is to set the indeterminate checkbox when forms are individually selected + * and selected forms length is less than total forms length + */ + useEffect(() => { + if (ref && ref.current && activeForm && activeForm?.length > 0) { + if(activeForm?.length < forms.length) { + (ref.current as HTMLInputElement).indeterminate = true; + } else if(activeForm?.length === forms.length){ + (ref.current as HTMLInputElement).indeterminate = false; + setSelected(true) + } + + } + }, [activeForm]); + /** * if the selected value is empty, we should disable the apply-all * useEffect allows us to look for the value and only rerender when we have to. @@ -386,6 +415,15 @@ const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms }: FormRowPr clearAllForms(); }; + // Call back for select all checkbox to toggle all forms as selected and unselected + const onSelectChange = () => { + if(!selected) { + setActiveForm(forms); + } else { + setActiveForm([]); + } + setSelected(!selected) + } /** * The callback used by functions above to set the values of the row. * if clearValue is true, it will use emtpy value, otherwise it will copy the select-all input value @@ -393,33 +431,14 @@ const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms }: FormRowPr const setValueForAllInputs = (clearValue?: boolean) => { const cm = columnModels[columnModelIndex]; - forms.forEach((formValue: number) => { - // ignore the ones that cannot be updated - if (appMode === appModes.EDIT && canUpdateValues && !canUpdateValues[`${formValue}-${cm.column.name}`]) { - return; - } - reset(copyOrClearValue(cm, getValues(), foreignKeyData.current, formValue, SELECT_ALL_INPUT_FORM_VALUE, clearValue)); - }); - // Clear the selection. - clearAllForms(); - }; - - /** - * The callback used by functions above to set the selected values of the row. - * Loop for the selected forms instead of all forms. - */ - const applyValueToSome = () => { - const cm = columnModels[columnModelIndex]; - activeForm?.forEach((formValue: number) => { // ignore the ones that cannot be updated if (appMode === appModes.EDIT && canUpdateValues && !canUpdateValues[`${formValue}-${cm.column.name}`]) { return; } - reset(copyOrClearValue(cm, getValues(), foreignKeyData.current, formValue, SELECT_ALL_INPUT_FORM_VALUE)); + reset(copyOrClearValue(cm, getValues(), foreignKeyData.current, formValue, SELECT_ALL_INPUT_FORM_VALUE, clearValue)); }); }; - // -------------------------- render logic ---------------------- // const columnModel = columnModels[columnModelIndex]; @@ -451,30 +470,33 @@ const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms }: FormRowPr />
+
+ + + {activeForm && activeForm?.length > 0 ? `${activeForm?.length} of ${forms.length} selected.`: 'Select All'} +
+ +
- - - - - + @@ -482,6 +504,7 @@ const SelectAllRow = ({ columnModelIndex, activeForm, clearAllForms }: FormRowPr Close +
)