Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitff55d93

Browse files
committed
Fxied ability to module drag and drop in right panel.
1 parentfdc0145 commitff55d93

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
constelementMap:Record<string,NodeType>={};
8484
letrootNode: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
constdispatch=useDispatch();
499499
letelements=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+
letsourceFolderId :string="";
504+
letsourceId :string="";
505+
letfolderId :string="";
506+
consttree=buildTree(elements);
507+
constgetById=(id:string):NodeType|undefined=>getByIdFromNode(tree,id);
508+
letpopedItem :DraggableTreeNode<any>[]=[];
509+
letpopedItemSourceId="";
510+
504511
useEffect(()=>{
505-
dispatch(fetchAllModules({}));
512+
dispatch(fetchAllModules({}));
506513
},[dispatch]);
507514

515+
constmoveModule=()=>{
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+
throwerror;
541+
}finally{
542+
folderId="";
543+
sourceId="";
544+
sourceFolderId="";
545+
}
546+
547+
}
508548

509-
//Convert elements into tree
510-
consttree=buildTree(elements);
511549
constgetByIdFromNode=(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-
constgetById=(id:string):NodeType|undefined=>getByIdFromNode(tree,id);
530-
letpopedItem :DraggableTreeNode<any>[]=[];
531-
letpopedItemSourceId=""
532-
constconvertRefTree=(treeNode:NodeType)=>{
566+
constconvertRefTree=(treeNode:NodeType)=>{//Convert elements into tree
533567
constmoduleResComp=getById(treeNode.id);
534568
constcurrentNodeType=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
returnnode;
654638
};
655-
656639
constnode=convertRefTree(tree);
657640
functiononCopy(type:boolean,id:string){
658641
console.log("onCopy",type,id);
@@ -665,8 +648,8 @@ export default function ModulePanel() {
665648
}
666649

667650
functiononDelete(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
letelements={ ...state.folderElements};
151-
lettempIndex:number|undefined;
152-
lettempNode:any;
153-
lettemp=elements[""].map((item,index)=>{
154-
if(item.folderId===action.payload.sourceFolderId&&item.folder){
155-
156-
consttempSubApplications=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+
consttempItem=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
returnitem;
161+
})
162+
}else{
163+
lettempIndex:number|undefined;
164+
lettempNode:any;
165+
lettemp=elements[""].map((item,index)=>{
166+
if(item.folderId===sourceFolderId&&item.folder){
167+
consttempSubApplications=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+
returnitem;
180+
}
181+
returnitem;
182+
});
183+
if(tempIndex!==undefined){
184+
consttargetItem=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-
returnitem;
171-
});
172-
if(tempIndex!==undefined){
173-
consttargetItem=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)
[8]ページ先頭
©2009-2025 Movatter.jp