Client:Table:Separating table columns of my documents and recent documents.

packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -211,9 +211,9 @@ class FilesTableHeader extends React.Component {
     } else if (isRecentTab) {
       const authorBlock = !isPublicRoom
         ? {
-            key: "Author",
+            key: "AuthorRecent",
             title: t("ByAuthor"),
-            enable: this.props.authorColumnIsEnabled,
+            enable: this.props.authorRecentColumnIsEnabled,
             resizable: true,
             sortBy: SortByFieldName.Author,
             // onClick: this.onFilter,
@@ -221,6 +221,11 @@ class FilesTableHeader extends React.Component {
           }
         : {};
 
+      console.log(
+        "getTableColumns modifiedRecentColumnIsEnabled",
+        this.props.modifiedRecentColumnIsEnabled,
+      );
+
       const columns = [
         {
           key: "Name",
@@ -232,11 +237,12 @@ class FilesTableHeader extends React.Component {
           minWidth: 210,
           onClick: this.onFilter,
         },
+
         { ...authorBlock },
         {
-          key: "Created",
+          key: "CreatedRecent",
           title: t("ByCreation"),
-          enable: this.props.createdColumnIsEnabled,
+          enable: this.props.createdRecentColumnIsEnabled,
           resizable: true,
           sortBy: SortByFieldName.CreationDate,
           // onClick: this.onFilter,
@@ -252,27 +258,27 @@ class FilesTableHeader extends React.Component {
           onChange: this.onColumnChange,
         },
         {
-          key: "Modified",
+          key: "ModifiedRecent",
           title: t("ByLastModified"),
-          enable: this.props.modifiedColumnIsEnabled,
+          enable: this.props.modifiedRecentColumnIsEnabled,
           resizable: true,
           sortBy: SortByFieldName.ModifiedDate,
           // onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
         {
-          key: "Size",
+          key: "SizeRecent",
           title: t("Common:Size"),
-          enable: this.props.sizeColumnIsEnabled,
+          enable: this.props.sizeRecentColumnIsEnabled,
           resizable: true,
           sortBy: SortByFieldName.Size,
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
         {
-          key: "Type",
+          key: "TypeRecent",
           title: t("Common:Type"),
-          enable: this.props.typeColumnIsEnabled,
+          enable: this.props.typeRecentColumnIsEnabled,
           resizable: true,
           sortBy: SortByFieldName.Type,
           // onClick: this.onFilter,
@@ -359,7 +365,11 @@ class FilesTableHeader extends React.Component {
       defaultColumns.push(...columns);
     }
 
-    let columns = getColumns(defaultColumns);
+    console.log("call getColumns defaultColumns", defaultColumns);
+
+    let columns = getColumns(defaultColumns, isRecentTab);
+
+    console.log("getTableColumns columns", columns);
     const storageColumns = localStorage.getItem(tableStorageName);
     const splitColumns = storageColumns && storageColumns.split(",");
     const resetColumnsSize =
@@ -371,6 +381,11 @@ class FilesTableHeader extends React.Component {
     const sortOrder = isRooms ? roomsFilter.sortOrder : filter.sortOrder;
 
     this.setTableColumns(tableColumns);
+    console.log(
+      "fromUpdate this.props.modifiedRecentColumnIsEnabled",
+      fromUpdate,
+      this.props.modifiedRecentColumnIsEnabled,
+    );
     if (fromUpdate) {
       this.setState({
         columns,
@@ -454,6 +469,17 @@ class FilesTableHeader extends React.Component {
       sortBy !== this.state.sortBy ||
       sortOrder !== this.state.sortOrder
     ) {
+      console.log(
+        "isRecentTab this.state.isRecentTab",
+        isRecentTab,
+        this.state.isRecentTab,
+      );
+      console.log("sortBy this.state.sortBy", sortBy, this.state.sortBy);
+      console.log(
+        "sortOrder this.state.sortOrder",
+        sortOrder,
+        this.state.sortOrder,
+      );
       return this.getTableColumns(true);
     }
 
@@ -464,6 +490,12 @@ class FilesTableHeader extends React.Component {
       if (columnIndex === -1) return;
 
       columns[columnIndex].enable = this.props.withContent;
+      console.log(
+        "componentDidUpdate  columns[columnIndex].enable",
+        columns[columnIndex].enable,
+        this.props.withContent,
+      );
+
       this.setState({ columns });
     }
 
@@ -482,10 +514,11 @@ class FilesTableHeader extends React.Component {
 
   onColumnChange = (key) => {
     const { columns } = this.state;
-
+    console.log("onColumnChange columns", columns);
     const columnIndex = columns.findIndex((c) => c.key === key);
     if (columnIndex === -1) return;
 
+    console.log("onColumnChange setColumnEnable", key);
     this.props.setColumnEnable(key);
 
     columns[columnIndex].enable = !columns[columnIndex].enable;
@@ -650,6 +683,12 @@ export default inject(
       roomColumnActivityIsEnabled,
       roomQuotaColumnIsEnable,
 
+      authorRecentColumnIsEnabled,
+      modifiedRecentColumnIsEnabled,
+      createdRecentColumnIsEnabled,
+      sizeRecentColumnIsEnabled,
+      typeRecentColumnIsEnabled,
+
       getColumns,
       setColumnEnable,
     } = tableStore;
@@ -701,6 +740,12 @@ export default inject(
       roomColumnActivityIsEnabled,
       roomQuotaColumnIsEnable,
 
+      authorRecentColumnIsEnabled,
+      modifiedRecentColumnIsEnabled,
+      createdRecentColumnIsEnabled,
+      sizeRecentColumnIsEnabled,
+      typeRecentColumnIsEnabled,
+
       getColumns,
       setColumnEnable,
       isTrashFolder,

packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js

@@ -40,11 +40,11 @@ import {
 
 const RecentRowDataComponent = (props) => {
   const {
-    authorColumnIsEnabled,
+    authorRecentColumnIsEnabled,
-    createdColumnIsEnabled,
+    createdRecentColumnIsEnabled,
-    modifiedColumnIsEnabled,
+    modifiedRecentColumnIsEnabled,
-    sizeColumnIsEnabled,
+    sizeRecentColumnIsEnabled,
-    typeColumnIsEnabled,
+    typeRecentColumnIsEnabled,
     quickButtonsColumnIsEnabled,
     lastOpenedColumnIsEnabled,
 
@@ -87,15 +87,17 @@ const RecentRowDataComponent = (props) => {
         </StyledBadgesContainer>
       </TableCell>
 
-      {authorColumnIsEnabled ? (
+      {authorRecentColumnIsEnabled ? (
         <TableCell
           style={
-            !authorColumnIsEnabled ? { background: "none" } : dragStyles.style
+            !authorRecentColumnIsEnabled
+              ? { background: "none" }
+              : dragStyles.style
           }
           {...selectionProp}
           className={classNames(
             selectionProp?.className,
-            lastColumn === "Author" ? "no-extra-space" : "",
+            lastColumn === "AuthorRecent" ? "no-extra-space" : "",
           )}
         >
           <AuthorCell
@@ -107,17 +109,17 @@ const RecentRowDataComponent = (props) => {
         <div />
       )}
 
-      {createdColumnIsEnabled ? (
+      {createdRecentColumnIsEnabled ? (
         <TableCell
           style={
-            !createdColumnIsEnabled
+            !createdRecentColumnIsEnabled
               ? { background: "none !important" }
               : dragStyles.style
           }
           {...selectionProp}
           className={classNames(
             selectionProp?.className,
-            lastColumn === "Created" ? "no-extra-space" : "",
+            lastColumn === "CreatedRecent" ? "no-extra-space" : "",
           )}
         >
           <DateCell
@@ -152,15 +154,17 @@ const RecentRowDataComponent = (props) => {
         <div />
       )}
 
-      {modifiedColumnIsEnabled ? (
+      {modifiedRecentColumnIsEnabled ? (
         <TableCell
           style={
-            !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
+            !modifiedRecentColumnIsEnabled
+              ? { background: "none" }
+              : dragStyles.style
           }
           {...selectionProp}
           className={classNames(
             selectionProp?.className,
-            lastColumn === "Modified" ? "no-extra-space" : "",
+            lastColumn === "ModifiedRecent" ? "no-extra-space" : "",
           )}
         >
           <DateCell
@@ -172,15 +176,17 @@ const RecentRowDataComponent = (props) => {
         <div />
       )}
 
-      {sizeColumnIsEnabled ? (
+      {sizeRecentColumnIsEnabled ? (
         <TableCell
           style={
-            !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
+            !sizeRecentColumnIsEnabled
+              ? { background: "none" }
+              : dragStyles.style
           }
           {...selectionProp}
           className={classNames(
             selectionProp?.className,
-            lastColumn === "Size" ? "no-extra-space" : "",
+            lastColumn === "SizeRecent" ? "no-extra-space" : "",
           )}
         >
           <SizeCell
@@ -192,17 +198,17 @@ const RecentRowDataComponent = (props) => {
         <div />
       )}
 
-      {typeColumnIsEnabled ? (
+      {typeRecentColumnIsEnabled ? (
         <TableCell
           style={
-            !typeColumnIsEnabled
+            !typeRecentColumnIsEnabled
               ? { background: "none !important" }
               : dragStyles.style
           }
           {...selectionProp}
           className={classNames(
             selectionProp?.className,
-            lastColumn === "Type" ? "no-extra-space" : "",
+            lastColumn === "TypeRecent" ? "no-extra-space" : "",
           )}
         >
           <TypeCell
@@ -239,22 +245,22 @@ const RecentRowDataComponent = (props) => {
 
 export default inject(({ tableStore }) => {
   const {
-    authorColumnIsEnabled,
+    authorRecentColumnIsEnabled,
-    createdColumnIsEnabled,
+    createdRecentColumnIsEnabled,
-    modifiedColumnIsEnabled,
+    modifiedRecentColumnIsEnabled,
-    sizeColumnIsEnabled,
+    sizeRecentColumnIsEnabled,
-    typeColumnIsEnabled,
+    typeRecentColumnIsEnabled,
     quickButtonsColumnIsEnabled,
     lastOpenedColumnIsEnabled,
     tableStorageName,
   } = tableStore;
 
   return {
-    authorColumnIsEnabled,
+    authorRecentColumnIsEnabled,
-    createdColumnIsEnabled,
+    createdRecentColumnIsEnabled,
-    modifiedColumnIsEnabled,
+    modifiedRecentColumnIsEnabled,
-    sizeColumnIsEnabled,
+    sizeRecentColumnIsEnabled,
-    typeColumnIsEnabled,
+    typeRecentColumnIsEnabled,
     quickButtonsColumnIsEnabled,
     lastOpenedColumnIsEnabled,
     tableStorageName,

packages/client/src/store/TableStore.js

@@ -63,11 +63,17 @@ class TableStore {
   authorColumnIsEnabled = false;
   roomColumnIsEnabled = true;
   erasureColumnIsEnabled = true;
-  createdColumnIsEnabled = true;
+  createdColumnIsEnabled = false;
   modifiedColumnIsEnabled = true;
   sizeColumnIsEnabled = true;
-  typeColumnIsEnabled = true;
+  typeColumnIsEnabled = false;
   quickButtonsColumnIsEnabled = true;
+
+  authorRecentColumnIsEnabled = true;
+  modifiedRecentColumnIsEnabled = false;
+  createdRecentColumnIsEnabled = false;
+  sizeRecentColumnIsEnabled = true;
+  typeRecentColumnIsEnabled = false;
   lastOpenedColumnIsEnabled = true;
 
   authorTrashColumnIsEnabled = true;
@@ -120,14 +126,27 @@ class TableStore {
     this.authorColumnIsEnabled = enable;
   };
 
+  setAuthorRecentColumn = (enable) => {
+    this.authorRecentColumnIsEnabled = enable;
+  };
+
   setCreatedColumn = (enable) => {
     this.createdColumnIsEnabled = enable;
   };
 
+  setCreatedRecentColumn = (enable) => {
+    this.createdRecentColumnIsEnabled = enable;
+  };
+
   setModifiedColumn = (enable) => {
     this.modifiedColumnIsEnabled = enable;
   };
 
+  setModifiedRecentColumn = (enable) => {
+    console.log("setModifiedRecentColumn", enable);
+    this.modifiedRecentColumnIsEnabled = enable;
+  };
+
   setRoomColumn = (enable) => {
     this.roomColumnIsEnabled = enable;
   };
@@ -140,10 +159,18 @@ class TableStore {
     this.sizeColumnIsEnabled = enable;
   };
 
+  setSizeRecentColumn = (enable) => {
+    this.sizeRecentColumnIsEnabled = enable;
+  };
+
   setTypeColumn = (enable) => {
     this.typeColumnIsEnabled = enable;
   };
 
+  setTypeRecentColumn = (enable) => {
+    this.typeRecentColumnIsEnabled = enable;
+  };
+
   setQuickButtonsColumn = (enable) => {
     this.quickButtonsColumnIsEnabled = enable;
   };
@@ -176,7 +203,7 @@ class TableStore {
   setAccountsInsideGroupColumnGroup = (enable) =>
     (this.groupAccountsInsideGroupColumnIsEnabled = enable);
 
-  setColumnsEnable = (frameTableColumns) => {
+  setColumnsEnable = (frameTableColumns, isRecentTab) => {
     const storageColumns = localStorage.getItem(this.tableStorageName);
     const splitColumns = storageColumns
       ? storageColumns.split(",")
@@ -184,6 +211,8 @@ class TableStore {
         ? frameTableColumns.split(",")
         : null;
 
+    console.log("splitColumns", splitColumns);
+
     if (splitColumns) {
       const {
         isRoomsFolder,
@@ -192,9 +221,21 @@ class TableStore {
         getIsAccountsPeople,
         getIsAccountsGroups,
         getIsAccountsInsideGroup,
+        // isRecentTab,
+        // isRecentFolder,
       } = this.treeFoldersStore;
+
       const isRooms = isRoomsFolder || isArchiveFolder;
 
+      // console.log(
+      //   "getIsAccountsPeople getIsAccountsGroups getIsAccountsInsideGroup",
+      //   getIsAccountsPeople(),
+      //   getIsAccountsGroups(),
+      //   getIsAccountsInsideGroup(),
+      // );
+
+      // console.log("isRooms  isTrashFolder", isRooms, isTrashFolder);
+
       if (isRooms) {
         this.setRoomColumnType(splitColumns.includes("Type"));
         this.setRoomColumnTags(splitColumns.includes("Tags"));
@@ -240,13 +281,31 @@ class TableStore {
         return;
       }
 
+      console.log("setColumnsEnable isRecentTab", isRecentTab);
+      console.log("window.location", window.location);
+
+      if (isRecentTab) {
+        console.log(
+          "call setModifiedRecentColumn",
+          splitColumns.includes("ModifiedRecent"),
+        );
+
+        this.setModifiedRecentColumn(splitColumns.includes("ModifiedRecent"));
+        this.setAuthorRecentColumn(splitColumns.includes("AuthorRecent"));
+        this.setCreatedRecentColumn(splitColumns.includes("CreatedRecent"));
+        this.setLastOpenedColumn(splitColumns.includes("LastOpened"));
+        this.setSizeRecentColumn(splitColumns.includes("SizeRecent"));
+        this.setTypeRecentColumn(splitColumns.includes("TypeRecent"));
+        this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
+        return;
+      }
+
       this.setModifiedColumn(splitColumns.includes("Modified"));
       this.setAuthorColumn(splitColumns.includes("Author"));
       this.setCreatedColumn(splitColumns.includes("Created"));
       this.setSizeColumn(splitColumns.includes("Size"));
       this.setTypeColumn(splitColumns.includes("Type"));
       this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
-      this.setLastOpenedColumn(splitColumns.includes("LastOpened"));
     }
   };
 
@@ -272,6 +331,9 @@ class TableStore {
       case "AuthorTrash":
         this.setAuthorTrashColumn(!this.authorTrashColumnIsEnabled);
         return;
+      case "AuthorRecent":
+        this.setAuthorRecentColumn(!this.authorRecentColumnIsEnabled);
+        return;
 
       case "Created":
         this.setCreatedColumn(!this.createdColumnIsEnabled);
@@ -279,6 +341,9 @@ class TableStore {
       case "CreatedTrash":
         this.setCreatedTrashColumn(!this.createdTrashColumnIsEnabled);
         return;
+      case "CreatedRecent":
+        this.setCreatedRecentColumn(!this.createdRecentColumnIsEnabled);
+        return;
 
       case "Department":
         getIsAccountsPeople()
@@ -291,6 +356,9 @@ class TableStore {
       case "Modified":
         this.setModifiedColumn(!this.modifiedColumnIsEnabled);
         return;
+      case "ModifiedRecent":
+        this.setModifiedRecentColumn(!this.modifiedRecentColumnIsEnabled);
+        return;
 
       case "Erasure":
         this.setErasureColumn(!this.erasureColumnIsEnabled);
@@ -302,6 +370,9 @@ class TableStore {
       case "SizeTrash":
         this.setSizeTrashColumn(!this.sizeTrashColumnIsEnabled);
         return;
+      case "SizeRecent":
+        this.setSizeRecentColumn(!this.sizeRecentColumnIsEnabled);
+        return;
 
       case "Type":
         isRooms
@@ -319,6 +390,10 @@ class TableStore {
         this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled);
         return;
 
+      case "TypeRecent":
+        this.setTypeRecentColumn(!this.typeRecentColumnIsEnabled);
+        return;
+
       case "QuickButtons":
         this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled);
         return;
@@ -370,7 +445,7 @@ class TableStore {
     }
   };
 
-  getColumns = (defaultColumns) => {
+  getColumns = (defaultColumns, isRecentTab) => {
     const { isFrame, frameConfig } = this.settingsStore;
     const storageColumns = localStorage.getItem(this.tableStorageName);
     const splitColumns = storageColumns && storageColumns.split(",");
@@ -379,16 +454,23 @@ class TableStore {
     const columns = [];
 
     if (splitColumns) {
-      this.setColumnsEnable();
+      console.log(
+        "getColumns defaultColumns splitColumns",
+        defaultColumns,
+        splitColumns,
+      );
+      this.setColumnsEnable(null, isRecentTab);
 
       for (let col of defaultColumns) {
         const column = splitColumns.find((key) => key === col.key);
+
         column ? (col.enable = true) : (col.enable = false);
 
         columns.push(col);
       }
       return columns;
     } else if (isFrame && frameTableColumns) {
+      console.log("2");
       this.setColumnsEnable(frameTableColumns);
 
       const frameTableArray = frameTableColumns.split(",");