feat(web): implement resizable columns on Asset and Request pages (#1074

) make the columns stretchable on Asset and Request page
reearth · Feb 21, 2024 · 85584eb · 85584eb
1 parent bfca20f
commit 85584eb
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 94 deletions.
diff --git a/web/src/components/molecules/Asset/AssetListTable/index.tsx b/web/src/components/molecules/Asset/AssetListTable/index.tsx
@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
-import { Key, useEffect, useState } from "react";
+import { Key } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import CustomTag from "@reearth-cms/components/atoms/CustomTag";
 import DownloadButton from "@reearth-cms/components/atoms/DownloadButton";
 import Icon from "@reearth-cms/components/atoms/Icon";
 import Popover from "@reearth-cms/components/atoms/Popover";
-import ProTable, {
+import {
   ListToolBarProps,
   ProColumns,
   OptionConfig,
@@ -17,6 +17,7 @@ import Space from "@reearth-cms/components/atoms/Space";
 import UserAvatar from "@reearth-cms/components/atoms/UserAvatar";
 import { Asset, AssetItem } from "@reearth-cms/components/molecules/Asset/asset.type";
 import ArchiveExtractionStatus from "@reearth-cms/components/molecules/Asset/AssetListTable/ArchiveExtractionStatus";
+import ResizableProTable from "@reearth-cms/components/molecules/Common/ResizableProTable";
 import {
   AssetSortType,
   SortDirection,
@@ -27,7 +28,9 @@ import { dateTimeFormat, bytesFormat } from "@reearth-cms/utils/format";
 
 import { compressedFileFormats } from "../../Common/Asset";
 
-export type AssetListTableProps = {
+type StretchColumn = ProColumns<Asset> & { minWidth: number };
+
+type Props = {
   assetList: Asset[];
   loading: boolean;
   selectedAsset: Asset | undefined;
@@ -52,7 +55,7 @@ export type AssetListTableProps = {
   ) => void;
 };
 
-const AssetListTable: React.FC<AssetListTableProps> = ({
+const AssetListTable: React.FC<Props> = ({
   assetList,
   selection,
   loading,
@@ -72,12 +75,13 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
 }) => {
   const t = useT();
 
-  const columns: ProColumns<Asset>[] = [
+  const columns: StretchColumn[] = [
     {
       title: "",
       render: (_, asset) => <Icon icon="edit" color={"#1890ff"} onClick={() => onEdit(asset.id)} />,
       align: "center",
       width: 48,
+      minWidth: 48,
     },
     {
       title: () => <Icon icon="message" />,
@@ -95,13 +99,15 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
       },
       align: "center",
       width: 48,
+      minWidth: 48,
     },
     {
       title: t("File"),
       dataIndex: "fileName",
       key: "NAME",
       sorter: true,
       width: 340,
+      minWidth: 340,
       ellipsis: true,
     },
     {
@@ -111,12 +117,14 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
       sorter: true,
       render: (_text, record) => bytesFormat(record.size),
       width: 100,
+      minWidth: 100,
     },
     {
       title: t("Preview Type"),
       dataIndex: "previewType",
       key: "previewType",
       width: 120,
+      minWidth: 120,
     },
     {
       title: t("Status"),
@@ -130,7 +138,8 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
           )
         );
       },
-      width: 100,
+      width: 130,
+      minWidth: 130,
     },
     {
       title: t("Created At"),
@@ -139,6 +148,7 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
       sorter: true,
       render: (_text, record) => dateTimeFormat(record.createdAt),
       width: 150,
+      minWidth: 150,
     },
     {
       title: t("Created By"),
@@ -151,13 +161,15 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
         </Space>
       ),
       width: 105,
+      minWidth: 105,
       ellipsis: true,
     },
     {
       title: t("ID"),
       dataIndex: "id",
       key: "id",
       width: 240,
+      minWidth: 240,
       ellipsis: true,
     },
     {
@@ -193,11 +205,13 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
         }
       },
       width: 230,
+      minWidth: 230,
     },
   ];
 
   const options: OptionConfig = {
     search: true,
+    fullScreen: true,
     reload: onAssetsReload,
   };
 
@@ -245,17 +259,8 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
     );
   };
 
-  const [isRowSelected, setIsRowSelected] = useState(false);
-  useEffect(() => {
-    if (selection.selectedRowKeys.length) {
-      setIsRowSelected(true);
-    } else {
-      setIsRowSelected(false);
-    }
-  }, [selection.selectedRowKeys.length]);
-
   return (
-    <StyledProTable
+    <ResizableProTable
       dataSource={assetList}
       columns={columns}
       tableAlertOptionRender={AlertOptions}
@@ -265,7 +270,6 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
       pagination={pagination}
       toolbar={handleToolbarEvents}
       rowSelection={rowSelection}
-      isRowSelected={isRowSelected}
       loading={loading}
       onChange={(pagination, _, sorter: any) => {
         onAssetTableChange(
@@ -276,7 +280,7 @@ const AssetListTable: React.FC<AssetListTableProps> = ({
             : undefined,
         );
       }}
-      scroll={{ x: "", y: "" }}
+      heightOffset={72}
     />
   );
 };
@@ -305,34 +309,6 @@ const MoreItemsButton = styled(Button)`
   color: #1890ff;
 `;
 
-const StyledProTable = styled(ProTable)<{ isRowSelected: boolean }>`
-  height: calc(100% - 72px);
-  .ant-pro-card-body {
-    padding-bottom: 0;
-  }
-  .ant-pro-card,
-  .ant-pro-card-body,
-  .ant-spin-nested-loading,
-  .ant-spin-container,
-  .ant-table-container {
-    height: 100%;
-  }
-  .ant-table-wrapper {
-    height: ${({ isRowSelected }) => `calc(100% - ${isRowSelected ? 128 : 64}px)`};
-  }
-  .ant-table {
-    height: calc(100% - 64px);
-  }
-  .ant-table-small,
-  .ant-table-middle {
-    height: calc(100% - 56px);
-  }
-  .ant-table-body {
-    overflow: auto !important;
-    height: calc(100% - 47px);
-  }
-`;
-
 const StyledButton = styled(Button)`
   padding: 0;
 `;
diff --git a/web/src/components/molecules/Common/ResizableProTable/index.tsx b/web/src/components/molecules/Common/ResizableProTable/index.tsx
@@ -9,7 +9,9 @@ import ProTable, {
 import { ResizableTitle } from "@reearth-cms/components/molecules/Common/ResizableProTable/resizable";
 import type { ResizeCallbackData } from "@reearth-cms/components/molecules/Common/ResizableProTable/resizable";
 
-export type Props = ProTableProps<Record<string, any> | any, ParamsType, "text">;
+type Props = ProTableProps<Record<string, any> | any, ParamsType, "text"> & {
+  heightOffset: number;
+};
 
 const ResizableProTable: React.FC<Props> = ({
   dataSource,
@@ -24,8 +26,11 @@ const ResizableProTable: React.FC<Props> = ({
   onChange,
   columnsState,
   showSorterTooltip,
+  heightOffset,
 }) => {
-  const [resizableColumns, setResizableColumns] = useState<ProColumns<any, "text">[]>([]);
+  const [resizableColumns, setResizableColumns] = useState<ProColumns<any, "text">[]>(
+    columns ?? [],
+  );
 
   useEffect(() => {
     if (columns) {
@@ -103,14 +108,19 @@ const ResizableProTable: React.FC<Props> = ({
       columnsState={columnsState}
       showSorterTooltip={showSorterTooltip}
       scroll={{ x: "", y: "" }}
+      heightOffset={heightOffset}
     />
   );
 };
 
 export default ResizableProTable;
 
-const StyledProTable = styled(ProTable)<{ nthOfType: number; isRowSelected: boolean }>`
-  height: calc(100% - 102px);
+const StyledProTable = styled(ProTable)<{
+  nthOfType: number;
+  isRowSelected: boolean;
+  heightOffset: number;
+}>`
+  height: ${({ heightOffset }) => `calc(100% - ${heightOffset}px)`};
   .ant-pro-card-body {
     padding-bottom: 0;
   }

diff --git a/web/src/components/molecules/Content/Table/index.tsx b/web/src/components/molecules/Content/Table/index.tsx
@@ -743,6 +743,7 @@ const ContentTable: React.FC<Props> = ({
                   : undefined,
             );
           }}
+          heightOffset={102}
         />
       ) : null}
       {selection && (