@@ -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, } 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> ); } 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> </> ); }