Skip to content

Commit ff55d93

Browse files
Imiss-U1025Imiss-U1025
committed
Fxied ability to module drag and drop in right panel.
1 parent fdc0145 commit ff55d93

File tree

2 files changed

+94
-98
lines changed

2 files changed

+94
-98
lines changed

‎client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx‎

Lines changed: 54 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function buildTree(elementRecord: Record<string, Array<ApplicationMeta | FolderM
8383
const elementMap: Record<string, NodeType> = {};
8484
let rootNode: NodeType = {
8585
name: "root",
86-
id: "root",
86+
id: "",
8787
isFolder: true,
8888
children: [],
8989
rename: val => rootNode.name = val,
@@ -498,16 +498,54 @@ export default function ModulePanel() {
498498
const dispatch = useDispatch();
499499
let elements = useSelector(folderElementsSelector);
500500
const { onDrag, searchValue } = useContext(RightContext);
501-
const [deleteFlag, setDeleteFlag] = useState(false);
502501
const [selectedID, setSelectedID] = useState("");
503502
const [selectedType, setSelectedType] = useState(false);
503+
let sourceFolderId : string = "";
504+
let sourceId : string = "";
505+
let folderId : string = "";
506+
const tree = buildTree(elements);
507+
const getById = (id: string): NodeType | undefined => getByIdFromNode(tree, id);
508+
let popedItem : DraggableTreeNode<any>[] = [];
509+
let popedItemSourceId = "";
510+
504511
useEffect(() => {
505-
dispatch(fetchAllModules({}));
512+
dispatch(fetchAllModules({}));
506513
}, [dispatch]);
507514

515+
const moveModule = () => {
516+
console.log({sourceFolderId: sourceFolderId,
517+
sourceId: sourceId,
518+
folderId: folderId,
519+
moveFlag: true})
520+
try{
521+
if (sourceId !== "") {
522+
dispatch(
523+
moveToFolder(
524+
{
525+
sourceFolderId: sourceFolderId!,
526+
sourceId: sourceId!,
527+
folderId: folderId!,
528+
moveFlag: true
529+
},
530+
() => {
531+
532+
533+
},
534+
() => {}
535+
)
536+
);
537+
}
538+
} catch (error) {
539+
console.error("Error: Delete module in extension:", error);
540+
throw error;
541+
} finally {
542+
folderId = "";
543+
sourceId = "";
544+
sourceFolderId = "";
545+
}
546+
547+
}
508548

509-
//Convert elements into tree
510-
const tree = buildTree(elements);
511549
const getByIdFromNode = (root: NodeType | null, id: string): NodeType | undefined => {
512550
if (!root) {
513551
return;
@@ -525,11 +563,7 @@ export default function ModulePanel() {
525563
}
526564
return;
527565
}
528-
529-
const getById = (id: string): NodeType | undefined => getByIdFromNode(tree, id);
530-
let popedItem : DraggableTreeNode<any>[] = [];
531-
let popedItemSourceId = ""
532-
const convertRefTree = (treeNode: NodeType) => {
566+
const convertRefTree = (treeNode: NodeType) => { //Convert elements into tree
533567
const moduleResComp = getById(treeNode.id);
534568
const currentNodeType = moduleResComp?.isFolder;
535569

@@ -570,75 +604,25 @@ export default function ModulePanel() {
570604
data: moduleResComp,
571605
addSubItem(value) {
572606
console.log("addSubItem", node.id, value, node);
607+
folderId = node.id!;
608+
moveModule();
573609
// node.items.push(value)
574610
// const pushAction = node.items.pushAction({ value: value.id() });
575611
// node.items.dispatch(pushAction);
576612
},
577613
deleteItem(index) {
578-
console.log("deleteItem", node, index);
579-
popedItemSourceId = node.id!;
580-
if(!deleteFlag){
581-
popedItem = node.items.splice(index, 1);
582-
console.log(popedItem);
583-
}
614+
console.log("deleteItem", index, node);
615+
sourceFolderId = node.id!;
616+
sourceId = node.items[index].id!;
584617

585-
// const deleteAction = node.children.items.deleteAction(index);
586-
// node.children.items.dispatch(deleteAction);
587618
},
588619
addItem(value) {
589-
console.log("additem", "value", value, node);
590-
node.items.push(popedItem[0])
591-
popedItem = [];
592-
// const pushAction = node.children.items.pushAction({ value: value.id() });
593-
// node.children.items.dispatch(pushAction);
594-
// if (popedItem[0]){
595-
// dispatch(
596-
// moveToFolder(
597-
// {
598-
// sourceFolderId: popedItemSourceId,
599-
// sourceId: popedItem[0].id!,
600-
// folderId: node.id!,
601-
// moveFlag: true
602-
// },
603-
// () => {
604-
//
605-
//
606-
// },
607-
// () => {}
608-
// )
609-
// );
610-
// node.items.push(popedItem[0]);
611-
// popedItemSourceId = "";
612-
// popedItem = [];
613-
// }
620+
console.log("additem", "value", value, "node", node);
621+
folderId = node.id!;
622+
moveModule();
614623
},
615624
moveItem(from, to) {
616625
console.log("moveItem", node, from, to, node.id);
617-
if (popedItem[0]){
618-
node.items.push(popedItem[0]);
619-
620-
dispatch(
621-
moveToFolder(
622-
{
623-
sourceFolderId: popedItemSourceId,
624-
sourceId: popedItem[0].id!,
625-
folderId: node.id!,
626-
moveFlag: true
627-
},
628-
() => {
629-
630-
631-
},
632-
() => {}
633-
)
634-
);
635-
popedItemSourceId = "";
636-
popedItem = [];
637-
638-
}
639-
// popedItem = [];
640-
// const moveAction = node.children.items.arrayMoveAction(from, to);
641-
// node.children.items.dispatch(moveAction);
642626
},
643627
};
644628

@@ -652,7 +636,6 @@ export default function ModulePanel() {
652636
}
653637
return node;
654638
};
655-
656639
const node = convertRefTree(tree);
657640
function onCopy(type: boolean, id: string) {
658641
console.log("onCopy", type, id);
@@ -665,8 +648,8 @@ export default function ModulePanel() {
665648
}
666649

667650
function onDelete(type: boolean, id: string, node: NodeType) {
668-
setDeleteFlag(true);
669651
console.log("1111111111111111111111111", type, id, node);
652+
670653
if (type) {
671654
if (node.children.length) {
672655
messageInstance.error(trans("module.folderNotEmpty"))
@@ -712,11 +695,10 @@ export default function ModulePanel() {
712695
}
713696
)
714697
)
715-
setDeleteFlag(false)
716698
},
717699
confirmBtnType: "delete",
718700
okText: trans("home.moveToTrash"),
719-
onCancel: () => setDeleteFlag(false)
701+
onCancel: () => {}
720702
});
721703
} catch (error) {
722704
console.error("Error: Delete module in extension:", error);

‎client/packages/lowcoder/src/redux/reducers/uiReducers/folderReducer.ts‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export const folderReducer = createReducer(initialState, {
7171
return { ...e, ...action.payload };
7272
} else {
7373
if (e.folder) {
74-
// console.log(e.subApplications);
7574
if (e.subApplications?.map(item => {
7675
if (item.applicationId === action.payload.applicationId)
7776
item.name = action.payload.name
@@ -148,34 +147,49 @@ export const folderReducer = createReducer(initialState, {
148147
action: ReduxAction<MoveToFolderPayload>
149148
): FolderReduxState => {
150149
let elements = { ...state.folderElements };
151-
let tempIndex: number | undefined;
152-
let tempNode: any;
153-
let temp = elements[""].map((item, index) => {
154-
if (item.folderId === action.payload.sourceFolderId && item.folder) {
155-
156-
const tempSubApplications = item.subApplications?.filter(e =>
157-
(e.folder && e.folderId !== action.payload.sourceId) ||
158-
(!e.folder && e.applicationId !== action.payload.sourceId)
159-
);
160-
tempNode = item.subApplications?.filter(e =>
161-
(e.folder && e.folderId === action.payload.sourceId) ||
162-
(!e.folder && e.applicationId === action.payload.sourceId)
163-
);
164-
return { ...item, subApplications: tempSubApplications };
165-
}
166-
if (item.folderId === action.payload.folderId && item.folder) {
167-
tempIndex = index;
150+
const { sourceId, folderId, sourceFolderId } = action.payload;
151+
if(sourceFolderId === "") {
152+
const tempItem = elements[""]?.find(e =>
153+
!e.folder && e.applicationId === sourceId
154+
);
155+
elements[""] = elements[""]?.filter(e => e.folder || (e.applicationId !== sourceId));
156+
elements[""] = elements[""].map(item => {
157+
if(item.folder && item.folderId === folderId && tempItem !== undefined && !tempItem.folder) {
158+
item.subApplications?.push(tempItem);
159+
}
168160
return item;
161+
})
162+
} else{
163+
let tempIndex: number | undefined;
164+
let tempNode: any;
165+
let temp = elements[""].map((item, index) => {
166+
if (item.folderId === sourceFolderId && item.folder) {
167+
const tempSubApplications = item.subApplications?.filter(e =>
168+
(e.folder && e.folderId !== sourceId) ||
169+
(!e.folder && e.applicationId !== sourceId)
170+
);
171+
tempNode = item.subApplications?.filter(e =>
172+
(e.folder && e.folderId === sourceId) ||
173+
(!e.folder && e.applicationId === sourceId)
174+
);
175+
return { ...item, subApplications: tempSubApplications };
176+
}
177+
if (item.folderId === folderId && item.folder) {
178+
tempIndex = index;
179+
return item;
180+
}
181+
return item;
182+
});
183+
if (tempIndex !== undefined) {
184+
const targetItem = temp[tempIndex];
185+
if (targetItem.folder && Array.isArray(targetItem.subApplications)) {
186+
targetItem.subApplications.push(tempNode[0]);
187+
}
188+
} else {
189+
temp.push(tempNode[0]);
169190
}
170-
return item;
171-
});
172-
if (tempIndex !== undefined) {
173-
const targetItem = temp[tempIndex];
174-
if (targetItem.folder && Array.isArray(targetItem.subApplications)) {
175-
targetItem.subApplications.push(tempNode[0]);
176-
}
191+
elements[""] = temp;
177192
}
178-
elements[""] = temp;
179193
return {
180194
...state,
181195
folderElements: elements,

0 commit comments

Comments
 (0)