Merge branch '183-admin-users-sort' into 'master'

Resolve "Admin: Users sort"

Closes #183

See merge request genesys-pgr/genesys-ui!188

locales/en/translations.json

@@ -1857,7 +1857,8 @@
     },
     "p": {
       "browse": {
-        "title": "Registered user accounts"
+        "title": "Registered user accounts",
+        "mobileTitle": "Registered users"
       },
       "display": {
         "title": "User profile information",
@@ -1936,6 +1937,10 @@
       "deleted": "DELETED",
       "ldap": "LDAP"
     }
+  },
+  "sort": {
+    "lastLoginAsc": "Last login (old to new)",
+    "lastLoginDesc": "Last login (new to old)"
   }
 }
 ,"vocabulary": {

src/actions/navigation.ts

@@ -11,7 +11,8 @@ export function navigateTo(path: string, query?: object) {
       }
 
       const location = getState().routing.location.pathname;
-      if (location !== path) {
+      const search = getState().routing.location.search;
+      if (`${location}${search}` !== `${path}${query ? stringify(query) : ''}`) {
         if (!query) {
           dispatch(push(path ? path : ''));
         } else {

src/model/request/MaterialRequest.ts

@@ -20,8 +20,8 @@ class MaterialRequest {
   public version: number;
 
   public static DEFAULT_SORT = {
-    property: 'lastModifiedDate',
-    direction: 'DESC',
+    property: 'id',
+    direction: 'ASC',
   };
 
   public static STATE: { [key: number]: string; } = {

src/model/user/User.ts

 import { UuidModel } from 'model/common.model';
+import { SortDirection } from 'model/Page';
 
 class User extends UuidModel {
   public static USERROLES: { [key: string]: any; } = {
@@ -28,6 +29,18 @@ class User extends UuidModel {
   public constructor(obj?) {
     super(obj);
   }
+
+  public static DEFAULT_SORT = {
+    property: 'email',
+    direction: SortDirection.ASC,
+  };
+
+  public static CUSTOM_SORT_OPTIONS = {
+    fullName: { property: 'fullName', label: 'user.common.fullName', direction: 'ASC' },
+    email: { property: 'email', label: 'user.common.emailAddress', direction: 'ASC' },
+    lastLogin: { property: 'lastLogin', label: 'user.sort.lastLoginAsc', direction: 'ASC' },
+    lastLoginDesc: { property: 'lastLogin', label: 'user.sort.lastLoginDesc', direction: 'DESC' },
+  };
 }
 
 enum UserRole {

src/requests/actions/admin.ts

@@ -53,6 +53,7 @@ export const loadMoreRequests = (paged?: FilteredPage<MaterialRequest>) => (disp
       } else {
         dispatch(appendRequests(page));
       }
+      dispatch(updateRoute(paged));
     })
     .catch((error) => {
       dispatch(receiveRequests(null, error));
@@ -117,6 +118,10 @@ export const applyFilters = (filters: string | MaterialRequestFilter, page: IPag
 };
 
 export const updateRoute = (paged: FilteredPage<MaterialRequest>) => (dispatch) => {
-  dispatch(navigateTo(paged.filterCode ? `/admin/requests/${paged.filterCode}` : '/admin/requests'));
+  const qs = {
+    s: paged.sort[0].property === MaterialRequest.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
+    d: paged.sort[0].direction === MaterialRequest.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
+  };
+  dispatch(navigateTo(paged.filterCode ? `/admin/requests/${paged.filterCode}` : '/admin/requests', qs));
 };
 

src/subsets/actions/dashboard.ts

@@ -104,5 +104,9 @@ export const applyFilters = (filters: string | SubsetFilter, page?: Page<Subset>
 };
 
 const updateRoute = (paged: FilteredPage<Subset>) => (dispatch) => {
-  dispatch(navigateTo(paged.filterCode ? `/dashboard/subsets/${paged.filterCode}` : '/dashboard/subsets'));
+  const qs = {
+    s: paged.sort[0].property === Subset.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
+    d: paged.sort[0].direction === Subset.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
+  };
+  dispatch(navigateTo(paged.filterCode ? `/dashboard/subsets/${paged.filterCode}` : '/dashboard/subsets', qs));
 };

src/user/actions/admin.ts

@@ -132,6 +132,10 @@ export const loadMoreUsers = (paged?: FilteredPage<User>) => (dispatch) => {
 };
 
 export const updateRoute = (paged: FilteredPage<User>) => (dispatch) => {
-  dispatch(navigateTo(paged.filterCode ? `/admin/users/${paged.filterCode}` : '/admin/users'));
+  const qs = {
+    s: paged.sort[0].property === User.DEFAULT_SORT.property ? undefined : paged.sort[0].property,
+    d: paged.sort[0].direction === User.DEFAULT_SORT.direction ? undefined : paged.sort[0].direction,
+  };
+  dispatch(navigateTo(paged.filterCode ? `/admin/users/${paged.filterCode}` : '/admin/users', qs));
 };
 

src/user/translations.json

@@ -41,7 +41,8 @@
     },
     "p": {
       "browse": {
-        "title": "Registered user accounts"
+        "title": "Registered user accounts",
+        "mobileTitle": "Registered users"
       },
       "display": {
         "title": "User profile information",
@@ -120,5 +121,9 @@
       "deleted": "DELETED",
       "ldap": "LDAP"
     }
+  },
+  "sort": {
+    "lastLoginAsc": "Last login (old to new)",
+    "lastLoginDesc": "Last login (new to old)"
   }
 }
\ No newline at end of file

src/user/ui/admin/BrowsePage.tsx

@@ -16,12 +16,16 @@ import BrowsePageTemplate from 'ui/pages/_base/BrowsePage';
 import { PageContents } from 'ui/layout/PageLayout';
 import Loading from 'ui/common/Loading';
 import PagedLoader from 'ui/common/PagedLoader';
-import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
 import UserCard from './c/UserCard';
 import UserFilters from 'user/ui/admin/c/UserFilter';
 import Grid from '@material-ui/core/Grid';
 import PrettyFilters from 'ui/common/filter/PrettyFilters';
 import ContentLayout from 'ui/layout/ContentLayout';
+import PaginationComponent from 'ui/common/pagination';
+import withWidth from '@material-ui/core/withWidth';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+
+const mobile = ['xs'] as Breakpoint[];
 
 class BrowsePage extends BrowsePageTemplate<User> {
 
@@ -40,19 +44,27 @@ class BrowsePage extends BrowsePageTemplate<User> {
   }
 
   public render() {
-    const { paged, t, loadMoreData } = this.props;
+    const { paged, loadMoreData, width } = this.props;
 
     const renderUser = (user: User, index: number) => {
       return <UserCard key={ user.uuid } index={ index } user={ user } />;
     };
 
+    const isMobile = mobile.indexOf(width) !== -1;
+    const title = isMobile ? 'user.admin.p.browse.mobileTitle' : 'user.admin.p.browse.title';
+
     return (
       <ContentLayout left={
         <UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
       } customHeaderHeight>
         <Grid container spacing={ 0 }>
           <Grid item xs={ 12 }>
-            <ContentHeaderWithButton title={ t(`user.admin.p.browse.title`) }/>
+            <PaginationComponent
+              pageObj={ paged }
+              onSortChange={ this.onSortChange }
+              displayName={ title }
+              sortOptions={ User.CUSTOM_SORT_OPTIONS }
+            />
             <PrettyFilters
               prefix="users"
               filterObj={ paged && paged.filter || {} }
@@ -86,4 +98,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default connect(mapStateToProps, mapDispatchToProps)((translate()(BrowsePage)));
+export default connect(mapStateToProps, mapDispatchToProps)(withWidth()(translate()(BrowsePage)));