File size sort

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

@@ -133,6 +133,13 @@ class DirentListView extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   }
 
+  sortBySize = (e) => {
+    e.preventDefault();
+    const sortBy = 'size';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
   // for image popup
   prepareImageItem = (item) => {
     const useThumbnail = !this.repoEncrypted;
@@ -579,6 +586,7 @@ class DirentListView extends React.Component {
     // sort
     const sortByName = sortBy == 'name';
     const sortByTime = sortBy == 'time';
+    const sortBySize = sortBy == 'size';
     const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
 
     return (
@@ -603,7 +611,7 @@ class DirentListView extends React.Component {
               <th width="39%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
               <th width="6%">{/*tag */}</th>
               <th width="18%">{/*operation */}</th>
-              <th width="11%">{gettext('Size')}</th>
+              <th width="11%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
               <th width="15%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
             </tr>
           </thead>

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -42,10 +42,18 @@ class SharedRepoListView extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   }
 
+  sortBySize = (e) => {
+    e.preventDefault();
+    const sortBy = 'size';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
   getSortMetaData = () => {
     return {
       sortByName: this.props.sortBy == 'name',
       sortByTime: this.props.sortBy == 'time',
+      sortBySize: this.props.sortBy == 'size',
       sortIcon: this.props.sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>
     };
   }
@@ -98,7 +106,7 @@ class SharedRepoListView extends React.Component {
   renderPCUI = () => {
     let isShowTableThread = this.props.isShowTableThread !== undefined ? this.props.isShowTableThread : true;
 
-    const { sortByName, sortByTime, sortIcon } = this.getSortMetaData();
+    const { sortByName, sortByTime, sortBySize, sortIcon } = this.getSortMetaData();
 
     return (
       <table className={isShowTableThread ? '' : 'table-thead-hidden'}>
@@ -108,7 +116,7 @@ class SharedRepoListView extends React.Component {
             <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="36%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
             <th width="12%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width={'14%'}>{gettext('Size')}</th>
+            <th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
             <th width={'14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
             <th width="16%">{gettext('Owner')}</th>
           </tr>

frontend/src/pages/groups/group-view.js

@@ -43,7 +43,7 @@ class GroupView extends React.Component {
       currentRepo: null,
       isStaff: false,
       isOwner: false,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time'
+      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       repoList: [],
       libraryType: 'group',

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

@@ -65,7 +65,7 @@ class LibContentView extends React.Component {
       isDirentListLoading: true,
       direntList: [],
       isDirentSelected: false,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time'
+      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       isAllDirentSelected: false,
       dirID: '',  // for update dir list

frontend/src/pages/my-libs/my-libs.js

@@ -24,7 +24,7 @@ class MyLibraries extends Component {
       isLoading: true,
       repoList: [],
       isShowDetails: false,
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time'
+      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or size
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
     };
 

frontend/src/pages/my-libs/mylib-repo-list-view.js

@@ -46,6 +46,13 @@ class MylibRepoListView extends React.Component {
     this.props.sortRepoList(sortBy, sortOrder);
   }
 
+  sortBySize = (e) => {
+    e.preventDefault();
+    const sortBy = 'size';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortRepoList(sortBy, sortOrder);
+  }
+
   renderRepoListView = () => {
     return (
       <Fragment>
@@ -79,7 +86,7 @@ class MylibRepoListView extends React.Component {
             <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="38%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
             <th width="14%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width={showStorageBackend ? '15%' : '20%'}>{gettext('Size')}</th>
+            <th width={showStorageBackend ? '15%' : '20%'} onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</th>
             {showStorageBackend ? <th width="10%">{gettext('Storage backend')}</th> : null}
             <th width={showStorageBackend ? '15%' : '20%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
           </tr>

frontend/src/pages/shared-libs/shared-libs.js

@@ -27,6 +27,13 @@ class Content extends Component {
     this.props.sortItems(sortBy, sortOrder);
   }
 
+  sortBySize = (e) => {
+    e.preventDefault();
+    const sortBy = 'size';
+    const sortOrder = this.props.sortOrder == 'asc' ? 'desc' : 'asc';
+    this.props.sortItems(sortBy, sortOrder);
+  }
+
   render() {
     const { loading, errorMsg, items, sortBy, sortOrder } = this.props;
     
@@ -45,6 +52,7 @@ class Content extends Component {
       // sort
       const sortByName = sortBy == 'name';
       const sortByTime = sortBy == 'time';
+      const sortBySize = sortBy == 'size';
       const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
 
       const desktopThead = (
@@ -54,7 +62,7 @@ class Content extends Component {
             <th width="4%"><span className="sr-only">{gettext('Library Type')}</span></th>
             <th width="34%"><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {sortByName && sortIcon}</a></th>
             <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width="14%">{gettext('Size')}</th>
+            <th width="14%"><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {sortBySize && sortIcon}</a></th>
             <th width="18%"><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {sortByTime && sortIcon}</a></th>
             <th width="16%">{gettext('Owner')}</th>
           </tr>
@@ -293,7 +301,7 @@ class SharedLibraries extends Component {
       loading: true,
       errorMsg: '',
       items: [],
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time'
+      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
     };
   }

frontend/src/pages/shared-with-all/public-shared-view.js

@@ -28,7 +28,7 @@ class PublicSharedView extends React.Component {
       errMessage: '',
       emptyTip: '',
       repoList: [],
-      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time'
+      sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
       libraryType: 'public',
       isCreateMenuShow: false,

frontend/src/utils/utils.js

@@ -616,6 +616,18 @@ export const Utils = {
           return a.last_modified < b.last_modified ? 1 : -1;
         };
         break;
+      case 'size-asc':
+        comparator = function(a, b) {
+          let reult = _this.compareTwoSize(a.size, b.size);
+          return reult;
+        };
+        break;
+      case 'size-desc':
+        comparator = function(a, b) {
+          let reult = _this.compareTwoSize(a.size, b.size);
+          return -reult;
+        };
+        break;
     }
 
     repos.sort(comparator);
@@ -649,6 +661,28 @@ export const Utils = {
           return a.mtime < b.mtime ? 1 : -1;
         };
         break;
+      case 'size-asc':
+        comparator = function(a, b) {
+          if (a.type == 'dir' && b.type == 'dir') {
+            let reult = _this.compareTwoWord(a.name, b.name);
+            return reult;
+          } else {
+            let reult = _this.compareTwoSize(a.size, b.size);
+            return reult;
+          }
+        };
+        break;
+      case 'size-desc':
+        comparator = function(a, b) {
+          if (a.type == 'dir' && b.type == 'dir') {
+            let reult = _this.compareTwoWord(a.name, b.name);
+            return -reult;
+          } else {
+            let reult = _this.compareTwoSize(a.size, b.size);
+            return -reult;
+          }
+        };
+        break;
     }
 
     items.sort((a, b) => {
@@ -663,6 +697,28 @@ export const Utils = {
     return items;
   },
 
+  compareTwoSize: function(a, b) {
+    let suffix = /[A-Za-z]+/g;
+    let fileSizeName = /(\-|\+)?\d+(\.\d+)?/g;
+    let sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+    let aSuffixName = a.match(suffix)[0];
+    let bSuffixName = b.match(suffix)[0];
+    let aIndex = sizes.indexOf(aSuffixName);
+    let bIndex = sizes.indexOf(bSuffixName);
+
+    if (aIndex === bIndex) {
+      let aFileName = a.match(fileSizeName)[0];
+      let bFileName = b.match(fileSizeName)[0];
+      let aBytes = aFileName * (1000 ** aIndex);
+      let bBytes = bFileName * (1000 ** bIndex);
+      return aBytes < bBytes ? -1 : 1;
+    } else {
+      return aIndex < bIndex ? -1 : 1;
+    }
+    
+  },
+
   changeMarkdownNodes: function(nodes, fn) {
     nodes.map((item) => {
       fn(item);