File move to list view and inaccurate refresh after moving

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -65,6 +65,7 @@ class DirentListView extends React.Component {
       progress: 0,
       isMutipleOperation: true,
       activeDirent: null,
+      isListDropTipShow: false,
     };
 
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
@@ -525,6 +526,42 @@ class DirentListView extends React.Component {
     return [];
   }
 
+  onTableDragEnter = (e) => {
+    if (e.target.className === 'table-container ') {
+      this.setState({isListDropTipShow: true});
+    }
+  }
+
+  onTableDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }
+
+  onTableDragLeave = (e) => {
+    if (e.target.className === 'table-container table-drop-active') {
+      this.setState({isListDropTipShow: false})
+    }
+  }
+
+  tableDrop = (e) => {
+    e.persist();
+    this.setState({isListDropTipShow: false});
+    if (e.dataTransfer.files.length) { // uploaded files
+      return;
+    }
+    let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
+    dragStartItemData = JSON.parse(dragStartItemData);
+
+    let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartItemData;
+
+    if (e.target.className === 'table-container table-drop-active') {
+      if (nodeRootPath === this.props.path || nodeParentPath === this.props.path) {
+        return;
+      }
+      this.props.onItemMove(this.props.currentRepoInfo, nodeDirent, this.props.path, nodeParentPath)
+    }
+  }
+
   render() {
     const { direntList, sortBy, sortOrder } = this.props;
 
@@ -538,7 +575,16 @@ class DirentListView extends React.Component {
     const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
 
     return (
-      <div className="table-container" onMouseDown={this.onContainerMouseDown} onContextMenu={this.onContainerContextMenu} onClick={this.onContainerClick}>
+      <div 
+        className={`table-container ${this.state.isListDropTipShow ? 'table-drop-active' : ''}`}
+        onMouseDown={this.onContainerMouseDown} 
+        onContextMenu={this.onContainerContextMenu} 
+        onClick={this.onContainerClick}
+        onDragEnter={this.onTableDragEnter}
+        onDragOver={this.onTableDragOver}
+        onDragLeave={this.onTableDragLeave}
+        onDrop={this.tableDrop}
+      >
         <table>
           <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
             <tr>

frontend/src/css/layout.css

@@ -118,6 +118,18 @@
 .table-container {
   flex: 1;
   padding: 0 1rem 10rem;
+  position: relative;
+}
+
+.table-drop-active::before {
+  border: 1px solid rgba(69,170,242); 
+  content: '';
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  z-index: -1;
 }
 
 .cur-view-content .article {

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -141,6 +141,11 @@ class LibContentContainer extends React.Component {
 
   onItemsScroll = (e) => {
     let target = e.target;
+
+    if (target.scrollTop === 0) {
+      return;
+    }
+
     if (target.scrollTop + target.clientHeight + 1 >= target.scrollHeight) {
       this.props.onListContainerScroll();
     }

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -306,6 +306,7 @@ class LibContentView extends React.Component {
 
     // update data
     this.loadDirentList(path);
+    this.resetShowLength();
 
     if (!this.isNeedUpdateHistoryState) {
       this.isNeedUpdateHistoryState = true;
@@ -405,7 +406,6 @@ class LibContentView extends React.Component {
       if (!this.state.repoEncrypted && direntList.length) {
         this.getThumbnails(repoID, path, this.state.direntList);
       }
-      this.resetShowLength();
     }).catch(() => {
       this.setState({
         isDirentListLoading: false,
@@ -729,12 +729,12 @@ class LibContentView extends React.Component {
       nodeParentPath = this.state.path;
     }
     let direntPath = Utils.joinPath(nodeParentPath, dirName);
-    seafileAPI.moveDir(repoID, destRepo.repo_id,moveToDirentPath, nodeParentPath, dirName).then(res => {
+    seafileAPI.moveDir(repoID, destRepo.repo_id, moveToDirentPath, nodeParentPath, dirName).then(res => {
       let nodeName = res.data[0].obj_name;
       if (this.state.currentMode === 'column') {
         this.moveTreeNode(direntPath, moveToDirentPath, destRepo, nodeName);
       }
-      this.moveDirent(direntPath);
+      this.moveDirent(direntPath, moveToDirentPath);
 
       let message = gettext('Successfully moved %(name)s.');
       message = message.replace('%(name)s', dirName);
@@ -996,8 +996,12 @@ class LibContentView extends React.Component {
     // else do nothing
   }
 
-  moveDirent = (direntPath) => {
+  moveDirent = (direntPath, moveToDirentPath=null) => {
     let name = direntPath.slice(direntPath.lastIndexOf('/') + 1);
+    if (moveToDirentPath === this.state.path) {
+      this.loadDirentList(this.state.path)
+      return;
+    }
     let direntList = this.state.direntList.filter(item => {
       return item.name !== name;
     });