feat(filemanager): Show folder in file list

erxes · Mar 20, 2023 · e4c28bf · e4c28bf
1 parent 7b0dcf6
commit e4c28bf
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 33 deletions.
diff --git a/packages/plugin-filemanager-ui/src/components/FileManager.tsx b/packages/plugin-filemanager-ui/src/components/FileManager.tsx
@@ -146,12 +146,7 @@ function FileManager({
       }
       content={
         <DataWithLoader
-          data={
-            <FileList
-              queryParams={queryParams}
-              // currentFolderId={currentFolder._id}
-            />
-          }
+          data={<FileList queryParams={queryParams} />}
           loading={false}
           count={100}
           emptyContent={

diff --git a/packages/plugin-filemanager-ui/src/components/file/FileList.tsx b/packages/plugin-filemanager-ui/src/components/file/FileList.tsx
@@ -1,16 +1,12 @@
 import { IFile, IFolder } from '../../types';
 
 import DataWithLoader from '@erxes/ui/src/components/DataWithLoader';
-import { EMPTY_CONTENT_FILES } from '../../constants';
-import EmptyContent from '@erxes/ui/src/components/empty/EmptyContent';
 import EmptyState from '@erxes/ui/src/components/EmptyState';
 import FileRow from './FileRow';
 import FormControl from '@erxes/ui/src/components/form/Control';
 import { ItemName } from '../../styles';
 import React from 'react';
-import { RowArticle } from './styles';
 import SortHandler from '@erxes/ui/src/components/SortHandler';
-import Spinner from '@erxes/ui/src/components/Spinner';
 import Table from '@erxes/ui/src/components/table';
 import { __ } from '@erxes/ui/src/utils';
 import withTableWrapper from '@erxes/ui/src/components/table/withTableWrapper';
@@ -74,14 +70,14 @@ class FileList extends React.Component<Props> {
           </thead>
           <tbody id="fileManagerfiles">
             <>
-              {/* {folders.map((folder: IFolder) => (
+              {folders.map((folder: IFolder) => (
                 <FileRow
                   key={folder._id}
                   item={folder}
                   queryParams={queryParams}
                   isFolder={true}
                 />
-              ))} */}
+              ))}
               {files.map(file => (
                 <FileRow
                   key={file._id}

diff --git a/packages/plugin-filemanager-ui/src/components/file/FileRow.tsx b/packages/plugin-filemanager-ui/src/components/file/FileRow.tsx
@@ -9,13 +9,12 @@ import React from 'react';
 import Tip from '@erxes/ui/src/components/Tip';
 import { __ } from 'coreui/utils';
 import dayjs from 'dayjs';
-import { readFile } from '@erxes/ui/src/utils';
 import { renderFileIcon } from '../../utils';
 
 type Props = {
   item: any;
   queryParams: any;
-  remove: (fileId: string) => void;
+  remove?: (fileId: string) => void;
   isFolder?: boolean;
   isChecked?: boolean;
   toggleBulk?: (target: any, toAdd: boolean) => void;
@@ -42,7 +41,9 @@ const FileRow = ({
   };
 
   const onRemove = () => {
-    remove(item._id);
+    if (remove) {
+      remove(item._id);
+    }
   };
 
   const renderEditAction = () => {
@@ -74,8 +75,18 @@ const FileRow = ({
       </td>
       <td style={{ paddingLeft: '0' }}>
         <ItemName>
-          <a href={`/filemanager/details/${item._id}`}>
-            {renderFileIcon(item.type === 'dynamic' ? 'aaa.dynamic' : name)}
+          <a
+            href={
+              isFolder
+                ? `/filemanager/folder/details/${item._id}`
+                : `/filemanager/details/${item._id}`
+            }
+          >
+            {isFolder ? (
+              <img src="/images/folder.png" alt="folder" />
+            ) : (
+              renderFileIcon(item.type === 'dynamic' ? 'aaa.dynamic' : name)
+            )}
             {isFolder || item.contentType ? item.name : name}
           </a>
         </ItemName>
@@ -85,9 +96,11 @@ const FileRow = ({
       <td>
         <ActionButtons>
           {/* {item.contentType && renderEditAction()} */}
-          <Tip text={__('Delete')} placement="bottom">
-            <Button btnStyle="link" onClick={onRemove} icon="cancel-1" />
-          </Tip>
+          {remove && (
+            <Tip text={__('Delete')} placement="bottom">
+              <Button btnStyle="link" onClick={onRemove} icon="cancel-1" />
+            </Tip>
+          )}
         </ActionButtons>
       </td>
     </tr>

diff --git a/packages/plugin-filemanager-ui/src/containers/folder/FolderForm.tsx b/packages/plugin-filemanager-ui/src/containers/folder/FolderForm.tsx
@@ -37,7 +37,7 @@ const FolderFormContainer = (props: FinalProps) => {
         mutation={mutations.filemanagerFolderSave}
         variables={values}
         callback={callback}
-        refetchQueries={getRefetchQueries()}
+        refetchQueries={getRefetchQueries(values.parentId)}
         isSubmitted={isSubmitted}
         type="submit"
         successMessage={`You successfully ${
@@ -55,10 +55,13 @@ const FolderFormContainer = (props: FinalProps) => {
   return <FolderForm {...updatedProps} />;
 };
 
-const getRefetchQueries = () => {
+const getRefetchQueries = (parentId?: string) => {
   return [
     {
-      query: gql(queries.filemanagerFolders)
+      query: gql(queries.filemanagerFolders),
+      variables: {
+        parentId: parentId ? parentId : ''
+      }
     }
   ];
 };

diff --git a/packages/plugin-filemanager-ui/src/containers/folder/FolderList.tsx b/packages/plugin-filemanager-ui/src/containers/folder/FolderList.tsx
@@ -30,13 +30,7 @@ type FinalProps = {
   RemoveFilemanagerFolderMutationResponse;
 
 const FolderListContainer = (props: FinalProps) => {
-  const {
-    removeMutation,
-    filemanagerFolders,
-    history,
-    parentFolderId,
-    filemanagerFoldersQuery
-  } = props;
+  const { removeMutation, filemanagerFolders, filemanagerFoldersQuery } = props;
 
   const getDifference = (array1, array2) => {
     return array1.filter(object1 =>
@@ -52,8 +46,6 @@ const FolderListContainer = (props: FinalProps) => {
       })
         .then(() => {
           Alert.success('You successfully deleted a folder.');
-
-          history.push('/filemanager');
         })
         .catch(error => {
           Alert.error(error.message);
@@ -76,7 +68,6 @@ const FolderListContainer = (props: FinalProps) => {
 
   const updatedProps = {
     ...props,
-    childrens: [],
     filemanagerFolders,
     remove
   };