diff --git a/frontend/src/components/dialog/sort-options.js b/frontend/src/components/dialog/sort-options.js index 0fe14e4681..3e13aabf9b 100644 --- a/frontend/src/components/dialog/sort-options.js +++ b/frontend/src/components/dialog/sort-options.js @@ -7,6 +7,7 @@ const propTypes = { toggleDialog: PropTypes.func.isRequired, sortBy: PropTypes.string.isRequired, sortOrder: PropTypes.string.isRequired, + sortOptions: PropTypes.array, sortItems: PropTypes.func.isRequired }; @@ -14,7 +15,7 @@ class SortOptions extends React.Component { constructor(props) { super(props); - this.sortOptions = [ + this.sortOptions = this.props.sortOptions || [ {value: 'name-asc', text: gettext('By name ascending')}, {value: 'name-desc', text: gettext('By name descending')}, {value: 'size-asc', text: gettext('By size ascending')}, diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js index 33aeaad39a..60ddb378d6 100644 --- a/frontend/src/pages/share-admin/share-links.js +++ b/frontend/src/pages/share-admin/share-links.js @@ -1,4 +1,5 @@ import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; import { Link } from '@reach/router'; import moment from 'moment'; import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap'; @@ -12,6 +13,7 @@ import toaster from '../../components/toast'; import EmptyTip from '../../components/empty-tip'; import ShareLinkPermissionSelect from '../../components/dialog/share-link-permission-select'; import ShareAdminLink from '../../components/dialog/share-admin-link'; +import SortOptionsDialog from '../../components/dialog/sort-options'; class Content extends Component { @@ -86,6 +88,12 @@ class Content extends Component { } } +const itemPropTypes = { + item: PropTypes.object.isRequired, + isDesktop: PropTypes.bool.isRequired, + onRemoveLink: PropTypes.func.isRequired +}; + class Item extends Component { constructor(props) { @@ -200,7 +208,7 @@ class Item extends Component { {item.is_dir ? {item.obj_name} : - {item.obj_name} + {item.obj_name} } {item.repo_name} @@ -231,13 +239,13 @@ class Item extends Component { {item.is_dir ? {item.obj_name} : - {item.obj_name} + {item.obj_name} } {isPro && {Utils.getShareLinkPermissionObject(currentPermission).text}}
{item.repo_name}
- {item.view_cnt}({gettext('Visits')}) - {this.renderExpiration()}({gettext('Expiration')}) + {gettext('Visits')}: {item.view_cnt} + {gettext('Expiration')}: {this.renderExpiration()} @@ -284,6 +292,8 @@ class Item extends Component { } } +Item.propTypes = itemPropTypes; + class ShareAdminShareLinks extends Component { constructor(props) { @@ -295,6 +305,14 @@ class ShareAdminShareLinks extends Component { sortBy: 'name', // 'name' or 'time' sortOrder: 'asc' // 'asc' or 'desc' }; + + // for mobile + this.sortOptions = [ + {value: 'name-asc', text: gettext('By name ascending')}, + {value: 'name-desc', text: gettext('By name descending')}, + {value: 'time-asc', text: gettext('By expiration ascending')}, + {value: 'time-desc', text: gettext('By expiration descending')} + ]; } _sortItems = (items, sortBy, sortOrder) => { @@ -323,6 +341,8 @@ class ShareAdminShareLinks extends Component { return a.expire_date < b.expire_date ? 1 : -1; }; break; + + // no default } items.sort((a, b) => { @@ -376,33 +396,51 @@ class ShareAdminShareLinks extends Component { }); } + toggleSortOptionsDialog = () => { + this.setState({ + isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen + }); + } + render() { return ( -
-
-
-
    -
  • - {gettext('Share Links')} -
  • - {canGenerateUploadLink && ( -
  • {gettext('Upload Links')}
  • - )} -
-
-
- + +
+
+
+
    +
  • + {gettext('Share Links')} +
  • + {canGenerateUploadLink && ( +
  • {gettext('Upload Links')}
  • + )} +
+ {(!Utils.isDesktop() && this.state.items.length > 0) && } +
+
+ +
-
+ {this.state.isSortOptionsDialogOpen && + + } + ); } } diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js index 85216c329e..5ca7c22c7a 100644 --- a/frontend/src/pages/share-admin/upload-links.js +++ b/frontend/src/pages/share-admin/upload-links.js @@ -143,8 +143,8 @@ class Item extends Component { {item.obj_name}
{item.repo_name}
- {item.view_cnt}({gettext('Visits')}) - {this.renderExpiration()}({gettext('Expiration')}) + {gettext('Visits')}: {item.view_cnt} + {gettext('Expiration')}: {this.renderExpiration()}