12.0 add sort button in lib content view (#6355)

* feature - add sort button on content page

* remove seahub/wiki2/migrations/0001_initial.py

* add default option for sort options

* modify shallow compare to strict compare

frontend/src/components/cur-dir-path/dir-tool.js

@@ -7,6 +7,7 @@ import TextTranslation from '../../utils/text-translation';
 import SeahubPopover from '../common/seahub-popover';
 import ListTagPopover from '../popover/list-tag-popover';
 import ViewModes from '../../components/view-modes';
+import ReposSortMenu from '../../components/repos-sort-menu';
 import { PRIVATE_FILE_TYPE } from '../../constants';
 import MetadataViewToolBar from '../../metadata/metadata-view/components/view-toolbar';
 
@@ -19,6 +20,9 @@ const propTypes = {
   currentMode: PropTypes.string.isRequired,
   switchViewMode: PropTypes.func.isRequired,
   isCustomPermission: PropTypes.bool,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  sortItems: PropTypes.func,
 };
 
 class DirTool extends React.Component {
@@ -27,8 +31,15 @@ class DirTool extends React.Component {
     super(props);
     this.state = {
       isRepoTagDialogOpen: false,
-      isDropdownMenuOpen: false
+      isDropdownMenuOpen: false,
     };
+
+    this.sortOptions = [
+      {value: 'name-asc', text: gettext('By name ascending')},
+      {value: 'name-desc', text: gettext('By name descending')},
+      {value: 'time-asc', text: gettext('By time ascending')},
+      {value: 'time-desc', text: gettext('By time descending')}
+    ];
   }
 
   toggleDropdownMenu = () => {
@@ -78,13 +89,25 @@ class DirTool extends React.Component {
     }
   };
 
+  onSelectSortOption = (item) => {
+    const [sortBy, sortOrder] = item.value.split('-');
+    this.props.sortItems(sortBy, sortOrder);
+  };
+
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath === '/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES;
 
+    const sortOptions = this.sortOptions.map(item => {
+      return {
+        ...item,
+        isSelected: item.value === `${sortBy}-${sortOrder}`
+      };
+    });
+
     if (isFileExtended) {
       return (
         <div className="d-flex">
@@ -97,6 +120,7 @@ class DirTool extends React.Component {
       <React.Fragment>
         <div className="d-flex">
           <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
+          <ReposSortMenu sortOptions={sortOptions} onSelectSortOption={this.onSelectSortOption}/>
           {(!this.props.isCustomPermission) &&
             <span className="cur-view-path-btn ml-2" onClick={() => this.props.switchViewMode('detail')}>
               <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>

frontend/src/components/cur-dir-path/index.js

@@ -93,6 +93,9 @@ class CurDirPath extends React.Component {
           currentMode={this.props.currentMode}
           switchViewMode={this.props.switchViewMode}
           isCustomPermission={this.props.isCustomPermission}
+          sortBy={this.props.sortBy}
+          sortOrder={this.props.sortOrder}
+          sortItems={this.props.sortItems}
         />}
         {!isDesktop && this.props.direntList.length > 0 &&
         <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}

frontend/src/components/repos-sort-menu.js

@@ -34,8 +34,8 @@ class ReposSortMenu extends React.Component {
         <DropdownToggle
           tag="div"
           data-toggle="dropdown"
-          title={gettext('Switch view mode')}
-          aria-label={gettext('Switch view mode')}
+          title={gettext('Switch sort mode')}
+          aria-label={gettext('Switch sort mode')}
           aria-expanded={isDropdownMenuOpen}
         >
           <span className="cur-view-path-btn px-1" role="button">