From 05d0f7621c794d4ffff7c9f2978dec4f7f856773 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Tue, 21 Jan 2020 11:38:50 +0100 Subject: [PATCH 1/7] Add functionality for showing organizer msg in CallListItem --- src/components/lists/items/CallListItem.jsx | 21 +++++++++++++++++++- src/components/lists/items/CallListItem.scss | 20 +++++++++++++++---- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index 08f337b17..79a261a62 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -1,16 +1,31 @@ +import { connect } from 'react-redux'; import React from 'react'; import cx from 'classnames'; import { FormattedMessage as Msg } from 'react-intl'; +import { retrieveCall } from '../../../actions/call'; import Avatar from '../../misc/Avatar'; - +@connect() export default class CallListItem extends React.Component { static propTypes = { onItemClick: React.PropTypes.func.isRequired, data: React.PropTypes.object, }; + componentDidUpdate(prevProps) { + const call = this.props.data; + + if (this.props.inView && !prevProps.inView) { + if (!call || call.message_to_organizer !== undefined) { + return; + } + else if (call.organizer_action_needed) { + this.props.dispatch(retrieveCall(call.id)) + } + } + } + render() { let call = this.props.data; if (!call) return null; @@ -66,6 +81,10 @@ export default class CallListItem extends React.Component { { call.caller.name } + { call.organizer_action_needed && ( + + { call.message_to_organizer } + )}
diff --git a/src/components/lists/items/CallListItem.scss b/src/components/lists/items/CallListItem.scss index c88d56cf7..c82678977 100644 --- a/src/components/lists/items/CallListItem.scss +++ b/src/components/lists/items/CallListItem.scss @@ -17,10 +17,6 @@ .CallListItem-content { @include col(11,12); padding: 1em; - - @include medium-screen { - @include col(12,12); - } } .CallListItem-target { @@ -107,6 +103,22 @@ @include icon($fa-var-phone); } } + + .CallListItem-organizerMsg { + @include col(12,12, $align:middle, $first:true); + display: flex; + align-items: baseline; + + @include small-screen { + margin-top: 0.5em; + padding: 0; + } + + &:before { + @include icon($fa-var-sticky-note-o); + min-width: 1.6em; + } + } } .CallListItem-action { From 38234c61f540933d9cec2ca860edcefa4445a9c8 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Tue, 21 Jan 2020 11:57:32 +0100 Subject: [PATCH 2/7] Add action flag preventing full loading state on retrieving call message --- src/actions/call.js | 4 ++-- src/components/lists/items/CallListItem.jsx | 2 +- src/store/calls.js | 4 +++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/actions/call.js b/src/actions/call.js index ee5535173..14f8bb4f9 100644 --- a/src/actions/call.js +++ b/src/actions/call.js @@ -31,13 +31,13 @@ export function retrieveCalls(page = 0, filters = {}) { }; } -export function retrieveCall(id) { +export function retrieveCall(id, retrieveMessage = false) { return ({ dispatch, getState, z }) => { let orgId = getState().org.activeId; dispatch({ type: types.RETRIEVE_CALL, - meta: { id }, + meta: { id, retrieveMessage }, payload: { promise: z.resource('orgs', orgId, 'calls', id).get() } diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index 79a261a62..12127028e 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -21,7 +21,7 @@ export default class CallListItem extends React.Component { return; } else if (call.organizer_action_needed) { - this.props.dispatch(retrieveCall(call.id)) + this.props.dispatch(retrieveCall(call.id, true)) } } } diff --git a/src/store/calls.js b/src/store/calls.js index 79bb9297e..1017b9653 100644 --- a/src/store/calls.js +++ b/src/store/calls.js @@ -39,9 +39,11 @@ export default function calls(state = null, action) { }); case types.RETRIEVE_CALL + '_PENDING': + const messageIsPending = action.meta.retrieveMessage; + return Object.assign({ callList: updateOrAddListItem(state.callList, - action.meta.id, null, { isPending: true }), + action.meta.id, null, { isPending: !messageIsPending }), }); case types.RETRIEVE_CALL + '_FULFILLED': From 0d3a1a66d8e2469c18a5f618e88e5504eaa35b41 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Tue, 21 Jan 2020 12:08:39 +0100 Subject: [PATCH 3/7] Add CallListItem loading animation for organizer message --- src/components/lists/items/CallListItem.jsx | 10 ++++++++-- src/components/lists/items/CallListItem.scss | 15 +++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index 12127028e..90da0668e 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -56,7 +56,13 @@ export default class CallListItem extends React.Component { actionStatus = "needed"; } - let actionClassNames  = cx('CallListItem-action', actionStatus ); + let actionClassNames  = cx('CallListItem-action', actionStatus ); + + const messageIsPending = call.organizer_action_needed && call.message_to_organizer === undefined; + + const organizerMsgClassNames = cx('CallListItem-organizerMsg', { + loading: messageIsPending, + }) return (
{ call.caller.name } { call.organizer_action_needed && ( - + { call.message_to_organizer } )}
diff --git a/src/components/lists/items/CallListItem.scss b/src/components/lists/items/CallListItem.scss index c82678977..635603b51 100644 --- a/src/components/lists/items/CallListItem.scss +++ b/src/components/lists/items/CallListItem.scss @@ -118,6 +118,14 @@ @include icon($fa-var-sticky-note-o); min-width: 1.6em; } + + &.loading { + &::after { + display: inline-block; + animation: CallListItem-organizerMsg-loadingAnimation steps(1, end) 1s infinite; + content: '.'; + } + } } } @@ -197,3 +205,10 @@ } } } + +@keyframes CallListItem-organizerMsg-loadingAnimation { + 0% { content: '.'; } + 33% { content: '..'; } + 66% { content: '...'; } + 99% { content: '.'; } +} From 8c64c472f98944f29b8fe5219f8a1d5c2f67c2a1 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Tue, 21 Jan 2020 13:11:27 +0100 Subject: [PATCH 4/7] Add fallback placeholder for CallListItem organizer msg --- locale/lists/callList/en.yaml | 2 ++ locale/lists/callList/sv.yaml | 2 ++ src/components/lists/items/CallListItem.jsx | 7 ++++++- src/components/lists/items/CallListItem.scss | 8 ++++++++ 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/locale/lists/callList/en.yaml b/locale/lists/callList/en.yaml index 8811c0ae0..44c597170 100644 --- a/locale/lists/callList/en.yaml +++ b/locale/lists/callList/en.yaml @@ -9,3 +9,5 @@ item: allocated: On-going... notReached: Not reached reached: Reached + organizerMsg: + noMessage: Caller did not leave a message diff --git a/locale/lists/callList/sv.yaml b/locale/lists/callList/sv.yaml index b28596265..dc8aeb03e 100644 --- a/locale/lists/callList/sv.yaml +++ b/locale/lists/callList/sv.yaml @@ -9,3 +9,5 @@ item: allocated: Pågår... notReached: Nåddes inte reached: Nåddes + organizerMsg: + noMessage: Ringaren lämnade inget meddelande diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index 90da0668e..90b3323d2 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -62,6 +62,7 @@ export default class CallListItem extends React.Component { const organizerMsgClassNames = cx('CallListItem-organizerMsg', { loading: messageIsPending, + empty: call.message_to_organizer === null, }) return ( @@ -89,7 +90,11 @@ export default class CallListItem extends React.Component { { call.caller.name } { call.organizer_action_needed && ( - { call.message_to_organizer } + { call.message_to_organizer === null ? + : + call.message_to_organizer + } )}
diff --git a/src/components/lists/items/CallListItem.scss b/src/components/lists/items/CallListItem.scss index 635603b51..855b255de 100644 --- a/src/components/lists/items/CallListItem.scss +++ b/src/components/lists/items/CallListItem.scss @@ -126,6 +126,14 @@ content: '.'; } } + + &.empty { + span { + font-size: inherit; + font-style: italic; + color: #666666; + } + } } } From 6a692619442f1bc758e45a1617a6b4ab6f034326 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Tue, 21 Jan 2020 13:34:22 +0100 Subject: [PATCH 5/7] Truncate CallListItem organizer message if length exceeds 180 chars --- src/components/lists/items/CallListItem.jsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index 90b3323d2..e0d7ba9c0 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -65,6 +65,15 @@ export default class CallListItem extends React.Component { empty: call.message_to_organizer === null, }) + const truncateMessage = msg => { + if (msg && msg.length > 180) { + return msg.substr(0, 180) + '...'; + } + else { + return msg; + } + }; + return (
@@ -93,7 +102,7 @@ export default class CallListItem extends React.Component { { call.message_to_organizer === null ? : - call.message_to_organizer + truncateMessage(call.message_to_organizer) } )}
From ede094ab00aa0c1c5b8a4628a21f441cd2408165 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Thu, 23 Jan 2020 15:13:23 +0100 Subject: [PATCH 6/7] Refactor setting of organizer msg in CallListItem --- src/components/lists/items/CallListItem.jsx | 45 ++++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index e0d7ba9c0..03be5df76 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -34,6 +34,7 @@ export default class CallListItem extends React.Component { let stateClass = "CallListItem-state"; let stateLabel = null; let actionStatus = null; + let organizerMessage = null; switch (call.state) { case 0: @@ -56,23 +57,34 @@ export default class CallListItem extends React.Component { actionStatus = "needed"; } - let actionClassNames  = cx('CallListItem-action', actionStatus ); - - const messageIsPending = call.organizer_action_needed && call.message_to_organizer === undefined; + if (actionStatus) { + const messageClassNames = cx('CallListItem-organizerMsg', { + loading: call.message_to_organizer === undefined, + empty: call.message_to_organizer === null, + }); - const organizerMsgClassNames = cx('CallListItem-organizerMsg', { - loading: messageIsPending, - empty: call.message_to_organizer === null, - }) + let messageContent = null; - const truncateMessage = msg => { - if (msg && msg.length > 180) { - return msg.substr(0, 180) + '...'; + if (call.message_to_organizer === null) { + messageContent = ( + + ); + } + else if (call.message_to_organizer && call.message_to_organizer.length > 180) { + messageContent = call.message_to_organizer.substr(0, 180) + '...'; } else { - return msg; + messageContent = call.message_to_organizer; } - }; + + organizerMessage = ( + + { messageContent } + ); + } + + let actionClassNames  = cx('CallListItem-action', actionStatus ); return (
{ call.caller.name } - { call.organizer_action_needed && ( - - { call.message_to_organizer === null ? - : - truncateMessage(call.message_to_organizer) - } - )} + { organizerMessage }
From 241649f8d51d74a5f5a8478f9e87bacbf252e210 Mon Sep 17 00:00:00 2001 From: Mikael John Andersson Date: Sun, 2 Feb 2020 15:42:38 +0100 Subject: [PATCH 7/7] Fix missing semicolon in CallListItem --- src/components/lists/items/CallListItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/lists/items/CallListItem.jsx b/src/components/lists/items/CallListItem.jsx index 03be5df76..799262b91 100644 --- a/src/components/lists/items/CallListItem.jsx +++ b/src/components/lists/items/CallListItem.jsx @@ -21,7 +21,7 @@ export default class CallListItem extends React.Component { return; } else if (call.organizer_action_needed) { - this.props.dispatch(retrieveCall(call.id, true)) + this.props.dispatch(retrieveCall(call.id, true)); } } }