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

Commit63534ca

Browse files
committed
Added removing module.
1 parentb6e07d5 commit63534ca

File tree

2 files changed

+163
-46
lines changed

2 files changed

+163
-46
lines changed

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

Lines changed: 146 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ import {
1313
PointIcon,
1414
PopupCard,
1515
UnfoldIcon,
16-
FileFolderIcon
16+
FileFolderIcon,messageInstance,CustomModal
1717
}from"lowcoder-design";
18-
import{trans}from"i18n";
18+
import{trans,transToNode}from"i18n";
1919
import{draggingUtils}from"layout/draggingUtils";
20-
import{CSSProperties,useContext,useEffect,useState}from"react";
20+
importReact,{CSSProperties,useContext,useEffect,useState}from"react";
2121
import{useDispatch,useSelector}from"react-redux";
22-
import{fetchAllModules}from"redux/reduxActions/applicationActions";
22+
import{fetchAllModules,recycleApplication}from"redux/reduxActions/applicationActions";
2323
importstyledfrom"styled-components";
2424
importCreateAppButtonfrom"components/CreateAppButton";
2525
import{TransparentImg}from"util/commonUtils";
@@ -31,12 +31,20 @@ import {showAppSnapshotSelector} from "@lowcoder-ee/redux/selectors/appSnapshotS
3131
import{DraggableTreeNode,DraggableTreeNodeItemRenderProps}from"@lowcoder-ee/components/DraggableTree/types";
3232
importRefTreeCompfrom"@lowcoder-ee/comps/comps/refTreeComp";
3333
import{EmptyContent}from"components/EmptyContent";
34+
import{moveToFolder}from"@lowcoder-ee/redux/reduxActions/folderActions";
35+
import{HomeResInfo}from"@lowcoder-ee/util/homeResUtils";
3436
constItemWrapper=styled.div`
3537
display: flex;
3638
flex-direction: row;
3739
&:last-child {
3840
margin-bottom: 0;
3941
}
42+
.module-container {
43+
//width: 70px;
44+
display: flex;
45+
justify-content: space-between;
46+
text-align: left;
47+
}
4048
.module-icon {
4149
4250
display: flex;
@@ -52,6 +60,8 @@ const ItemWrapper = styled.div`
5260
overflow: hidden;
5361
}
5462
.module-name {
63+
//flex-grow: 1;
64+
//margin-right: 8px;
5565
line-height: 1.5;
5666
font-size: 13px;
5767
overflow: hidden;
@@ -77,8 +87,8 @@ function buildTree(elementRecord: Record<string, Array<ApplicationMeta | FolderM
7787
constelements=elementRecord[""];
7888
constelementMap:Record<string,NodeType>={};
7989
letrootNode:NodeType={
80-
name:"",
81-
id:"",
90+
name:"root",
91+
id:"root",
8292
isFolder:true,
8393
children:[],
8494
rename:val=>rootNode.name=val,
@@ -99,7 +109,7 @@ function buildTree(elementRecord: Record<string, Array<ApplicationMeta | FolderM
99109

100110
// Process subapplications inside the folder
101111
for(constappofelement.subApplications||[]){
102-
if(app.applicationType===AppTypeEnum.Module){
112+
if(!!app&&app.applicationType===AppTypeEnum.Module){
103113
constappNode:NodeType={
104114
name:app.name,
105115
id:app.applicationId,
@@ -142,15 +152,15 @@ function buildTree(elementRecord: Record<string, Array<ApplicationMeta | FolderM
142152
rootNode.children.push(elementMap[element.applicationId]);
143153
}
144154
}
145-
console.log(rootNode.children.sort((a,b)=>{
155+
rootNode.children.sort((a,b)=>{
146156
if(a.isFolder&&!b.isFolder){
147157
return-1;// a is a isFolder and should come first
148158
}elseif(!a.isFolder&&b.isFolder){
149159
return1;// b is a folder and should come first
150160
}else{
151161
return0;// both are folders or both are not, keep original order
152162
}
153-
}));
163+
});
154164
returnrootNode;
155165
}
156166

@@ -168,6 +178,7 @@ function ModuleItem(props: ModuleItemProps) {
168178
draggable
169179
onDragStart={(e)=>{
170180
console.log(meta);
181+
e.stopPropagation();
171182
e.dataTransfer.setData("compType",compType);
172183
e.dataTransfer.setDragImage(TransparentImg,0,0);
173184
draggingUtils.setData("compType",compType);
@@ -183,11 +194,13 @@ function ModuleItem(props: ModuleItemProps) {
183194
props.onDrag(compType);
184195
}}
185196
>
186-
<divclassName="module-icon">
187-
<ModuleDocIconwidth="19px"height="19px"/>
188-
</div>
189-
<divclassName="module-content">
190-
<divclassName="module-name">{props.meta.name}</div>
197+
<divclassName="module-container">
198+
<divclassName="module-icon">
199+
<ModuleDocIconwidth="19px"height="19px"/>
200+
</div>
201+
<divclassName="module-content">
202+
<divclassName="module-name">{props.meta.name}</div>
203+
</div>
191204
</div>
192205
</ItemWrapper>
193206
);
@@ -372,28 +385,29 @@ function ModuleSidebarItem(props: ModuleSidebarItemProps) {
372385
<ColumnDivonClick={handleClickItem}$color={isSelected}$isOverlay={isOverlay}>
373386
<HighlightBorder$active={isOver&&isFolder}$level={level}$foldable={isFolder}>
374387
{isFolder&&<FoldIconBtn>{!isFolded ?<FoldedIcon/> :<UnfoldIcon/>}</FoldIconBtn>}
375-
{isFolder ?
376-
<>
377-
<FileFolderIcon/>
378-
<divstyle={{flexGrow:1,marginRight:"8px",width:"calc(100% - 62px)"}}>
379-
<EditText
380-
text={name}
381-
forceClickIcon={isFolder}
382-
disabled={!isSelected||readOnly||isOverlay}
383-
onFinish={handleFinishRename}
384-
onChange={handleNameChange}
385-
onEditStateChange={(editing)=>setEditing(editing)}
386-
/>
387-
<PopupCard
388-
editorFocus={!!error&&editing}
389-
title={error ?trans("error") :""}
390-
content={error}
391-
hasError={!!error}
392-
/>
393-
</div></> :<ModuleItemonDrag={onDrag}key={id}meta={resComp.module!}/>
394-
}
388+
{isFolder ?
389+
<>
390+
<FileFolderIcon/>
391+
<divstyle={{flexGrow:1,marginRight:"8px",width:"calc(100% - 62px)"}}>
392+
<EditText
393+
text={name}
394+
forceClickIcon={isFolder}
395+
disabled={!isSelected||readOnly||isOverlay}
396+
onFinish={handleFinishRename}
397+
onChange={handleNameChange}
398+
onEditStateChange={(editing)=>setEditing(editing)}
399+
/>
400+
<PopupCard
401+
editorFocus={!!error&&editing}
402+
title={error ?trans("error") :""}
403+
content={error}
404+
hasError={!!error}
405+
/>
406+
</div>
407+
</> :
408+
<ModuleItemonDrag={onDrag}key={id}meta={resComp.module!}/>}
395409
{!readOnly&&!isOverlay&&(
396-
<EditPopovercopy={!isFolder ?onCopy :undefined}del={onDelete}>
410+
<EditPopovercopy={!isFolder ?onCopy :undefined}del={()=>onDelete()}>
397411
<IcontabIndex={-1}/>
398412
</EditPopover>
399413
)}
@@ -404,9 +418,10 @@ function ModuleSidebarItem(props: ModuleSidebarItemProps) {
404418

405419
exportdefaultfunctionModulePanel(){
406420
constdispatch=useDispatch();
407-
constelements=useSelector(folderElementsSelector);
421+
letelements=useSelector(folderElementsSelector);
422+
// const reload = () => elements = useSelector(folderElementsSelector);
408423
const{ onDrag, searchValue}=useContext(RightContext);
409-
424+
const[deleteFlag,setDeleteFlag]=useState(false);
410425
useEffect(()=>{
411426
dispatch(fetchAllModules({}));
412427
},[dispatch]);
@@ -433,9 +448,12 @@ export default function ModulePanel() {
433448
}
434449

435450
constgetById=(id:string):NodeType|undefined=>getByIdFromNode(tree,id);
451+
letpopedItem :DraggableTreeNode<any>[]=[];
452+
letpopedItemSourceId=""
436453
constconvertRefTree=(treeNode:NodeType)=>{
437454
constmoduleResComp=getById(treeNode.id);
438455
constcurrentNodeType=moduleResComp?.isFolder;
456+
439457
constchildrenItems=treeNode.children
440458
.map((i)=>convertRefTree(iasNodeType))
441459
.filter((i):i isDraggableTreeNode<NodeType>=>!!i);
@@ -473,21 +491,73 @@ export default function ModulePanel() {
473491
data:moduleResComp,
474492
addSubItem(value){
475493
console.log("addSubItem",node.id,value,node);
494+
// node.items.push(value)
476495
// const pushAction = node.items.pushAction({ value: value.id() });
477496
// node.items.dispatch(pushAction);
478497
},
479498
deleteItem(index){
480-
console.log("deleteItem",node.id,index);
499+
console.log("deleteItem",node,index);
500+
popedItemSourceId=node.id!;
501+
if(!deleteFlag){
502+
popedItem=node.items.splice(index,1);
503+
console.log(popedItem);
504+
}
505+
481506
// const deleteAction = node.children.items.deleteAction(index);
482507
// node.children.items.dispatch(deleteAction);
483508
},
484509
addItem(value){
485-
console.log("addItem",node.id,value);
510+
console.log("additem","value",value,node);
511+
node.items.push(popedItem[0])
512+
popedItem=[];
486513
// const pushAction = node.children.items.pushAction({ value: value.id() });
487514
// node.children.items.dispatch(pushAction);
515+
// if (popedItem[0]){
516+
// dispatch(
517+
// moveToFolder(
518+
// {
519+
// sourceFolderId: popedItemSourceId,
520+
// sourceId: popedItem[0].id!,
521+
// folderId: node.id!,
522+
// moveFlag: true
523+
// },
524+
// () => {
525+
//
526+
//
527+
// },
528+
// () => {}
529+
// )
530+
// );
531+
// node.items.push(popedItem[0]);
532+
// popedItemSourceId = "";
533+
// popedItem = [];
534+
// }
488535
},
489536
moveItem(from,to){
490-
console.log("node",node);
537+
console.log("moveItem",node,from,to,node.id);
538+
if(popedItem[0]){
539+
node.items.push(popedItem[0]);
540+
541+
dispatch(
542+
moveToFolder(
543+
{
544+
sourceFolderId:popedItemSourceId,
545+
sourceId:popedItem[0].id!,
546+
folderId:node.id!,
547+
moveFlag:true
548+
},
549+
()=>{
550+
551+
552+
},
553+
()=>{}
554+
)
555+
);
556+
popedItemSourceId="";
557+
popedItem=[];
558+
559+
}
560+
// popedItem = [];
491561
// const moveAction = node.children.items.arrayMoveAction(from, to);
492562
// node.children.items.dispatch(moveAction);
493563
},
@@ -505,18 +575,51 @@ export default function ModulePanel() {
505575
};
506576

507577
constnode=convertRefTree(tree);
508-
578+
console.log("started!!!!",node)
509579
functiononCopy(type:boolean,id:string){
510580
console.log("onCopy",type,id);
511581
}
512582

513583
functiononSelect(type:boolean,id:string,meta:any){
514584
console.log("onSelect",type,id,meta)
515-
return<ModuleItemonDrag={onDrag}key={id}meta={meta}/>
585+
//return <ModuleItem onDrag={onDrag} key={id} meta={meta} />
516586
}
517587

518588
functiononDelete(type:boolean,id:string){
519-
console.log("onDelete",type,id);
589+
setDeleteFlag(true);
590+
console.log("1111111111111111111111111",type,id,node);
591+
if(type){
592+
alert(1);
593+
}
594+
else{
595+
CustomModal.confirm({
596+
title:trans("home.moveToTrash"),
597+
content:transToNode("home.moveToTrashSubTitle",{
598+
type:"",
599+
name:"This file",
600+
}),
601+
onConfirm:()=>{
602+
dispatch(
603+
recycleApplication(
604+
{
605+
applicationId:id,
606+
folderId:popedItemSourceId,
607+
},
608+
()=>{
609+
messageInstance.success(trans("success"))
610+
611+
},
612+
()=>{
613+
}
614+
)
615+
)
616+
setDeleteFlag(false)
617+
},
618+
confirmBtnType:"delete",
619+
okText:trans("home.moveToTrash"),
620+
onCancel:()=>setDeleteFlag(false)
621+
});
622+
}
520623
returntrue;
521624
}
522625

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,24 @@ export const folderReducer = createReducer(initialState, {
3737
state:FolderReduxState,
3838
action:ReduxAction<RecycleApplicationPayload>
3939
):FolderReduxState=>{
40+
constdeleteArray :number[]=[];
4041
constelements={ ...state.folderElements};
41-
elements[action.payload.folderId??""]=elements[action.payload.folderId??""]?.filter(
42-
(e)=>e.folder||(!e.folder&&e.applicationId!==action.payload.applicationId)
43-
);
42+
elements[""]=elements[""].map((item,index)=>{
43+
if(item.folder){
44+
consttempSubApplications=item.subApplications?.filter(e=>e.applicationId!==action.payload.applicationId);
45+
return{ ...item,subApplications:tempSubApplications};
46+
}else{
47+
if(item.applicationId!==action.payload.applicationId)
48+
returnitem;
49+
else{
50+
deleteArray.push(index);
51+
returnitem;
52+
}
53+
}
54+
});
55+
deleteArray.map(item=>{
56+
elements[""].splice(item,1);
57+
})
4458
return{
4559
...state,
4660
folderElements:elements,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp