Implemented realtime processing of create new folder in HomeView.

Imiss-U1025 · Imiss-U1025 · commit e2c1efc3d1e4 · 2024-12-02T16:19:55.000-05:00
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx
@@ -185,14 +185,14 @@ function NavLayoutPickModal(props: {
   );
 }
 
-export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayoutMode }) => {
-  const { defaultVisible, mode } = props;
+export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayoutMode; setModify: any; modify: boolean }) => {
+  const { defaultVisible, mode, setModify, modify} = props;
   const [createDropdownVisible, setCreateDropdownVisible] = useState(false);
   const [layoutPickerVisible, setLayoutPickerVisible] = useState(false);
 
   const user = useSelector(getUser);
 
-  const [handleCreate, isCreating] = useCreateHomeRes();
+  const [handleCreate, isCreating] = useCreateHomeRes(setModify, modify);
 
   const getCreateMenuItem = (type: HomeResTypeEnum, mode?: HomeLayoutMode): ItemType => {
     if (
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -316,6 +316,8 @@ export interface HomeLayoutProps {
   searchValues?: number;
   setSearchValues?: any;
   setTypeFilterPagination?: any;
+  setModify?: any;
+  modify?: boolean;
 }
 
 export function HomeLayout(props: HomeLayoutProps) {
@@ -332,6 +334,8 @@ export function HomeLayout(props: HomeLayoutProps) {
     setSearchValues,
     total,
     setTypeFilterPagination,
+    setModify,
+    modify
 
   } = props;
   const handlePageChange = (page: number) => {
@@ -568,7 +572,7 @@ export function HomeLayout(props: HomeLayoutProps) {
                   style={{ width: "192px", height: "32px", margin: "0" }}
                 />
                 {mode !== "trash" && mode !== "marketplace" && user.orgDev && (
-                  <CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} />
+                  <CreateDropdown defaultVisible={showNewUserGuide(user)} mode={mode} setModify={setModify} modify={modify!} />
                 )}
               </OperationRightWrapper>
             </OperationWrapper>
@@ -655,7 +659,7 @@ export function HomeLayout(props: HomeLayoutProps) {
                           ? trans("home.projectEmptyCanAdd")
                           : trans("home.projectEmpty")}
                       </div>
-                      {mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} />}
+                      {mode !== "trash" && mode !== "marketplace" && user.orgDev && <CreateDropdown mode={mode} setModify={setModify} modify={modify!}/>}
                     </EmptyView>
                   )}
                 </>
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx
@@ -19,6 +19,7 @@ export function HomeView() {
     const [pageSize, setPageSize] = useState(10);
     const [searchValues, setSearchValues] = useState("");
     const [typeFilter, setTypeFilter] = useState<number>(0);
+    const [modify, setModify] = useState(true);
       useEffect( () => {
           try{
               fetchFolderElements({
@@ -38,7 +39,7 @@ export function HomeView() {
           } catch (error) {
               console.error('Failed to fetch data:', error);
           }
-          }, [currentPage, pageSize, searchValues, typeFilter]
+          }, [currentPage, pageSize, searchValues, typeFilter, modify]
       );
 
   const user = useSelector(getUser);
@@ -60,6 +61,8 @@ export function HomeView() {
         total={elements.total}
         setSearchValues={setSearchValues}
         setTypeFilterPagination={setTypeFilter}
+        setModify={setModify}
+        modify={modify}
       />
     </>
   );
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/useCreateFolder.tsx
@@ -17,7 +17,7 @@ const CreateFolderLabel = styled.div`
   margin-bottom: 8px;
 `;
 
-export function useCreateFolder() {
+export function useCreateFolder(setModify: any, modify: boolean) {
   const dispatch = useDispatch();
   const user = useSelector(getUser);
   const allFolders = useSelector(foldersSelector);
@@ -73,7 +73,7 @@ export function useCreateFolder() {
           </FormSection>
         </DatasourceForm>
       ),
-      onConfirm: () =>
+      onConfirm: () =>{
         form.validateFields().then(
           () =>
             new Promise((resolve, reject) => {
@@ -82,7 +82,11 @@ export function useCreateFolder() {
                 () => reject(false)
               );
             })
-        ),
+        )
+          setTimeout(() => {
+              setModify(!modify);
+          }, 200);
+      },
       okText: trans("create"),
     });
   }, [user, allFolders, form, dispatch]);
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/useCreateHomeRes.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/useCreateHomeRes.tsx
@@ -31,15 +31,15 @@ export const newAppPrefix = (userName: string, appType: AppTypeEnum = AppTypeEnu
   return trans("home.newApp", { userName: userName, name: toLower(HomeResInfo[appType].name) });
 };
 
-export function useCreateHomeRes() {
+export function useCreateHomeRes(setModify:any, modify: boolean) {
   const dispatch = useDispatch();
   const user = useSelector(getUser);
   const allApplications = useSelector(normalAppListSelector);
   const isCreating = useSelector(isApplicationCreating);
 
   const { folderId } = useParams<{ folderId: string }>();
 
-  const handleFolderCreate = useCreateFolder();
+  const handleFolderCreate = useCreateFolder(setModify, modify);
 
   const handleCreate = useCallback(
     (type: HomeResTypeEnum) => {
