[CE] search: added 'loading' & 'no result' tip (#4782)

frontend/.eslintrc.json

@@ -24,6 +24,7 @@
       "always"
     ],
 
+    "eqeqeq": "off",
     "no-useless-constructor": "off",
     "no-restricted-globals": "off",
     "no-unused-expressions": "off",
@@ -37,6 +38,8 @@
     "no-console": "warn",
     "no-self-assign": ["error", {"props": false}],
     "no-useless-escape": "warn",
+    "no-trailing-spaces": "warn",
+
     "react/jsx-indent": ["warn", 2],
     "react/prop-types": "warn",
     "react/display-name": "warn",

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

@@ -18,9 +18,10 @@ class SearchFileDialog extends React.Component {
     super(props);
     this.state = {
       isSubmitDisabled: true,
+      isSubmitting: false,
       q: '',
       errMessage: '',
-      fileList: []
+      fileList: null
     };
   }
 
@@ -29,15 +30,23 @@ class SearchFileDialog extends React.Component {
     if (!q.trim()) {
       return false;
     }
+    this.setState({
+      isSubmitDisabled: true,
+      isSubmitting: true
+    });
     seafileAPI.searchFileInRepo(this.props.repoID, q).then((res) => {
       this.setState({
         fileList: res.data.data,
-        errMessage: ''
+        errMessage: '',
+        isSubmitDisabled: false,
+        isSubmitting: false
       });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       this.setState({
-        errMessage: errMessage
+        errMessage: errMessage,
+        isSubmitDisabled: false,
+        isSubmitting: false
       });
     });
   }
@@ -62,41 +71,44 @@ class SearchFileDialog extends React.Component {
   }
 
   render() {
-    const { q, errMessage, fileList, isSubmitDisabled } = this.state;
+    const { q, errMessage, fileList, isSubmitDisabled, isSubmitting } = 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>
+            <button type="submit" className={`btn btn-primary flex-shrink-0 ${isSubmitting ? 'btn-loading' : ''}`} 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 &&
+            {!fileList ?
-            <table className="table-hover">
+              null :
-              <thead>
+              fileList.length == 0 ?
-                <tr>
+                <p>{gettext('No result')}</p> :
-                  <th width="8%"></th>
+                <table className="table-hover">
-                  <th width="42%">{gettext('Name')}</th>
+                  <thead>
-                  <th width="25%">{gettext('Size')}</th>
+                    <tr>
-                  <th width="25%">{gettext('Last Update')}</th>
+                      <th width="8%"></th>
-                </tr>
+                      <th width="42%">{gettext('Name')}</th>
-              </thead>
+                      <th width="25%">{gettext('Size')}</th>
-              <tbody>
+                      <th width="25%">{gettext('Last Update')}</th>
-                {fileList.map((item, index) => {
+                    </tr>
-                  return (
+                  </thead>
-                    <FileItem
+                  <tbody>
-                      key={index}
+                    {fileList.map((item, index) => {
-                      item={item}
+                      return (
-                      repoID={this.props.repoID}
+                        <FileItem
-                      repoName={this.props.repoName}
+                          key={index}
-                    />
+                          item={item}
-                  );
+                          repoID={this.props.repoID}
-                })
+                          repoName={this.props.repoName}
-                }
+                        />
-              </tbody>
+                      );
-            </table>}
+                    })
+                    }
+                  </tbody>
+                </table>}
           </div>
         </ModalBody>
         <ModalFooter>