Merge pull request #1779 from kamalqureshi/update_app_card_ui

Update Card UI on Homepage

Author: raheeliftikhar5

client/packages/lowcoder/src/constants/applicationConstants.ts

@@ -81,6 +81,7 @@ export interface ApplicationMeta {
   title?: string;
   description?: string;
   image?: string;
+  icon?: string;
   category?: ApplicationCategoriesEnum;
   showheader?: boolean;
   orgId: string;

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

@@ -3931,6 +3931,10 @@ export const en = {
     "datasource": "Data Sources",
     "selectDatasourceType": "Select Data Source Type",
     "home": "Home",
+    "desc": "Description",
+    "renameApp": "Rename app",
+    "updateAppName": "Update Application Name",
+    "titleUpdateWarning": "The card displays the app title. Changing the app name will not update the card view.",
     "all": "All",
     "app": "App",
     "navigation": "Navigation",

client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx

@@ -469,7 +469,7 @@ export function HomeLayout(props: HomeLayoutProps) {
               title: e.title,
               description: e.description,
               category: e.category,
-              icon: e.image,
+              icon: e.icon,
               type: HomeResTypeEnum[HomeResTypeEnum[e.applicationType] as HomeResKey],
               creator: e?.creatorEmail ?? e.createBy,
               lastModifyTime: e.lastModifyTime,
@@ -630,7 +630,7 @@ export function HomeLayout(props: HomeLayoutProps) {
 
             <Divider />
 
-            <ContentWrapper>
+            <ContentWrapper>     
 
               {isFetching && resList.length === 0 ? (
                 <SkeletonStyle active paragraph={{ rows: 8, width: 648 }} title={false} />

client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx

@@ -1,5 +1,5 @@
-import { TacoButton } from "lowcoder-design/src/components/button"
-import { ReactNode, useState } from "react";
+import { TacoButton, CustomModal, Alert } from "lowcoder-design"
+import { useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { updateAppMetaAction } from "redux/reduxActions/applicationActions";
 import styled from "styled-components";
@@ -25,6 +25,11 @@ import { useParams } from "react-router-dom";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import {FolderIcon} from "icons";
 import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
+import { Typography } from "antd";
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
+import { MultiIconDisplay } from "@lowcoder-ee/comps/comps/multiIconDisplay";
+import { FormStyled } from "../setting/idSource/styledComponents";
 
 const ExecButton = styled(TacoButton)`
   width: 52px;
@@ -50,14 +55,16 @@ const ExecButton = styled(TacoButton)`
 `;
 
 const Wrapper = styled.div`
-  height: 67px;
   padding: 0 6px;
   border-radius: 8px;
-  margin-bottom: -1px;
-  margin-top: 1px;
-
+  margin-bottom: 2px;
+  margin-top: 2px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background-color: #fcfcfc;
+  min-height: 100px;
   &:hover {
-    background-color: #f5f7fa;
+     background-color: #f5f5f6
   }
 `;
 
@@ -98,7 +105,6 @@ const CardInfo = styled.div`
   height: 100%;
   flex-grow: 1;
   cursor: pointer;
-  overflow: hidden;
   padding-right: 12px;
 
   &:hover {
@@ -124,6 +130,7 @@ const AppTimeOwnerInfoLabel = styled.div`
 const OperationWrapper = styled.div`
   display: flex;
   align-items: center;
+  padding-right: 10px;
   @media screen and (max-width: 500px) {
     > svg {
       display: none;
@@ -133,9 +140,75 @@ const OperationWrapper = styled.div`
 
 const MONTH_MILLIS = 30 * 24 * 60 * 60 * 1000;
 
+interface UpdateAppModalProps {
+  visible: boolean;
+  onCancel: () => void;
+  onOk: (values: any) => void;
+  res: HomeRes;
+  folderId?: string;
+}
+
+export function UpdateAppModal({ visible, onCancel, onOk, res, folderId }: UpdateAppModalProps) {
+  const [detailsForm] = Form.useForm();
+
+  // Reset form values when res changes
+  useEffect(() => {
+    if (res && visible) {
+      detailsForm.setFieldsValue({
+        appName: res.name,
+        title: res.title
+      });
+    }
+  }, [res, visible, detailsForm]);
+
+  return (
+    <CustomModal
+      title={trans("home.updateAppName")}
+      open={visible}
+      destroyOnHidden
+      onCancel={onCancel}
+      showCancelButton={false}
+      showOkButton
+      width="440px"
+      okText={trans("finish")}
+      onOk={() => {
+        detailsForm.validateFields().then((values) => {
+          onOk(values);
+        }).catch((errorInfo) => {
+          console.error('Validation failed:', errorInfo);
+        });
+      }}
+    >
+      <FormStyled
+        form={detailsForm}
+        name="general"
+        layout="vertical"
+        style={{ maxWidth: '100%' }}
+        autoComplete="off"
+      >
+        {res.title && 
+          <Alert label={trans("home.titleUpdateWarning")} type="warning" />}
+        <br/>
+
+        <Form.Item label={trans("home.name")} name="appName">
+          <Input/>
+        </Form.Item>
+
+        {res.title && (
+          <Form.Item label={trans("title")} name="title">
+            <Input disabled />
+          </Form.Item>
+        )}
+
+      </FormStyled>
+    </CustomModal>
+  );
+}
+
 export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => void; setModify:any; modify: boolean }) {
   const { res, onMove, setModify, modify } = props;
   const [appNameEditing, setAppNameEditing] = useState(false);
+  const [dialogVisible, setDialogVisible] = useState(false)
   const dispatch = useDispatch();
 
   const { folderId } = useParams<{ folderId: string }>();
@@ -161,96 +234,137 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
   else if (res.type === HomeResTypeEnum.NavLayout || res.type === HomeResTypeEnum.MobileTabLayout) {
     iconColor = "#af41ff";
   }
-
   const Icon = resInfo.icon;
 
+  const handleModalOk = (values: any) => {
+    dispatch(
+      updateAppMetaAction({ applicationId: res.id, name: values.appName || res.name, folderId: folderId })
+    );
+    
+    setDialogVisible(false);
+    setTimeout(() => {
+      setModify(!modify);
+    }, 200);
+  };
+
   return (
-    <Wrapper>
-      <Card>
-        {Icon && (
-          <BrandedIcon>
-            <Icon width={"42px"} height={"42px"} style={
-              { 
-                color: iconColor,
-                marginRight: "10px", 
-                flexShrink: 0 
-              }
-            } />
-          </BrandedIcon>
-        )}
-        <CardInfo
-          onClick={(e) => {
-            if (appNameEditing) {
-              return;
-            }
-            if (res.type === HomeResTypeEnum.Folder) {
-              handleFolderViewClick(res.id);
-            } else {
-              if (checkIsMobile(window.innerWidth)) {
-                history.push(APPLICATION_VIEW_URL(res.id, "view"));
-                return;
-              }
-              if(res.isMarketplace) {
-                handleMarketplaceAppViewClick(res.id);
-                return;
-              }
-              res.isEditable ? handleAppEditClick(e, res.id) : handleAppViewClick(res.id);
-            }
-          }}
-        >
-          <TypographyText
-            value={res.name}
-            editing={appNameEditing}
-            onChange={(value) => {
-              if (!value.trim()) {
-                messageInstance.warning(trans("home.nameCheckMessage"));
+    <>
+      <UpdateAppModal
+        visible={dialogVisible}
+        onCancel={() => setDialogVisible(false)}
+        onOk={handleModalOk}
+        res={res}
+        folderId={folderId}
+      />
+
+      <Wrapper>
+        <Card>
+          {res.icon ? 
+            <MultiIconDisplay 
+            identifier={res.icon && typeof res.icon === 'string' ? res.icon : '/icon:antd/appstoreoutlined'} 
+            width="30px" 
+            height="30px" 
+            style={{ 
+              marginRight: "6px", 
+              flexShrink: 0, 
+              color: "#b766db" 
+              }} 
+            /> :
+            Icon && (
+              <BrandedIcon>
+                <Icon width={"42px"} height={"42px"} style={
+                  { 
+                    color: iconColor,
+                    marginRight: "10px", 
+                    flexShrink: 0 
+                  }
+                } />
+              </BrandedIcon>
+            )
+          }
+          <CardInfo
+            onClick={(e) => {
+              if (appNameEditing) {
                 return;
               }
               if (res.type === HomeResTypeEnum.Folder) {
-                dispatch(updateFolder({ id: res.id, name: value }));
-                setTimeout(() => {
-                  setModify(!modify);
-                }, 200);
+                handleFolderViewClick(res.id);
               } else {
-                dispatch(
-                  updateAppMetaAction({ applicationId: res.id, name: value, folderId: folderId })
-                );
-                setTimeout(() => {
-                  setModify(!modify);
-                }, 200);
+                if (checkIsMobile(window.innerWidth)) {
+                  history.push(APPLICATION_VIEW_URL(res.id, "view"));
+                  return;
+                }
+                if(res.isMarketplace) {
+                  handleMarketplaceAppViewClick(res.id);
+                  return;
+                }
+                res.isEditable ? handleAppEditClick(e, res.id) : handleAppViewClick(res.id);
               }
-              setAppNameEditing(false);
             }}
-          />
-          <AppTimeOwnerInfoLabel title={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
-        </CardInfo>
-        <OperationWrapper>
-          {/* {res.isEditable && (
-            <EditButton onClick={(e) => handleAppEditClick(e, res.id)} buttonType="primary">
-              {trans("edit")}
-            </EditButton>
-          )} */}
-          <ExecButton
-            onClick={() =>
-              res.type === HomeResTypeEnum.Folder
-                ? handleFolderViewClick(res.id)
-                : res.isMarketplace
-                ? handleMarketplaceAppViewClick(res.id)
-                : handleAppViewClick(res.id)
-            }
           >
-            {trans("view")}
-          </ExecButton>
-          <HomeResOptions
-            res={res}
-            onRename={() => setAppNameEditing(true)}
-            onMove={(res) => onMove(res)}
-            setModify={setModify}
-            modify={modify}
-          />
-        </OperationWrapper>
-      </Card>
-    </Wrapper>
+            <TypographyText
+              value={res.title || res.name}
+              editing={false}
+              onChange={(value) => {
+                if (!value.trim()) {
+                  messageInstance.warning(trans("home.nameCheckMessage"));
+                  return;
+                }
+                if (res.type === HomeResTypeEnum.Folder) {
+                  dispatch(updateFolder({ id: res.id, name: value }));
+                  setTimeout(() => {
+                    setModify(!modify);
+                  }, 200);
+                } else {
+                  dispatch(
+                    updateAppMetaAction({ applicationId: res.id, name: value, folderId: folderId })
+                  );
+                  setTimeout(() => {
+                    setModify(!modify);
+                  }, 200);
+                }
+                setAppNameEditing(false);
+              }}
+            />
+
+            {res?.description 
+              && <Typography.Text 
+                  type="secondary" 
+                  style={{ fontSize: 12, textWrap: "wrap"}}
+                  >
+                {res.description.length > 150 ? res.description.substring(0, 150) + '...' : res.description}
+            </Typography.Text>}
+
+            <AppTimeOwnerInfoLabel title={subTitle}>{subTitle}</AppTimeOwnerInfoLabel>
+          </CardInfo>
+          <OperationWrapper>
+            {/* {res.isEditable && (
+              <EditButton onClick={(e) => handleAppEditClick(e, res.id)} buttonType="primary">
+                {trans("edit")}
+              </EditButton>
+            )} */}
+            <ExecButton
+              onClick={() =>
+                res.type === HomeResTypeEnum.Folder
+                  ? handleFolderViewClick(res.id)
+                  : res.isMarketplace
+                  ? handleMarketplaceAppViewClick(res.id)
+                  : handleAppViewClick(res.id)
+              }
+            >
+              {trans("view")}
+            </ExecButton>
+            <HomeResOptions
+              res={res}
+              onRename={() => setDialogVisible(true)}
+              onMove={(res) => onMove(res)}
+              setModify={setModify}
+              modify={modify}
+            />
+          </OperationWrapper>
+        </Card>
+      </Wrapper>
+    </>
   );
 }
 

client/packages/lowcoder/src/pages/ApplicationV2/HomeResOptions.tsx

@@ -53,7 +53,7 @@ export const HomeResOptions = (props: {
     if (res.isEditable) {
       options = [
         ...options,
-        { text: trans("rename"), onClick: () => onRename(res) },
+        { text: trans("home.renameApp"), onClick: () => onRename(res) },
         {
           text: trans("header.duplicate", { type: HomeResInfo[res.type].name.toLowerCase() }),
           onClick: () => {