From 8d9b030585afdf83893b4f088ffbdf6b4bf06d5e Mon Sep 17 00:00:00 2001 From: Ville Vuorenmaa Date: Tue, 19 Jul 2016 22:08:20 +0300 Subject: [PATCH 1/6] Fixed error msg typo --- src/client/actions/ParticipantActions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/actions/ParticipantActions.js b/src/client/actions/ParticipantActions.js index e9c2dc86..ffa4fc75 100644 --- a/src/client/actions/ParticipantActions.js +++ b/src/client/actions/ParticipantActions.js @@ -49,7 +49,7 @@ export function getParticipantActions(alt, participantResource, errorActions) { } else { this.participantListUpdated(participantList); } - }, err => errorActions.error(err, 'Osallitujia ei voitu ladata')); + }, err => errorActions.error(err, 'Osallistujia ei voitu ladata')); }; } From 63287a6a902dd797df0e73ad97bf167ba30a7808 Mon Sep 17 00:00:00 2001 From: Ville Vuorenmaa Date: Tue, 19 Jul 2016 22:18:17 +0300 Subject: [PATCH 2/6] Higher contrast to spinner --- src/client/styles.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/client/styles.scss b/src/client/styles.scss index d6adcf63..6c8eecd2 100644 --- a/src/client/styles.scss +++ b/src/client/styles.scss @@ -65,6 +65,10 @@ $screen-sm: 768px; @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "~react-spinner/react-spinner.css"; +.react-spinner_bar { + background: $mid-grey; +} + /** * Tables */ From 22f28c5eed31400fb03f09d5f196ca34187e747a Mon Sep 17 00:00:00 2001 From: Ville Vuorenmaa Date: Tue, 19 Jul 2016 22:36:20 +0300 Subject: [PATCH 3/6] =?UTF-8?q?Don=E2=80=99t=20hide=20participant=20list?= =?UTF-8?q?=20while=20updating=20presence?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/actions/ParticipantActions.js | 11 +++++++---- .../containers/ParticipantRowsContainer.jsx | 2 +- src/client/stores/ParticipantStore.js | 3 ++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/client/actions/ParticipantActions.js b/src/client/actions/ParticipantActions.js index ffa4fc75..5cfd4865 100644 --- a/src/client/actions/ParticipantActions.js +++ b/src/client/actions/ParticipantActions.js @@ -60,10 +60,13 @@ export function getParticipantActions(alt, participantResource, errorActions) { }; } - updateParticipantPresences(ids, newValue, offset, limit, order, filter) { - participantResource.raw('post', 'massAssign', { body: { ids: ids, newValue: newValue, fieldName: 'presence' } }) - .then(response => this.loadParticipantList(offset, limit, order, filter), - err => errorActions.error(err, 'Osallistujien tilan päivitys epäonnistui')); + updateParticipantPresences(ids, newValue, offset, limit, order, filter) { + return dispatch => { + dispatch(); + participantResource.raw('post', 'massAssign', { body: { ids: ids, newValue: newValue, fieldName: 'presence' } }) + .then(response => this.loadParticipantList(offset, limit, order, filter), + err => errorActions.error(err, 'Osallistujien tilan päivitys epäonnistui')); + }; } updateProperty(participantId, property, value) { diff --git a/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx b/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx index 2e00590a..9420a8a8 100644 --- a/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx +++ b/src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx @@ -52,7 +52,7 @@ export function getParticipantRowsContainer(participantStore) { const rowCreator = element => ; - return this.state.participants === undefined + return this.state.loading ? ( diff --git a/src/client/stores/ParticipantStore.js b/src/client/stores/ParticipantStore.js index 22465f12..31277e5f 100644 --- a/src/client/stores/ParticipantStore.js +++ b/src/client/stores/ParticipantStore.js @@ -22,13 +22,14 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions } handleLoadParticipantList(countParticipants) { - this.participants = undefined; + this.loading = true; if (countParticipants) { this.participantCount = undefined; } } handleParticipantListUpdated({ participants, newCount }) { + this.loading = false; this.participants = participants; if (newCount !== undefined) { this.participantCount = newCount; From 994d82949f41328c3b99e08b20acb271af6d7257 Mon Sep 17 00:00:00 2001 From: Ville Vuorenmaa Date: Tue, 19 Jul 2016 23:24:15 +0300 Subject: [PATCH 4/6] Loading state to button --- .../ParticipantListPage.jsx | 23 +++++++++++++++---- src/client/components/Util/LoadingButton.jsx | 23 +++++++++++++++++++ src/client/components/index.js | 1 + 3 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 src/client/components/Util/LoadingButton.jsx diff --git a/src/client/components/ParticipantListPage/ParticipantListPage.jsx b/src/client/components/ParticipantListPage/ParticipantListPage.jsx index f74ee138..bcf24d52 100644 --- a/src/client/components/ParticipantListPage/ParticipantListPage.jsx +++ b/src/client/components/ParticipantListPage/ParticipantListPage.jsx @@ -8,6 +8,7 @@ import { getParticipantRowsContainer } from './containers/ParticipantRowsContain import { getQuickFilterContainer } from './containers/QuickFilterContainer'; import { getParticipantCount } from './containers/ParticipantCount'; import { getPresenceLabel } from '../../components'; +import { LoadingButton } from '../../components'; function getOrder(query) { try { @@ -35,22 +36,36 @@ function getLimit(query) { return query.limit && Number(query.limit) || 200; } -export function getMassEdit() { +export function getMassEdit(participantStore) { class MassEdit extends React.Component { constructor(props){ super(props); - this.state = {}; + this.state = { loading: false }; this.onSubmit = this.onSubmit.bind(this); this.onChange = this.onChange.bind(this); + this.onStoreChanged = this.onStoreChanged.bind(this); } onSubmit(event) { event.preventDefault(); if (this.state.value !== null && this.state.value !== 'null') { + this.setState({ value: this.state.value, loading: true }); this.props.onSubmit(this.state.value); } } + componentDidMount() { + participantStore.listen(this.onStoreChanged); + } + + componentWillUnmount() { + participantStore.unlisten(this.onStoreChanged); + } + + onStoreChanged() { + this.setState({ loading: false }); + } + onChange(event){ event.persist(); this.setState({ value: event.target.value }); @@ -69,7 +84,7 @@ export function getMassEdit() { - + ); } @@ -118,7 +133,7 @@ export function getParticipantListPage(participantStore, participantActions, sea const ParticipantRowsContainer = getParticipantRowsContainer(participantStore); const QuickFilterContainer = getQuickFilterContainer(participantStore, participantActions, searchFilterActions, searchFilterStore); const ParticipantCount = getParticipantCount(participantStore); - const MassEdit = getMassEdit(); + const MassEdit = getMassEdit(participantStore); const SelectAll = getSelectAll(); class ParticipantListPage extends React.Component { diff --git a/src/client/components/Util/LoadingButton.jsx b/src/client/components/Util/LoadingButton.jsx new file mode 100644 index 00000000..e9f1e74b --- /dev/null +++ b/src/client/components/Util/LoadingButton.jsx @@ -0,0 +1,23 @@ +import _ from 'lodash'; +import React from 'react'; +import { Button } from 'react-bootstrap'; + +export class LoadingButton extends React.Component { + render() { + return ( + + ); + } +} + +LoadingButton.propTypes = { + loading: React.PropTypes.bool.isRequired, + label: React.PropTypes.string.isRequired, + labelWhileLoading: React.PropTypes.string.isRequired, + bsStyle: React.PropTypes.string, +}; diff --git a/src/client/components/index.js b/src/client/components/index.js index d312836c..36332240 100644 --- a/src/client/components/index.js +++ b/src/client/components/index.js @@ -26,3 +26,4 @@ export { PresenceHistory } from './ParticipantDetailsPage/PresenceHistory'; export { ParticipantDates } from './ParticipantDetailsPage/ParticipantDates'; export { getLogin } from './OfflineLogin'; export { PropertyTextArea } from './PropertyTextArea'; +export { LoadingButton } from './Util/LoadingButton'; From 0203da2bb4f975afdc78e7dc961158b79138da6a Mon Sep 17 00:00:00 2001 From: Ville Vuorenmaa Date: Tue, 19 Jul 2016 23:28:20 +0300 Subject: [PATCH 5/6] Fix spinner position --- src/client/styles.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/client/styles.scss b/src/client/styles.scss index 6c8eecd2..ed724b54 100644 --- a/src/client/styles.scss +++ b/src/client/styles.scss @@ -65,6 +65,11 @@ $screen-sm: 768px; @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "~react-spinner/react-spinner.css"; +table .react-spinner, .h2 .react-spinner { + top: 15px; + left: 15px; +} + .react-spinner_bar { background: $mid-grey; } From 0b04a96e66b3a998699122c1355a97d1a4ccbdea Mon Sep 17 00:00:00 2001 From: Ville Vuorenmaa Date: Tue, 19 Jul 2016 23:31:59 +0300 Subject: [PATCH 6/6] Fix linter errors --- src/client/actions/ParticipantActions.js | 2 +- .../components/ParticipantListPage/ParticipantListPage.jsx | 2 +- src/client/components/Util/LoadingButton.jsx | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/client/actions/ParticipantActions.js b/src/client/actions/ParticipantActions.js index 5cfd4865..8a1c6042 100644 --- a/src/client/actions/ParticipantActions.js +++ b/src/client/actions/ParticipantActions.js @@ -60,7 +60,7 @@ export function getParticipantActions(alt, participantResource, errorActions) { }; } - updateParticipantPresences(ids, newValue, offset, limit, order, filter) { + updateParticipantPresences(ids, newValue, offset, limit, order, filter) { return dispatch => { dispatch(); participantResource.raw('post', 'massAssign', { body: { ids: ids, newValue: newValue, fieldName: 'presence' } }) diff --git a/src/client/components/ParticipantListPage/ParticipantListPage.jsx b/src/client/components/ParticipantListPage/ParticipantListPage.jsx index bcf24d52..c5cf6501 100644 --- a/src/client/components/ParticipantListPage/ParticipantListPage.jsx +++ b/src/client/components/ParticipantListPage/ParticipantListPage.jsx @@ -1,6 +1,6 @@ import React from 'react'; import _ from 'lodash'; -import { Table, Grid, Row, Col, Input, Button } from 'react-bootstrap'; +import { Table, Grid, Row, Col, Input } from 'react-bootstrap'; import { getParticipantListUpdater } from './containers/ParticipantListUpdater'; import { getSortableHeaderCellContainer } from './containers/SortableHeaderCellContainer'; import { getListOffsetSelectorContainer } from './containers/ListOffsetSelectorContainer'; diff --git a/src/client/components/Util/LoadingButton.jsx b/src/client/components/Util/LoadingButton.jsx index e9f1e74b..36ac7f98 100644 --- a/src/client/components/Util/LoadingButton.jsx +++ b/src/client/components/Util/LoadingButton.jsx @@ -1,4 +1,3 @@ -import _ from 'lodash'; import React from 'react'; import { Button } from 'react-bootstrap'; @@ -8,7 +7,7 @@ export class LoadingButton extends React.Component { );