From b0bb878e4b25c30329512f0a65fc9bf838837bc3 Mon Sep 17 00:00:00 2001 From: ivan Date: Fri, 25 Nov 2016 14:46:01 -0300 Subject: [PATCH 1/3] Ivan - WIP --- .../panel/users/admin-panel-list-users.js | 50 ++++++++++++++++++- client/src/data/languages/en.js | 1 + 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/client/src/app/admin/panel/users/admin-panel-list-users.js b/client/src/app/admin/panel/users/admin-panel-list-users.js index 8661164e..9ac570ed 100644 --- a/client/src/app/admin/panel/users/admin-panel-list-users.js +++ b/client/src/app/admin/panel/users/admin-panel-list-users.js @@ -1,14 +1,62 @@ import React from 'react'; +import i18n from 'lib-app/i18n'; +import Header from 'core-components/header'; +import Table from 'core-components/table'; + class AdminPanelListUsers extends React.Component { render() { return (
- /admin/panel/users/list-users +
+ ); } + + getTableProps() { + return { + loading: this.props.loading, + headers: this.getTableHeaders(), + rows: this.getTableRows(), + pageSize: 10, + page: this.props.page, + pages: this.props.pages, + onPageChange: this.props.onPageChange + }; + } + + getTableHeaders() { + return [ + { + key: 'name', + value: i18n('NAME'), + className: 'ticket-list__number col-md-3' + }, + { + key: 'email', + value: i18n('EMAIL'), + className: 'col-md-5' + }, + { + key: 'tickets', + value: i18n('TICKETS'), + className: 'col-md-2' + }, + { + key: 'date', + value: i18n('SIGNUP_DATE'), + className: 'col-md-2' + } + ]; + } + + getTableRows() { + return [ + + ]; + } } export default AdminPanelListUsers; \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index e964ceec..6f31c2ab 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -88,6 +88,7 @@ export default { 'NEW_TICKETS_DESCRIPTION': 'Here you can view all the new tickets that are not assigned by anyone.', 'ALL_TICKETS_DESCRIPTION': 'Here you can view the tickets of the departments you are assigned.', 'TICKET_VIEW_DESCRIPTION': 'This ticket has been sent by a customer. Here you can respond or assign the ticket', + 'LIST_USERS_DESCRIPTION': 'This is the list of users that are registered in this platform. You can search for someone in particular, delete it or ban it.', //ERRORS 'EMAIL_OR_PASSWORD': 'Email or password invalid', From 9c027c91c0e12d52e137d21b98f05056e0dd817c Mon Sep 17 00:00:00 2001 From: ivan Date: Mon, 28 Nov 2016 15:37:27 -0300 Subject: [PATCH 2/3] Ivan - Add list users view with search [skip ci] --- .../panel/users/admin-panel-list-users.js | 104 +++++++++++++++--- .../panel/users/admin-panel-list-users.scss | 24 ++++ client/src/core-components/search-box.js | 18 ++- client/src/core-components/table.js | 14 ++- client/src/data/fixtures/user-fixtures.js | 88 +++++++++++++++ client/src/data/languages/en.js | 3 + client/src/lib-core/date-transformer.js | 1 + 7 files changed, 232 insertions(+), 20 deletions(-) create mode 100644 client/src/app/admin/panel/users/admin-panel-list-users.scss diff --git a/client/src/app/admin/panel/users/admin-panel-list-users.js b/client/src/app/admin/panel/users/admin-panel-list-users.js index 9ac570ed..dd7b27ea 100644 --- a/client/src/app/admin/panel/users/admin-panel-list-users.js +++ b/client/src/app/admin/panel/users/admin-panel-list-users.js @@ -1,15 +1,37 @@ import React from 'react'; import i18n from 'lib-app/i18n'; +import API from 'lib-app/api-call'; +import DateTransformer from 'lib-core/date-transformer'; + import Header from 'core-components/header'; import Table from 'core-components/table'; +import SearchBox from 'core-components/search-box'; +import Button from 'core-components/button'; class AdminPanelListUsers extends React.Component { + state = { + loading: true, + users: [], + page: 1, + pages: 1 + }; + + componentDidMount() { + this.retrieveUsers({ + page: 1, + orderBy: 'id', + desc: true, + search: '' + }); + } + render() { return ( -
+
+
); @@ -17,13 +39,14 @@ class AdminPanelListUsers extends React.Component { getTableProps() { return { - loading: this.props.loading, + className: 'admin-panel-list-users__table', + loading: this.state.loading, headers: this.getTableHeaders(), - rows: this.getTableRows(), + rows: this.state.users.map(this.getUserRow.bind(this)), pageSize: 10, - page: this.props.page, - pages: this.props.pages, - onPageChange: this.props.onPageChange + page: this.state.page, + pages: this.state.pages, + onPageChange: this.onPageChange.bind(this) }; } @@ -32,30 +55,81 @@ class AdminPanelListUsers extends React.Component { { key: 'name', value: i18n('NAME'), - className: 'ticket-list__number col-md-3' + className: 'admin-panel-list-users__table-name col-md-3' }, { key: 'email', value: i18n('EMAIL'), - className: 'col-md-5' + className: 'admin-panel-list-users__table-email col-md-5' }, { key: 'tickets', value: i18n('TICKETS'), - className: 'col-md-2' + className: 'admin-panel-list-users__table-tickets col-md-2' }, { - key: 'date', + key: 'signupDate', value: i18n('SIGNUP_DATE'), - className: 'col-md-2' + className: 'admin-panel-list-users__table-date col-md-2' } ]; } - getTableRows() { - return [ - - ]; + getUserRow(user) { + return { + name: ( + + ), + email: user.email, + tickets: ( + + {user.tickets} + + ), + signupDate: DateTransformer.transformToString(user.signupDate) + }; + } + + onSearch(query) { + this.retrieveUsers({ + page: 1, + orderBy: 'id', + desc: true, + search: query + }); + } + + onPageChange(event) { + this.retrieveUsers({ + page: event.target.value, + orderBy: this.state.orderBy, + desc: this.state.desc, + search: this.state.search + }); + } + + retrieveUsers(data) { + this.setState({ + loading: true + }); + + API.call({ + path: '/user/get-users', + data: data + }).then(this.onUsersRetrieved.bind(this)); + } + + onUsersRetrieved(result) { + this.setState({ + page: result.data.page, + pages: result.data.pages, + users: result.data.users, + orderBy: result.data.orderBy, + desc: result.data.desc, + loading: false + }); } } diff --git a/client/src/app/admin/panel/users/admin-panel-list-users.scss b/client/src/app/admin/panel/users/admin-panel-list-users.scss new file mode 100644 index 00000000..7b76f23c --- /dev/null +++ b/client/src/app/admin/panel/users/admin-panel-list-users.scss @@ -0,0 +1,24 @@ +@import '../../../../scss/vars'; + +.admin-panel-list-users { + + &__search-box { + margin: 20px; + } + + &__table { + text-align: left; + } + + &__name-link { + color: $secondary-blue; + } + + &__tickets-number { + background-color: white; + border-radius: 10px; + width: 70px; + display: inline-block; + text-align: center; + } +} \ No newline at end of file diff --git a/client/src/core-components/search-box.js b/client/src/core-components/search-box.js index 13489a75..d7bb3a99 100644 --- a/client/src/core-components/search-box.js +++ b/client/src/core-components/search-box.js @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import Input from 'core-components/input'; import Icon from 'core-components/icon'; @@ -7,7 +8,8 @@ import keyCode from 'keycode'; class SearchBox extends React.Component { static propTypes = { - onSearch: React.PropTypes.func + onSearch: React.PropTypes.func, + placeholder: React.PropTypes.string }; state = { @@ -16,8 +18,8 @@ class SearchBox extends React.Component { render() { return ( -
- +
+ @@ -25,6 +27,16 @@ class SearchBox extends React.Component { ); } + getClass() { + let classes = { + 'search-box': true + }; + + classes[this.props.className] = (this.props.className); + + return classNames(classes); + } + onChange(event) { this.setState({ value: event.target.value diff --git a/client/src/core-components/table.js b/client/src/core-components/table.js index 58494e05..449d2b63 100644 --- a/client/src/core-components/table.js +++ b/client/src/core-components/table.js @@ -32,7 +32,7 @@ class Table extends React.Component { render() { return ( -
+
@@ -92,7 +92,7 @@ class Table extends React.Component { const items = _.range(1, this.getPages()).map((index) => {return {content: index};}); return ( - + ); } @@ -104,6 +104,16 @@ class Table extends React.Component { ) } + getClass() { + let classes = { + 'table__wrapper': true + }; + + classes[this.props.className] = (this.props.className); + + return classNames(classes); + } + onNavigationItemClick(index) { this.setState({ page: index + 1 diff --git a/client/src/data/fixtures/user-fixtures.js b/client/src/data/fixtures/user-fixtures.js index 1177e941..dde8365e 100644 --- a/client/src/data/fixtures/user-fixtures.js +++ b/client/src/data/fixtures/user-fixtures.js @@ -124,6 +124,94 @@ module.exports = [ }; } }, + { + path: '/user/get-users', + time: 100, + response: function (data) { + return { + status: 'success', + data: { + page: data.page, + pages: 10, + orderBy: 'date', + desc: true, + search: '', + users: [ + { + id: 101, + name: 'Haskell Curry', + email: 'haskell@currycurrylady.com', + tickets: 5, + signupDate: 20160415 + }, + { + id: 97, + name: 'Alan Turing', + email: 'turing@currycurrylady.com', + tickets: 1, + signupDate: 20160401 + }, + { + id: 89, + name: 'David Hilbert', + email: 'hilbert@currycurrylady.com', + tickets: 2, + signupDate: 20160208 + }, + { + id: 83, + name: 'Kurt Gödel', + email: 'kurt@currycurrylady.com', + tickets: 10, + signupDate: 20160110 + }, + { + id: 79, + name: 'Mojzesz Presburger', + email: 'presburger@currycurrylady.com', + tickets: 6, + signupDate: 20150415 + }, + { + id: 73, + name: 'Haskell Curry', + email: 'haskell@currycurrylady.com', + tickets: 5, + signupDate: 20160415 + }, + { + id: 71, + name: 'Alan Turing', + email: 'turing@currycurrylady.com', + tickets: 1, + signupDate: 20160401 + }, + { + id: 67, + name: 'David Hilbert', + email: 'hilbert@currycurrylady.com', + tickets: 2, + signupDate: 20160208 + }, + { + id: 61, + name: 'Kurt Gödel', + email: 'kurt@currycurrylady.com', + tickets: 10, + signupDate: 20160110 + }, + { + id: 59, + name: 'Mojzesz Presburger', + email: 'presburger@currycurrylady.com', + tickets: 6, + signupDate: 20150415 + } + ] + } + }; + } + }, { path: '/user/get', time: 100, diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 6f31c2ab..82f4e0a4 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -75,6 +75,9 @@ export default { 'WARNING': 'Warning', 'INFO': 'Information', 'ALL_DEPARTMENTS': 'All Departments', + 'NAME': 'Name', + 'SIGNUP_DATE': 'Sign up date', + 'SEARCH_USERS': 'Search users...', //VIEW DESCRIPTIONS 'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.', diff --git a/client/src/lib-core/date-transformer.js b/client/src/lib-core/date-transformer.js index 9c036994..76719096 100644 --- a/client/src/lib-core/date-transformer.js +++ b/client/src/lib-core/date-transformer.js @@ -2,6 +2,7 @@ let month = ["", "Jan", "Feb", "Mar", "May", "Jun", "Jul", "Aug", "Sep", "Oct", export default { transformToString (date) { + date += ''; //Transform to string let y = date.substring(0, 4); let m = date.substring(4, 6); let d = date.substring(6, 8); From d5cdbd723fe098ce2ca598f356bd643b0378a6ae Mon Sep 17 00:00:00 2001 From: ivan Date: Mon, 28 Nov 2016 16:04:38 -0300 Subject: [PATCH 3/3] Ivan - Add sorting arrows to table and list users [skip ci] --- .../panel/users/admin-panel-list-users.js | 30 +++++++++++++++++-- client/src/core-components/table.js | 19 +++++++++++- client/src/core-components/table.scss | 12 ++++++++ 3 files changed, 58 insertions(+), 3 deletions(-) diff --git a/client/src/app/admin/panel/users/admin-panel-list-users.js b/client/src/app/admin/panel/users/admin-panel-list-users.js index dd7b27ea..9944e66f 100644 --- a/client/src/app/admin/panel/users/admin-panel-list-users.js +++ b/client/src/app/admin/panel/users/admin-panel-list-users.js @@ -14,6 +14,8 @@ class AdminPanelListUsers extends React.Component { state = { loading: true, users: [], + orderBy: 'id', + desc: true, page: 1, pages: 1 }; @@ -65,12 +67,18 @@ class AdminPanelListUsers extends React.Component { { key: 'tickets', value: i18n('TICKETS'), - className: 'admin-panel-list-users__table-tickets col-md-2' + className: 'admin-panel-list-users__table-tickets col-md-2', + order: true, + onOrderUp: this.orderByTickets.bind(this, false), + onOrderDown: this.orderByTickets.bind(this, true) }, { key: 'signupDate', value: i18n('SIGNUP_DATE'), - className: 'admin-panel-list-users__table-date col-md-2' + className: 'admin-panel-list-users__table-date col-md-2', + order: true, + onOrderUp: this.orderById.bind(this, false), + onOrderDown: this.orderById.bind(this, true) } ]; } @@ -110,6 +118,24 @@ class AdminPanelListUsers extends React.Component { }); } + orderByTickets(desc) { + this.retrieveUsers({ + page: 1, + orderBy: 'tickets', + desc: desc, + search: this.state.search + }); + } + + orderById(desc) { + this.retrieveUsers({ + page: 1, + orderBy: 'id', + desc: desc, + search: this.state.search + }); + } + retrieveUsers(data) { this.setState({ loading: true diff --git a/client/src/core-components/table.js b/client/src/core-components/table.js index 449d2b63..2d0fc757 100644 --- a/client/src/core-components/table.js +++ b/client/src/core-components/table.js @@ -3,6 +3,7 @@ import _ from 'lodash'; import classNames from 'classnames'; import Menu from 'core-components/menu'; +import Icon from 'core-components/icon'; import Loading from 'core-components/loading'; class Table extends React.Component { @@ -56,7 +57,23 @@ class Table extends React.Component { }; return ( - + + ); + } + + renderHeaderArrows(onArrowUp, onArrowDown) { + return ( + + + + + + + + ); } diff --git a/client/src/core-components/table.scss b/client/src/core-components/table.scss index fe29d346..079b941d 100644 --- a/client/src/core-components/table.scss +++ b/client/src/core-components/table.scss @@ -7,6 +7,18 @@ background-color: $primary-blue; color: white; font-weight: normal; + + &-arrow-up { + cursor: pointer; + font-size: $font-size--xs; + margin-left: 10px; + } + + &-arrow-down { + cursor: pointer; + font-size: $font-size--xs; + margin-left: 3px; + } } &__header-column {
{header.value} + {header.value} + {(header.order) ? this.renderHeaderArrows(header.onOrderUp, header.onOrderDown) : null} +