Rounding Up Marketplace and Multi-Icon Component

lowcoder-org · FalkWolsky · Mar 4, 2024 · Feb 19, 2024 · Feb 21, 2024 · Feb 22, 2024
commit c96bb7e07b5d6b4672e7f7c7267d031d0cff5ee5
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -172,7 +172,7 @@ const AppCategories = Object.keys(ApplicationCategoriesEnum).map(
     const value = ApplicationCategoriesEnum[cat as AppCategoriesEnumKey];
     return {
       label: value,
-      value,
+      value: cat
     }
   }
 )

diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -144,3 +144,4 @@ IconBasicComp = class extends IconBasicComp {
 export const IconComp = withExposingConfigs(IconBasicComp, [
   NameConfigHidden,
 ]);
+
diff --git a/client/packages/lowcoder/src/comps/comps/multiIconDisplay.tsx b/client/packages/lowcoder/src/comps/comps/multiIconDisplay.tsx
@@ -0,0 +1,88 @@
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { findIconDefinition, library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import * as AntdIcons from '@ant-design/icons';
+
+library.add(far,fas);
+
+function parseIconIdentifier(identifier: string) {
+  if (identifier.startsWith('/icon:antd/')) {
+    let name = identifier.split('/')[2];
+    return { type: 'antd', name };
+  } 
+  else if (identifier.startsWith('/icon:solid/') || identifier.startsWith('/icon:regular/')) {
+    const [style, name] = identifier.substring(6).split('/');
+    return { type: 'fontAwesome', style, name };
+  } 
+  else if (identifier.startsWith('data:image')) {
+    return { type: 'base64', data: identifier, name: "" };
+  } 
+  else if (identifier.startsWith('http')) {
+    return { type: 'url', url: identifier, name: "" };
+  } 
+  else {
+    return { type: 'unknown', name: "" };
+  }
+}
+
+interface IconProps {
+  identifier: string;
+  width?: string;
+  height?: string;
+  style?: React.CSSProperties;
+}
+
+const convertToCamelCase = (name: string) => {
+  return name.replace(/(-\w)/g, (match) => match[1].toUpperCase());
+}
+
+const appendStyleSuffix = (name: string) => {
+  if (name.endsWith('outlined')) {
+    return name.replace('outlined', 'Outlined');
+  } else if (name.endsWith('filled')) {
+    return name.replace('filled', 'Filled');
+  } else if (name.endsWith('twotone')) {
+    return name.replace('twotone', 'TwoTone');
+  }
+  return name;
+}
+
+// Multi icon Display Component
+
+const baseMultiIconDisplay: React.FC<IconProps> = ({ identifier, width = '24px', height = '24px', style }) => {
+
+  const iconData = parseIconIdentifier(identifier);
+
+  if (iconData.type === 'fontAwesome') {
+    const prefix = iconData.style === 'solid' ? 'fas' : 'far'; // 'fas' for solid, 'far' for regular
+    // Find the icon definition using prefix and iconName
+    const iconLookup = findIconDefinition({ prefix: prefix as any, iconName: iconData.name as any });
+
+    if (!iconLookup) {
+      console.error(`Icon ${iconData.name} with prefix ${prefix} not found`);
+      return null;
+    }
+    return <FontAwesomeIcon icon={iconLookup} style={{ width, height, ...style }} />;
+  } 
+  else if (iconData.type === 'antd') {
+    let iconName = convertToCamelCase(iconData.name);
+    iconName = appendStyleSuffix(iconName);
+    iconName = iconName.charAt(0).toUpperCase() + iconName.slice(1); 
+    const AntdIcon = (AntdIcons as any)[iconName];
+    if (!AntdIcon) {
+      console.error(`ANTd Icon ${iconData.name} not found`);
+      return null;
+    }
+    return <AntdIcon style={{ fontSize: width, ...style }} />;
+  } 
+  else if (iconData.type === 'url' || iconData.type === 'base64') {
+    return <img src={iconData.type === 'url' ? iconData.url : iconData.data} alt="icon" style={{ width, height, ...style }} />;
+  } 
+  else {
+    return null; // Unknown type
+  }
+};
+
+export const MultiIconDisplay = baseMultiIconDisplay;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -272,7 +272,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
         <ToolTipLabel title={trans("table.refreshButtonTooltip")}>
           <StyledRefreshIcon
             onClick={() => {
-              console.log("comp", comp);
+              // console.log("comp", comp);
               comp.dispatch(
                 wrapChildAction(
                   "columns",

diff --git a/client/packages/lowcoder/src/constants/applicationConstants.ts b/client/packages/lowcoder/src/constants/applicationConstants.ts
@@ -79,7 +79,7 @@ export interface ApplicationMeta {
   creatorEmail?: string;
   title?: string;
   description?: string;
-  icon?: string;
+  image?: string;
   category?: ApplicationCategoriesEnum;
   showheader?: boolean;
   orgId: string;

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2266,6 +2266,7 @@ export const en = {
     "module": "Module",
     "trash": "Trash",
     "marketplace": "Marketplace",
+    "allCategories": "All Categories",
     "queryLibrary": "Query Library",
     "datasource": "Data Sources",
     "selectDatasourceType": "Select Data Source Type",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -2210,6 +2210,7 @@ home: {
     "errorMarketplaceApps": "获取市场应用程序错误",
     "localMarketplaceTitle": "本地市场",
     "globalMarketplaceTitle": "Lowcoder 市场",
+    "allCategories": "所有类别",
     memberPermissionList: "成员权限:",
     orgName: "{orgName}管理员",
     addMember: "添加成员",

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeCardView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeCardView.tsx
@@ -1,14 +1,16 @@
 import styled from "styled-components";
 import { HomeRes } from "./HomeLayout";
 import { HomeResCard } from "./HomeResCard";
+import { MarketplaceResCard } from "./MarketplaceResCard";
 import React, { useState } from "react";
 import { MoveToFolderModal } from "./MoveToFolderModal";
 
 const ApplicationCardsWrapper = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(408px, 1fr));
-  grid-template-rows: repeat(auto-fill, min(68px, 100%));
+  grid-template-rows: repeat(auto-fill, min(auto, 100%));
   grid-column-gap: 112px;
+  grid-row-gap: 20px;
   margin: 48px 26px 80px;
   overflow: hidden;
   @media screen and (max-width: 500px) {
@@ -23,6 +25,8 @@ export function HomeCardView(props: { resources: HomeRes[] }) {
   return (
     <ApplicationCardsWrapper>
       {props.resources.map((res) => (
+        res.isMarketplace ? 
+        <MarketplaceResCard key={res.id} res={res} /> :
         <HomeResCard key={res.id} res={res} onMove={setNeedMoveRes} />
       ))}
       <MoveToFolderModal source={needMoveRes} onClose={() => setNeedMoveRes(undefined)} />

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -35,6 +35,7 @@ import { checkIsMobile } from "util/commonUtils";
 import MarketplaceHeaderImage from "assets/images/marketplaceHeaderImage.jpg";
 import { Divider } from "antd";
 import { Margin } from "../setting/theme/styledComponents"; 
+import { ApplicationCategoriesEnum } from "constants/applicationConstants";
 
 const Wrapper = styled.div`
   display: flex;
@@ -171,7 +172,7 @@ const FilterDropdown = styled(Select)`
 
 const FilterMenuItem = styled.div`
   display: flex;
-  align-items: center;
+  align-items: left;
   height: 29px;
   width: 100%;
 `;
@@ -253,6 +254,10 @@ export interface HomeRes {
   key: string;
   id: string;
   name: string;
+  title?: string;
+  description?: string;
+  category?: string;
+  icon?: string;
   type: HomeResTypeEnum;
   creator: string;
   lastModifyTime: number;
@@ -276,20 +281,37 @@ export interface HomeLayoutProps {
 }
 
 export function HomeLayout(props: HomeLayoutProps) {
+
+
   const { breadcrumb = [], elements = [], localMarketplaceApps = [], globalMarketplaceApps = [],mode } = props;
+
+  const categoryOptions = [
+    { label: <FilterMenuItem>{trans("home.allCategories")}</FilterMenuItem>, value: 'All' },
+    ...Object.entries(ApplicationCategoriesEnum).map(([key, value]) => ({
+      label: (
+        <FilterMenuItem>
+          {value}
+        </FilterMenuItem>
+      ),
+      value: key,
+    })),
+  ];
+
   const user = useSelector(getUser);
   const isFetching = useSelector(isFetchingFolderElements);
   const isSelfHost = window.location.host !== 'app.lowcoder.cloud';
-  const [filterBy, setFilterBy] = useState<HomeResKey>("All");
+  const [typeFilter, setTypeFilter] = useState<HomeResKey>("All");
+  const [categoryFilter, setCategoryFilter] = useState<ApplicationCategoriesEnum | "All">("All");
   const [searchValue, setSearchValue] = useState("");
   const [layout, setLayout] = useState<HomeLayoutType>(
     checkIsMobile(window.innerWidth) ? "card" : getHomeLayout()
   );
 
+
   useEffect(() => saveHomeLayout(layout), [layout]);
 
   useEffect(() => {
-    // remove collision status from localstorage
+    // remove collision status from localstorage, as the next selected app may have another collision status
     removeCollisionStatus();
   }, []);
 
@@ -300,6 +322,7 @@ export function HomeLayout(props: HomeLayoutProps) {
   }
 
   var displayElements = elements;
+
   if (mode === "marketplace" && isSelfHost) {
     const markedLocalApps = localMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: true }));
     const markedGlobalApps = globalMarketplaceApps.map(app => ({ ...app, isLocalMarketplace: false }));
@@ -319,18 +342,27 @@ export function HomeLayout(props: HomeLayoutProps) {
         : true
     )
     .filter((e) => {
-      if (HomeResTypeEnum[filterBy].valueOf() === HomeResTypeEnum.All) {
+      if (HomeResTypeEnum[typeFilter].valueOf() === HomeResTypeEnum.All) {
         return true;
       }
       if (e.folder) {
-        return HomeResTypeEnum[filterBy] === HomeResTypeEnum.Folder;
+        return HomeResTypeEnum[typeFilter] === HomeResTypeEnum.Folder;
       } else {
-        if (filterBy === "Navigation") {
+        if (typeFilter === "Navigation") {
           return NavigationTypes.map((t) => t.valueOf()).includes(e.applicationType);
         }
-        return HomeResTypeEnum[filterBy].valueOf() === e.applicationType;
+        return HomeResTypeEnum[typeFilter].valueOf() === e.applicationType;
+      }
+    })
+    .filter((e) => {
+      // If "All" is selected, do not filter out any elements based on category
+      if (categoryFilter === 'All' || !categoryFilter) {
+        return true;
       }
+      // Otherwise, filter elements based on the selected category
+      return !e.folder && e.category === categoryFilter.toString();
     })
+
     .map((e) =>
       e.folder
         ? {
@@ -347,6 +379,10 @@ export function HomeLayout(props: HomeLayoutProps) {
             key: e.applicationId,
             id: e.applicationId,
             name: e.name,
+            title: e.title,
+            description: e.description,
+            category: e.category,
+            icon: e.image,
             type: HomeResTypeEnum[HomeResTypeEnum[e.applicationType] as HomeResKey],
             creator: e?.creatorEmail ?? e.createBy,
             lastModifyTime: e.lastModifyTime,
@@ -385,6 +421,14 @@ export function HomeLayout(props: HomeLayoutProps) {
     }))
   ]
 
+  const testOptions = [
+    getFilterMenuItem(HomeResTypeEnum.All),
+    getFilterMenuItem(HomeResTypeEnum.Application),
+    getFilterMenuItem(HomeResTypeEnum.Module),
+    ...(mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Navigation)] : []),
+    ...(mode !== "trash" && mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
+  ];
+
   return (
     <Wrapper>
       <HeaderWrapper>
@@ -414,19 +458,27 @@ export function HomeLayout(props: HomeLayoutProps) {
         {mode !== "folders" && mode !== "module" && (
           <FilterDropdown
             variant="borderless"
-            value={filterBy}
-            onChange={(value: any) => setFilterBy(value as HomeResKey)}
+            value={typeFilter}
+            onChange={(value: any) => setTypeFilter(value as HomeResKey)}
             options={[
               getFilterMenuItem(HomeResTypeEnum.All),
               getFilterMenuItem(HomeResTypeEnum.Application),
               getFilterMenuItem(HomeResTypeEnum.Module),
               ...(mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Navigation)] : []),
               ...(mode !== "trash" && mode !== "marketplace" ? [getFilterMenuItem(HomeResTypeEnum.Folder)] : []),
-
             ]}
             getPopupContainer={(node: any) => node}
-            suffixIcon={<ArrowSolidIcon />}
-          />
+            suffixIcon={<ArrowSolidIcon />} />
+        )}
+        {mode === "marketplace" && (
+          <FilterDropdown
+            style={{ minWidth: "220px" }}
+            variant="borderless"
+            value={categoryFilter}
+            onChange={(value: any) => setCategoryFilter(value as ApplicationCategoriesEnum)}
+            options={categoryOptions}
+            // getPopupContainer={(node) => node}
+            suffixIcon={<ArrowSolidIcon />} />
         )}
 
         <OperationRightWrapper>

diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
@@ -73,7 +73,7 @@ const Card = styled.div`
   align-items: center;
   height: 100%;
   width: 100%;
-  border-bottom: 1px solid #f5f5f6;
+
   padding: 0 10px;
 
   button {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -144,3 +144,4 @@ IconBasicComp = class extends IconBasicComp {
		export const IconComp = withExposingConfigs(IconBasicComp, [
		NameConfigHidden,
		]);