Refactoring in prep for RESCOI-447

kuali · Dec 7, 2015 · 7ac9ca9 · 7ac9ca9
1 parent 919497a
commit 7ac9ca9
Show file tree

Hide file tree

Showing 7 changed files with 340 additions and 201 deletions.
diff --git a/client/scripts/components/User/Disclosure.jsx b/client/scripts/components/User/Disclosure.jsx
@@ -31,23 +31,24 @@ 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) {
     super(props);
 
     // 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 = (
           <QuestionnaireSummary
@@ -220,7 +232,7 @@ export class Disclosure extends React.Component {
         );
         heading = 'Questionnaire';
         break;
-      case COIConstants.DISCLOSURE_STEP.ENTITIES:
+      case STEP.ENTITIES:
         stepNumber = 1;
         const ENTITIES_PERCENTAGE = 50;
         percent = ENTITIES_PERCENTAGE;
@@ -235,7 +247,7 @@ export class Disclosure extends React.Component {
         nextDisabled = this.incompleteEntityExists(this.state.entities);
         heading = 'Financial Entities';
         break;
-      case COIConstants.DISCLOSURE_STEP.PROJECTS:
+      case STEP.PROJECTS:
         stepNumber = 2;
         const PROJECTS_PERCENTAGE = 75;
         percent = PROJECTS_PERCENTAGE;
@@ -281,7 +293,7 @@ export class Disclosure extends React.Component {
           );
         }
         break;
-      case COIConstants.DISCLOSURE_STEP.CERTIFY:
+      case STEP.CERTIFY:
         stepNumber = 3;
         const CERTIFY_PERCENTAGE = 99;
         percent = CERTIFY_PERCENTAGE;
@@ -317,11 +329,13 @@ export class Disclosure extends React.Component {
             </span>
 
             <NavSidebar
-              percent={percent}
-              step={currentDisclosureStep}
-              question={currentQuestion}
+              percentComplete={percent}
+              previousLabel={previousLinkLabel}
               submitDisabled={submitDisabled}
               nextDisabled={nextDisabled}
+              showNextLink={showNextLink}
+              showPreviousLink={showPreviousLink}
+              showSubmitLink={currentDisclosureStep === STEP.CERTIFY}
             />
           </span>
         </div>

diff --git 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 <http://www.gnu.org/licenses/>
 */
 
-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 = (
-        <div onClick={DisclosureActions.nextStep} style={styles.nextquestion}>
-          <i className="fa fa-arrow-circle-right" style={styles.icons}></i>
-          <span style={styles.stepLabel}>
-            NEXT STEP
-          </span>
-        </div>
+    let nextLink;
+    if (this.props.showNextLink) {
+      nextLink = (
+        <NextLink
+          onClick={DisclosureActions.nextStep}
+          style={styles.link}
+        />
       );
     }
 
-    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 = (
-        <div onClick={this.submitDisclosure} style={submitLabelStyle}>
-          <i className="fa fa-arrow-circle-right" style={submitIconStyle}></i>
-          <span style={styles.stepLabel}>
-            SUBMIT
-          </span>
-        </div>
+    let submitLink;
+    if (this.props.showSubmitLink) {
+      submitLink = (
+        <SubmitLink
+          onClick={this.submitDisclosure}
+          disabled={this.props.submitDisabled}
+          style={styles.link}
+        />
       );
     }
 
-    let previousLabel;
-    if (this.props.step === COIConstants.DISCLOSURE_STEP.QUESTIONNAIRE) {
-      previousLabel = 'PREVIOUS QUESTION';
-    } else {
-      previousLabel = 'PREVIOUS STEP';
+    let previousLink;
+    if (this.props.showPreviousLink) {
+      previousLink = (
+        <PreviousLink
+          onClick={DisclosureActions.previousQuestion}
+          style={styles.link}
+          label={this.props.previousLabel}
+        />
+      );
     }
 
     return (
       <span style={styles.navigation}>
         <div onClick={this.advance}>
           <ProgressIndicator
-            percent={this.props.percent}
+            percent={this.props.percentComplete}
             useColor={!window.colorBlindModeOn}
           />
         </div>
 
         <div style={styles.stepButtons}>
-          <div onClick={DisclosureActions.previousQuestion} style={styles.prevquestion}>
-            <i className="fa fa-arrow-circle-left" style={styles.icons}></i>
-            <span style={styles.stepLabel}>
-              {previousLabel}
-            </span>
-          </div>
-
-          {submit}
-          {nextStep}
+          {previousLink}
+          {submitLink}
+          {nextLink}
         </div>
       </span>
     );

diff --git a/client/scripts/components/User/NextLink.jsx 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 <http://www.gnu.org/licenses/>
+*/
+
+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 (
+    <div onClick={props.onClick} style={merge(styles.container, props.style)}>
+      <i className="fa fa-arrow-circle-right" style={styles.icons}></i>
+      <span style={styles.stepLabel}>
+        NEXT STEP
+      </span>
+    </div>
+  );
+}
diff --git a/client/scripts/components/User/PreviousLink.jsx 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 <http://www.gnu.org/licenses/>
+*/
+
+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 (
+    <div onClick={props.onClick} style={merge(styles.container, props.style)}>
+      <i className="fa fa-arrow-circle-left" style={styles.icons}></i>
+      <span style={styles.stepLabel}>
+        {props.label}
+      </span>
+    </div>
+  );
+}
diff --git 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};