diff --git a/client/scripts/components/User/Disclosure.jsx b/client/scripts/components/User/Disclosure.jsx index ca9bf8da..d465368d 100644 --- a/client/scripts/components/User/Disclosure.jsx +++ b/client/scripts/components/User/Disclosure.jsx @@ -31,6 +31,7 @@ import {Relationships} from './Projects/Relationships'; import {Entities} from './Entities/Entities'; import {Certify} from './Certification/Certify'; import {NavSidebar} from './NavSidebar'; +const STEP = COIConstants.DISCLOSURE_STEP; export class Disclosure extends React.Component { constructor(props) { @@ -38,16 +39,16 @@ export class Disclosure extends React.Component { // Set up steps for the sidebar this.steps = [ - {label: 'Questionnaire', value: COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE_SUMMARY}, - {label: 'Financial Entities', value: COIConstants.DISCLOSURE_STEP.ENTITIES} + {label: 'Questionnaire', value: STEP.QUESTIONNAIRE_SUMMARY}, + {label: 'Financial Entities', value: STEP.ENTITIES} ]; if (props.disclosuretype && props.disclosuretype.toLowerCase() === 'manual') { - this.steps.push({label: 'Manual Event', value: COIConstants.DISCLOSURE_STEP.MANUAL}); + this.steps.push({label: 'Manual Event', value: STEP.MANUAL}); } else { - this.steps.push({label: 'Project Declarations', value: COIConstants.DISCLOSURE_STEP.PROJECTS}); + this.steps.push({label: 'Project Declarations', value: STEP.PROJECTS}); } - this.steps.push({label: 'Certification', value: COIConstants.DISCLOSURE_STEP.CERTIFY}); + this.steps.push({label: 'Certification', value: STEP.CERTIFY}); let storeState = DisclosureStore.getState(); this.state = { @@ -191,8 +192,16 @@ export class Disclosure extends React.Component { let currentStep; let nextDisabled; const QUESTIONNAIRE_PERCENTAGE = 25; + let previousLinkLabel = 'PREVIOUS STEP'; + let showPreviousLink = true; + let showNextLink = ( + currentDisclosureStep !== STEP.QUESTIONNAIRE && + currentDisclosureStep !== STEP.CERTIFY && + !nextDisabled + ); + switch (currentDisclosureStep) { - case COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE: + case STEP.QUESTIONNAIRE: if (window.config.questions.screening) { percent = Math.floor(((currentQuestion - 1) / window.config.questions.screening.length) * QUESTIONNAIRE_PERCENTAGE); } @@ -208,8 +217,11 @@ export class Disclosure extends React.Component { /> ); heading = 'Questionnaire'; + previousLinkLabel = 'PREVIOUS QUESTION'; + showPreviousLink = currentQuestion > 1; + break; - case COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE_SUMMARY: + case STEP.QUESTIONNAIRE_SUMMARY: percent = QUESTIONNAIRE_PERCENTAGE; currentStep = ( diff --git a/client/scripts/components/User/NavSidebar.jsx b/client/scripts/components/User/NavSidebar.jsx index 04d022e3..279eb91b 100644 --- a/client/scripts/components/User/NavSidebar.jsx +++ b/client/scripts/components/User/NavSidebar.jsx @@ -1,3 +1,4 @@ +/* @flow */ /* The Conflict of Interest (COI) module of Kuali Research Copyright © 2015 Kuali, Inc. @@ -16,11 +17,12 @@ along with this program. If not, see */ -import React from 'react'; //eslint-disable-line no-unused-vars -import {merge} from '../../merge'; -import {ProgressIndicator} from './ProgressIndicator'; -import {COIConstants} from '../../../../COIConstants'; +import React from 'react'; +import ProgressIndicator from './ProgressIndicator'; import {DisclosureActions} from '../../actions/DisclosureActions'; +import NextLink from './NextLink'; +import SubmitLink from './SubmitLink'; +import PreviousLink from './PreviousLink'; export class NavSidebar extends React.Component { constructor() { @@ -35,114 +37,68 @@ export class NavSidebar extends React.Component { } } - render() { + render(): React.Element { let styles = { - container: { - verticalAlign: 'top', - width: '25%', - display: 'inline-block', - paddingTop: 55, - textAlign: 'center' - }, - prevquestion: { - margin: '14px 0 14px 0', - fontSize: 15, - cursor: 'pointer', - color: window.colorBlindModeOn ? 'black' : '#555555', - display: this.props.question <= 1 && this.props.step === COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE ? 'none' : 'block' - }, - icons: { - color: window.colorBlindModeOn ? 'black' : '#F57C00', - fontSize: 29, - marginRight: 6, - verticalAlign: 'middle' - }, - nextquestion: { - margin: '14px 0 14px 0', - fontSize: 15, - cursor: 'pointer', - color: window.colorBlindModeOn ? 'black' : '#555555' - }, navigation: { verticalAlign: 'top', width: '25%', - display: 'inline-block', paddingTop: 55, textAlign: 'center' }, - stepLabel: { - verticalAlign: 'middle' - }, stepButtons: { textAlign: 'left', display: 'inline-block' }, - disabled: { - color: '#AAA', - cursor: 'default' + link: { + margin: '14px 0 14px 0' } }; - let nextStep; - if ( - this.props.step !== COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE && - this.props.step !== COIConstants.DISCLOSURE_STEP.CERTIFY && - !this.props.nextDisabled - ) { - nextStep = ( -
- - - NEXT STEP - -
+ let nextLink; + if (this.props.showNextLink) { + nextLink = ( + ); } - let submit; - if (this.props.step === COIConstants.DISCLOSURE_STEP.CERTIFY) { - let submitLabelStyle = styles.nextquestion; - let submitIconStyle = styles.icons; - if (this.props.submitDisabled) { - submitLabelStyle = merge(submitLabelStyle, styles.disabled); - submitIconStyle = merge(submitIconStyle, styles.disabled); - } - submit = ( -
- - - SUBMIT - -
+ let submitLink; + if (this.props.showSubmitLink) { + submitLink = ( + ); } - let previousLabel; - if (this.props.step === COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE) { - previousLabel = 'PREVIOUS QUESTION'; - } else { - previousLabel = 'PREVIOUS STEP'; + let previousLink; + if (this.props.showPreviousLink) { + previousLink = ( + + ); } return (
-
- - - {previousLabel} - -
- - {submit} - {nextStep} + {previousLink} + {submitLink} + {nextLink}
); diff --git a/client/scripts/components/User/NextLink.jsx b/client/scripts/components/User/NextLink.jsx new file mode 100644 index 00000000..9019c881 --- /dev/null +++ b/client/scripts/components/User/NextLink.jsx @@ -0,0 +1,49 @@ +/* @flow */ +/* + The Conflict of Interest (COI) module of Kuali Research + Copyright © 2015 Kuali, Inc. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see +*/ + +import React from 'react'; +import {merge} from '../../merge'; + +export default function NextLink(props: Object): React.Element { + let styles = { + container: { + fontSize: 15, + cursor: 'pointer', + color: window.colorBlindModeOn ? 'black' : '#555555' + }, + icons: { + color: window.colorBlindModeOn ? 'black' : '#F57C00', + fontSize: 29, + marginRight: 6, + verticalAlign: 'middle' + }, + stepLabel: { + verticalAlign: 'middle' + } + }; + + return ( +
+ + + NEXT STEP + +
+ ); +} diff --git a/client/scripts/components/User/PreviousLink.jsx b/client/scripts/components/User/PreviousLink.jsx new file mode 100644 index 00000000..c964240c --- /dev/null +++ b/client/scripts/components/User/PreviousLink.jsx @@ -0,0 +1,49 @@ +/* @flow */ +/* + The Conflict of Interest (COI) module of Kuali Research + Copyright © 2015 Kuali, Inc. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see +*/ + +import React from 'react'; +import {merge} from '../../merge'; + +export default function PreviousLink(props: Object): React.Element { + let styles = { + container: { + fontSize: 15, + cursor: 'pointer', + color: window.colorBlindModeOn ? 'black' : '#555555' + }, + icons: { + color: window.colorBlindModeOn ? 'black' : '#F57C00', + fontSize: 29, + marginRight: 6, + verticalAlign: 'middle' + }, + stepLabel: { + verticalAlign: 'middle' + } + }; + + return ( +
+ + + {props.label} + +
+ ); +} diff --git a/client/scripts/components/User/ProgressIndicator.jsx b/client/scripts/components/User/ProgressIndicator.jsx index 95a2366e..379de1e8 100644 --- a/client/scripts/components/User/ProgressIndicator.jsx +++ b/client/scripts/components/User/ProgressIndicator.jsx @@ -20,7 +20,7 @@ import React from 'react'; import {merge} from '../../merge'; -export class ProgressIndicator extends React.Component { +export default class ProgressIndicator extends React.Component { constructor(props) { super(); this.percent = {value: isNaN(props.percent) ? 0 : props.percent}; diff --git a/client/scripts/components/User/SubmitLink.jsx b/client/scripts/components/User/SubmitLink.jsx new file mode 100644 index 00000000..e74158c4 --- /dev/null +++ b/client/scripts/components/User/SubmitLink.jsx @@ -0,0 +1,54 @@ +/* @flow */ +/* + The Conflict of Interest (COI) module of Kuali Research + Copyright © 2015 Kuali, Inc. + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see +*/ + +import React from 'react'; +import {merge} from '../../merge'; + +export default function SubmitLink(props: Object): React.Element { + let styles = { + container: { + fontSize: 15, + cursor: props.disabled ? 'default' : 'pointer', + color: window.colorBlindModeOn ? 'black' : '#555555' + }, + stepLabel: { + verticalAlign: 'middle' + }, + icon: { + color: window.colorBlindModeOn ? 'black' : '#F57C00', + fontSize: 29, + marginRight: 6, + verticalAlign: 'middle' + } + }; + + if (props.disabled) { + styles.container.color = '#AAA'; + styles.icon.color = '#AAA'; + } + + return ( +
+ + + SUBMIT + +
+ ); +} diff --git a/client/scripts/stores/DisclosureStore.js b/client/scripts/stores/DisclosureStore.js index d73f8aa3..cda37b96 100644 --- a/client/scripts/stores/DisclosureStore.js +++ b/client/scripts/stores/DisclosureStore.js @@ -100,17 +100,19 @@ class _DisclosureStore extends AutoBindingStore { } loadProjects() { - createRequest().get('/api/coi/projects') - .end(processResponse((err, projects) => { - if (!err) { - this.projects = projects.body; - this.emitChange(); - } - })); + createRequest() + .get('/api/coi/projects') + .end(processResponse((err, projects) => { + if (!err) { + this.projects = projects.body; + this.emitChange(); + } + })); } loadStatusOfDisclosure(id) { - createRequest().get(`/api/coi/disclosures/${id}`) + createRequest() + .get(`/api/coi/disclosures/${id}`) .end(processResponse((err, disclosure) => { if (!err) { this.currentAnnualDisclosureStatus = disclosure.body.statusCd; @@ -137,27 +139,30 @@ class _DisclosureStore extends AutoBindingStore { } loadArchivedDisclosureDetail(id) { - createRequest().get('/api/coi/disclosures/' + id) - .end(processResponse((err, disclosure) => { - if (!err) { - this.archivedDisclosureDetail = disclosure.body; - this.emitChange(); - } - })); + createRequest() + .get(`/api/coi/disclosures/${id}`) + .end(processResponse((err, disclosure) => { + if (!err) { + this.archivedDisclosureDetail = disclosure.body; + this.emitChange(); + } + })); } refreshDisclosureSummaries() { - createRequest().get('/api/coi/disclosure-user-summaries') + createRequest() + .get('/api/coi/disclosure-user-summaries') .end(processResponse((err, disclosures) => { if (!err) { this.disclosureSummariesForUser = disclosures.body; - createRequest().get('/api/coi/config') - .end(processResponse((error, config) => { - if (!error) { - window.config = config.body; - this.emitChange(); - } - })); + createRequest() + .get('/api/coi/config') + .end(processResponse((error, config) => { + if (!error) { + window.config = config.body; + this.emitChange(); + } + })); } })); } @@ -168,23 +173,25 @@ class _DisclosureStore extends AutoBindingStore { loadDisclosureData(disclosureType) { if (disclosureType === COIConstants.DISCLOSURE_TYPE.ANNUAL) { - createRequest().get('/api/coi/disclosures/annual') - .end(processResponse((err, disclosure) => { - if (!err) { - this.applicationState.currentDisclosureState.disclosure = disclosure.body; - this.entities = disclosure.body.entities; - this.declarations = disclosure.body.declarations; - this.files = disclosure.body.files; - createRequest().get('/api/coi/archived-config/' + disclosure.body.configId) - .end(processResponse((error, config) => { - if (!error) { - window.config = config.body; - ConfigActions.loadConfig(disclosure.body.configId); - this.emitChange(); - } - })); - } - })); + createRequest() + .get('/api/coi/disclosures/annual') + .end(processResponse((err, disclosure) => { + if (!err) { + this.applicationState.currentDisclosureState.disclosure = disclosure.body; + this.entities = disclosure.body.entities; + this.declarations = disclosure.body.declarations; + this.files = disclosure.body.files; + createRequest() + .get(`/api/coi/archived-config/${disclosure.body.configId}`) + .end(processResponse((error, config) => { + if (!error) { + window.config = config.body; + ConfigActions.loadConfig(disclosure.body.configId); + this.emitChange(); + } + })); + } + })); } } @@ -220,7 +227,8 @@ class _DisclosureStore extends AutoBindingStore { } if (answer.id) { - createRequest().put('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/question-answers/' + answer.questionId) + createRequest() + .put(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/question-answers/${answer.questionId}`) .send(answer) .type('application/json') .end(processResponse((err, res) => { @@ -230,7 +238,8 @@ class _DisclosureStore extends AutoBindingStore { } })); } else { - createRequest().post('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/question-answers') + createRequest() + .post(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/question-answers`) .send(answer) .type('application/json') .end(processResponse((err, res) => { @@ -615,7 +624,7 @@ class _DisclosureStore extends AutoBindingStore { let relation = this.applicationState.potentialRelationship; relation.id = COIConstants.TMP_PLACEHOLDER + new Date().getTime(); - let matrixType = window.config.matrixTypes.find(matrix=>{ + let matrixType = window.config.matrixTypes.find(matrix => { return matrix.typeCd === relation.relationshipCd; }); @@ -699,7 +708,8 @@ class _DisclosureStore extends AutoBindingStore { this.applicationState.entityStates[entity.id].formStep = -1; this.applicationState.entityStates[entity.id].editing = false; - createRequest().put('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/financial-entities/' + entity.id ) + createRequest() + .put(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/financial-entities/${entity.id}`) .send(formData) .end(processResponse((err, res) => { if (!err) { @@ -754,14 +764,15 @@ class _DisclosureStore extends AutoBindingStore { this.applicationState.newEntityFormStep = -1; - createRequest().post('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/financial-entities') - .send(formData) - .end(processResponse((err, res) => { - if (!err) { - this.entities.push(res.body); - this.emitChange(); - } - })); + createRequest() + .post(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/financial-entities`) + .send(formData) + .end(processResponse((err, res) => { + if (!err) { + this.entities.push(res.body); + this.emitChange(); + } + })); } changeActiveEntityView(newView) { @@ -862,10 +873,11 @@ class _DisclosureStore extends AutoBindingStore { if (existing) { existing.typeCd = params.typeCd; - createRequest().put('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/declarations/' + existing.id) - .send(existing) - .type('application/json') - .end(processResponse(() => {})); + createRequest() + .put(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/declarations/${existing.id}`) + .send(existing) + .type('application/json') + .end(processResponse(() => {})); } else { let newRelation = { @@ -873,15 +885,16 @@ class _DisclosureStore extends AutoBindingStore { typeCd: params.typeCd }; newRelation[field] = params.projectId; - createRequest().post('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/declarations') - .send(newRelation) - .type('application/json') - .end(processResponse((err, res) => { - if (!err) { - this.declarations.push(res.body); - this.emitChange(); - } - })); + createRequest() + .post(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/declarations`) + .send(newRelation) + .type('application/json') + .end(processResponse((err, res) => { + if (!err) { + this.declarations.push(res.body); + this.emitChange(); + } + })); } } @@ -907,10 +920,11 @@ class _DisclosureStore extends AutoBindingStore { if (existing) { existing.comments = params.comments; - createRequest().put('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/declarations/' + existing.id) - .send(existing) - .type('application/json') - .end(processResponse(() => {})); + createRequest() + .put(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/declarations/${existing.id}`) + .send(existing) + .type('application/json') + .end(processResponse(() => {})); } else { let newRelation = { @@ -918,15 +932,16 @@ class _DisclosureStore extends AutoBindingStore { comments: params.comments }; newRelation[field] = params.projectId; - createRequest().post('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/declarations') - .send(newRelation) - .type('application/json') - .end(processResponse((err, res) => { - if (!err) { - this.declarations.push(res.body); - this.emitChange(); - } - })); + createRequest() + .post(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/declarations`) + .send(newRelation) + .type('application/json') + .end(processResponse((err, res) => { + if (!err) { + this.declarations.push(res.body); + this.emitChange(); + } + })); } } @@ -1237,29 +1252,29 @@ class _DisclosureStore extends AutoBindingStore { })); createRequest().post('/api/coi/files') - .send(formData) - .end(processResponse((err, res) => { - if (!err) { - res.body.forEach(file => { - this.files.push(file); - this.emitChange(); - }); - } - })); + .send(formData) + .end(processResponse((err, res) => { + if (!err) { + res.body.forEach(file => { + this.files.push(file); + this.emitChange(); + }); + } + })); } deleteDisclosureAttachment(index) { let file = this.files[index]; - createRequest().del('/api/coi/files/' + file.id) - .send(file) - .type('application/json') - .end(processResponse((err) => { - if (!err) { - this.files.splice(index, 1); - this.emitChange(); - } - })); + createRequest().del(`/api/coi/files/${file.id}`) + .send(file) + .type('application/json') + .end(processResponse((err) => { + if (!err) { + this.files.splice(index, 1); + this.emitChange(); + } + })); } @@ -1268,15 +1283,16 @@ class _DisclosureStore extends AutoBindingStore { } submitDisclosure() { - createRequest().put('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/submit') - .end(processResponse(err => { - if (!err) { - this.resetDisclosure(); - this.toggleConfirmationMessage(); - // this.emitChange(); - history.replaceState(null, '/coi/dashboard'); - } - })); + createRequest() + .put(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/submit`) + .end(processResponse(err => { + if (!err) { + this.resetDisclosure(); + this.toggleConfirmationMessage(); + // this.emitChange(); + history.replaceState(null, '/coi/dashboard'); + } + })); } deleteAnswersTo(toDelete) { @@ -1288,7 +1304,8 @@ class _DisclosureStore extends AutoBindingStore { } if (toDelete.length > 0) { - createRequest().del('/api/coi/disclosures/' + this.applicationState.currentDisclosureState.disclosure.id + '/question-answers') + createRequest() + .del(`/api/coi/disclosures/${this.applicationState.currentDisclosureState.disclosure.id}/question-answers`) .send({ toDelete: toDelete })