From 55974839d9eb44ea4d2573dba720bb66b9dc3e13 Mon Sep 17 00:00:00 2001 From: Sina Blattmann Date: Thu, 16 Mar 2023 08:39:39 +0100 Subject: [PATCH] [WIP] fix drag ;and drop tree bug --- .../Context/GroupContextProvider.tsx | 34 ++++++++++++++++++- .../src/components/Groups/FolderForm.tsx | 23 ++++++++++--- .../src/components/Groups/Tree/GroupTree.tsx | 33 ++---------------- 3 files changed, 54 insertions(+), 36 deletions(-) diff --git a/typescript/Frontend/src/components/Context/GroupContextProvider.tsx b/typescript/Frontend/src/components/Context/GroupContextProvider.tsx index 8201a12ff..b34a331eb 100644 --- a/typescript/Frontend/src/components/Context/GroupContextProvider.tsx +++ b/typescript/Frontend/src/components/Context/GroupContextProvider.tsx @@ -1,3 +1,4 @@ +import { NodeModel } from "@minoru/react-dnd-treeview"; import { createContext, ReactNode, useCallback, useState } from "react"; import axiosConfig from "../../config/axiosConfig"; import { I_Folder, I_Installation } from "../../util/types"; @@ -9,6 +10,8 @@ interface GroupContextProviderProps { loading: boolean; setLoading: (value: boolean) => void; getError: boolean; + tree: NodeModel[]; + setTree: (value: NodeModel[]) => void; } export const GroupContext = createContext({ @@ -18,19 +21,39 @@ export const GroupContext = createContext({ loading: false, setLoading: () => {}, getError: false, + tree: [], + setTree: () => {}, }); +const getTreeData = ( + data: (I_Folder | I_Installation)[] +): NodeModel[] => { + return data.map((element) => { + const isFolder = element.type === "Folder"; + return { + id: isFolder ? element.id : "installation-" + element.id, + parent: element.parentId, + text: element.name, + droppable: isFolder, + data: element, + }; + }); +}; + const GroupContextProvider = ({ children }: { children: ReactNode }) => { const [data, setData] = useState<(I_Folder | I_Installation)[]>([]); const [loading, setLoading] = useState(false); const [getError, setGetError] = useState(false); + const [tree, setTree] = useState[]>([]); const fetchData = useCallback(async () => { + console.log("fetchData"); setLoading(true); return axiosConfig .get("/GetAllFoldersAndInstallations") .then((res) => { setData(res.data); + setTree(getTreeData(res.data)); setLoading(false); }) .catch((err) => { @@ -41,7 +64,16 @@ const GroupContextProvider = ({ children }: { children: ReactNode }) => { return ( {children} diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx index 40c2bf57a..39854c716 100644 --- a/typescript/Frontend/src/components/Groups/FolderForm.tsx +++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx @@ -1,12 +1,13 @@ +import { NodeModel } from "@minoru/react-dnd-treeview"; import { Button, CircularProgress, Grid } from "@mui/material"; import { useFormik } from "formik"; import { useContext, useState } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import axiosConfig from "../../config/axiosConfig"; -import { I_Folder } from "../../util/types"; +import { I_Folder, I_Installation } from "../../util/types"; +import { GroupContext } from "../Context/GroupContextProvider"; import InnovenergySnackbar from "../InnovenergySnackbar"; import InnovenergyTextfield from "../Layout/InnovenergyTextfield"; -import { GroupContext } from "../Context/GroupContextProvider"; interface I_CustomerFormProps { values: I_Folder; @@ -16,9 +17,8 @@ interface I_CustomerFormProps { const updateFolder = (data: I_Folder) => { return axiosConfig.put("/UpdateFolder", data); }; -const FolderForm = (props: I_CustomerFormProps) => { - const { fetchData } = useContext(GroupContext); +const FolderForm = (props: I_CustomerFormProps) => { const { values, id } = props; const intl = useIntl(); @@ -26,6 +26,19 @@ const FolderForm = (props: I_CustomerFormProps) => { const [error, setError] = useState(); const [loading, setLoading] = useState(false); + const { setTree, tree } = useContext(GroupContext); + + const updateTree = (newValues: I_Folder) => { + const elementToUpdate = tree.find( + (element) => element.data?.id.toString() === id + ); + if (elementToUpdate) { + elementToUpdate.data = newValues; + elementToUpdate.text = newValues.name; + setTree([...tree]); + } + }; + const formik = useFormik({ initialValues: { name: values.name, @@ -40,9 +53,9 @@ const FolderForm = (props: I_CustomerFormProps) => { id: idAsNumber, }) .then((res) => { + updateTree({ ...values, ...formikValues, id: idAsNumber }); setSnackbarOpen(true); setLoading(false); - fetchData(); }) .catch((err) => { setSnackbarOpen(true); diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx index bdc4c35ee..81ee11077 100644 --- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx +++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx @@ -17,23 +17,8 @@ import DragPreview from "./DragPreview"; import InnovenergySnackbar from "../../InnovenergySnackbar"; import { GroupContext } from "../../Context/GroupContextProvider"; -const getTreeData = ( - data: (I_Folder | I_Installation)[] -): NodeModel[] => { - return data.map((element) => { - const isFolder = element.type === "Folder"; - return { - id: isFolder ? element.id : "installation-" + element.id, - parent: element.parentId, - text: element.name, - droppable: isFolder, - data: element, - }; - }); -}; - const GroupTree = () => { - const { data, fetchData, loading, setLoading, getError } = + const { data, fetchData, loading, setLoading, getError, setTree, tree } = useContext(GroupContext); const [putError, setPutError] = useState(false); const [snackbarOpen, setSnackbarOpen] = useState(false); @@ -44,18 +29,6 @@ const GroupTree = () => { fetchData(); }, [fetchData]); - /* const findParent = (element: I_Folder | I_Installation): any => { - if (data) { - const parent = data.find( - (el) => el.type === "Folder" && el.id === element.parentId - ); - if (parent) { - return findParent(parent); - } - return element.parentId; - } - }; */ - const handleDrop = ( newTree: NodeModel[], { dropTargetId, dragSource }: DropOptions @@ -72,7 +45,7 @@ const GroupTree = () => { ) .then(() => { setSnackbarOpen(true); - fetchData(); + setTree(newTree); }) .catch((err) => { setPutError(err); @@ -92,7 +65,7 @@ const GroupTree = () => { - tree={getTreeData(data)} + tree={tree} rootId={0} dragPreviewRender={(monitorProps) => (