Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reverted extension. #1317

Merged
merged 1 commit into from
Nov 19, 2024
Merged

Reverted extension. #1317

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
365 changes: 121 additions & 244 deletions client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import CreateAppButton from "components/CreateAppButton";
import { EmptyContent } from "components/EmptyContent";
import { ApplicationMeta, AppTypeEnum, FolderMeta } from "constants/applicationConstants";
import { ApplicationMeta, AppTypeEnum } from "constants/applicationConstants";
import { APPLICATION_VIEW_URL } from "constants/routesURL";
import {
ActiveTextColor,
BorderActiveShadowColor,
BorderColor,
GreyTextColor,
ActiveTextColor,
BorderActiveShadowColor,
BorderColor,
GreyTextColor,
} from "constants/style";
import { FolderIcon, ModuleDocIcon } from "lowcoder-design";
import { ModuleDocIcon } from "lowcoder-design";
import { trans } from "i18n";
import { draggingUtils } from "layout/draggingUtils";
import { useContext, useEffect, useState } from "react";
import { useContext, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchAllModules } from "redux/reduxActions/applicationActions";
import styled from "styled-components";
Expand All @@ -21,259 +21,136 @@ import { formatTimestamp } from "util/dateTimeUtils";
import { RightContext } from "./rightContext";
import { modulesSelector } from "../../../redux/selectors/applicationSelector";
import { ComListTitle, ExtensionContentWrapper } from "./styledComponent";
import { foldersSelector } from "@lowcoder-ee/redux/selectors/folderSelector";

const ItemWrapper = styled.div`
display: flex;
flex-direction: row;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
&:hover {
cursor: grab;
display: flex;
flex-direction: row;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
&:hover {
cursor: grab;
.module-icon {
box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
border-color: ${BorderActiveShadowColor};
transform: scale(1.2);
}
.module-name {
color: ${ActiveTextColor};
}
}
.module-icon {
box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
border-color: ${BorderActiveShadowColor};
transform: scale(1.2);
transition: all 200ms linear;
margin-right: 8px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid ${BorderColor};
border-radius: 4px;
}
.module-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
}
.module-name {
color: ${ActiveTextColor};
line-height: 1.5;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.module-icon {
transition: all 200ms linear;
margin-right: 8px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid ${BorderColor};
border-radius: 4px;
}
.module-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
}
.module-name {
line-height: 1.5;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.module-desc {
line-height: 1.5;
font-size: 12px;
color: ${GreyTextColor};
}
`;

const FolderWrapper = styled.div`
display: flex;
flex-direction: row;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
&:hover {
box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
border-color: ${BorderActiveShadowColor};
cursor: pointer;
transform: scale(1.03);
.folder-name {
color: ${ActiveTextColor};
.module-desc {
line-height: 1.5;
font-size: 12px;
color: ${GreyTextColor};
}
}
.folder-icon {
transition: all 200ms linear;
margin-right: 8px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.folder-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
}
.folder-name {
line-height: 1.5;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.folder-desc {
line-height: 1.5;
font-size: 12px;
color: ${GreyTextColor};
}
`;

interface ModuleItemProps {
meta: ApplicationMeta;
onDrag: (type: string) => void;
}

interface FolderItemProps {
meta: FolderMeta;
meta: ApplicationMeta;
onDrag: (type: string) => void;
}

function ModuleItem(props: ModuleItemProps) {
const compType = "module";
const { meta } = props;
return (
<ItemWrapper
draggable
onDragStart={(e) => {
e.dataTransfer.setData("compType", compType);
e.dataTransfer.setDragImage(TransparentImg, 0, 0);
draggingUtils.setData("compType", compType);
draggingUtils.setData(
"compLayout",
meta.containerSize
? { w: meta.containerSize.width, h: meta.containerSize.height }
: undefined
);
draggingUtils.setData("compInitialValue", {
appId: props.meta.applicationId,
});
props.onDrag(compType);
}}
>
<div className="module-icon">
<ModuleDocIcon width="19px" />
</div>
<div className="module-content">
<div className="module-name">{props.meta.name}</div>
<div className="module-desc">{formatTimestamp(props.meta.createAt)}</div>
</div>
</ItemWrapper>
);
const compType = "module";
const { meta } = props;
return (
<ItemWrapper
draggable
onDragStart={(e) => {
e.dataTransfer.setData("compType", compType);
e.dataTransfer.setDragImage(TransparentImg, 0, 0);
draggingUtils.setData("compType", compType);
draggingUtils.setData(
"compLayout",
meta.containerSize
? { w: meta.containerSize.width, h: meta.containerSize.height }
: undefined
);
draggingUtils.setData("compInitialValue", {
appId: props.meta.applicationId,
});
props.onDrag(compType);
}}
>
<div className="module-icon">
<ModuleDocIcon width="19px" />
</div>
<div className="module-content">
<div className="module-name">{props.meta.name}</div>
<div className="module-desc">{formatTimestamp(props.meta.createAt)}</div>
</div>
</ItemWrapper>
);
}

export default function ModulePanel() {
const dispatch = useDispatch();
const modules = useSelector(modulesSelector);
const folders = useSelector(foldersSelector);
const { onDrag, searchValue } = useContext(RightContext);
const { applicationId } = useContext(ExternalEditorContext);
const [isSubItems, setIsSubItems] = useState(false);
// const [subApplications : ApplicationMeta[], setSubApplications] = useState([]);
const [subModuleApp, setSubModuleApp] = useState<ApplicationMeta[]>([]);

const appArray = () => {
const appIdArray: any[] = [];
folders.map(i => (i.subApplications?.map(p =>(appIdArray.push(p.applicationId)))))
return appIdArray;
}
function FolderItem(props: FolderItemProps) {
const { meta } = props;

const handleClick = () => {
setIsSubItems(true);
setSubModuleApp(meta.subApplications || []);
console.log(meta.subApplications);
};
return (
<FolderWrapper onClick={handleClick}>
<div className="folder-icon">
<FolderIcon width="35px"/>
</div>
<div className="folder-content">
<div className="folder-name">{meta.name}</div>
</div>
</FolderWrapper>
);
}


const appIdArray = appArray();

useEffect(() => {
dispatch(fetchAllModules({}));
}, [dispatch]);

const filteredModules = modules.filter((i) => {
if (appIdArray.includes(i.applicationId))
return false;
if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) {
return false;
}
return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim();
});

const subModules = (apps: ApplicationMeta[] | undefined) => apps?.filter((i) => {
if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) {
return false;
}
return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim();
});


// @ts-ignore
const subItems = subModules(subModuleApp).map((i) => (
<ModuleItem onDrag={onDrag} key={i.applicationId} meta={i} />
));

const items = filteredModules.map((i) => (
<ModuleItem onDrag={onDrag} key={i.applicationId} meta={i} />
));

const folderItems = folders.map((i) => {
return <FolderItem key={i.folderId} meta={i} />
});
const empty = (
<EmptyContent
text={
const dispatch = useDispatch();
const modules = useSelector(modulesSelector);
const { onDrag, searchValue } = useContext(RightContext);
const { applicationId } = useContext(ExternalEditorContext);

useEffect(() => {
dispatch(fetchAllModules({}));
}, [dispatch]);

const filteredModules = modules.filter((i) => {
if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) {
return false;
}
return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim();
});

const items = filteredModules.map((i) => (
<ModuleItem onDrag={onDrag} key={i.applicationId} meta={i} />
));
const empty = (
<EmptyContent
text={
<>
<p>{trans("rightPanel.emptyModules")}</p>
<CreateAppButton
type={AppTypeEnum.Module}
onSuccess={(app) => {
const appId = app.applicationInfoView.applicationId;
const url = APPLICATION_VIEW_URL(appId, "edit");
window.open(url);
}}
/>
</>
}
/>
);
return (
<>
<p>{trans("rightPanel.emptyModules")}</p>
<CreateAppButton
type={AppTypeEnum.Module}
onSuccess={(app) => {
const appId = app.applicationInfoView.applicationId;
const url = APPLICATION_VIEW_URL(appId, "edit");
window.open(url);
}}
/>
</>
}
/>
);
return (
<>
{
isSubItems ? <>
<ComListTitle>{trans("rightPanel.moduleListTitle")}</ComListTitle>
<FolderWrapper onClick={() => (setIsSubItems(false))}>
<div className="folder-icon">
<FolderIcon width="35px"/>
</div>
<div className="folder-content">
<div className="folder-name">. . .</div>
</div>
</FolderWrapper>
<ExtensionContentWrapper>{subItems.length > 0 ? subItems : null}</ExtensionContentWrapper>
</> :
<ExtensionContentWrapper>
{folderItems.length > 0 ? <>
<ComListTitle>{trans("rightPanel.folderListTitle")}</ComListTitle>
{folderItems}
</> : null}
<ComListTitle>{trans("rightPanel.moduleListTitle")}</ComListTitle>
{items.length > 0 ? items : empty}
</ExtensionContentWrapper>
}
</>
);
<ExtensionContentWrapper>{items.length > 0 ? items : empty}</ExtensionContentWrapper>
</>
);
}
Loading