-
+ return {
+ id: STEP_ID,
+ label: 'Tier Definition',
+ DEFAULT_DATA: defaultValues,
+ resolver: yup
+ .array()
+ .of(resolvers)
+ .min(1)
+ .required()
+ .default([]),
+ content: useCallback(({ data, setFormData }) => {
+ const [showDialog, setShowDialog] = useState(false);
+ const [nestedForm, setNestedForm] = useState({});
+ const form = useWatch({});
+
+ const { editingData, handleEdit, handleSave } = useListForm({
+ key: STEP_ID,
+ list: data,
+ setList: setFormData,
+ defaultValue: defaultValues
+ });
+
+ useEffect(() => {
+ setNestedForm(form);
+ }, []);
+
+ return (
+ <>
+
+
+
{JSON.stringify(data)}
-
- )
- }),
- []
- );
+ {showDialog && (
+
+ setShowDialog(false)}
+ >
+
+ {
+ handleSave(values);
+ setShowDialog(false);
+ }}
+ />
+
+
+
+ )}
+
+ );
+ }, [])
+ /* DialogComponent: ({ values, onSubmit, onCancel, ...props }) => {
+ const form = useWatch({});
+ const [nestedForm, setNestedForm] = useState({});
+
+ useEffect(() => {
+ setNestedForm(form);
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ ); */
+ };
};
export default Roles;
diff --git a/src/fireedge/src/public/hooks/useListForm.js b/src/fireedge/src/public/hooks/useListForm.js
new file mode 100644
index 0000000000..1ec736e1e6
--- /dev/null
+++ b/src/fireedge/src/public/hooks/useListForm.js
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+const useListSelect = ({ multiple, key, list, setList, defaultValue }) => {
+ const [editingData, setEditingData] = useState({});
+
+ const handleSelect = index =>
+ setList(prevData => ({
+ ...prevData,
+ [key]: multiple ? [...prevData[key], index] : [index]
+ }));
+
+ const handleUnselect = indexRemove =>
+ setList(prevData => ({
+ ...prevData,
+ [key]: prevData[key]?.filter(index => index !== indexRemove)
+ }));
+
+ const handleSave = values => {
+ setList(prevData => ({
+ ...prevData,
+ [key]: Object.assign(prevData[key], {
+ [editingData.index]: values
+ })
+ }));
+ };
+
+ const handleEdit = (index = list?.length) => {
+ const openData = list[index] ?? defaultValue;
+
+ setEditingData({ index, data: openData });
+ };
+
+ const handleClone = index => {
+ const item = list[index];
+ const cloneItem = { ...item, name: `${item?.name}_clone` };
+ const cloneData = [...list];
+ cloneData.splice(index + 1, 0, cloneItem);
+
+ setList(prevData => ({ ...prevData, [key]: cloneData }));
+ };
+
+ const handleRemove = indexRemove => {
+ // TODO confirmation??
+ setList(prevData => ({
+ ...prevData,
+ [key]: prevData[key]?.filter((_, index) => index !== indexRemove)
+ }));
+ };
+
+ return {
+ editingData,
+ handleSelect,
+ handleUnselect,
+ handleSave,
+ handleEdit,
+ handleClone,
+ handleRemove
+ };
+};
+
+export default useListSelect;