Mar 4, 2024 · Feb 19, 2024 · Feb 21, 2024 · Feb 22, 2024 · Feb 23, 2024 · Feb 23, 2024
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
diff --git a/client/packages/lowcoder/src/comps/comps/multiIconDisplay.tsx b/client/packages/lowcoder/src/comps/comps/multiIconDisplay.tsx
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
diff --git a/client/packages/lowcoder/src/constants/applicationConstants.ts b/client/packages/lowcoder/src/constants/applicationConstants.ts
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeCardView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeCardView.tsx
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx
Original file line number	Diff line number	Diff line change
Expand Up		@@ -172,7 +172,7 @@ const AppCategories = Object.keys(ApplicationCategoriesEnum).map(
		const value = ApplicationCategoriesEnum[cat as AppCategoriesEnumKey];
		return {
		label: value,
	value,
	value: cat
		}
		}
		)
Expand Down
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,
		]);
Original file line number	Diff line number	Diff line change
		@@ -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;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,7 +79,7 @@ export interface ApplicationMeta {
		creatorEmail?: string;
		title?: string;
		description?: string;
	icon?: string;
	image?: string;
		category?: ApplicationCategoriesEnum;
		showheader?: boolean;
		orgId: string;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2210,6 +2210,7 @@ home: {
		"errorMarketplaceApps": "获取市场应用程序错误",
		"localMarketplaceTitle": "本地市场",
		"globalMarketplaceTitle": "Lowcoder 市场",
	"allCategories": "所有类别",
		memberPermissionList: "成员权限:",
		orgName: "{orgName}管理员",
		addMember: "添加成员",
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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) {
Expand All		@@ -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)} />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand Down Expand Up		@@ -171,7 +172,7 @@ const FilterDropdown = styled(Select)`

		const FilterMenuItem = styled.div`
		display: flex;
	align-items: center;
	align-items: left;
		height: 29px;
		width: 100%;
		`;
Expand Down Expand Up		@@ -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;
Expand All		@@ -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();
		}, []);

Expand All		@@ -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 }));
Expand All		@@ -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
		? {
Expand All		@@ -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,
Expand Down Expand Up		@@ -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>
Expand Down Expand Up		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -73,7 +73,7 @@ const Card = styled.div`
		align-items: center;
		height: 100%;
		width: 100%;
	border-bottom: 1px solid #f5f5f6;

		padding: 0 10px;

		button {
Expand Down