· 5 years ago · Mar 10, 2021, 05:36 AM
1// // React Dependencies
2// import React, { useState, useEffect, Fragment } from 'react'
3// import { Link, useHistory, useParams } from "react-router-dom";
4// import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
5// import { uniq } from "lodash";
6// // Material UI Components - Core
7// import { TreeView } from '@material-ui/lab';
8// // Material UI Components - Icons
9// import { ArrowDropDown, ArrowRight } from '@material-ui/icons';
10// // Redux Setup
11// import { useDispatch, useSelector } from "react-redux";
12// import { ICombinedState } from "redux/store";
13// import {
14// actionResetUserRole,
15// actionSetUserRole
16// } from "redux/UserRole/UserRoleAction";
17// import {
18// actionEditFolder,
19// actionAddFolderTree,
20// actionUpdateFolderTree,
21// } from "redux/Workspace/WorkspaceAction";
22// // API Call
23// import {
24// apiGetRoleGetByUserIDandWorkspaceID,
25// } from "api/settings";
26// import {
27// apiEditFolder,
28// apiGetAllFolderByWorkspaceId,
29// apiGetAllFolderByFolderParent,
30// } from "api/folder";
31// import {
32// apiGetListByFolderId
33// } from "api/list";
34// // Interface Call
35// import { IWorkspace } from "interfaces/IWorkspace";
36// import { IFolderTree } from "interfaces/IFolderTree";
37// // Custom Components
38// import Dialog from "components/Dialog";
39// import Button from "components/Button";
40// // Styles
41// import useStyles, { StyledTreeItem } from "./styles";
42// // Assets
43// // Local Storage
44// import { getLocal } from "local/localStorage";
45// // Utils
46// import extractFolderPath from "utils/extractFolderPath";
47// import { classNames } from "utils/classnames";
48
49// interface ReduxState {
50// workspaces: IWorkspace[];
51// folderTrees: IFolderTree[];
52// }
53
54// let userRoot = {
55// id: 0,
56// name: "",
57// workspace_id: 0,
58// info: {
59// workspace_configuration: {
60// create: true,
61// edit: true,
62// delete: true,
63// add_member: true,
64// folder_management: true,
65// user_management: true
66// },
67// card_configuration: {
68// create: true,
69// edit: true,
70// delete: true,
71// add_member: true,
72// visibility: 1,
73// add_meeting: true,
74// assign_member: true,
75// change_status: true
76// }
77// },
78// created_at: "",
79// created_by: 0,
80// updated_by: 0
81// }
82
83// const getItemStyle = (isDragging:any, draggableStyle: any) => ({
84// // some basic styles to make the items look a bit nicer
85// // userSelect: 'none',
86// opacity: 3,
87// // padding: 8 * 2,
88// // margin: `0 0 ${8}px 0`,
89// // change background colour if dragging
90// background: isDragging && 'var(--color-astra)',
91// color: "var(--color-mine-shaft)",
92// // styles we need to apply on draggables
93// ...draggableStyle
94// });
95
96// const getListStyle = (isDraggingOver: any) => ({
97// opacity: 1,
98// background: isDraggingOver && 'var(--color-muted)',
99// });
100
101// const getListCStyle = (isDraggingOver: any) => ({
102// opacity: 1,
103// background: isDraggingOver && 'var(--color-black)',
104// });
105
106// const SidebarTree: React.FC<unknown> = () => {
107// const classes = useStyles();
108// const history = useHistory();
109// const dispatch = useDispatch();
110// const [errorMsgDragDropFolder, setErrorMsgDragDropFolder] = useState<string>("");
111// const [openDialogErrorDragDropFolder, setOpenDialogErrorDragDropFolder] = useState<boolean>(false);
112// const userId = Number(getLocal("user_id"));
113// let { workspaceId: workspaceIdByUrl, folderId: folderIdByUrl, cardId: cardIdGetByUrl }: any = useParams();
114// const [selectedExpanded, setSelectedExpanded] = useState<Array<string>>([]);
115// const { workspaces, folderTrees } = useSelector<ICombinedState, ReduxState>((state) => {
116// return {
117// workspaces: state.workspace.workspaces,
118// folderTrees: state.workspace.folderTrees,
119// };
120// });
121// let indexDraggable:number = 0;
122
123// const changeFolderView = (folder: any) => {
124// if(folder.parent_id === "" || folder.parent_id === undefined || folder.parent_id === null) {
125// history.push(`/workspace/w/${folder.id}/`);
126// } else {
127// history.push(`/workspace/w/${folder.workspace_id}/f/${folder.id}`);
128// }
129// };
130
131// const renderTree = (nodes: any, isParent: boolean) => {
132// indexDraggable++;
133// // console.log('nodes', nodes);
134// return (
135// <Draggable
136// key={`folderpf-${nodes.id.toString()}`}
137// draggableId={`folder-${nodes.id.toString()}`}
138// index={Number(nodes.id+1)}
139
140// >
141// {(provided, snapshot) => (
142// <StyledTreeItem
143// onClick={ Array.isArray(nodes.folders) ? () => changeFolderView(nodes) : undefined }
144// key={nodes.id}
145// nodeId={nodes.id.toString()}
146// label={nodes.name}
147// className={isParent?"parent-node":""}
148// {...provided.draggableProps}
149// ref={provided.innerRef}
150// {...provided.dragHandleProps}
151// // expanded={true}
152// // aria-selected={true}
153// style={getItemStyle(
154// snapshot.isDragging,
155// provided.draggableProps.style
156// )}
157// >
158// {
159// Array.isArray(nodes.folders) ? nodes.folders.map((node: any, index: number) => {
160// // console.log('nodes', nodes);
161// return (
162// <Droppable droppableId={`foldercf-${nodes.id}`} type="list" key={(index)}>
163// {(provided, snapshot) => (
164// <div
165// {...provided.droppableProps}
166// style={getListCStyle(snapshot.isDraggingOver)}
167// ref={provided.innerRef}
168// >
169// {renderTree(node, false)}
170// {provided.placeholder}
171// </div>
172// )}
173// </Droppable>
174// )
175// }) :
176// (
177// <Droppable droppableId={`workspace-${nodes.id}`} type="list" key={nodes.id}>
178// {(provided, snapshot) => (
179// <div
180// {...provided.droppableProps}
181// style={getListStyle(snapshot.isDraggingOver)}
182// ref={provided.innerRef}
183// >
184// {provided.placeholder}
185// </div>
186// )}
187// </Droppable>
188// )
189// }
190// </StyledTreeItem>
191// )}
192// </Draggable>
193
194// );
195// }
196
197// const updateWorkspaceList = async (workspaceName: string) => {
198// let newDataFolders = [];
199// const dataFolder: any = await apiGetAllFolderByWorkspaceId(Number(workspaceIdByUrl));
200// if (dataFolder.status === 200) {
201// newDataFolders = dataFolder.data.data;
202// }
203// dispatch(actionUpdateFolderTree({
204// id: Number(workspaceIdByUrl),
205// name: workspaceName,
206// folders: newDataFolders
207// }))
208// }
209
210// const handle = {
211// setUserRole: async () => {
212// // Check whether the user is included in this workspace.
213// const oneOfMyListWorkspaces = await workspaces.filter((workspace: IWorkspace) => workspace.id === Number(workspaceIdByUrl))
214// const getRoleGetByUserIDandWorkspaceID = await apiGetRoleGetByUserIDandWorkspaceID(Number(workspaceIdByUrl));
215
216// if(getRoleGetByUserIDandWorkspaceID.status === 200) {
217// if(oneOfMyListWorkspaces.length !== 0) {
218// if(oneOfMyListWorkspaces[0].created_by === userId) {
219// dispatch(actionSetUserRole(
220// userRoot
221// ));
222// } else {
223// dispatch(actionSetUserRole(
224// getRoleGetByUserIDandWorkspaceID.data.data
225// ));
226// } } else {
227// dispatch(actionSetUserRole(
228// getRoleGetByUserIDandWorkspaceID.data.data
229// ));
230// }
231// } else {
232// if(oneOfMyListWorkspaces.length !== 0) {
233// if(oneOfMyListWorkspaces[0].created_by === userId) {
234// dispatch(actionSetUserRole(
235// userRoot
236// ));
237// } else {
238// dispatch(actionResetUserRole());
239// }
240// } else {
241// dispatch(actionResetUserRole());
242// }
243// }
244// },
245// handleToggle: (event: React.ChangeEvent<{}>, nodeIds: string[]) => {
246// setSelectedExpanded(nodeIds)
247// },
248// handleSelect: (event: React.ChangeEvent<{}>, nodeIds: string[]) => {
249// },
250// onDragEnd: async (result: any) => {
251// console.log('result', result);
252// // Check is valid folder to drag and drop
253// // If data info drag and drop folder not valid, don't change
254// if (!result) {
255// return;
256// }
257// if (
258// result.droppableId === result.source.droppableId &&
259// result.index === result.source.index-1
260// ) {
261// return;
262// }
263// if(result.destination === null){
264// return;
265// }
266// if(Number(result.source.index-1) === Number(result.destination.index-1)) {
267// return;
268// }
269
270// // Handle if data drag drop folder is valid.
271// indexDraggable = 0;
272// let allFolderInWorkspaceId = folderTrees.filter((wrk:any) => wrk.id === Number(workspaceIdByUrl))
273// if(allFolderInWorkspaceId.length !== 0) {
274// const getExtractFolderPathSourceAndDestionation = await Promise.all([extractFolderPath(allFolderInWorkspaceId, Number(result.source.index-1)), extractFolderPath(allFolderInWorkspaceId, Number(result.destination.index-1))]);
275// const dataFolderSumber = getExtractFolderPathSourceAndDestionation[0][getExtractFolderPathSourceAndDestionation[0].length-1];
276// const dataFolderTujuan = getExtractFolderPathSourceAndDestionation[1][getExtractFolderPathSourceAndDestionation[1].length-1];
277// console.log('dataFolderSumber', dataFolderSumber);
278// console.log('dataFolderTujuan', dataFolderTujuan);
279// // First, we list in folder tujuan
280// const responseGetListByFolderIdFolderTujuan: any = await apiGetListByFolderId(dataFolderTujuan.info.id);
281// console.log('responseGetListByFolderIdFolderTujuan', responseGetListByFolderIdFolderTujuan);
282// if(responseGetListByFolderIdFolderTujuan.status === 200) {
283// if(responseGetListByFolderIdFolderTujuan.data.length !== 0 && dataFolderTujuan.info.parent_id !== 0) {
284// // Folder tujuan sudah memiliki list
285// setOpenDialogErrorDragDropFolder(true);
286// setErrorMsgDragDropFolder("Folder Tujuan Sudah Memiliki List, Kamu Tidak Bisa Tambahkan Folder Ke Dadalam Folder Yang Sudah Ada List!")
287// }
288// } else {
289// // Folder tujuan belum punya list
290// // Check jumlah sub folder tujuan
291// // const responseGetAllFolderByParentFolderTujuan: any = await apiGetAllFolderByFolderParent(Number(workspaceIdByUrl), dataFolderTujuan.info.id);
292// // console.log('responseGetAllFolderByParentFolderTujuan', responseGetAllFolderByParentFolderTujuan);
293// // setErrorMsgDragDropFolder("Jumlah Subfolder Pada Folder Tujuan Akan Lebih Dari 4!")
294// }
295// // // check data parent id, if same, don't drag & drop folder because the result is same
296// if((dataFolderTujuan.info.parent_id !== dataFolderSumber.info.parent_id) && (dataFolderSumber.info.id !== dataFolderTujuan.info.id)) {
297// const responsePostEditFolder: any = await apiEditFolder(dataFolderSumber.info.id, dataFolderSumber.info.name, dataFolderTujuan.info.parent_id === 0 ? 0 : dataFolderTujuan.info.parent_id, Number(workspaceIdByUrl));
298// if(responsePostEditFolder.status === 200 ){
299// console.log('dataFolderSumber, dataFolderTujuan', dataFolderSumber, dataFolderTujuan)
300// // Handle success drag & drop folder in workspace, and update on database
301// dispatch(actionEditFolder(
302// dataFolderSumber.info.id,
303// dataFolderSumber.info.name,
304// dataFolderTujuan.info.parent_id === 0 ? 0 : dataFolderTujuan.info.parent_id,
305// Number(workspaceIdByUrl)
306// ))
307// await updateWorkspaceList(allFolderInWorkspaceId[0].name);
308// }
309// }
310// }
311// },
312// closeDialogErrorDragDropFolder: () => {
313// setErrorMsgDragDropFolder("")
314// setOpenDialogErrorDragDropFolder(false)
315// }
316// }
317
318// useEffect(() => {
319// setSelectedExpanded([]);
320// // Handle user role in workspace
321// // Every time we change workspace or folder, we will check the user's role in that workspace.
322// handle.setUserRole();
323// const setDataTree = async () => {
324// let tempFolderPath:any = [`w-${String(workspaceIdByUrl)}`];
325// if(folderIdByUrl !== undefined) {
326// // handle treeview with folder view
327// setSelectedExpanded([`w-${String(workspaceIdByUrl)}`])
328// if(folderTrees.length !== 0) {
329// let [...tempFolderTrees]:any = folderTrees;
330// // desctructuring array folderTrees
331// await tempFolderTrees.forEach((folder: any, index:number) => {
332// tempFolderTrees[index] = {
333// folders: tempFolderTrees[index].folders,
334// workspaces_id: tempFolderTrees[index].id, // change properti 'id' to 'workspace_id'
335// name: tempFolderTrees[index].name
336// }
337// })
338
339// let allFolderInCurrentWorkspace: any = tempFolderTrees.filter((wrk: any) => wrk.workspaces_id === Number(workspaceIdByUrl));
340// if(allFolderInCurrentWorkspace.length !== 0) {
341// const getExtractFolderPath = extractFolderPath(allFolderInCurrentWorkspace, Number(folderIdByUrl));
342// getExtractFolderPath.forEach((folder: {
343// title: string,
344// url: {
345// folderId: number | string | null | undefined,
346// workspaceId: number | string | null | undefined,
347// }
348// }) => {
349// tempFolderPath.push(String(folder.url.folderId));
350// })
351// setSelectedExpanded(tempFolderPath.reverse())
352// }
353// }
354// } else if(workspaceIdByUrl !== undefined) {
355// setSelectedExpanded([`w-${String(workspaceIdByUrl)}`])
356// }
357// }
358// setDataTree();
359// }, [workspaceIdByUrl, folderIdByUrl])
360
361// if (folderTrees.length === 0) {
362// return (
363// <div className={classes.emptyDataSidebar}>
364// No Workspace Found
365// </div>
366// );
367// } else {
368// return (
369// <Fragment>
370// <div className={classes.canvasRelative}>
371// <div className={classes.treeContainer}>
372// <TreeView
373// defaultCollapseIcon={<ArrowDropDown />}
374// defaultExpandIcon={<ArrowRight />}
375// className={classes.treeView}
376// defaultExpanded={selectedExpanded}
377// expanded={selectedExpanded}
378// onNodeToggle={handle.handleToggle}
379// onNodeSelect={handle.handleSelect}
380// >
381// {folderTrees.map((parent: any, index:number) => {
382// indexDraggable = 0;
383// return (
384// <DragDropContext onDragEnd={handle.onDragEnd} key={index} >
385// <StyledTreeItem
386// onClick={ Array.isArray(parent.folders) ? () => changeFolderView(parent) : undefined }
387// key={parent.id}
388// nodeId={`w-${parent.id.toString()}`}
389// label={parent.name}
390// className={"parent-node"}
391// // expanded={true}
392// // aria-selected={true}
393// >
394// <Droppable droppableId={`workspace-${parent.id}`} type="list" key={parent.id}>
395// {(provided, snapshot) => (
396// <div
397// {...provided.droppableProps}
398// style={getListStyle(snapshot.isDraggingOver)}
399// ref={provided.innerRef}
400// >
401// {
402// Array.isArray(parent.folders) ? parent.folders.map((node: any) => renderTree(node, false)) : null
403// }
404// {provided.placeholder}
405// </div>
406// )}
407// </Droppable>
408// </StyledTreeItem>
409// </DragDropContext>
410// )
411// })}
412// </TreeView>
413// </div>
414// </div>
415// <Dialog
416// openDialog={openDialogErrorDragDropFolder}
417// title={"Error Drag Drop Folder"}
418// onClose={handle.closeDialogErrorDragDropFolder}
419// actions={
420// <Button
421// color="danger"
422// textColor="light"
423// fontSize="inherit"
424// disableElevation={true}
425// onClick={handle.closeDialogErrorDragDropFolder}
426// >
427// OK
428// </Button>
429// }
430// >
431// <span className={classes.errorMsgDragDropFolder}>{errorMsgDragDropFolder}</span>
432// </Dialog>
433// </Fragment>
434// );
435// }
436// }
437
438// export default SidebarTree;
439
440// // React Dependencies
441import React, { useState, useEffect, Fragment } from 'react'
442import { Link, useHistory, useParams } from "react-router-dom";
443import { uniq, set } from "lodash";
444// Material UI Components - Core
445import { TreeView } from '@material-ui/lab';
446// Material UI Components - Icons
447import { ArrowDropDown, ArrowRight } from '@material-ui/icons';
448// Redux Setup
449import { useDispatch, useSelector } from "react-redux";
450import { ICombinedState } from "redux/store";
451import {
452 actionResetUserRole,
453 actionSetUserRole
454} from "redux/UserRole/UserRoleAction";
455import {
456 actionEditFolder,
457 actionAddFolderTree,
458 actionUpdateFolderTree,
459} from "redux/Workspace/WorkspaceAction";
460// API Call
461import {
462 apiGetRoleGetByUserIDandWorkspaceID,
463} from "api/settings";
464import {
465 apiEditFolder,
466 apiGetAllFolderByWorkspaceId,
467 apiGetAllFolderByFolderParent,
468} from "api/folder";
469import {
470 apiGetListByFolderId
471} from "api/list";
472// Interface Call
473import { IWorkspace } from "interfaces/IWorkspace";
474import { IFolderTree } from "interfaces/IFolderTree";
475// Custom Components
476import Dialog from "components/Dialog";
477import Button from "components/Button";
478import Tree from './tree';
479// // Styles
480import useStyles, { StyledTreeItem } from "./styles";
481import { withStyles } from '@material-ui/core/styles';
482import Menu, { MenuProps } from '@material-ui/core/Menu';
483import MenuItem from '@material-ui/core/MenuItem';
484import './antd.css';
485// // Assets
486// // Local Storage
487import { getLocal } from "local/localStorage";
488// // Utils
489import extractFolderPath from "utils/extractFolderPath";
490import { classNames } from "utils/classnames";
491import ListItemIcon from '@material-ui/core/ListItemIcon';
492import ListItemText from '@material-ui/core/ListItemText';
493import InboxIcon from '@material-ui/icons/MoveToInbox';
494import DraftsIcon from '@material-ui/icons/Drafts';
495import SendIcon from '@material-ui/icons/Send'
496
497interface ReduxState {
498 workspaces: IWorkspace[];
499 folderTrees: IFolderTree[];
500}
501
502const TreeNode = Tree.TreeNode;
503const { DirectoryTree } = Tree;
504
505const StyledMenu = withStyles({
506 paper: {
507 border: '1px solid #d3d4d5',
508 },
509})((props: MenuProps) => (
510 <Menu
511 elevation={0}
512 getContentAnchorEl={null}
513 anchorOrigin={{
514 vertical: 'bottom',
515 horizontal: 'center',
516 }}
517 transformOrigin={{
518 vertical: 'top',
519 horizontal: 'center',
520 }}
521 {...props}
522 />
523));
524
525const StyledMenuItem = withStyles((theme) => ({
526 root: {
527 // '&:focus': {
528 // backgroundColor: theme.palette.primary.main,
529 // '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
530 // color: theme.palette.common.white,
531 // },
532 // },
533 },
534}))(MenuItem);
535let userRoot = {
536 id: 0,
537 name: "",
538 workspace_id: 0,
539 info: {
540 workspace_configuration: {
541 create: true,
542 edit: true,
543 delete: true,
544 add_member: true,
545 folder_management: true,
546 user_management: true
547 },
548 card_configuration: {
549 create: true,
550 edit: true,
551 delete: true,
552 add_member: true,
553 visibility: 1,
554 add_meeting: true,
555 assign_member: true,
556 change_status: true
557 }
558 },
559 created_at: "",
560 created_by: 0,
561 updated_by: 0
562}
563
564const SidebarTree: React.FC<any> = () => {
565 const classes = useStyles();
566 const history = useHistory();
567 const dispatch = useDispatch();
568 const [gData, setGData] = useState<any>([]);
569 const [expandedKeys, setExpandedKeys] = useState<any>([]);
570 const [openDialogErrorDragDropFolder, setOpenDialogErrorDragDropFolder] = useState<boolean>(false);
571 const [errorMsgDragDropFolder, setErrorMsgDragDropFolder] = useState<string>("");
572 const [anchorEl, setAnchorEl]:any = React.useState<null | HTMLElement>(null);
573 const userId = Number(getLocal("user_id"));
574 let { workspaceId: workspaceIdByUrl, folderId: folderIdByUrl, cardId: cardIdGetByUrl }: any = useParams();
575 const { workspaces, folderTrees } = useSelector<ICombinedState, ReduxState>((state) => {
576 return {
577 workspaces: state.workspace.workspaces,
578 folderTrees: state.workspace.folderTrees,
579 };
580 });
581
582 const handle = {
583 onDragEnter: (info:any) => {
584 console.log('info onDragEnter', info);
585 // expandedKeys 需要受控时设置
586 // this.setState({
587 // expandedKeys: info.expandedKeys,
588 // });
589 },
590 onDrop: (info:any) => {
591 console.log('info onDrop', info);
592 const dropKey = info.node.props.eventKey;
593 const dragKey = info.dragNode.props.eventKey;
594 const dropPos = info.node.props.pos.split('-');
595 const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
596
597 console.log('dropKey', dropKey);
598 console.log('dragKey', dragKey);
599 console.log('dropPos', dropPos);
600 console.log('dropPosition', dropPosition);
601
602 const loop = (data:any, key:any, callback:any) => {
603 data.forEach((item:any, index:any, arr:any) => {
604 if (item.key === key) {
605 return callback(item, index, arr);
606 }
607 if (item.children) {
608 return loop(item.children, key, callback);
609 }
610 });
611 };
612 const data = [...gData];
613
614 // Find dragObject
615 let dragObj:any;
616 loop(data, dragKey, (item:any, index:any, arr:any) => {
617 arr.splice(index, 1);
618 dragObj = item;
619 });
620
621 if (info.dropToGap) {
622 let ar:any;
623 let i:any;
624 loop(data, dropKey, (item:any, index:any, arr:any) => {
625 ar = arr;
626 i = index;
627 });
628 if (dropPosition === -1) {
629 ar.splice(i, 0, dragObj);
630 } else {
631 // drag node and drop node in the same level
632 // and drop to the last node
633 if (dragKey.length === dropKey.length && ar.length - 1 === i) {
634 i += 2;
635 }
636 ar.splice(i - 1, 0, dragObj);
637 }
638 } else {
639 loop(data, dropKey, (item:any) => {
640 item.children = item.children || [];
641 // where to insert 示例添加到尾部，可以是随意位置
642 item.children.push(dragObj);
643 });
644 }
645 console.log('data', data)
646 setGData(data);
647 },
648 onSelect: (selectedKeys: React.Key[], info: any) => {
649 console.log('selected', selectedKeys, info);
650 // if(selectedKeys.length !== 0) {
651 setExpandedKeys(selectedKeys)
652 // }
653 },
654
655 closeDialogErrorDragDropFolder: () => {
656 setErrorMsgDragDropFolder("")
657 setOpenDialogErrorDragDropFolder(false)
658 },
659 setUserRole: async () => {
660 // Check whether the user is included in this workspace.
661 const oneOfMyListWorkspaces = await workspaces.filter((workspace: IWorkspace) => workspace.id === Number(workspaceIdByUrl))
662 const getRoleGetByUserIDandWorkspaceID = await apiGetRoleGetByUserIDandWorkspaceID(Number(workspaceIdByUrl));
663
664 if(getRoleGetByUserIDandWorkspaceID.status === 200) {
665 if(oneOfMyListWorkspaces.length !== 0) {
666 if(oneOfMyListWorkspaces[0].created_by === userId) {
667 dispatch(actionSetUserRole(
668 userRoot
669 ));
670 } else {
671 dispatch(actionSetUserRole(
672 getRoleGetByUserIDandWorkspaceID.data.data
673 ));
674 } } else {
675 dispatch(actionSetUserRole(
676 getRoleGetByUserIDandWorkspaceID.data.data
677 ));
678 }
679 } else {
680 if(oneOfMyListWorkspaces.length !== 0) {
681 if(oneOfMyListWorkspaces[0].created_by === userId) {
682 dispatch(actionSetUserRole(
683 userRoot
684 ));
685 } else {
686 dispatch(actionResetUserRole());
687 }
688 } else {
689 dispatch(actionResetUserRole());
690 }
691 }
692 },
693 }
694
695 const changeFolderView = (folder: any) => {
696 if(folder.parent_id === "" || folder.parent_id === undefined || folder.parent_id === null) {
697 history.push(`/workspace/w/${folder.id}/`);
698 } else {
699 history.push(`/workspace/w/${folder.workspace_id}/f/${folder.id}`);
700 }
701 };
702
703 const updateWorkspaceList = async (workspaceName: string) => {
704 let newDataFolders = [];
705 const dataFolder: any = await apiGetAllFolderByWorkspaceId(Number(workspaceIdByUrl));
706 if (dataFolder.status === 200) {
707 newDataFolders = dataFolder.data.data;
708 }
709 dispatch(actionUpdateFolderTree({
710 id: Number(workspaceIdByUrl),
711 name: workspaceName,
712 folders: newDataFolders
713 }))
714 }
715
716 function handleOnRightClick(info:{event: React.MouseEvent<Element, MouseEvent>, node:any}){
717 console.log('event', info.event)
718 console.log('node', info.node)
719 if(info) {
720 if(info.event) {
721 setAnchorEl(info.event.currentTarget);
722 }
723 }
724
725 }
726
727 const handleOnCheck = (checkedKeys: React.Key[], info: any) => {
728 console.log('onCheck', checkedKeys, info);
729
730 }
731
732 function handleOnExpand(expandedKeys:any, expanded:any) {
733 console.log('expandedKeys', expandedKeys)
734 console.log('expanded', expanded)
735 setExpandedKeys(expandedKeys)
736 }
737
738 const handleClose = () => {
739 setAnchorEl(null);
740 };
741
742 const TreeItem = (data: any) => data.map((item:any) => {
743 if (item.children && item.children.length) {
744 return <TreeNode key={item.key} title={item.key}>{TreeItem(item.children)}</TreeNode>;
745 }
746 return <TreeNode key={item.key} title={item.key} />;
747 });
748
749 useEffect(() => {
750 setExpandedKeys([]);
751 // Handle user role in workspace
752 // Every time we change workspace or folder, we will check the user's role in that workspace.
753 // handle.setUserRole();
754 const setDataExpandTree = async () => {
755 let tempFolderPath:any = [`w-${String(workspaceIdByUrl)}`];
756 if(folderIdByUrl !== undefined) {
757 // handle treeview with folder view
758 setExpandedKeys([`w-${String(workspaceIdByUrl)}`])
759 if(folderTrees.length !== 0) {
760 let [...tempFolderTrees]:any = folderTrees;
761 // desctructuring array folderTrees
762 await tempFolderTrees.forEach((folder: any, index:number) => {
763 tempFolderTrees[index] = {
764 folders: tempFolderTrees[index].folders,
765 workspaces_id: tempFolderTrees[index].id, // change properti 'id' to 'workspace_id'
766 name: tempFolderTrees[index].name
767 }
768 })
769
770 let allFolderInCurrentWorkspace: any = tempFolderTrees.filter((wrk: any) => wrk.workspaces_id === Number(workspaceIdByUrl));
771 if(allFolderInCurrentWorkspace.length !== 0) {
772 const getExtractFolderPath = extractFolderPath(allFolderInCurrentWorkspace, Number(folderIdByUrl));
773 getExtractFolderPath.forEach((folder: {
774 title: string,
775 url: {
776 folderId: number | string | null | undefined,
777 workspaceId: number | string | null | undefined,
778 }
779 }) => {
780 tempFolderPath.push(String(folder.url.folderId));
781 })
782 setExpandedKeys(tempFolderPath.reverse())
783 }
784 }
785 } else if(workspaceIdByUrl !== undefined) {
786 setExpandedKeys([`w-${String(workspaceIdByUrl)}`])
787 }
788 }
789 // Handle to set data Tree
790 // Kita hanya mengubah properti yang ada di redux folderTrees untuk disesuaikan dengan library rc-tree agar dapat berjalan dengan baik
791 const setDataGTree = async () => {
792 let tempGData:any = [];
793 const deepChange = (data: IFolderTree) => {
794 console.log('data', data)
795 if(!data.hasOwnProperty('folders') || data.folders.length === 0) {
796 return {
797 title: data.name,
798 key: data.id,
799 isLeaf: true,
800
801 info: {
802 ...data
803 }
804 }
805 } else {
806 data.folders.map((dataTemp: IFolderTree) => {
807 return tempGData.push({
808 title: data.name,
809 key: data.id,
810 info: {
811 ...data
812 },
813 children: deepChange(dataTemp)
814 })
815 })
816 }
817 console.log('tempGData', tempGData)
818 }
819 folderTrees.map((folderTree: IFolderTree, index: number) => {
820 const resultChangeDeep = deepChange(folderTree);
821 console.log('resultChangeDeep', resultChangeDeep)
822 });
823 }
824 setDataGTree();
825 // setDataExpandTree();
826
827 setGData([
828 {
829 title: 'w-0-0',
830 key: 'w-0-0',
831 children: [
832 {
833 title: '0-0',
834 key: '0-0',
835 children: [
836 {
837 title: '0-1',
838 key: '0-1',
839 isLeaf: true
840 },
841 {
842 title: '0-2',
843 key: '0-2',
844 isLeaf: true
845 }
846 ]
847 },
848 {
849 title: '0-3',
850 key: '0-3',
851 children: [
852 {
853 title: '0-4',
854 key: '0-4',
855 isLeaf: true
856 },
857 {
858 title: '0-5',
859 key: '0-5',
860 isLeaf: true
861 }
862 ]
863 },
864 ]
865 },
866 {
867 title: 'w-0-1',
868 key: 'w-0-1',
869 children: [
870 {
871 title: '0-6',
872 key: '0-6',
873 children: [
874 {
875 title: '0-1-1',
876 key: '0-1-1',
877 isLeaf: true
878 },
879 {
880 title: '0-2-1',
881 key: '0-2-1',
882 isLeaf: true
883 }
884 ]
885 },
886 {
887 title: '0-3-1',
888 key: '0-3-1',
889 children: [
890 {
891 title: '0-4-1',
892 key: '0-4-1',
893 isLeaf: true
894 },
895 {
896 title: '0-5-1',
897 key: '0-5-1',
898 isLeaf: true
899 }
900 ]
901 },
902 ]
903 },
904 {
905 title: 'w-0-3',
906 key: 'w-0-3',
907 }
908 ]);
909 }, []);
910
911
912 if (folderTrees.length === 0) {
913 return (
914 <div className={classes.emptyDataSidebar}>
915 No Workspace Found
916 </div>
917 );
918 } else {
919 return (
920 <Fragment>
921 <div className={classes.canvasRelative}>
922 <div className={classes.treeContainer}>
923 {/* {folderTrees.map((parent: any, index:number) => { */}
924 {gData.map((parent: any, index:number) => {
925 return (
926 <DirectoryTree
927 key={index}
928 autoExpandParent={true}
929 className="draggable-tree"
930 defaultExpandedKeys={expandedKeys}
931 // expandedKeys={expandedKeys}
932 draggable
933 blockNode
934 onDragEnter={handle.onDragEnter}
935 onDrop={handle.onDrop}
936 treeData={[parent]}
937 onRightClick={handleOnRightClick}
938 selectable={true}
939 // showLine={true}
940 defaultSelectedKeys={["w-0-0"]}
941 onSelect={handle.onSelect}
942 // onCheck={handleOnCheck}
943 multiple
944 onExpand={handleOnExpand}
945 />
946
947 )
948 })}
949 </div>
950 </div>
951 <Dialog
952 openDialog={openDialogErrorDragDropFolder}
953 title={"Error Drag Drop Folder"}
954 onClose={handle.closeDialogErrorDragDropFolder}
955 actions={
956 <Button
957 color="danger"
958 textColor="light"
959 fontSize="inherit"
960 disableElevation={true}
961 onClick={handle.closeDialogErrorDragDropFolder}
962 >
963 OK
964 </Button>
965 }
966 >
967 <span className={classes.errorMsgDragDropFolder}>{errorMsgDragDropFolder}</span>
968 </Dialog>
969 <StyledMenu
970 id="customized-menu"
971 anchorEl={anchorEl}
972 keepMounted
973 open={Boolean(anchorEl)}
974 onClose={handleClose}
975 >
976 <StyledMenuItem>
977 <ListItemIcon>
978 <SendIcon fontSize="small" />
979 </ListItemIcon>
980 <ListItemText primary="Sent mail" />
981 </StyledMenuItem>
982 <StyledMenuItem>
983 <ListItemIcon>
984 <DraftsIcon fontSize="small" />
985 </ListItemIcon>
986 <ListItemText primary="Drafts" />
987 </StyledMenuItem>
988 <StyledMenuItem>
989 <ListItemIcon>
990 <InboxIcon fontSize="small" />
991 </ListItemIcon>
992 <ListItemText primary="Inbox" />
993 </StyledMenuItem>
994 </StyledMenu>
995
996 </Fragment>
997 );
998 }
999}
1000
1001export default SidebarTree;