Add Hearing icon to queue/case views

app/controllers/appeals_controller.rb

@@ -64,6 +64,26 @@ def power_of_attorney
     }
   end
 
+  def hearings
+    most_recently_held_hearing = appeal.hearings
+      .select { |hearing| hearing.disposition.to_s == Constants.HEARING_DISPOSITION_TYPES.held }
+      .max_by(&:scheduled_for)
+
+    render json:
+      if most_recently_held_hearing
+        {
+          held_by: most_recently_held_hearing.judge.present? ? most_recently_held_hearing.judge.full_name : "",
+          viewed_by_judge: !most_recently_held_hearing.hearing_views.empty?,
+          date: most_recently_held_hearing.scheduled_for,
+          type: most_recently_held_hearing.readable_request_type,
+          external_id: most_recently_held_hearing.external_id,
+          disposition: most_recently_held_hearing.disposition
+        }
+      else
+        {}
+      end
+  end
+
   # For legacy appeals, veteran address and birth/death dates are
   # the only data that is being pulled from BGS, the rest are from VACOLS for now
   def veteran

client/app/queue/AssignedCasesPage.jsx

@@ -84,6 +84,7 @@ class AssignedCasesPage extends React.Component<Props> {
         onTaskAssignment={(params) => props.reassignTasksToUser(params)}
         selectedTasks={selectedTasks} />
       <TaskTable
+        includeHearingBadge
         includeSelect
         includeDetailsLink
         includeType

client/app/queue/AttorneyTaskListView.jsx

@@ -163,6 +163,7 @@ export default (connect(mapStateToProps, mapDispatchToProps)(AttorneyTaskListVie
 const TaskTableTab = ({ description, tasks }) => <React.Fragment>
   <p className="cf-margin-top-0" >{description}</p>
   <TaskTable
+    includeHearingBadge
     includeDetailsLink
     includeType
     includeDocketNumber

client/app/queue/BeaamAppealListView.jsx

@@ -23,6 +23,7 @@ class BeaamListView extends React.PureComponent {
           {messages.error.detail}
         </Alert>}
         <TaskTable
+          includeHearingBadge
           includeDetailsLink
           includeType
           includeDocketNumber

client/app/queue/CaseListTable.jsx

@@ -15,6 +15,7 @@ import { clearCaseListSearch } from './CaseList/CaseListActions';
 import { DateString } from '../util/DateUtil';
 import { renderAppealType } from './utils';
 import COPY from '../../COPY.json';
+import HEARING_DISPOSITION_TYPES from '../../constants/HEARING_DISPOSITION_TYPES.json';
 
 const currentAssigneeStyling = css({
   color: COLORS.GREEN
@@ -77,14 +78,19 @@ class CaseListTable extends React.PureComponent {
       }
     ];
 
-    const doAnyAppealsHaveHearings = Boolean(_.find(this.props.appeals, (appeal) => {
-      return appeal.hearings.length;
-    }));
+    const doAnyAppealsHaveHeldHearings = Boolean(
+      _.find(this.props.appeals, (appeal) => {
+        return appeal.hearings.
+          filter((hearing) => hearing.disposition === HEARING_DISPOSITION_TYPES.held).
+          length;
+      }));
 
-    if (doAnyAppealsHaveHearings) {
+    if (doAnyAppealsHaveHeldHearings) {
       const hearingColumn = {
         valueFunction: (appeal) => {
-          const hearings = appeal.hearings.sort((h1, h2) => h1.date < h2.date ? 1 : -1);
+          const hearings = appeal.hearings.
+            filter((hearing) => hearing.disposition === HEARING_DISPOSITION_TYPES.held).
+            sort((h1, h2) => h1.date < h2.date ? 1 : -1);
 
           return <HearingBadge hearing={hearings[0]} />;
         }

client/app/queue/ColocatedTaskListView.jsx

@@ -119,6 +119,7 @@ const NewTasksTab = connect(
     return <React.Fragment>
       <p className="cf-margin-top-0">{COPY.COLOCATED_QUEUE_PAGE_NEW_TASKS_DESCRIPTION}</p>
       <TaskTable
+        includeHearingBadge
         includeDetailsLink
         includeTask
         includeRegionalOffice={props.belongsToHearingSchedule}
@@ -140,6 +141,7 @@ const PendingTasksTab = connect(
     return <React.Fragment>
       <p className="cf-margin-top-0">{COPY.COLOCATED_QUEUE_PAGE_PENDING_TASKS_DESCRIPTION}</p>
       <TaskTable
+        includeHearingBadge
         includeDetailsLink
         includeTask
         includeRegionalOffice={props.belongsToHearingSchedule}
@@ -161,6 +163,7 @@ const OnHoldTasksTab = connect(
     return <React.Fragment>
       <p className="cf-margin-top-0">{COPY.COLOCATED_QUEUE_PAGE_ON_HOLD_TASKS_DESCRIPTION}</p>
       <TaskTable
+        includeHearingBadge
         includeDetailsLink
         includeTask
         includeRegionalOffice={props.belongsToHearingSchedule}

client/app/queue/JudgeDecisionReviewTaskListView.jsx

@@ -54,6 +54,7 @@ class JudgeDecisionReviewTaskListView extends React.PureComponent {
       </p>;
     } else {
       tableContent = <TaskTable
+        includeHearingBadge
         includeTask
         includeDetailsLink
         includeDocumentId

client/app/queue/OrganizationQueue.jsx

@@ -132,6 +132,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(OrganizationQueue);
 const UnassignedTaskTableTab = ({ description, tasks, organizationName }) => <React.Fragment>
   <p className="cf-margin-top-0">{description}</p>
   <TaskTable
+    includeHearingBadge
     includeDetailsLink
     includeTask
     includeRegionalOffice={organizationName === 'Hearings Management'}
@@ -146,6 +147,7 @@ const UnassignedTaskTableTab = ({ description, tasks, organizationName }) => <Re
 const TaskTableWithUserColumnTab = ({ description, tasks, organizationName }) => <React.Fragment>
   <p className="cf-margin-top-0">{description}</p>
   <TaskTable
+    includeHearingBadge
     includeDetailsLink
     includeTask
     includeRegionalOffice={organizationName === 'Hearings Management'}

client/app/queue/QueueActions.js

@@ -3,6 +3,7 @@
 import { associateTasksWithAppeals,
   prepareAllTasksForStore,
   extractAppealsAndAmaTasks,
+  prepareMostRecentlyHeldHearingForStore,
   prepareTasksForStore } from './utils';
 import { ACTIONS } from './constants';
 import { hideErrorMessage, showErrorMessage, showSuccessMessage } from './uiReducer/uiActions';
@@ -157,6 +158,11 @@ export const setAppealDocCount = (appealId: string, docCount: number) => ({
   }
 });
 
+export const setMostRecentlyHeldHearingForAppeal = (appealId: string, hearing: Object) => ({
+  type: ACTIONS.SET_MOST_RECENTLY_HELD_HEARING_FOR_APPEAL,
+  payload: prepareMostRecentlyHeldHearingForStore(appealId, hearing)
+});
+
 export const setDecisionOptions = (opts: Object) => (dispatch: Dispatch) => {
   dispatch(hideErrorMessage());
   dispatch({

client/app/queue/UnassignedCasesPage.jsx

@@ -72,6 +72,7 @@ class UnassignedCasesPage extends React.PureComponent<Props> {
           }
           {!this.props.distributionCompleteCasesLoading &&
             <TaskTable
+              includeHearingBadge
               includeSelect
               includeDetailsLink
               includeType

client/app/queue/components/HearingBadge.jsx

@@ -1,11 +1,23 @@
+import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import _ from 'lodash';
 import * as React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import Tooltip from '../../components/Tooltip';
 import { COLORS } from '../../constants/AppConstants';
 
+import ApiUtil from '../../util/ApiUtil';
 import { DateString } from '../../util/DateUtil';
+import { setMostRecentlyHeldHearingForAppeal } from '../QueueActions';
+
+/**
+ * This component can accept either a Hearing object or a Task object.
+ * e.g.,
+ *   <HearingBadge hearing={hearing} />
+ *   <HearingBadge task={task} />
+ */
 
 const badgeStyling = css({
   display: 'inline-block',
@@ -30,27 +42,63 @@ const listStyling = css({
   }
 });
 
-const HearingBadge = ({ hearing }) => {
-  if (!hearing) {
-    return null;
+class HearingBadge extends React.PureComponent {
+  componentDidMount = () => {
+    if (!this.props.mostRecentlyHeldHearingForAppeal && !this.props.hearing) {
+      ApiUtil.get(`/appeals/${this.props.externalId}/hearings`).then((response) => {
+        this.props.setMostRecentlyHeldHearingForAppeal(this.props.externalId, JSON.parse(response.text));
+      });
+    }
+  }
+
+  render = () => {
+    const hearing = this.props.mostRecentlyHeldHearingForAppeal || this.props.hearing;
+
+    if (!hearing || !hearing.date) {
+      return null;
+    }
+
+    const tooltipText = <div>
+      This case has a hearing associated with it.
+      <ul {...listStyling}>
+        <li>Judge: <strong>{hearing.heldBy}</strong></li>
+        <li>Disposition: <strong>{_.startCase(hearing.disposition)}</strong></li>
+        <li>Date: <strong><DateString date={hearing.date} /></strong></li>
+        <li>Type: <strong>{_.startCase(hearing.type)}</strong></li>
+      </ul>
+    </div>;
+
+    return <div {...css({ marginRight: '-2.5rem' })} className="cf-hearing-badge">
+      <Tooltip id={`badge-${hearing.id}`} text={tooltipText} position="bottom">
+        <span {...badgeStyling}>H</span>
+      </Tooltip>
+    </div>;
   }
+}
 
-  const tooltipText = <div>
-    This case has a hearing associated with it.
-    <ul {...listStyling}>
-      <li>Judge: <strong>{hearing.heldBy}</strong></li>
-      <li>Disposition: <strong>{_.startCase(hearing.disposition)}</strong></li>
-      <li>Date: <strong><DateString date={hearing.date} /></strong></li>
-      <li>Type: <strong>{_.startCase(hearing.type)}</strong></li>
-    </ul>
-  </div>;
-
-  // We expect this badge to be shown in a table, so we use this to get rid of the standard table padding.
-  return <div {...css({ marginRight: '-3rem' })} className="cf-hearing-badge">
-    <Tooltip id={`badge-${hearing.id}`} text={tooltipText} position="bottom">
-      <span {...badgeStyling}>H</span>
-    </Tooltip>
-  </div>;
+HearingBadge.propTypes = {
+  task: PropTypes.object,
+  hearing: PropTypes.object
 };
 
-export default HearingBadge;
+const mapStateToProps = (state, ownProps) => {
+  let externalId, hearing;
+
+  if (ownProps.hearing) {
+    hearing = ownProps.hearing;
+  } else if (ownProps.task) {
+    externalId = ownProps.task.appeal.externalId;
+  }
+
+  return {
+    hearing,
+    externalId,
+    mostRecentlyHeldHearingForAppeal: state.queue.mostRecentlyHeldHearingForAppeal[externalId] || null
+  };
+};
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+  setMostRecentlyHeldHearingForAppeal
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(HearingBadge);

client/app/queue/components/TaskTable.jsx

@@ -91,7 +91,7 @@ export class TaskTableUnconnected extends React.PureComponent<Props> {
   caseHearingColumn = () => {
     return this.props.includeHearingBadge ? {
       header: '',
-      valueFunction: (task: TaskWithAppeal) => <HearingBadge hearing={task.appeal.hearings[0]} />
+      valueFunction: (task: TaskWithAppeal) => <HearingBadge task={task} />
     } : null;
   }
 

client/app/queue/constants.js

@@ -47,6 +47,8 @@ export const ACTIONS = {
   ERROR_TASKS_AND_APPEALS_OF_ATTORNEY: 'ERROR_TASKS_AND_APPEALS_OF_ATTORNEY',
   SET_SELECTION_OF_TASK_OF_USER: 'SET_SELECTION_OF_TASK_OF_USER',
   SET_SELECTED_ASSIGNEE_OF_USER: 'SET_SELECTED_ASSIGNEE_OF_USER',
+  SET_MOST_RECENTLY_HELD_HEARING_FOR_APPEAL: 'SET_MOST_RECENTLY_HELD_HEARING_FOR_APPEAL',
+  ERROR_ON_RECEIVE_HEARING_FOR_APPEAL: 'ERROR_ON_RECEIVE_HEARING_FOR_APPEAL',
   START_ASSIGN_TASKS_TO_USER: 'START_ASSIGN_TASKS_TO_USER',
   SET_PENDING_DISTRIBUTION: 'SET_PENDING_DISTRIBUTION',
   RECEIVE_ALL_ATTORNEYS: 'RECEIVE_ALL_ATTORNEYS',

client/app/queue/reducers.js

@@ -25,6 +25,7 @@ export const initialState = {
   claimReviews: {},
   editingIssue: {},
   docCountForAppeal: {},
+  mostRecentlyHeldHearingForAppeal: {},
   newDocsForAppeal: {},
   specialIssues: {},
 
@@ -171,6 +172,14 @@ export const workQueueReducer = (state: QueueState = initialState, action: Objec
         }
       }
     });
+  case ACTIONS.SET_MOST_RECENTLY_HELD_HEARING_FOR_APPEAL:
+    return update(state, {
+      mostRecentlyHeldHearingForAppeal: {
+        [action.payload.appealId]: {
+          $set: action.payload.hearing
+        }
+      }
+    });
   case ACTIONS.SET_DECISION_OPTIONS:
     return update(state, {
       stagedChanges: {

client/app/queue/types/state.js

@@ -86,6 +86,7 @@ export type QueueState = {|
   claimReviews: ClaimReviews,
   editingIssue: Object,
   docCountForAppeal: {[string]: Object},
+  mostRecentlyHeldHearingForAppeal: {[string]: Object},
   stagedChanges: {
     appeals: {[string]: Object},
     taskDecision: {

client/app/queue/utils.js

@@ -47,6 +47,20 @@ export const getUndecidedIssues = (issues: Issues) => _.filter(issues, (issue) =
   }
 });
 
+export const prepareMostRecentlyHeldHearingForStore = (appealId: string, hearing) => {
+  return {
+    appealId,
+    hearing: {
+      heldBy: hearing.held_by,
+      viewedByJudge: hearing.viewed_by_judge,
+      date: hearing.date,
+      type: hearing.type,
+      externalId: hearing.external_id,
+      disposition: hearing.disposition
+    }
+  };
+};
+
 export const prepareTasksForStore = (tasks: Array<Object>): Tasks =>
   tasks.reduce((acc, task: Object): Tasks => {
     const decisionPreparedBy = task.attributes.decision_prepared_by.first_name ? {

client/constants/HEARING_DISPOSITION_TYPES.json

@@ -0,0 +1,6 @@
+{
+  "held": "held",
+  "cancelled": "cancelled",
+  "postponed": "postponed",
+  "no_show": "no_show"
+}

client/test/karma/queue/ColocatedTaskListView-test.js

@@ -148,15 +148,17 @@ describe('ColocatedTaskListView', () => {
 
       const cells = wrapper.find('td');
 
-      expect(cells).to.have.length(6);
+      expect(cells).to.have.length(7);
       const wrappers = [];
 
       for (let i = 0; i < cells.length; i++) {
         wrappers.push(cells.at(i));
       }
-      const [caseDetails, columnTasks, types, docketNumber, daysWaiting, documents] = wrappers;
+      const [hearings, caseDetails, columnTasks, types, docketNumber, daysWaiting, documents] = wrappers;
       const task = taskNewAssigned;
 
+      expect(hearings.text()).to.include('');
+      expect(caseDetails.text()).to.include(appeal.veteranFullName);
       expect(caseDetails.text()).to.include(appeal.veteranFullName);
       expect(caseDetails.text()).to.include(appeal.veteranFileNumber);
       expect(columnTasks.text()).to.include(CO_LOCATED_ADMIN_ACTIONS[task.label]);
@@ -226,14 +228,14 @@ describe('ColocatedTaskListView', () => {
 
       const cells = wrapper.find('td');
 
-      expect(cells).to.have.length(6);
+      expect(cells).to.have.length(7);
       const wrappers = [];
 
       for (let i = 0; i < cells.length; i++) {
         wrappers.push(cells.at(i));
       }
       {
-        const [daysOnHold, documents] = wrappers.slice(4);
+        const [daysOnHold, documents] = wrappers.slice(5);
 
         expect(daysOnHold.text()).to.equal('1 of 30');
         expect(documents.html()).to.include(`/reader/appeal/${taskWithNewDocs.externalAppealId}/documents`);
@@ -298,14 +300,15 @@ describe('ColocatedTaskListView', () => {
 
       const cells = wrapper.find('td');
 
-      expect(cells).to.have.length(6);
+      expect(cells).to.have.length(7);
       const wrappers = [];
 
       for (let i = 0; i < cells.length; i++) {
         wrappers.push(cells.at(i));
       }
-      const [caseDetails, columnTasks, types, docketNumber, daysOnHold, documents] = wrappers;
+      const [hearings, caseDetails, columnTasks, types, docketNumber, daysOnHold, documents] = wrappers;
 
+      expect(hearings.text()).to.include('');
       expect(caseDetails.text()).to.include(appeal.veteranFullName);
       expect(caseDetails.text()).to.include(appeal.veteranFileNumber);
       expect(columnTasks.text()).to.include(CO_LOCATED_ADMIN_ACTIONS[task.label]);