Web: Files: SDK: fixed table view

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

@@ -50,7 +50,6 @@ class FilesTableHeader extends React.Component {
       columnInfoPanelStorageName,
       isPublicRoom,
       isFrame,
-      frameTableColumns,
       isRecentTab,
       isDefaultRoomsQuotaSet,
       showStorageInfo,
@@ -366,15 +365,6 @@ class FilesTableHeader extends React.Component {
       !splitColumns ||
       isFrame;
 
-    if (isFrame && frameTableColumns) {
-      const frameTableArray = frameTableColumns.split(",");
-
-      columns = columns.map((col) => {
-        col.enable = frameTableArray.includes(col.key) ? true : false;
-        return col;
-      });
-    }
-
     const tableColumns = columns.map((c) => c.enable && c.key);
 
     this.setTableColumns(tableColumns);
@@ -705,7 +695,6 @@ export default inject(
       publicRoomKey,
 
       isFrame,
-      frameTableColumns: frameConfig?.viewTableColumns,
       isRecentTab,
       showSettings: frameConfig?.showSettings,
       isDefaultRoomsQuotaSet,

packages/client/src/store/TableStore.js

@@ -34,13 +34,11 @@ const TABLE_ACCOUNTS_INSIDE_GROUP_COLUMNS = `insideGroupTableColumns_ver-${Table
 const TABLE_ROOMS_COLUMNS = `roomsTableColumns_ver-${TableVersions.Rooms}`;
 const TABLE_TRASH_COLUMNS = `trashTableColumns_ver-${TableVersions.Trash}`;
 const TABLE_RECENT_COLUMNS = `recentTableColumns_ver-${TableVersions.Recent}`;
-const TABLE_SDK_COLUMNS = `filesSDKTableColumns_ver-${TableVersions.Files}`;
 
 const COLUMNS_SIZE = `filesColumnsSize_ver-${TableVersions.Files}`;
 const COLUMNS_ROOMS_SIZE = `roomsColumnsSize_ver-${TableVersions.Rooms}`;
 const COLUMNS_TRASH_SIZE = `trashColumnsSize_ver-${TableVersions.Trash}`;
 const COLUMNS_RECENT_SIZE = `recentColumnsSize_ver-${TableVersions.Recent}`;
-const COLUMNS_SDK_SIZE = `filesSDKColumnsSize_ver-${TableVersions.Files}`;
 
 const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TableVersions.Files}`;
 const COLUMNS_ROOMS_SIZE_INFO_PANEL = `roomsColumnsSizeInfoPanel_ver-${TableVersions.Rooms}`;
@@ -176,9 +174,13 @@ class TableStore {
   setAccountsInsideGroupColumnGroup = (enable) =>
     (this.groupAccountsInsideGroupColumnIsEnabled = enable);
 
-  setColumnsEnable = () => {
+  setColumnsEnable = (frameTableColumns) => {
     const storageColumns = localStorage.getItem(this.tableStorageName);
-    const splitColumns = storageColumns && storageColumns.split(",");
+    const splitColumns = storageColumns
+      ? storageColumns.split(",")
+      : frameTableColumns
+        ? frameTableColumns.split(",")
+        : null;
 
     if (splitColumns) {
       const {
@@ -360,8 +362,10 @@ class TableStore {
   };
 
   getColumns = (defaultColumns) => {
+    const { isFrame, frameConfig } = this.settingsStore;
     const storageColumns = localStorage.getItem(this.tableStorageName);
     const splitColumns = storageColumns && storageColumns.split(",");
+    const frameTableColumns = frameConfig?.viewTableColumns;
 
     const columns = [];
 
@@ -375,11 +379,20 @@ class TableStore {
         columns.push(col);
       }
       return columns;
+    } else if (isFrame && frameTableColumns) {
+      this.setColumnsEnable(frameTableColumns);
+
+      const frameTableArray = frameTableColumns.split(",");
+      return defaultColumns.map((col) => {
+        col.enable = frameTableArray.includes(col.key) ? true : false;
+        return col;
+      });
     } else {
       return defaultColumns;
     }
   };
 
+  // Column names
   get tableStorageName() {
     const {
       isRoomsFolder,
@@ -395,9 +408,9 @@ class TableStore {
     const userId = this.userStore.user?.id;
     const isFrame = this.settingsStore.isFrame;
 
-    if (isFrame) return `${TABLE_SDK_COLUMNS}=${userId}`;
 
-    return isRooms
+
+    const tableStorageName = isRooms
       ? `${TABLE_ROOMS_COLUMNS}=${userId}`
       : getIsAccountsPeople()
         ? `${TABLE_ACCOUNTS_PEOPLE_COLUMNS}=${userId}`
@@ -410,8 +423,11 @@ class TableStore {
               : isRecentTab
                 ? `${TABLE_RECENT_COLUMNS}=${userId}`
                 : `${TABLE_COLUMNS}=${userId}`;
+
+    return isFrame ? `SDK_${tableStorageName}` : tableStorageName;
   }
 
+  // Table column sizes
   get columnStorageName() {
     const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } =
       this.treeFoldersStore;
@@ -419,17 +435,18 @@ class TableStore {
     const userId = this.userStore.user?.id;
     const isFrame = this.settingsStore.isFrame;
 
-    if (isFrame) return `${COLUMNS_SDK_SIZE}=${userId}`;
+    const columnStorageName = isRooms
-
-    return isRooms
       ? `${COLUMNS_ROOMS_SIZE}=${userId}`
       : isTrashFolder
         ? `${COLUMNS_TRASH_SIZE}=${userId}`
         : isRecentTab
           ? `${COLUMNS_RECENT_SIZE}=${userId}`
           : `${COLUMNS_SIZE}=${userId}`;
+
+    return isFrame ? `SDK_${columnStorageName}` : columnStorageName;
   }
 
+  // Column names for info-panel
   get columnInfoPanelStorageName() {
     const { isRoomsFolder, isArchiveFolder, isTrashFolder, isRecentTab } =
       this.treeFoldersStore;
@@ -439,13 +456,17 @@ class TableStore {
 
     if (isFrame) return `${COLUMNS_SDK_SIZE_INFO_PANEL}=${userId}`;
 
-    return isRooms
+    const columnInfoPanelStorageName = isRooms
       ? `${COLUMNS_ROOMS_SIZE_INFO_PANEL}=${userId}`
       : isTrashFolder
         ? `${COLUMNS_TRASH_SIZE_INFO_PANEL}=${userId}`
         : isRecentTab
           ? `${COLUMNS_RECENT_SIZE_INFO_PANEL}=${userId}`
           : `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
+
+    return isFrame
+      ? `SDK_${columnInfoPanelStorageName}`
+      : columnInfoPanelStorageName;
   }
 
   get filesColumnStorageName() {

packages/shared/components/table/TableHeader.tsx

@@ -1205,7 +1205,7 @@ class TableHeader extends React.Component<
 
     // TODO: If defaultSize(75px) is less than defaultMinColumnSize(110px) the calculations work correctly
     const defaultSize =
-      columns.find((col) => col.defaultSize)?.defaultSize || 0;
+      columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
 
     // TODO: Fixed columns size if something went wrong
     if (storageSize) {
@@ -1621,7 +1621,7 @@ class TableHeader extends React.Component<
 
     let countColumns = 0;
     const defaultColumnSize =
-      columns.find((col) => col.defaultSize)?.defaultSize || 0;
+      columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
 
     newGridTemplateColumns.forEach((item, index) => {
       const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize);
@@ -1703,8 +1703,8 @@ class TableHeader extends React.Component<
       : document.getElementById("table-container");
     const containerWidth = container ? container.clientWidth : 0;
 
-    const firstColumnPercent = 40;
+    const firstColumnPercent = enableColumns.length > 0 ? 40 : 100;
-    const percent = 60 / enableColumns.length;
+    const percent = enableColumns.length > 0 ? 60 / enableColumns.length : 0;
 
     const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`;
     const otherColumns = `${(containerWidth * percent) / 100}px`;