Merge pull request #1306 from lowcoder-org/feature-extension

Feature extension

Author: FalkWolsky

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -141,7 +141,8 @@ export const en = {
     "searchNotFound": "Can't find the right component?",
     "emptyPlugins": "No Plugins Added",
     "contactUs": "Contact Us",
-    "issueHere": "here."
+    "issueHere": "here.",
+    "folderListTitle": "Folders"
   },
   "prop": {
     "expand": "Expand",

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

@@ -1,17 +1,17 @@
 import CreateAppButton from "components/CreateAppButton";
 import { EmptyContent } from "components/EmptyContent";
-import { ApplicationMeta, AppTypeEnum } from "constants/applicationConstants";
+import { ApplicationMeta, AppTypeEnum, FolderMeta } from "constants/applicationConstants";
 import { APPLICATION_VIEW_URL } from "constants/routesURL";
 import {
   ActiveTextColor,
   BorderActiveShadowColor,
   BorderColor,
   GreyTextColor,
 } from "constants/style";
-import { ModuleDocIcon } from "lowcoder-design";
+import { FolderIcon, ModuleDocIcon } from "lowcoder-design";
 import { trans } from "i18n";
 import { draggingUtils } from "layout/draggingUtils";
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchAllModules } from "redux/reduxActions/applicationActions";
 import styled from "styled-components";
@@ -21,6 +21,7 @@ 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;
@@ -72,11 +73,62 @@ const ItemWrapper = styled.div`
   }
 `;
 
+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};
+    }
+  }
+  .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;
+}
+
 function ModuleItem(props: ModuleItemProps) {
   const compType = "module";
   const { meta } = props;
@@ -113,23 +165,74 @@ function ModuleItem(props: ModuleItemProps) {
 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={
@@ -149,8 +252,28 @@ export default function ModulePanel() {
   );
   return (
     <>
-      <ComListTitle>{trans("rightPanel.moduleListTitle")}</ComListTitle>
-      <ExtensionContentWrapper>{items.length > 0 ? items : empty}</ExtensionContentWrapper>
+    {
+        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>
+    }
     </>
   );
 }