search file by name (#4713)

* search file by name

* [for non-pro] redesigned 'search files in a library'

* improvement

Co-authored-by: lian <lian@seafile.com>
Co-authored-by: llj <lingjun.li1@gmail.com>

frontend/src/components/dialog/search-file-dialog.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api.js';
+import { gettext, siteRoot } from '../../utils/constants';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SearchFileDialog extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSubmitDisabled: true,
+      q: '',
+      errMessage: '',
+      fileList: []
+    };
+  }
+
+  searchFile = () => {
+    const { q } = this.state;
+    if (!q.trim()) {
+      return false;
+    }
+    seafileAPI.searchFileInRepo(this.props.repoID, q).then((res) => {
+      this.setState({
+        fileList: res.data.data,
+        errMessage: ''
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      this.setState({
+        errMessage: errMessage
+      });
+    });
+  }
+
+  handleKeyDown = (e) => {
+    if (e.key == 'Enter') {
+      e.preventDefault();
+      this.searchFile();
+    }
+  }
+
+  toggle = () => {
+    this.props.toggleDialog();
+  }
+
+  handleInputChange = (e) => {
+    const q = e.target.value;
+    this.setState({
+      q: q,
+      isSubmitDisabled: !q.trim()
+    });
+  }
+
+  render() {
+    const { q, errMessage, fileList, isSubmitDisabled } = this.state;
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Search')}</ModalHeader>
+        <ModalBody style={{height: '250px'}} className="o-auto">
+          <div className="d-flex">
+            <input className="form-control mr-2" type="text" placeholder={gettext('Search files in this library')} value={q} onChange={this.handleInputChange} onKeyDown={this.handleKeyDown} />
+            <button type="submit" className="btn btn-primary flex-shrink-0" onClick={this.searchFile} disabled={isSubmitDisabled}>{gettext('Search')}</button>
+          </div>
+          {errMessage && <Alert color="danger" className="mt-2">{errMessage}</Alert>}
+          <div className="mt-2">
+            {fileList.length > 0 &&
+            <table className="table-hover">
+              <thead>
+                <tr>
+                  <th width="8%"></th>
+                  <th width="42%">{gettext('Name')}</th>
+                  <th width="25%">{gettext('Size')}</th>
+                  <th width="25%">{gettext('Last Update')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {fileList.map((item, index) => {
+                  return (
+                    <FileItem
+                      key={index}
+                      item={item}
+                      repoID={this.props.repoID}
+                      repoName={this.props.repoName}
+                    />
+                  );
+                })
+                }
+              </tbody>
+            </table>}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SearchFileDialog.propTypes = propTypes;
+
+const FileItemPropTypes = {
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired,
+  item: PropTypes.object.isRequired
+};
+
+class FileItem extends React.PureComponent {
+
+  render() {
+    const { item, repoID, repoName } = this.props;
+    const name = item.path.substr(item.path.lastIndexOf('/') + 1);
+    const url = item.type == 'file' ?
+      `${siteRoot}lib/${repoID}/file${Utils.encodePath(item.path)}` :
+      `${siteRoot}library/${repoID}/${Utils.encodePath(repoName + item.path)}`;
+
+    return(
+      <tr>
+        <td className="text-center"><img src={item.type == 'file' ? Utils.getFileIconUrl(item.path) : Utils.getFolderIconUrl()} alt="" width="24" /></td>
+        <td>
+          <a href={url}>{name}</a>
+        </td>
+        <td>{item.type == 'file' ? Utils.bytesToSize(item.size) : ''}</td>
+        <td>{moment(item.mtime).fromNow()}</td>
+      </tr>
+    );
+  }
+}
+
+FileItem.propTypes = FileItemPropTypes;
+
+
+export default SearchFileDialog;

frontend/src/components/search/search-by-name.js

@@ -0,0 +1,51 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import SearchFileDialog from '../dialog/search-file-dialog.js';
+
+import '../../css/top-search-by-name.css';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  repoName: PropTypes.string.isRequired
+};
+
+class SearchByName extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDialogOpen: false
+    };
+  }
+
+  toggleDialog = () => {
+    this.setState({
+      isDialogOpen: !this.state.isDialogOpen
+    });
+  }
+
+  render() {
+    const { repoID, repoName } = this.props;
+    return (
+      <Fragment>
+        <i
+          className="fas fa-search top-search-file-icon"
+          onClick={this.toggleDialog}
+          title={gettext('Search files in this library')}
+        ></i>
+        {this.state.isDialogOpen &&
+        <SearchFileDialog
+          repoID={repoID}
+          repoName={repoName}
+          toggleDialog={this.toggleDialog}
+        />
+        }
+      </Fragment>
+    );
+  }
+}
+
+SearchByName.propTypes = propTypes;
+
+export default SearchByName;

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

@@ -2,17 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isPro, gettext, showLogoutIcon } from '../../utils/constants';
 import Search from '../search/search';
+import SearchByName from '../search/search-by-name';
 import Notification from '../common/notification';
 import Account from '../common/account';
 import Logout from '../common/logout';
 
 const propTypes = {
   repoID: PropTypes.string,
+  repoName: PropTypes.string,
+  isLibView: PropTypes.bool,
   onSearchedClick: PropTypes.func.isRequired,
   searchPlaceholder: PropTypes.string
 };
 
-class  CommonToolbar extends React.Component {
+class CommonToolbar extends React.Component {
+
   render() {
     let searchPlaceholder = this.props.searchPlaceholder || gettext('Search Files');
     return (
@@ -24,6 +28,12 @@ class  CommonToolbar extends React.Component {
             onSearchedClick={this.props.onSearchedClick}
           />
         )}
+        {this.props.isLibView && !isPro &&
+          <SearchByName
+            repoID={this.props.repoID}
+            repoName={this.props.repoName}
+          />
+        }
         <Notification />
         <Account />
         {showLogoutIcon && (<Logout />)}