Merge pull request #346 from coralproject/mod-queue-sort

Adding sort to moderation queue.

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}
         />
         <ModerationQueue
           data={data}

client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js

@@ -1,42 +1,64 @@
-import React, {PropTypes} from 'react';
+import React, {PropTypes, Component} from 'react';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
+import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
-const ModerationMenu = ({asset, premodCount, rejectedCount, flaggedCount}) => {
-  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 (
-    <div className='mdl-tabs'>
-      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <div>
-          <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
-          </Link>
-          <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
-          </Link>
-          <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
-        </Link>
+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 (
+      <div className='mdl-tabs'>
+        <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+          <div className={styles.tabBarPadding}/>
+          <div>
+            <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+              {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+            </Link>
+            <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+              {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+            </Link>
+            <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+              {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+            </Link>
+          </div>
+          <SelectField
+            className={styles.selectField}
+            label='Sort'
+            value={this.state.sort}
+            onChange={sort => this.selectSort(sort)}>
+            <Option value={'CHRONOLOGICAL'}>Newest First</Option>
+            <Option value={'REVERSE_CHRONOLOGICAL'}>Oldest First</Option>
+          </SelectField>
         </div>
       </div>
-    </div>
-  );
-};
-
-ModerationMenu.propTypes = {
-  premodCount: PropTypes.number.isRequired,
-  rejectedCount: PropTypes.number.isRequired,
-  flaggedCount: PropTypes.number.isRequired,
-  asset: PropTypes.shape({
-    id: PropTypes.string
-  })
-};
+    );
+  }
+}
 
 export default ModerationMenu;

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;
+   }
+}

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
+  });
+};

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
     }