12.0-feat: add search library sup (#6211)

* 12.0-feat: add search library sup * change highlight style * change search api --------- Co-authored-by: Michael An <2331806369@qq.com>
2025-09-05 00:43:53 +00:00 · 2024-07-01 14:37:49 +08:00
parent ca6861c8d8
commit adb0ab58fa
7 changed files with 270 additions and 12 deletions
--- a/frontend/src/components/search/ai-search.js
+++ b/frontend/src/components/search/ai-search.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import isHotkey from 'is-hotkey';
 import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
+import searchAPI from '../../utils/search-api';
 import Icon from '../icon';
 import { gettext, siteRoot, username } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
@@ -274,6 +275,7 @@ export default class AISearch extends Component {
    }
    this.setState({ value: newValue });
    setTimeout(() => {
+      const trimmedValue = newValue.trim();
      if (this.isChineseInput === false && this.state.inputValue !== newValue) {
        this.setState({
          inputValue: newValue,
@@ -281,11 +283,38 @@ export default class AISearch extends Component {
          highlightIndex: 0,
          resultItems: [],
          isResultGetted: false,
+        }, () => {
+          if (trimmedValue !== '') {
+            this.getRepoSearchResult(newValue);
+          }
        });
      }
    }, 1);
  };

+  getRepoSearchResult = (query_str) => {
+    if (this.source) {
+      this.source.cancel('prev request is cancelled');
+    }
+
+    this.source = seafileAPI.getSource();
+
+    const query_type = 'library';
+    let results = [];
+    searchAPI.searchItems(query_str, query_type, this.source.token).then(res => {
+      results = [...results, ...this.formatResultItems(res.data.results)];
+      this.setState({
+        resultItems: results,
+        isLoading: false,
+        hasMore: false,
+      });
+    }).catch(error => {
+      // eslint-disable-next-line no-console
+      console.log(error);
+      this.setState({ isLoading: false });
+    });
+  };
+
  getSearchResult = (queryData) => {
    if (this.source) {
      this.source.cancel('prev request is cancelled');
@@ -417,14 +446,41 @@ export default class AISearch extends Component {

  renderSearchTypes = (inputValue) => {
    const highlightIndex = this.state.highlightSearchTypesIndex;
+    const { resultItems } = this.state;
    if (!this.props.repoID) {
      return (
-        <div className="search-types">
-          <div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
-            <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
-            {inputValue}
-            <span className="search-types-text">{gettext('in all libraries')}</span>
+        <div>
+          <div className="search-types">
+            <div
+              className="search-types-repos search-types-highlight"
+              onClick={this.searchAllRepos}
+              tabIndex={0}
+            >
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in all libraries')}</span>
+            </div>
          </div>
+          {resultItems.length > 0 && (
+            <div className="library-result-container">
+              <hr className="library-result-divider" />
+              <div className="library-result-header">{gettext('Libraries')}</div>
+              <ul
+                className="library-result-list"
+                ref={this.searchResultListRef}
+              >
+                {resultItems.map((item, index) => {
+                  return (
+                    <SearchResultItem
+                      key={index}
+                      item={item}
+                      onItemClickHandler={this.onItemClickHandler}
+                    />
+                  );
+                })}
+              </ul>
+            </div>
+          )}
        </div>
      );
    }
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import isHotkey from 'is-hotkey';
 import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
+import searchAPI from '../../utils/search-api';
 import { gettext, siteRoot } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import { Utils } from '../../utils/utils';
@@ -236,6 +237,7 @@ class Search extends Component {
    }
    this.setState({ value: newValue });
    setTimeout(() => {
+      const trimmedValue = newValue.trim();
      if (this.isChineseInput === false && this.state.inputValue !== newValue) {
        this.setState({
          inputValue: newValue,
@@ -243,11 +245,38 @@ class Search extends Component {
          highlightIndex: 0,
          resultItems: [],
          isResultGetted: false,
+        }, () => {
+          if (trimmedValue !== '') {
+            this.getRepoSearchResult(newValue);
+          }
        });
      }
    }, 1);
  };

+  getRepoSearchResult = (query_str) => {
+    if (this.source) {
+      this.source.cancel('prev request is cancelled');
+    }
+
+    this.source = seafileAPI.getSource();
+
+    const query_type = 'library';
+    let results = [];
+    searchAPI.searchItems(query_str, query_type, this.source.token).then(res => {
+      results = [...results, ...this.formatResultItems(res.data.results)];
+      this.setState({
+        resultItems: results,
+        isLoading: false,
+        hasMore: false,
+      });
+    }).catch(error => {
+      // eslint-disable-next-line no-console
+      console.log(error);
+      this.setState({ isLoading: false });
+    });
+  };
+
  getSearchResult = (queryData) => {
    if (this.source) {
      this.source.cancel('prev request is cancelled');
@@ -416,14 +445,41 @@ class Search extends Component {

  renderSearchTypes = (inputValue) => {
    const highlightIndex = this.state.highlightSearchTypesIndex;
+    const { resultItems } = this.state;
    if (!this.props.repoID) {
      return (
-        <div className="search-types">
-          <div className="search-types-repos search-types-highlight" onClick={this.searchAllRepos} tabIndex={0}>
-            <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
-            {inputValue}
-            <span className="search-types-text">{gettext('in all libraries')}</span>
+        <div>
+          <div className="search-types">
+            <div
+              className="search-types-repos search-types-highlight"
+              onClick={this.searchAllRepos}
+              tabIndex={0}
+            >
+              <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
+              {inputValue}
+              <span className="search-types-text">{gettext('in all libraries')}</span>
+            </div>
          </div>
+          {resultItems.length > 0 && (
+            <div className="library-result-container">
+              <hr className="library-result-divider" />
+              <div className="library-result-header">{gettext('Libraries')}</div>
+              <ul
+                className="library-result-list"
+                ref={this.searchResultListRef}
+              >
+                {resultItems.map((item, index) => {
+                  return (
+                    <SearchResultItem
+                      key={index}
+                      item={item}
+                      onItemClickHandler={this.onItemClickHandler}
+                    />
+                  );
+                })}
+              </ul>
+            </div>
+          )}
        </div>
      );
    }
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -410,3 +410,17 @@
  margin-left: 6px;
  color: #666;
 }
+
+.library-result-container {
+  margin-bottom: 16px;
+}
+
+.library-result-divider {
+  margin: 10px 0 16px;
+}
+
+.library-result-header {
+  color: #666666;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
--- a/frontend/src/utils/search-api.js
+++ b/frontend/src/utils/search-api.js
@@ -0,0 +1,58 @@
+import cookie from 'react-cookies';
+import axios from 'axios';
+import { siteRoot } from './constants';
+
+class SearchAPI {
+
+  init({ server, username, password, token }) {
+    this.server = server;
+    this.username = username;
+    this.password = password;
+    this.token = token;
+    if (this.token && this.server) {
+      this.req = axios.create({
+        baseURL: this.server,
+        headers: { 'Authorization': 'Token ' + this.token },
+      });
+    }
+    return this;
+  }
+
+  initForSeahubUsage({ siteRoot, xcsrfHeaders }) {
+    if (siteRoot && siteRoot.charAt(siteRoot.length-1) === '/') {
+      var server = siteRoot.substring(0, siteRoot.length-1);
+      this.server = server;
+    } else {
+      this.server = siteRoot;
+    }
+
+    this.req = axios.create({
+      headers: {
+        'X-CSRFToken': xcsrfHeaders,
+      }
+    });
+    return this;
+  }
+
+  _sendPostRequest(url, form) {
+    if (form.getHeaders) {
+      return this.req.post(url, form, {
+        headers:form.getHeaders()
+      });
+    } else {
+      return this.req.post(url, form);
+    }
+  }
+
+  searchItems(query_str, query_type, cancelToken) {
+    let url = this.server + '/api2/items-search/?query_str=' + query_str + '&query_type=' + query_type;
+    return this.req.get(url, {cancelToken: cancelToken});
+  }
+
+}
+
+let searchAPI = new SearchAPI();
+let xcsrfHeaders = cookie.load('sfcsrftoken');
+searchAPI.initForSeahubUsage({ siteRoot, xcsrfHeaders });
+
+export default searchAPI;