Merge pull request #1012 from MetaPhase-Consulting/feature/bureau-pos…

…ition-results-card

Feature/bureau position results card

src/Components/BureauPage/BureauResultsCard/BureauResultsCard.jsx

@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import FA from 'react-fontawesome';
+import Linkify from 'react-linkify';
+import { COMMON_PROPERTIES } from 'Constants/EndpointParams';
+import { Row } from 'Components/Layout';
+import DefinitionList from 'Components/DefinitionList';
+import InteractiveElement from 'Components/InteractiveElement';
+import { getResult, getBidStatsToUse, getDifferentials, renderBidCountMobile } from 'Components/ResultsCard/ResultsCard';
+import LanguageList from 'Components/LanguageList';
+import { getPostName, getBidStatisticsObject, propOrDefault, shortenString } from 'utilities';
+import {
+  NO_BUREAU, NO_GRADE, NO_POSITION_NUMBER,
+  NO_POST, NO_SKILL, NO_TOUR_OF_DUTY, NO_UPDATE_DATE, NO_DATE, NO_USER_LISTED,
+} from 'Constants/SystemMessages';
+
+class BureauResultsCard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showMore: false,
+    };
+  }
+  render() {
+    const { showMore } = this.state;
+    const { isProjectedVacancy } = this.props;
+
+    const result = { id: 22392, status: null, status_code: 'OP', ted: '2020-07-07T01:12:49.695000Z', posted_date: '2020-07-07T01:12:49.695000Z', availability: { availability: null, reason: null }, tandem_nbr: null, position: { id: null, grade: '08', skill: 'FINANCE & ECONOMIC DEVELOPMENT (5025)', skill_code: '5025', bureau: '(L) OFFICE OF THE LEGAL ADVISER', organization: '(A) ASSISTANT SECRETARY FOR ADMINISTRATION', tour_of_duty: '2 YRS (3 R & R)', classifications: null, representation: null, availability: { availability: null, reason: null }, position_number: '55364111', title: 'INFORMATION SYSTEMS OFFICER', is_overseas: null, is_highlighted: false, create_date: null, update_date: null, effective_date: null, posted_date: '2020-07-07T01:12:49.695000Z', description: { id: null, last_editing_user: null, is_editable_by_user: null, date_created: null, date_updated: '2020-07-06T15:12:49.325000Z', content: 'ISO:Information Systems Office (ISO) in Vladivostok is staffed by two direct-hire Americans. It is responsible for the full range of IMO/IPO/ISSO functions, including unclassified and SBU classified pouch, high frequency and VHF/UHF radio systems, Iridium satellite phones, unclassified SBU OpenNet, Meridian Nortel 11C digital phone system, and 3 separate dedicated internet networks. The ISO section has direct liaison with RIMCs in Bangkok, Frankfurt, and Moscow and handles SBU classified pouch delivery through SRDCH Seoul. The Information Systems Officer (ISO) and Information Management Specialist (IMS) both cover all areas of the ISC. Additionally, the ISO is responsible for OpenNet project administration, application and customer service support, and also serves as the ISSO. The ISO reports to and acts as backup to the Management Officer. The ISO provides direct supervision to the IMS. **Please note - we have requested the removal of this language designation** POC Michael Gillen. gillenml@state.gov. We are collecting lobbying documents through the EUR-IO 360 Lobbying Center. Please submit your lobbying information at http://eur.p.state.sbu/sites/apps/EURApps/EUR360Center/', point_of_contact: null, website: null }, current_assignment: { user: null, tour_of_duty: '2 YRS (3 R & R)', status: null, start_date: null, estimated_end_date: '2010-10-27T05:00:00Z' }, commuterPost: { description: null, frequency: null }, post: { id: null, code: 'ZI8000000', tour_of_duty: '2 YRS (3 R & R)', post_overview_url: null, post_bidding_considerations_url: null, cost_of_living_adjustment: null, differential_rate: 10, danger_pay: 20, rest_relaxation_point: null, has_consumable_allowance: null, has_service_needs_differential: null, obc_id: null, location: { country: 'Macau', code: 'ZI8000000', city: 'Spelter', state: '' } }, latest_bidcycle: { id: 158, name: 'Now & Winter 2018/2019', cycle_start_date: null, cycle_deadline_date: null, cycle_end_date: null, active: null }, languages: [{ language: 'Chinese-Mandar', reading_proficiency: '1', spoken_proficiency: '1', representation: 'Chinese-Mandar (CM) 1/1' }, { language: 'Uzbek', reading_proficiency: '1', spoken_proficiency: '1', representation: 'Uzbek (UX) 1/1' }] }, bidcycle: { id: 158, name: 'Now & Winter 2018/2019', cycle_start_date: null, cycle_deadline_date: null, cycle_end_date: null, active: null }, bid_statistics: [{ id: null, total_bids: 0, in_grade: 0, at_skill: 0, in_grade_at_skill: 0, has_handshake_offered: false, has_handshake_accepted: null }], unaccompaniedStatus: '', isConsumable: true, isServiceNeedDifferential: false, isDifficultToStaff: false, isEFMInside: false, isEFMOutside: true };
+
+    const pos = result.position || result;
+
+    const title = propOrDefault(pos, 'title');
+    const position = getResult(pos, 'position_number', NO_POSITION_NUMBER);
+    const languages = getResult(pos, 'languages', []);
+
+    const language = (<LanguageList languages={languages} propToUse="representation" />);
+
+    const postShort = getPostName(pos.post, NO_POST);
+
+    const bidStatsToUse = getBidStatsToUse(result, pos);
+    const stats = getBidStatisticsObject(bidStatsToUse);
+
+    const description = shortenString(get(pos, 'description.content') || 'No description.', 2000);
+
+    const detailsLink = <Link to={`/${isProjectedVacancy ? 'vacancy' : 'details'}/${result.id}`}><h3>{title}</h3></Link>;
+
+    const sections = [
+    /* eslint-disable quote-props */
+      {
+        'Position number': position,
+        'Skill': getResult(pos, 'skill_code', NO_SKILL),
+        'Grade': getResult(pos, 'grade', NO_GRADE),
+        'Bureau': getResult(pos, 'bureau', NO_BUREAU),
+        'Tour of duty': getResult(pos, 'post.tour_of_duty', NO_TOUR_OF_DUTY),
+        'Language': language,
+        'Post differential | Danger Pay': getDifferentials(pos),
+        'TED': getResult(result, 'ted', NO_DATE),
+        'Incumbent': getResult(pos, 'current_assignment.user', NO_USER_LISTED),
+        'Posted': getResult(result, COMMON_PROPERTIES.posted, NO_UPDATE_DATE),
+      },
+      {
+        'Last Updated': 'N/A',
+      },
+    /* eslint-enable quote-props */
+    ];
+
+    if (isProjectedVacancy) { delete sections[2].Posted; }
+
+    return (
+      <Row fluid className="bureau-results-card">
+        <Row fluid>
+          <Row fluid className="bureau-card--section bureau-card--header">
+            <div>{detailsLink}</div>
+            <div>{postShort}</div>
+            {renderBidCountMobile(stats)}
+          </Row>
+          <Row fluid className="bureau-card--section bureau-card--content">
+            <DefinitionList itemProps={{ excludeColon: true }} items={sections[0]} className="bureau-definition" />
+          </Row>
+          <Row fluid className="bureau-card--section bureau-card--footer">
+            <DefinitionList items={sections[1]} className="bureau-definition" />
+            <div className="usa-grid-full toggle-more-container">
+              <InteractiveElement className="toggle-more" onClick={() => this.setState({ showMore: !showMore })}>
+                <span>View {showMore ? 'less' : 'more'} </span>
+                <FA name={`chevron-${showMore ? 'up' : 'down'}`} />
+              </InteractiveElement>
+            </div>
+          </Row>
+        </Row>
+        {
+          showMore &&
+          <Row fluid className="bureau-card--description">
+            <Linkify properties={{ target: '_blank' }}>
+              {description}
+            </Linkify>
+          </Row>
+        }
+      </Row>
+    );
+  }
+}
+
+BureauResultsCard.propTypes = {
+  isProjectedVacancy: PropTypes.bool,
+};
+
+BureauResultsCard.defaultProps = {
+  isProjectedVacancy: false,
+};
+
+export default BureauResultsCard;

src/Components/BureauPage/BureauResultsCard/index.js

@@ -0,0 +1 @@
+export { default } from './BureauResultsCard';

src/Components/BureauPage/Stats/Stats.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ProfileSectionTitle from '../../ProfileSectionTitle';
 import Spinner from '../../Spinner';
+import BureauResultsCard from '../BureauResultsCard';
 
 const Stats = (props) => {
   const {
@@ -22,6 +23,11 @@ const Stats = (props) => {
       <div className="usa-grid-full bureau-page">
         {placeholderText}
       </div>
+      <div className="usa-grid-full">
+        {[1, 2, 3, 4, 5].map((m) => (
+          <BureauResultsCard key={m} />
+        ))}
+      </div>
     </div>
   );
 };

src/Components/BureauPage/Stats/Stats.test.jsx

@@ -1,23 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import TestUtils from 'react-dom/test-utils';
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
 import Stats from './Stats';
 
-const middlewares = [thunk];
-const mockStore = configureStore(middlewares);
-
 describe('BureauPage', () => {
-  it('mounts', () => {
-    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
-      <Stats />
-    </MemoryRouter></Provider>);
-    expect(wrapper).toBeDefined();
-  });
-
   it('is defined', () => {
     const wrapper = shallow(<Stats />);
     expect(wrapper).toBeDefined();

src/Components/DefinitionList/Definition/Definition.jsx

@@ -6,14 +6,17 @@ const defaults = {
   term: '',
   definition: '',
   truncate: true,
+  excludeColon: false,
   children: '',
 };
 
 const Definition = (props) => {
   const options = omit(props, keys(defaults));
   let { term, definition } = props;
+  const { excludeColon } = props;
 
-  term = (term || '').length && `${term}:`;
+  term = (term || '').length && `${term}`;
+  if (!excludeColon) term = `${term}:`;
   definition = definition || '';
 
   if (props.children) {
@@ -34,6 +37,7 @@ Definition.propTypes = {
   term: PropTypes.string,
   definition: PropTypes.node,
   truncate: PropTypes.bool,
+  excludeColon: PropTypes.bool,
   /** Takes precedence over `definition` if both props are used. */
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(Node),

src/Components/DefinitionList/DefinitionList.jsx

@@ -8,9 +8,10 @@ const defaults = {
   items: [],
   children: [],
   truncate: true,
+  itemProps: {},
 };
 
-const DefinitionList = ({ truncate = true, ...props }) => {
+const DefinitionList = ({ truncate = true, itemProps, ...props }) => {
   const options = omit(props, keys(defaults));
   const children = !isArray(props.children) ? [props.children] : props.children;
   let items = props.items;
@@ -21,6 +22,7 @@ const DefinitionList = ({ truncate = true, ...props }) => {
       term: key,
       definition: item,
       truncate,
+      ...itemProps,
     }));
   }
 
@@ -58,6 +60,8 @@ DefinitionList.propTypes = {
     ),
   ]),
 
+  itemProps: PropTypes.shape({}),
+
   /** Takes precedence over `items` if both props are used. */
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(node),

src/Components/DefinitionList/__snapshots__/DefinitionList.test.jsx.snap

@@ -6,21 +6,25 @@ exports[`DefinitionList matches snapshot 1`] = `
 >
   <Definition
     definition="Definition #1"
+    excludeColon={false}
     term="Term #1"
     truncate={true}
   />
   <Definition
     definition="Definition #2"
+    excludeColon={false}
     term="Term #2"
     truncate={true}
   />
   <Definition
     definition="Definition #3"
+    excludeColon={false}
     term="Term #3"
     truncate={true}
   />
   <Definition
     definition="Definition #4"
+    excludeColon={false}
     term="Term #4"
     truncate={true}
   />

src/Components/ResultsCard/ResultsCard.jsx

@@ -29,19 +29,19 @@ import {
   NO_POST, NO_SKILL, NO_TOUR_OF_DUTY, NO_UPDATE_DATE, NO_DATE, NO_USER_LISTED,
 } from '../../Constants/SystemMessages';
 
-const getPostNameText = pos => `${getPostName(pos.post, NO_POST)}${pos.organization ? `: ${pos.organization}` : ''}`;
+export const getPostNameText = pos => `${getPostName(pos.post, NO_POST)}${pos.organization ? `: ${pos.organization}` : ''}`;
 
-const getBidStatsToUse = (result, pos) => result.bid_statistics || pos.bid_statistics;
+export const getBidStatsToUse = (result, pos) => result.bid_statistics || pos.bid_statistics;
 
-const getDifferentials = (result) => {
+export const getDifferentials = (result) => {
   const dangerPay = get(result, 'post.danger_pay');
   const postDifferential = get(result, 'post.differential_rate');
   const obcUrl = get(result, 'post.post_bidding_considerations_url');
   const props = { dangerPay, postDifferential, obcUrl };
   return <Differentials {...props} />;
 };
 
-const getResult = (result, path, defaultValue, isRate = false) => {
+export const getResult = (result, path, defaultValue, isRate = false) => {
   let value = get(result, path, defaultValue);
 
   if ((/_date|date_|ted/i).test(path) && value !== defaultValue) {

src/sass/_bureau.scss

@@ -36,3 +36,106 @@
     margin-bottom: 10px;
   }
 }
+
+.bureau-results-card {
+  background-color: $color-white;
+  border: 1px solid $bg-gray-dark-2;
+  border-left: 8px solid $blue-primary;
+  padding: 1em;
+
+  .bureau-definition {
+    display: flex;
+  }
+
+  .bureau-card--footer,
+  .bureau-card--description {
+    margin-top: 1em;
+  }
+
+  .toggle-more-container {
+    position: relative;
+  }
+
+  .toggle-more {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+
+    > span:first-child {
+      white-space: nowrap;
+    }
+  }
+
+  .bureau-card--section {
+    display: flex;
+  }
+
+  .bid-count-list {
+    font-size: .8em;
+  }
+
+  .bid-count-container {
+    margin: 0 0 0 auto;
+  }
+
+  .bureau-card--header {
+    margin-bottom: .6em;
+
+    > div {
+      &:not(:last-child) {
+        margin-right: .5em;
+      }
+
+      &:not(:first-child) {
+        margin-top: 2px;
+      }
+    }
+  }
+
+  &:not(:first-child) {
+    border-top: 0;
+  }
+
+  h3 {
+    font-family: 'Roboto';
+    font-size: 1.1em;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .bureau-card--content {
+    dl {
+      display: flex;
+
+      > div {
+        display: flex;
+        flex: 10 10 auto;
+        flex-direction: column;
+        padding-left: 1em;
+      }
+
+      > div:first-child {
+        flex: 7 7 auto;
+        padding-left: 0;
+      }
+
+      > div:nth-child(2),
+      > div:nth-child(3) {
+        flex: 5 5 auto;
+      }
+
+      dt,
+      dd {
+        display: inline-flex;
+        margin: 0;
+        padding: 0;
+      }
+
+      dt {
+        color: $primary-gray-dark;
+        font-size: .85em;
+        margin-bottom: .5em;
+      }
+    }
+  }
+}