From b2f87a9f8f2163669a02543370b947d217b1839f Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:04:04 +0800
Subject: [PATCH] feat: Add sidebar to SearchPage #2247 (#2267)

### What problem does this PR solve?

feat: Add sidebar to SearchPage #2247

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/pages/search/index.less  | 12 ++++--
 web/src/pages/search/index.tsx   | 39 +++---------------
 web/src/pages/search/sidebar.tsx | 71 ++++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 37 deletions(-)
 create mode 100644 web/src/pages/search/sidebar.tsx

diff --git a/web/src/pages/search/index.less b/web/src/pages/search/index.less
index 31d0f1f4f..576954d79 100644
--- a/web/src/pages/search/index.less
+++ b/web/src/pages/search/index.less
@@ -1,17 +1,23 @@
 .searchSide {
-  overflow: auto;
-  height: 100vh;
+  height: calc(100vh - 72px);
   position: fixed !important;
   inset-inline-start: 0;
-  top: 0;
+  top: 72px;
   bottom: 0;
 
+  .modelForm {
+    display: flex;
+    padding: 24px;
+  }
+
   .checkGroup {
     width: 100%;
     height: 100%;
   }
   .list {
     width: 100%;
+    height: 100%;
+    overflow: auto;
   }
   .checkbox {
     width: 100%;
diff --git a/web/src/pages/search/index.tsx b/web/src/pages/search/index.tsx
index 6c2e09e1d..3e7e7089c 100644
--- a/web/src/pages/search/index.tsx
+++ b/web/src/pages/search/index.tsx
@@ -1,42 +1,13 @@
-import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
-import { Checkbox, Layout, List, Typography } from 'antd';
-import React, { useCallback } from 'react';
+import { Layout } from 'antd';
+import React from 'react';
+import SearchSidebar from './sidebar';
 
-import { CheckboxValueType } from 'antd/es/checkbox/Group';
-import styles from './index.less';
-
-const { Header, Content, Footer, Sider } = Layout;
+const { Header, Content, Footer } = Layout;
 
 const SearchPage = () => {
-  const { list } = useNextFetchKnowledgeList();
-
-  const handleChange = useCallback((checkedValue: CheckboxValueType[]) => {
-    console.log('🚀 ~ handleChange ~ args:', checkedValue);
-  }, []);
-
   return (
     <Layout hasSider>
-      <Sider className={styles.searchSide} theme={'light'}>
-        <Checkbox.Group className={styles.checkGroup} onChange={handleChange}>
-          <List
-            bordered
-            dataSource={list}
-            className={styles.list}
-            renderItem={(item) => (
-              <List.Item>
-                <Checkbox value={item.id} className={styles.checkbox}>
-                  <Typography.Text
-                    ellipsis={{ tooltip: item.name }}
-                    className={styles.knowledgeName}
-                  >
-                    {item.name}
-                  </Typography.Text>
-                </Checkbox>
-              </List.Item>
-            )}
-          />
-        </Checkbox.Group>
-      </Sider>
+      <SearchSidebar></SearchSidebar>
       <Layout style={{ marginInlineStart: 200 }}>
         <Header style={{ padding: 0 }} />
         <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
diff --git a/web/src/pages/search/sidebar.tsx b/web/src/pages/search/sidebar.tsx
new file mode 100644
index 000000000..de9d0b11a
--- /dev/null
+++ b/web/src/pages/search/sidebar.tsx
@@ -0,0 +1,71 @@
+import { useNextFetchKnowledgeList } from '@/hooks/knowledge-hooks';
+import type { CheckboxProps } from 'antd';
+import { Checkbox, Layout, List, Typography } from 'antd';
+import { CheckboxValueType } from 'antd/es/checkbox/Group';
+import { useCallback, useMemo, useState } from 'react';
+
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import styles from './index.less';
+
+const { Sider } = Layout;
+
+const SearchSidebar = () => {
+  const { list } = useNextFetchKnowledgeList();
+  const ids = useMemo(() => list.map((x) => x.id), [list]);
+
+  const [checkedList, setCheckedList] = useState<string[]>(ids);
+
+  const checkAll = list.length === checkedList.length;
+
+  const indeterminate =
+    checkedList.length > 0 && checkedList.length < list.length;
+
+  const onChange = useCallback((list: CheckboxValueType[]) => {
+    setCheckedList(list as string[]);
+  }, []);
+
+  const onCheckAllChange: CheckboxProps['onChange'] = useCallback(
+    (e: CheckboxChangeEvent) => {
+      setCheckedList(e.target.checked ? ids : []);
+    },
+    [ids],
+  );
+
+  return (
+    <Sider className={styles.searchSide} theme={'light'} width={260}>
+      <Checkbox
+        className={styles.modelForm}
+        indeterminate={indeterminate}
+        onChange={onCheckAllChange}
+        checked={checkAll}
+      >
+        Check all
+      </Checkbox>
+      <Checkbox.Group
+        className={styles.checkGroup}
+        onChange={onChange}
+        value={checkedList}
+      >
+        <List
+          bordered
+          dataSource={list}
+          className={styles.list}
+          renderItem={(item) => (
+            <List.Item>
+              <Checkbox value={item.id} className={styles.checkbox}>
+                <Typography.Text
+                  ellipsis={{ tooltip: item.name }}
+                  className={styles.knowledgeName}
+                >
+                  {item.name}
+                </Typography.Text>
+              </Checkbox>
+            </List.Item>
+          )}
+        />
+      </Checkbox.Group>
+    </Sider>
+  );
+};
+
+export default SearchSidebar;