diff --git a/locale/misc/fields/en.yaml b/locale/misc/fields/en.yaml new file mode 100644 index 000000000..370de7031 --- /dev/null +++ b/locale/misc/fields/en.yaml @@ -0,0 +1,12 @@ +alt_phone: Alt. phone number +city: City +co_address: C/O address +country: Country +email: E-mail +ext_id: External ID +first_name: First name +gender: Gender +last_name: Last name +phone: Phone number +street_address: Street address +zip: Zip code diff --git a/locale/panes/joinSubmission/en.yaml b/locale/panes/joinSubmission/en.yaml index 6b12fedc4..ea6fa082d 100644 --- a/locale/panes/joinSubmission/en.yaml +++ b/locale/panes/joinSubmission/en.yaml @@ -6,6 +6,8 @@ action: acceptButton: Accept h: Request pending p: Click Accept to add {person} to your database. +data: + h: Data submitted meta: h: Meta-data state: diff --git a/src/components/panes/JoinSubmissionPane.jsx b/src/components/panes/JoinSubmissionPane.jsx index f727c3d41..54fe61bce 100644 --- a/src/components/panes/JoinSubmissionPane.jsx +++ b/src/components/panes/JoinSubmissionPane.jsx @@ -12,19 +12,46 @@ import Button from '../misc/Button'; import LoadingIndicator from '../misc/LoadingIndicator'; import PaneBase from './PaneBase'; import { getListItemById } from '../../utils/store'; +import { retrieveFieldTypesForOrganization } from '../../actions/personField'; import { acceptJoinSubmission, + retrieveJoinForm, retrieveJoinSubmission, } from '../../actions/joinForm'; import InfoList from '../misc/InfoList'; -const ADDR_FIELDS = [ 'co_address', 'street_address', 'zip_code', 'city', 'country' ]; - -const mapStateToProps = (state, props) => ({ - subItem: getListItemById(state.joinForms.submissionList, - props.paneData.params[0]), -}); +const NATIVE_FIELDS = [ + 'ext_id', + 'first_name', + 'last_name', + 'email', + 'phone', + 'alt_phone', + 'co_address', + 'street_address', + 'zip_code', + 'city', + 'country', +]; + + +const mapStateToProps = (state, props) => { + const subItem = getListItemById(state.joinForms.submissionList, + props.paneData.params[0]); + + if (subItem) { + return { + fieldTypes: state.personFields.fieldTypes, + formItem: getListItemById(state.joinForms.formList, + subItem.data.form.id), + subItem: subItem, + } + } + else { + return {}; + } +}; @connect(mapStateToProps) @injectIntl @@ -34,6 +61,17 @@ export default class JoinSubmissionPane extends PaneBase { const subId = this.getParam(0); this.props.dispatch(retrieveJoinSubmission(subId)); + this.props.dispatch(retrieveFieldTypesForOrganization()); + + if (this.props.subItem && this.props.subItem.data && !this.props.formItem) { + this.props.dispatch(retrieveJoinForm(this.props.subItem.data.form.id)); + } + } + + componentDidUpdate() { + if (this.props.subItem && this.props.subItem.data && !this.props.formItem) { + this.props.dispatch(retrieveJoinForm(this.props.subItem.data.form.id)); + } } getPaneTitle() { @@ -52,20 +90,12 @@ export default class JoinSubmissionPane extends PaneBase { } renderPaneContent() { - const { subItem } = this.props; + const { formItem, fieldTypes, subItem } = this.props; - if (subItem) { + if (formItem && fieldTypes && subItem) { const state = subItem.data.state; const person = subItem.data.person_data; - let addrFields = ADDR_FIELDS.filter(f => person[f]).map(field => ( - - { person[field] } - - )); - - const phoneNumbers = [ person.phone, person.alt_phone ].filter(pn => !!pn); - let actionContent = null; let actionButton = null; if (state == 'accepted') { @@ -100,14 +130,41 @@ export default class JoinSubmissionPane extends PaneBase { ); } + const dataSection = (state == 'pending')? ( +
+ + +
+ ) : null; + return [ - ,
, + dataSection,