chore: column settings

src/pages/_components/column-settings.tsx

@@ -1,8 +1,12 @@
 import OverlayScroller from '@/components/overlay-scroller';
+import {
+  readColumnSettings,
+  writeColumnSettings
+} from '@/utils/localstore/index';
 import { SettingOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Col, Popover, Row, Tooltip } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
 const Container = styled.div`
@@ -32,24 +36,53 @@ const Title = styled.div`
 `;
 
 const ColumnSettings: React.FC<{
+  width?: number;
+  fixedColumns?: string[];
+  tableName: string;
   contentHeight: number;
   columns: {
-    title: string;
+    title: React.ReactNode;
     dataIndex?: string;
-    children?: { title: string; dataIndex?: string }[];
+    children?: { title: React.ReactNode; dataIndex?: string }[];
   }[];
   selectedColumns?: string[];
+  defaultSelectedColumns?: string[];
   grouped?: boolean;
+  onReset?: () => void;
   onChange?: (selectedColumns: string[]) => void;
 }> = (props) => {
   const intl = useIntl();
-  const { contentHeight, columns, selectedColumns, grouped, onChange } = props;
+  const {
+    tableName,
+    contentHeight,
+    width = 420,
+    columns,
+    selectedColumns,
+    defaultSelectedColumns,
+    grouped,
+    onReset,
+    onChange,
+    fixedColumns
+  } = props;
   const [open, setOpen] = React.useState(false);
+  const [innerSelectedColumns, setInnerSelectedColumns] = React.useState<
+    string[]
+  >(defaultSelectedColumns || []);
+
+  React.useEffect(() => {
+    if (open) {
+      setInnerSelectedColumns(selectedColumns ?? defaultSelectedColumns ?? []);
+    }
+  }, [open, selectedColumns, defaultSelectedColumns]);
 
   const handleToggle = () => {
     setOpen(!open);
   };
 
+  const handleDraftChange = (columns: string[]) => {
+    setInnerSelectedColumns(columns);
+  };
+
   const handleSelectAll = () => {
     if (grouped) {
       const allCols: string[] = [];
@@ -60,23 +93,55 @@ const ColumnSettings: React.FC<{
           }
         });
       });
-      onChange?.(allCols);
+      handleDraftChange(allCols);
     } else {
       const allCols = columns
         .map((col) => col.dataIndex)
         .filter((dataIndex): dataIndex is string => Boolean(dataIndex));
-      onChange?.(allCols);
+      handleDraftChange(allCols);
     }
   };
 
   const handleConfirm = () => {
     setOpen(false);
+    writeColumnSettings(tableName, innerSelectedColumns);
+    onChange?.(innerSelectedColumns);
   };
 
+  const handleReset = () => {
+    const resetCols = defaultSelectedColumns ?? [];
+    writeColumnSettings(tableName, resetCols);
+    onChange?.(resetCols);
+    setInnerSelectedColumns(resetCols);
+    onReset?.();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+  };
+
+  useEffect(() => {
+    const initColumns = async () => {
+      const stored = await readColumnSettings(tableName);
+      console.log('stored columns:', stored);
+      if (stored && stored.length > 0) {
+        setInnerSelectedColumns(stored);
+        onChange?.(stored);
+      } else {
+        setInnerSelectedColumns(defaultSelectedColumns || []);
+      }
+    };
+    initColumns();
+  }, []);
+
   const contentRender = () => {
     return (
       <Container>
-        {!grouped && <div className="title">Column Settings</div>}
+        {!grouped && (
+          <div className="title">
+            {intl.formatMessage({ id: 'benchmark.table.columnSettings' })}
+          </div>
+        )}
         <OverlayScroller
           maxHeight={contentHeight}
           styles={{
@@ -86,10 +151,8 @@ const ColumnSettings: React.FC<{
           }}
         >
           <Checkbox.Group
-            value={selectedColumns}
-            onChange={(checkedValues) => {
-              onChange?.(checkedValues as string[]);
-            }}
+            value={innerSelectedColumns}
+            onChange={handleDraftChange}
           >
             <>
               {grouped ? (
@@ -100,6 +163,9 @@ const ColumnSettings: React.FC<{
                       {row.children?.map((col) => (
                         <Col key={col.dataIndex} span={12}>
                           <Checkbox
+                            disabled={fixedColumns?.includes(
+                              col.dataIndex || ''
+                            )}
                             value={col.dataIndex}
                             style={{ marginBottom: 8 }}
                           >
@@ -115,6 +181,7 @@ const ColumnSettings: React.FC<{
                   {columns.map((col) => (
                     <Col key={col.dataIndex} span={12}>
                       <Checkbox
+                        disabled={fixedColumns?.includes(col.dataIndex || '')}
                         value={col.dataIndex}
                         style={{ marginBottom: 8 }}
                       >
@@ -129,20 +196,15 @@ const ColumnSettings: React.FC<{
         </OverlayScroller>
 
         <div className="btn-wrapper">
-          <Button
-            size="middle"
-            onClick={() => {
-              onChange?.([]);
-            }}
-          >
-            Reset
+          <Button size="middle" onClick={handleReset}>
+            {intl.formatMessage({ id: 'common.button.resetdefault' })}
           </Button>
           <div className="buttons">
             <Button size="middle" type="primary" onClick={handleSelectAll}>
-              Select All
+              {intl.formatMessage({ id: 'common.checkbox.all' })}
             </Button>
             <Button size="middle" type="primary" onClick={handleConfirm}>
-              Confirm
+              {intl.formatMessage({ id: 'common.button.confirm' })}
             </Button>
           </div>
         </div>
@@ -152,17 +214,21 @@ const ColumnSettings: React.FC<{
 
   return (
     <Popover
+      open={open}
+      onOpenChange={handleOpenChange}
       trigger={'click'}
       arrow={false}
       placement="bottomRight"
       content={contentRender()}
       styles={{
         root: {
-          width: '420px'
+          width: width
         }
       }}
     >
-      <Tooltip title="Column Settings">
+      <Tooltip
+        title={intl.formatMessage({ id: 'benchmark.table.columnSettings' })}
+      >
         <Button onClick={handleToggle} icon={<SettingOutlined />}></Button>
       </Tooltip>
     </Popover>