diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js index b1a44533e..d3e2f9194 100644 --- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js +++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js @@ -43,7 +43,7 @@ class ModerationContainer extends Component { } render () { - const {data, moderation, settings, assets, ...props} = this.props; + const {data, moderation, settings, assets, modQueueResort, ...props} = this.props; const providedAssetId = this.props.params.id; const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path; @@ -73,6 +73,7 @@ class ModerationContainer extends Component { premodCount={data.premodCount} rejectedCount={data.rejectedCount} flaggedCount={data.flaggedCount} + modQueueResort={modQueueResort} /> { - const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod'; - const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected'; - const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged'; - return ( -
-
-
- - {lang.t('modqueue.premod')} - - - {lang.t('modqueue.rejected')} - - - {lang.t('modqueue.flagged')} - +class ModerationMenu extends Component { + state = { + sort: 'REVERSE_CHRONOLOGICAL', + } + + static propTypes = { + premodCount: PropTypes.number.isRequired, + rejectedCount: PropTypes.number.isRequired, + flaggedCount: PropTypes.number.isRequired, + asset: PropTypes.shape({ + id: PropTypes.string + }) + } + + selectSort = (sort) => { + this.setState({sort}); + this.props.modQueueResort(sort); + } + + render() { + const {asset, premodCount, rejectedCount, flaggedCount} = this.props; + const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod'; + const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected'; + const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged'; + return ( +
+
+
+
+ + {lang.t('modqueue.premod')} + + + {lang.t('modqueue.rejected')} + + + {lang.t('modqueue.flagged')} + +
+ this.selectSort(sort)}> + + +
-
- ); -}; - -ModerationMenu.propTypes = { - premodCount: PropTypes.number.isRequired, - rejectedCount: PropTypes.number.isRequired, - flaggedCount: PropTypes.number.isRequired, - asset: PropTypes.shape({ - id: PropTypes.string - }) -}; + ); + } +} export default ModerationMenu; diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css index e2fd31911..27d5c2533 100644 --- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css +++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css @@ -8,6 +8,12 @@ .tabBar { background-color: rgba(44, 44, 44, 0.89); z-index: 5; + display: flex; + justify-content: space-between; +} + +.tabBarPadding { + width: 150px; } .tab { @@ -334,3 +340,41 @@ span { font-weight: 500; } } + +.selectField { + position: relative; + width: 140px; + height: 36px; + top: 5px; + margin-right: 10px; + background: #FFF; + padding: 10px 15px; + box-sizing: border-box; + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); + + > div { + padding: 0; + } + + i { + position: absolute; + top: 7px; + right: 7px; + } + + input { + padding: 0; + font-size: 13px; + letter-spacing: 0.7px; + font-weight: 400; + } + + label { + top: -4px; + } + + &:hover { + cursor: pointer; + } +} diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js index 3325249e1..809769a13 100644 --- a/client/coral-admin/src/graphql/queries/index.js +++ b/client/coral-admin/src/graphql/queries/index.js @@ -23,8 +23,24 @@ export const modQueueQuery = graphql(MOD_QUEUE_QUERY, { options: ({params: {id = null}}) => { return { variables: { - asset_id: id + asset_id: id, + sort: 'REVERSE_CHRONOLOGICAL' } }; - } + }, + props: ({ownProps: {params: {id = null}}, data}) => ({ + data, + modQueueResort: modQueueResort(id, data.fetchMore) + }) }); + +export const modQueueResort = (id, fetchMore) => (sort) => { + return fetchMore({ + query: MOD_QUEUE_QUERY, + variables: { + asset_id: id, + sort + }, + updateQuery: (oldData, {fetchMoreResult:{data}}) => data + }); +}; diff --git a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql index 86cd26bbd..b4f2a20a0 100644 --- a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql +++ b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql @@ -1,16 +1,18 @@ #import "../fragments/commentView.graphql" -query ModQueue ($asset_id: ID) { +query ModQueue ($asset_id: ID, $sort: SORT_ORDER) { premod: comments(query: { statuses: [PREMOD], - asset_id: $asset_id + asset_id: $asset_id, + sort: $sort }) { ...commentView } flagged: comments(query: { action_type: FLAG, asset_id: $asset_id, - statuses: [NONE, PREMOD] + statuses: [NONE, PREMOD], + sort: $sort }) { ...commentView action_summaries { @@ -22,7 +24,8 @@ query ModQueue ($asset_id: ID) { } rejected: comments(query: { statuses: [REJECTED], - asset_id: $asset_id + asset_id: $asset_id, + sort: $sort }) { ...commentView }