Merge pull request #1079 from OpenTechFund/feature/1077-include-screening-in-detail-view

GH-1077: Add screening to status tab

opentech/apply/funds/serializers.py

@@ -142,10 +142,11 @@ class SubmissionDetailSerializer(serializers.ModelSerializer):
     actions = ActionSerializer(source='*')
     review = ReviewSummarySerializer(source='*')
     phase = serializers.CharField()
+    screening = serializers.ReadOnlyField(source='screening_status.title')
 
     class Meta:
         model = ApplicationSubmission
-        fields = ('id', 'title', 'stage', 'status', 'phase', 'meta_questions', 'questions', 'actions', 'review')
+        fields = ('id', 'title', 'stage', 'status', 'phase', 'meta_questions', 'questions', 'actions', 'review', 'screening')
 
     def serialize_questions(self, obj, fields):
         for field_id in fields:

opentech/static_src/src/app/src/components/ReviewBlock/styles.scss

 // .reviews-sidebar styles are in apply/components/_reviews-sidebar.scss and are shared with the site
-.review-block {
-    padding: 20px;
-}

opentech/static_src/src/app/src/components/SidebarBlock/index.js

+import React from 'react'
+import PropTypes from 'prop-types'
+
+import './styles.scss';
+
+export const SidebarBlock = ({ title, children }) => {
+    return (
+        <div className="sidebar-block">
+            {title && <h5>{title}</h5>}
+            { children }
+        </div>
+    )
+}
+
+SidebarBlock.propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+}
+
+export default SidebarBlock

opentech/static_src/src/app/src/components/SidebarBlock/styles.scss

+.sidebar-block {
+    padding: 20px;
+}

opentech/static_src/src/app/src/containers/DisplayPanel/index.js

@@ -12,6 +12,7 @@ import {
 
 import CurrentSubmissionDisplay from '@containers/CurrentSubmissionDisplay'
 import ReviewInformation from '@containers/ReviewInformation'
+import ScreeningOutcome from '@containers/ScreeningOutcome'
 import AddNoteForm from '@containers/AddNoteForm'
 import NoteListing from '@containers/NoteListing'
 import StatusActions from '@containers/StatusActions'
@@ -59,14 +60,15 @@ const DisplayPanel = props => {
     const isMobile = width < 1024;
 
     let tabs = [
-        <Tab button="Notes" key="note">
-            <NoteListing submissionID={submissionID} />
-            <AddNoteForm submissionID={submissionID} />
-        </Tab>,
         <Tab button="Status" key="status">
+            <ScreeningOutcome submissionID={submissionID} />
             <StatusActions submissionID={submissionID} />
             <ReviewInformation submissionID={submissionID} />
             <SubmissionLink submissionID={submissionID} />
+        </Tab>,
+        <Tab button="Notes" key="note">
+            <NoteListing submissionID={submissionID} />
+            <AddNoteForm submissionID={submissionID} />
         </Tab>
     ]
 

opentech/static_src/src/app/src/containers/ReviewInformation.js

@@ -3,17 +3,19 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 
 import LoadingPanel from '@components/LoadingPanel'
+import SidebarBlock from '@components/SidebarBlock'
 import ReviewBlock, { Review, AssignedToReview, Opinion } from '@components/ReviewBlock'
 
 import { getSubmissionOfID } from '@selectors/submissions'
 
 
-const ReviewInformation = ({ data }) => {
+const ReviewInformation = ({ submission }) => {
     const [showExternal, setShowExternal] = useState(false)
 
-    if (data === undefined) {
+    if (submission === undefined || !submission.review) {
         return <LoadingPanel />
     }
+    const data = submission.review
 
     const staff = [];
     const nonStaff = [];
@@ -79,8 +81,7 @@ const ReviewInformation = ({ data }) => {
     const [nonStaffReviewed, nonStaffNotReviewed] = orderPeople(nonStaff);
 
     return (
-        <div className="review-block">
-            <h5>Reviews &amp; assignees</h5>
+        <SidebarBlock title="Reviews &amp; assignees">
             <ReviewBlock score={data.score} recommendation={data.recommendation.display}>
                 {renderReviewBlock(staffReviewed)}
                 {renderReviewBlock(staffNotReviewed)}
@@ -93,17 +94,17 @@ const ReviewInformation = ({ data }) => {
                     renderReviewBlock(nonStaffNotReviewed)
                 }
             </ReviewBlock>
-        </div>
+        </SidebarBlock>
     )
 }
 
 ReviewInformation.propTypes = {
-    data: PropTypes.object,
+    submission: PropTypes.object,
     submissionID: PropTypes.number.isRequired,
 }
 
 const mapStateToProps = (state, ownProps) => ({
-    data: getSubmissionOfID(ownProps.submissionID)(state).review,
+    submission: getSubmissionOfID(ownProps.submissionID)(state),
 })
 
 export default connect(mapStateToProps)(ReviewInformation)

opentech/static_src/src/app/src/containers/ScreeningOutcome.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+import SidebarBlock from '@components/SidebarBlock'
+import { getSubmissionOfID } from '@selectors/submissions'
+
+
+const ScreeningOutcome = ({ submission }) => {
+    const outcome = submission && submission.screening;
+    return <SidebarBlock title="Screening Outcome">
+        {  outcome ? outcome : "Not yet screened"}
+    </SidebarBlock>
+}
+
+ScreeningOutcome.propTypes = {
+    submission: PropTypes.object,
+}
+
+const mapStateToProps = (state, ownProps) => ({
+    submission: getSubmissionOfID(ownProps.submissionID)(state),
+})
+
+export default connect(mapStateToProps)(ScreeningOutcome)

opentech/static_src/src/app/src/containers/StatusActions.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { MESSAGE_TYPES, addMessage } from '@actions/messages';
 import { executeSubmissionAction } from '@actions/submissions';
 import Select from '@components/Select'
+import SidebarBlock from '@components/SidebarBlock'
 import { getSubmissionOfID } from '@selectors/submissions';
 import { redirect } from '@utils';
 
@@ -136,7 +137,7 @@ class StatusActions extends React.Component {
         }
 
         return (
-            <>
+            <SidebarBlock>
                 <Modal isOpen={this.state.modalVisible}
                     onRequestClose={this.closeStatusModal}
                     contentLabel="Update status"
@@ -148,7 +149,7 @@ class StatusActions extends React.Component {
                 <div className="status-actions">
                     <button className="button button--primary button--full-width" onClick={this.openStatusModal}>Update status</button>
                 </div>
-            </>
+            </SidebarBlock>
         );
     }
 }