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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy