reordered trash table columns and separated Author, Created, Size and Type trash table columns for default isEnable

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

@@ -82,32 +82,32 @@ class FilesTableHeader extends React.Component {
           onClick: this.onFilter,
         },
         {
-          key: "Author",
+          key: "Room",
+          title: t("Common:Room"),
+          enable: this.props.roomColumnIsEnabled,
+          resizable: true,
+          sortBy: "Room",
+          onClick: this.onFilter,
+          onChange: this.onColumnChange,
+        },
+        {
+          key: "AuthorTrash",
           title: t("ByAuthor"),
-          enable: this.props.authorColumnIsEnabled,
+          enable: this.props.authorTrashColumnIsEnabled,
           resizable: true,
           sortBy: "Author",
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
         {
-          key: "Created",
+          key: "CreatedTrash",
           title: t("ByCreation"),
-          enable: this.props.createdColumnIsEnabled,
+          enable: this.props.createdTrashColumnIsEnabled,
           resizable: true,
           sortBy: "DateAndTimeCreation",
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
-        {
-          key: "Room",
-          title: t("Common:Room"),
-          enable: this.props.roomColumnIsEnabled,
-          resizable: true,
-          sortBy: "Room",
-          onClick: this.onFilter,
-          onChange: this.onColumnChange,
-        },
         {
           key: "Erasure",
           title: t("ByErasure"),
@@ -118,18 +118,18 @@ class FilesTableHeader extends React.Component {
           onChange: this.onColumnChange,
         },
         {
-          key: "Size",
+          key: "SizeTrash",
           title: t("Common:Size"),
-          enable: this.props.sizeColumnIsEnabled,
+          enable: this.props.sizeTrashColumnIsEnabled,
           resizable: true,
           sortBy: "Size",
           onClick: this.onFilter,
           onChange: this.onColumnChange,
         },
         {
-          key: "Type",
+          key: "TypeTrash",
           title: t("Common:Type"),
-          enable: this.props.typeColumnIsEnabled,
+          enable: this.props.typeTrashColumnIsEnabled,
           resizable: true,
           sortBy: "Type",
           onClick: this.onFilter,
@@ -450,12 +450,16 @@ export default inject(
 
       nameColumnIsEnabled,
       authorColumnIsEnabled,
+      authorTrashColumnIsEnabled,
       createdColumnIsEnabled,
+      createdTrashColumnIsEnabled,
       modifiedColumnIsEnabled,
       roomColumnIsEnabled,
       erasureColumnIsEnabled,
       sizeColumnIsEnabled,
+      sizeTrashColumnIsEnabled,
       typeColumnIsEnabled,
+      typeTrashColumnIsEnabled,
       quickButtonsColumnIsEnabled,
 
       roomColumnNameIsEnabled,
@@ -497,12 +501,16 @@ export default inject(
 
       nameColumnIsEnabled,
       authorColumnIsEnabled,
+      authorTrashColumnIsEnabled,
       createdColumnIsEnabled,
+      createdTrashColumnIsEnabled,
       modifiedColumnIsEnabled,
       roomColumnIsEnabled,
       erasureColumnIsEnabled,
       sizeColumnIsEnabled,
+      sizeTrashColumnIsEnabled,
       typeColumnIsEnabled,
+      typeTrashColumnIsEnabled,
       quickButtonsColumnIsEnabled,
 
       roomColumnNameIsEnabled,

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

@@ -16,12 +16,12 @@ import RoomCell from "./RoomCell";
 
 const TrashRowDataComponent = (props) => {
   const {
-    authorColumnIsEnabled,
-    createdColumnIsEnabled,
+    authorTrashColumnIsEnabled,
+    createdTrashColumnIsEnabled,
     roomColumnIsEnabled,
     erasureColumnIsEnabled,
-    sizeColumnIsEnabled,
-    typeColumnIsEnabled,
+    sizeTrashColumnIsEnabled,
+    typeTrashColumnIsEnabled,
     quickButtonsColumnIsEnabled,
 
     dragStyles,
@@ -60,10 +60,28 @@ const TrashRowDataComponent = (props) => {
         </StyledBadgesContainer>
       </TableCell>
 
-      {authorColumnIsEnabled ? (
+      {roomColumnIsEnabled ? (
         <TableCell
           style={
-            !authorColumnIsEnabled ? { background: "none" } : dragStyles.style
+            !roomColumnIsEnabled ? { background: "none" } : dragStyles.style
+          }
+          {...selectionProp}
+        >
+          <RoomCell
+            sideColor={theme.filesSection.tableView.row.sideColor}
+            {...props}
+          />
+        </TableCell>
+      ) : (
+        <div />
+      )}
+
+      {authorTrashColumnIsEnabled ? (
+        <TableCell
+          style={
+            !authorTrashColumnIsEnabled
+              ? { background: "none" }
+              : dragStyles.style
           }
           {...selectionProp}
         >
@@ -76,10 +94,10 @@ const TrashRowDataComponent = (props) => {
         <div />
       )}
 
-      {createdColumnIsEnabled ? (
+      {createdTrashColumnIsEnabled ? (
         <TableCell
           style={
-            !createdColumnIsEnabled
+            !createdTrashColumnIsEnabled
               ? { background: "none !important" }
               : dragStyles.style
           }
@@ -95,22 +113,6 @@ const TrashRowDataComponent = (props) => {
         <div />
       )}
 
-      {roomColumnIsEnabled ? (
-        <TableCell
-          style={
-            !roomColumnIsEnabled ? { background: "none" } : dragStyles.style
-          }
-          {...selectionProp}
-        >
-          <RoomCell
-            sideColor={theme.filesSection.tableView.row.sideColor}
-            {...props}
-          />
-        </TableCell>
-      ) : (
-        <div />
-      )}
-
       {erasureColumnIsEnabled ? (
         <TableCell
           style={
@@ -127,10 +129,12 @@ const TrashRowDataComponent = (props) => {
         <div />
       )}
 
-      {sizeColumnIsEnabled ? (
+      {sizeTrashColumnIsEnabled ? (
         <TableCell
           style={
-            !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
+            !sizeTrashColumnIsEnabled
+              ? { background: "none" }
+              : dragStyles.style
           }
           {...selectionProp}
         >
@@ -143,10 +147,10 @@ const TrashRowDataComponent = (props) => {
         <div />
       )}
 
-      {typeColumnIsEnabled ? (
+      {typeTrashColumnIsEnabled ? (
         <TableCell
           style={
-            !typeColumnIsEnabled
+            !typeTrashColumnIsEnabled
               ? { background: "none !important" }
               : dragStyles.style
           }
@@ -186,22 +190,22 @@ const TrashRowDataComponent = (props) => {
 
 export default inject(({ tableStore }) => {
   const {
-    authorColumnIsEnabled,
-    createdColumnIsEnabled,
+    authorTrashColumnIsEnabled,
+    createdTrashColumnIsEnabled,
     roomColumnIsEnabled,
     erasureColumnIsEnabled,
-    sizeColumnIsEnabled,
-    typeColumnIsEnabled,
+    sizeTrashColumnIsEnabled,
+    typeTrashColumnIsEnabled,
     quickButtonsColumnIsEnabled,
   } = tableStore;
 
   return {
-    authorColumnIsEnabled,
-    createdColumnIsEnabled,
+    authorTrashColumnIsEnabled,
+    createdTrashColumnIsEnabled,
     roomColumnIsEnabled,
     erasureColumnIsEnabled,
-    sizeColumnIsEnabled,
-    typeColumnIsEnabled,
+    sizeTrashColumnIsEnabled,
+    typeTrashColumnIsEnabled,
     quickButtonsColumnIsEnabled,
   };
 })(observer(TrashRowDataComponent));

packages/client/src/pages/Home/Section/Filter/index.js

@@ -1053,22 +1053,10 @@ const SectionFilterContent = ({
       label: t("ByLastModified"),
       default: true,
     };
-    const type = {
-      id: "sort-by_type",
-      key: "Type",
-      label: t("Common:Type"),
-      default: true,
-    };
-    const size = {
-      id: "sort-by_size",
-      key: "Size",
-      label: t("Common:Size"),
-      default: true,
-    };
-    const creationDate = {
-      id: "sort-by_created",
-      key: "DateAndTimeCreation",
-      label: t("ByCreation"),
+    const room = {
+      id: "sort-by_room",
+      key: "Room",
+      label: t("Common:Room"),
       default: true,
     };
     const authorOption = {
@@ -1077,18 +1065,18 @@ const SectionFilterContent = ({
       label: t("ByAuthor"),
       default: true,
     };
+    const creationDate = {
+      id: "sort-by_created",
+      key: "DateAndTimeCreation",
+      label: t("ByCreation"),
+      default: true,
+    };
     const owner = {
       id: "sort-by_owner",
       key: "Author",
       label: t("Common:Owner"),
       default: true,
     };
-    const room = {
-      id: "sort-by_room",
-      key: "Room",
-      label: t("Common:Room"),
-      default: true,
-    };
     const erasure = {
       id: "sort-by_erasure",
       key: "Erasure",
@@ -1101,6 +1089,18 @@ const SectionFilterContent = ({
       label: t("Common:Tags"),
       default: true,
     };
+    const size = {
+      id: "sort-by_size",
+      key: "Size",
+      label: t("Common:Size"),
+      default: true,
+    };
+    const type = {
+      id: "sort-by_type",
+      key: "Type",
+      label: t("Common:Type"),
+      default: true,
+    };
     const roomType = {
       id: "sort-by_room-type",
       key: "roomType",

packages/client/src/store/TableStore.js

@@ -33,6 +33,11 @@ class TableStore {
   typeColumnIsEnabled = true;
   quickButtonsColumnIsEnabled = true;
 
+  authorTrashColumnIsEnabled = true;
+  createdTrashColumnIsEnabled = false;
+  sizeTrashColumnIsEnabled = false;
+  typeTrashColumnIsEnabled = false;
+
   constructor(authStore, treeFoldersStore) {
     makeAutoObservable(this);
 
@@ -88,6 +93,12 @@ class TableStore {
     this.quickButtonsColumnIsEnabled = enable;
   };
 
+  setAuthorTrashColumn = (enable) => (this.authorTrashColumnIsEnabled = enable);
+  setCreatedTrashColumn = (enable) =>
+    (this.createdTrashColumnIsEnabled = enable);
+  setSizeTrashColumn = (enable) => (this.sizeTrashColumnIsEnabled = enable);
+  setTypeTrashColumn = (enable) => (this.typeTrashColumnIsEnabled = enable);
+
   setColumnsEnable = () => {
     const storageColumns = localStorage.getItem(this.tableStorageName);
     const splitColumns = storageColumns && storageColumns.split(",");
@@ -109,12 +120,12 @@ class TableStore {
       }
 
       if (isTrashFolder) {
-        this.setAuthorColumn(splitColumns.includes("Author"));
-        //this.setCreatedColumn(splitColumns.includes("Created"));
         this.setRoomColumn(splitColumns.includes("Room"));
+        this.setAuthorTrashColumn(splitColumns.includes("AuthorTrash"));
+        this.setCreatedTrashColumn(splitColumns.includes("CreatedTrash"));
         this.setErasureColumn(splitColumns.includes("Erasure"));
-        this.setSizeColumn(splitColumns.includes("Size"));
-        this.setTypeColumn(splitColumns.includes("Type"));
+        this.setSizeTrashColumn(splitColumns.includes("SizeTrash"));
+        this.setTypeTrashColumn(splitColumns.includes("TypeTrash"));
         this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
         return;
       }
@@ -129,45 +140,72 @@ class TableStore {
   };
 
   setColumnEnable = (key) => {
-    const { isRoomsFolder, isArchiveFolder } = this.treeFoldersStore;
+    const {
+      isRoomsFolder,
+      isArchiveFolder,
+      isTrashFolder,
+    } = this.treeFoldersStore;
     const isRooms = isRoomsFolder || isArchiveFolder;
 
     switch (key) {
-      case "Author":
-        this.setAuthorColumn(!this.authorColumnIsEnabled);
-        return;
-      case "Created":
-        this.setCreatedColumn(!this.createdColumnIsEnabled);
-        return;
-      case "Modified":
-        this.setModifiedColumn(!this.modifiedColumnIsEnabled);
-        return;
       case "Room":
         this.setRoomColumn(!this.roomColumnIsEnabled);
         return;
+
+      case "Author":
+        this.setAuthorColumn(!this.authorColumnIsEnabled);
+        return;
+      case "AuthorTrash":
+        this.setAuthorTrashColumn(!this.authorTrashColumnIsEnabled);
+        return;
+
+      case "Created":
+        this.setCreatedColumn(!this.createdColumnIsEnabled);
+        return;
+      case "CreatedTrash":
+        this.setCreatedTrashColumn(!this.createdTrashColumnIsEnabled);
+        return;
+
+      case "Modified":
+        this.setModifiedColumn(!this.modifiedColumnIsEnabled);
+        return;
+
       case "Erasure":
         this.setErasureColumn(!this.erasureColumnIsEnabled);
         return;
+
       case "Size":
         this.setSizeColumn(!this.sizeColumnIsEnabled);
         return;
+      case "SizeTrash":
+        this.setSizeTrashColumn(!this.sizeTrashColumnIsEnabled);
+        return;
+
       case "Type":
         isRooms
           ? this.setRoomColumnType(!this.roomColumnTypeIsEnabled)
           : this.setTypeColumn(!this.typeColumnIsEnabled);
         return;
+      case "TypeTrash":
+        this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled);
+        return;
+
       case "QuickButtons":
         this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled);
         return;
+
       case "Owner":
         this.setRoomColumnOwner(!this.roomColumnOwnerIsEnabled);
         return;
+
       case "Tags":
         this.setRoomColumnTags(!this.roomColumnTagsIsEnabled);
         return;
+
       case "Activity":
         this.setRoomColumnActivity(!this.roomColumnActivityIsEnabled);
         return;
+
       default:
         return;
     }