Merge pull request #2644 from haiwen/search-module-improve

Search module improve

frontend/src/app.js

@@ -1,7 +1,8 @@
 import React, { Component, Fragment } from 'react';
 import ReactDOM from 'react-dom';
-import { Router } from '@reach/router';
+import { Router, navigate } from '@reach/router';
 import { siteRoot } from './utils/constants';
+import { Utils } from './utils/utils';
 import SidePanel from './components/side-panel';
 import MainPanel from './components/main-panel';
 import DraftsView from './pages/drafts/drafts-view';
@@ -96,8 +97,20 @@ class App extends Component {
     });
   }
 
-  onSearchedClick = () => {
+  onSearchedClick = (selectedItem) => {
-    //todos
+    if (selectedItem.is_dir === true) {
+      this.setState({currentTab: '', pathPrefix: []});
+      let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
+      navigate(url, {repalce: true});
+    } else if (Utils.isMarkdownFile(selectedItem.path)) {
+      let url = siteRoot + 'wiki/lib/' + selectedItem.repo_id + selectedItem.path;
+      let newWindow = window.open('markdown-editor');
+      newWindow.location.href = url;
+    } else {
+      let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + selectedItem.path;
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
+    }
   }
 
   tabItemClick = (tabName, groupID) => {

frontend/src/components/dir-view/dir-view.js

@@ -325,8 +325,18 @@ class DirView extends React.Component {
     // todo update upload file to direntList
   }
 
-  onSearchedClick = () => {
+  onSearchedClick = (selectedItem) => {
-    // todo
+    if (selectedItem.is_dir === true) {
+      this.setState({path: selectedItem.path});
+    } else if (Utils.isMarkdownFile(selectedItem.path)) {
+      let url = siteRoot + 'wiki/lib/' + selectedItem.repo_id + selectedItem.path;
+      let newWindow = window.open('markdown-editor');
+      newWindow.location.href = url;
+    } else {
+      let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + selectedItem.path;
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
+    }
   }
 
   resetSelected = () => {

frontend/src/components/search/search.js

@@ -6,8 +6,8 @@ import editorUtilities from '../../utils/editor-utilties';
 import More from '../more';
 
 const propTypes = {
-  placeholder: PropTypes.string,
   repoID: PropTypes.string,
+  placeholder: PropTypes.string,
   onSearchedClick: PropTypes.func.isRequired,
 };
 
@@ -65,9 +65,7 @@ class Search extends Component {
     let queryData = {
       q: newValue,
       search_repo: repoID ? repoID : 'all',
-      search_ftypes: repoID ? 'custom' : 'all',
+      search_ftypes: 'all',
-      ftype: repoID ? 'Markdown' : '',
-      input_fexts: repoID ? 'md' : ''
     };
 
     if (this.timer) {
@@ -146,6 +144,8 @@ class Search extends Component {
       items[i]['name'] = data[i].name;
       items[i]['path'] = data[i].fullpath;
       items[i]['repo_id'] = data[i].repo_id;
+      items[i]['repo_name'] = data[i].repo_name;
+      items[i]['is_dir'] = data[i].is_dir;
       items[i]['link_content'] = decodeURI(data[i].fullpath).substring(1);
       items[i]['content'] = data[i].content_highlight;
     }

frontend/src/components/toolbar/common-toolbar.js

@@ -13,12 +13,13 @@ const propTypes = {
 
 class  CommonToolbar extends React.Component {
   render() {
+    let searchPlaceholder = this.props.searchPlaceholder || 'Search Files'
     return (
       <div className="common-toolbar">
         {isPro && (
           <Search 
             repoID={this.props.repoID}
-            placeholder={gettext(this.props.searchPlaceholder)}
+            placeholder={gettext(searchPlaceholder)}
             onSearchedClick={this.props.onSearchedClick} 
           />
         )}

frontend/src/components/toolbar/general-toolbar.js

@@ -13,7 +13,6 @@ class GeneralToolbar extends React.Component {
   render() {
     // todo get repoID?
     let { onShowSidePanel, onSearchedClick } = this.props;
-    let placeHolder = this.props.searchPlaceholder || 'Search files in this library';
     return (
       <div className="main-panel-north">
         <div className="cur-view-toolbar">
@@ -24,8 +23,7 @@ class GeneralToolbar extends React.Component {
           </span>
         </div>
         <CommonToolbar 
-          repoID={'todo'}
+          searchPlaceholder={this.props.searchPlaceholder}
-          searchPlaceholder={placeHolder}
           onSearchedClick={onSearchedClick} 
         />
       </div>

frontend/src/components/toolbar/groups-toolbar.js

@@ -19,7 +19,6 @@ class GroupsToolbar extends React.Component {
 
   render() {
     let { onShowSidePanel, onSearchedClick } = this.props;
-    let placeHolder = this.props.searchPlaceholder || 'Search files in this library';
     return (
       <div className="main-panel-north">
         <div className="cur-view-toolbar">
@@ -32,7 +31,7 @@ class GroupsToolbar extends React.Component {
             className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
           </span>
         </div>
-        <CommonToolbar searchPlaceholder={placeHolder} onSearchedClick={onSearchedClick}/>
+        <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
       </div>
     );
   }

frontend/src/css/search.css

@@ -26,6 +26,7 @@
 
 .search-input {
   height: 1.875rem;
+  width: 15rem;
 }
 
 .search-result-container {

frontend/src/repo-wiki-mode.js

@@ -283,13 +283,26 @@ class Wiki extends Component {
   }
 
   onSearchedClick = (item) => {
-    //just for file
+    if (item.is_dir) {
-    let path = item.path;
+      let path = item.path.slice(0, item.path.length - 1);
-    if (this.state.currentFilePath !== path) {
+      if (this.state.currentFilePath !== path) {
-      let tree = this.state.treeData.clone();
+        let tree = this.state.treeData.clone();
-      let node = tree.getNodeByPath(path);
+        let node = tree.getNodeByPath(path);
-      tree.expandNode(node);
+        tree.expandNode(node);
-      this.showFile(node.path);
+        this.showDir(node.path);
+      }
+    } else if (Utils.isMarkdownFile(item.path)) {
+      let path = item.path;
+      if (this.state.currentFilePath !== path) {
+        let tree = this.state.treeData.clone();
+        let node = tree.getNodeByPath(path);
+        tree.expandNode(node);
+        this.showFile(node.path);
+      }
+    } else {
+      let url = siteRoot + 'lib/' + item.repo_id + '/file' + item.path;
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
     }
   }
 

frontend/src/utils/utils.js

@@ -320,6 +320,19 @@ export const Utils = {
     } else {
       return bytes + ' B';
     }
-  }
+  },
 
+  isMarkdownFile: function(filePath) {
+    let index = filePath.lastIndexOf('.');
+    if (index === -1) {
+      return false;
+    } else {
+      let type = filePath.substring(index).toLowerCase();
+      if (type === '.md' || type === '.markdown') {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }
 };

frontend/src/wiki.js

@@ -5,6 +5,7 @@ import MainPanel from './pages/wiki/main-panel';
 import moment from 'moment';
 import { slug, repoID, siteRoot, initialPath } from './utils/constants';
 import editorUtilities from './utils/editor-utilties';
+import { Utils } from './utils/utils';
 import Node from './components/tree-view/node';
 import Tree from './components/tree-view/tree';
 import './assets/css/fa-solid.css';
@@ -113,14 +114,28 @@ class Wiki extends Component {
   }
   
   onSearchedClick = (item) => {
-    let path = item.path;
+    if (item.is_dir) {
-    if (this.state.filePath !== path) {
+      let path = item.path.slice(0, item.path.length - 1);
-      this.initMainPanelData(path); 
+      if (this.state.filePath !== path) {
-
+        let tree = this.state.tree_data.clone();
-      let tree = this.state.tree_data.clone();
+        let node = tree.getNodeByPath(path);
-      let node = tree.getNodeByPath(path);
+        tree.expandNode(node);
-      tree.expandNode(node);
+        this.exitViewFileState(tree, node);
-      this.enterViewFileState(tree, node, node.path);
+      }
+    } else if (Utils.isMarkdownFile(item.path)) {
+      let path = item.path;
+      if (this.state.filePath !== path) {
+        this.initMainPanelData(path); 
+  
+        let tree = this.state.tree_data.clone();
+        let node = tree.getNodeByPath(path);
+        tree.expandNode(node);
+        this.enterViewFileState(tree, node, node.path);
+      }
+    } else {
+      let url = siteRoot + 'lib/' + item.repo_id + '/file' + item.path;
+      let newWindow = window.open('about:blank');
+      newWindow.location.href = url;
     }
   }