Skip to content

Commit 63534ca

Browse files
Imiss-U1025Imiss-U1025
committed
Added removing module.
1 parent b6e07d5 commit 63534ca

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+
import React, {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
import styled from "styled-components";
2424
import CreateAppButton from "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
import RefTreeComp from "@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
const ItemWrapper = 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
const elements = elementRecord[""];
7888
const elementMap: Record<string, NodeType> = {};
7989
let rootNode: 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 (const app of element.subApplications || []) {
102-
if (app.applicationType === AppTypeEnum.Module) {
112+
if (!!app && app.applicationType === AppTypeEnum.Module) {
103113
const appNode: 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
} else if (!a.isFolder && b.isFolder) {
149159
return 1; // b is a folder and should come first
150160
} else {
151161
return 0; // both are folders or both are not, keep original order
152162
}
153-
}));
163+
});
154164
return rootNode;
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-
<div className="module-icon">
187-
<ModuleDocIcon width="19px" height="19px"/>
188-
</div>
189-
<div className="module-content">
190-
<div className="module-name">{props.meta.name}</div>
197+
<div className="module-container" >
198+
<div className="module-icon">
199+
<ModuleDocIcon width="19px" height="19px"/>
200+
</div>
201+
<div className="module-content">
202+
<div className="module-name">{props.meta.name}</div>
203+
</div>
191204
</div>
192205
</ItemWrapper>
193206
);
@@ -372,28 +385,29 @@ function ModuleSidebarItem(props: ModuleSidebarItemProps) {
372385
<ColumnDiv onClick={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-
<div style={{ 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></> : <ModuleItem onDrag={onDrag} key={id} meta={resComp.module!} />
394-
}
388+
{ isFolder ?
389+
<>
390+
<FileFolderIcon />
391+
<div style={{ 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+
<ModuleItem onDrag={onDrag} key={id} meta={resComp.module!} /> }
395409
{!readOnly && !isOverlay && (
396-
<EditPopover copy={!isFolder ? onCopy : undefined} del={onDelete}>
410+
<EditPopover copy={!isFolder ? onCopy : undefined} del={() => onDelete()}>
397411
<Icon tabIndex={-1} />
398412
</EditPopover>
399413
)}
@@ -404,9 +418,10 @@ function ModuleSidebarItem(props: ModuleSidebarItemProps) {
404418

405419
export default function ModulePanel() {
406420
const dispatch = useDispatch();
407-
const elements = useSelector(folderElementsSelector);
421+
let elements = 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
const getById = (id: string): NodeType | undefined => getByIdFromNode(tree, id);
451+
let popedItem : DraggableTreeNode<any>[] = [];
452+
let popedItemSourceId = ""
436453
const convertRefTree = (treeNode: NodeType) => {
437454
const moduleResComp = getById(treeNode.id);
438455
const currentNodeType = moduleResComp?.isFolder;
456+
439457
const childrenItems = treeNode.children
440458
.map((i) => convertRefTree(i as NodeType))
441459
.filter((i): i is DraggableTreeNode<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
const node = convertRefTree(tree);
508-
578+
console.log("started!!!!", node)
509579
function onCopy(type: boolean, id: string) {
510580
console.log("onCopy", type, id);
511581
}
512582

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

518588
function onDelete(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
return true;
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+
const deleteArray : number[] = [];
4041
const elements = { ...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+
const tempSubApplications = item.subApplications?.filter(e => e.applicationId !== action.payload.applicationId);
45+
return { ...item, subApplications: tempSubApplications };
46+
} else {
47+
if (item.applicationId !== action.payload.applicationId)
48+
return item;
49+
else {
50+
deleteArray.push(index);
51+
return item;
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)