Added back button in your apps.

Imiss-U1025 · Imiss-U1025 · commit 43eb5b7bb82f · 2024-11-29T06:21:05.000-05:00
diff --git a/client/packages/lowcoder/src/components/TypographyText.tsx b/client/packages/lowcoder/src/components/TypographyText.tsx
@@ -40,9 +40,9 @@ const StyledTypographyText = styled(AntdTypographyText)`
 `;
 
 export const TypographyText = (props: {
-  value: string;
-  editing: boolean;
-  onChange: (value: string) => void;
+  value?: string;
+  editing?: boolean;
+  onChange?: (value: string) => void;
 }) => (
   <StyledTypographyText
     title={props.value}
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeCardView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeCardView.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { HomeRes } from "./HomeLayout";
-import { HomeResCard } from "./HomeResCard";
-import { MarketplaceResCard } from "./MarketplaceResCard";
+import {Back, HomeResCard} from "./HomeResCard";
+import { MarketplaceResCard} from "./MarketplaceResCard";
 import React, { useState } from "react";
 import { MoveToFolderModal } from "./MoveToFolderModal";
 
@@ -19,12 +19,13 @@ const ApplicationCardsWrapper = styled.div`
   }
 `;
 
-export function HomeCardView(props: { resources: HomeRes[], setModify?: any, modify?: boolean }) {
-  const {setModify, modify} = props;
+export function HomeCardView(props: { resources: HomeRes[], setModify?: any, modify?: boolean, mode?: string }) {
+  const {setModify, modify,mode} = props;
   const [needMoveRes, setNeedMoveRes] = useState<HomeRes | undefined>(undefined);
 
   return (
     <ApplicationCardsWrapper>
+      <Back mode={mode!}/>
       {props.resources.map((res) => (
         res.isMarketplace ? 
         <MarketplaceResCard key={res.id} res={res} /> :
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -635,9 +635,9 @@ export function HomeLayout(props: HomeLayoutProps) {
                           {mode !== "marketplace" && (
                             <>
                               {layout === "list" ? (
-                                <HomeTableView resources={resList} setModify={setModify} modify={modify!}/>
+                                <HomeTableView resources={resList} setModify={setModify} modify={modify!} mode={mode}/>
                               ) : (
-                                <HomeCardView resources={resList} setModify={setModify} modify={modify!} />
+                                <HomeCardView resources={resList} setModify={setModify} modify={modify!} mode={mode} />
                               )}
                             </>
                           )}
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
@@ -8,6 +8,7 @@ import { HomeRes } from "./HomeLayout";
 import { HomeResTypeEnum } from "../../types/homeRes";
 import { updateFolder } from "../../redux/reduxActions/folderActions";
 import {
+  backFolderViewClick,
   handleAppEditClick,
   handleAppViewClick,
   handleFolderViewClick,
@@ -23,6 +24,7 @@ import { TypographyText } from "../../components/TypographyText";
 import { useParams } from "react-router-dom";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { colorPickerEvent } from "@lowcoder-ee/comps/comps/mediaComp/colorPickerComp";
+import {FolderIcon} from "icons";
 
 const EditButton = styled(TacoButton)`
   width: 52px;
@@ -259,3 +261,29 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
     </Wrapper>
   );
 }
+
+export function Back(props: { mode: string }) {
+  const { mode } = props;
+  return mode === "folder" ?
+      <Wrapper style={{cursor: "pointer"}}>
+        <Card>
+          <FolderIcon width={"42px"} height={"42px"} style={
+            {
+              marginRight: "10px",
+              flexShrink: 0
+            }
+          } />
+          <CardInfo
+              onClick={(e) => {
+                backFolderViewClick();
+              }}
+          >
+            <TypographyText
+            />
+            <h1 style={{fontSize:"x-large"}}>...</h1>
+            <AppTimeOwnerInfoLabel title={""}></AppTimeOwnerInfoLabel>
+          </CardInfo>
+        </Card>
+      </Wrapper>
+      : <></>;
+}
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx
@@ -4,6 +4,7 @@ import { TacoButton } from "lowcoder-design/src/components/button"
 import styled from "styled-components";
 import { useDispatch } from "react-redux";
 import {
+  backFolderViewClick,
   handleAppEditClick,
   handleAppViewClick,
   handleFolderViewClick,
@@ -51,8 +52,8 @@ const TypographyText = styled(AntdTypographyText)`
   width: 100%;
 `;
 
-export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, modify?: boolean }) => {
-  const {setModify, modify, resources} = props
+export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, modify?: boolean, mode?: string }) => {
+  const {setModify, modify, resources, mode} = props
   const dispatch = useDispatch();
 
   const { folderId } = useParams<{ folderId: string }>();
@@ -61,6 +62,20 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
   const [needDuplicateRes, setNeedDuplicateRes] = useState<HomeRes | undefined>(undefined);
   const [needMoveRes, setNeedMoveRes] = useState<HomeRes | undefined>(undefined);
 
+  const back: HomeRes = {
+    key: "",
+      id: "",
+      name: ". . .",
+      type: 4,
+      creator: "",
+      lastModifyTime: 0,
+      isManageable: false,
+      isDeletable: false
+  }
+  if (mode === "folder"){
+    resources.unshift(back)
+  }
+
   return (
     <>
       <Table
@@ -70,17 +85,20 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
         pagination={false}
         onRow={(record) => ({
           onClick: (e) => {
-            // console.log(e.target);
-            const item = record as HomeRes;
-            if (needRenameRes?.id === item.id || needDuplicateRes?.id === item.id) {
-              return;
-            }
-            if (item.type === HomeResTypeEnum.Folder) {
-              handleFolderViewClick(item.id);
-            } else if(item.isMarketplace) {
-              handleMarketplaceAppViewClick(item.id);
-            } else {
-              item.isEditable ? handleAppEditClick(e, item.id) : handleAppViewClick(item.id);
+            if (mode === "folder" && record.type === 4){
+              backFolderViewClick()
+            } else{
+              const item = record as HomeRes;
+              if (needRenameRes?.id === item.id || needDuplicateRes?.id === item.id) {
+                return;
+              }
+              if (item.type === HomeResTypeEnum.Folder) {
+                handleFolderViewClick(item.id);
+              } else if(item.isMarketplace) {
+                handleMarketplaceAppViewClick(item.id);
+              } else {
+                item.isEditable ? handleAppEditClick(e, item.id) : handleAppViewClick(item.id);
+              }
             }
           },
         })}
@@ -161,7 +179,7 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
             },
             render: (_, record) => (
               <SubColumnCell>
-                {HomeResInfo[(record as any).type as HomeResTypeEnum].name}
+                { mode === "folder" && record.type === 4  ?  "" : HomeResInfo[(record as any).type as HomeResTypeEnum].name }
               </SubColumnCell>
             ),
           },
@@ -223,7 +241,7 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
                         ? handleMarketplaceAppViewClick(item.id)
                         : handleAppViewClick(item.id);
                     }}
-                    style={{ marginRight: "52px" }}
+                    style={{ marginRight: "52px", display: mode === "folder" && record.type === 4 ? "none" : "block" }}
                   >
                     {trans("view")}
                   </EditBtn>
diff --git a/client/packages/lowcoder/src/util/homeResUtils.tsx b/client/packages/lowcoder/src/util/homeResUtils.tsx
@@ -7,7 +7,12 @@ import {
   NavDocIcon,
 } from "lowcoder-design";
 import { HomeResTypeEnum } from "../types/homeRes";
-import { APPLICATION_VIEW_URL, APPLICATION_MARKETPLACE_VIEW_URL, buildFolderUrl } from "../constants/routesURL";
+import {
+  APPLICATION_VIEW_URL,
+  APPLICATION_MARKETPLACE_VIEW_URL,
+  buildFolderUrl,
+  ALL_APPLICATIONS_URL
+} from "../constants/routesURL";
 import history from "./history";
 import { trans } from "../i18n";
 import { FunctionComponent } from "react";
@@ -62,3 +67,5 @@ export const handleAppViewClick = (id: string) => window.open(APPLICATION_VIEW_U
 export const handleMarketplaceAppViewClick = (id: string, isLocalMarketplace?: boolean) => isLocalMarketplace == true ? window.open(APPLICATION_VIEW_URL(id, "view_marketplace"), '_blank') : window.open(APPLICATION_MARKETPLACE_VIEW_URL(id, "view_marketplace"), '_blank');
 
 export const handleFolderViewClick = (id: string) => history.push(buildFolderUrl(id));
+
+export const backFolderViewClick = () => history.push(ALL_APPLICATIONS_URL);
