Bidder Portfolio Edit View

src/Components/BidderPortfolio/BidControls/BidControls.jsx

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 import TotalResults from './TotalResults';
 import SelectForm from '../../SelectForm';
 import { BID_PORTFOLIO_SORTS } from '../../../Constants/Sort';
+import { EMPTY_FUNCTION } from '../../../Constants/PropTypes';
 import ResultsViewBy from '../../ResultsViewBy/ResultsViewBy';
 import ExportLink from '../ExportLink';
+import EditButtons from '../EditButtons';
 
 class BidControls extends Component {
   constructor(props) {
@@ -17,7 +19,7 @@ class BidControls extends Component {
   }
   render() {
     const { biddersNumerator, biddersDenominator, isLoading, viewType,
-      changeViewType } = this.props;
+      changeViewType, onEditChange, showEditButtons } = this.props;
     return (
       <div className="usa-grid-full portfolio-controls">
         <div className="usa-width-one-fourth total-results-container">
@@ -37,6 +39,7 @@ class BidControls extends Component {
               onSelectOption={this.onSortChange}
             />
             <ResultsViewBy initial={viewType} onClick={changeViewType} />
+            {showEditButtons && <EditButtons onChange={onEditChange} />}
             <ExportLink />
           </div>
         </div>
@@ -52,6 +55,13 @@ BidControls.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   viewType: PropTypes.string.isRequired,
   changeViewType: PropTypes.func.isRequired,
+  onEditChange: PropTypes.func.isRequired,
+  showEditButtons: PropTypes.bool,
+};
+
+BidControls.defaultProps = {
+  onEditChange: EMPTY_FUNCTION,
+  showEditButtons: false,
 };
 
 export default BidControls;

src/Components/BidderPortfolio/BidderPortfolioContainer/BidderPortfolioContainer.jsx

@@ -17,13 +17,13 @@ class BidderPortfolioContainer extends Component {
     this.props.queryParamUpdate(q);
   }
   render() {
-    const { bidderPortfolio, pageSize, pageNumber, showListView } = this.props;
+    const { bidderPortfolio, pageSize, pageNumber, showListView, showEdit } = this.props;
     const noResults = bidderPortfolio.results.length === 0;
     return (
       <div className="usa-grid-full user-dashboard">
         {
           showListView ?
-            <BidderPortfolioGridList results={bidderPortfolio.results} />
+            <BidderPortfolioGridList showEdit={showEdit} results={bidderPortfolio.results} />
             :
             <BidderPortfolioCardList results={bidderPortfolio.results} />
         }
@@ -57,10 +57,12 @@ BidderPortfolioContainer.propTypes = {
   queryParamUpdate: PropTypes.func.isRequired,
   pageNumber: PropTypes.number.isRequired,
   showListView: PropTypes.bool,
+  showEdit: PropTypes.bool,
 };
 
 BidderPortfolioContainer.defaultProps = {
   showListView: false,
+  showEdit: false,
 };
 
 export default BidderPortfolioContainer;

src/Components/BidderPortfolio/BidderPortfolioGridList/BidderPortfolioGridList.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { BIDDER_RESULTS } from '../../../Constants/PropTypes';
 import BidderPortfolioStatRow from '../BidderPortfolioStatRow';
 
-const BidderPortfolioGridList = ({ results }) => (
+const BidderPortfolioGridList = ({ results, showEdit }) => (
   <ul className="usa-grid-full user-dashboard portfolio-row-list">
     {
       results.map(result => (
@@ -12,6 +13,7 @@ const BidderPortfolioGridList = ({ results }) => (
         >
           <BidderPortfolioStatRow
             userProfile={result}
+            showEdit={showEdit}
           />
         </li>
       ))
@@ -21,6 +23,11 @@ const BidderPortfolioGridList = ({ results }) => (
 
 BidderPortfolioGridList.propTypes = {
   results: BIDDER_RESULTS.isRequired,
+  showEdit: PropTypes.bool,
+};
+
+BidderPortfolioGridList.defaultProps = {
+  showEdit: false,
 };
 
 export default BidderPortfolioGridList;

src/Components/BidderPortfolio/BidderPortfolioGridList/__snapshots__/BidderPortfolioGridList.test.jsx.snap

@@ -8,6 +8,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
     className="portfolio-row"
   >
     <BidderPortfolioStatRow
+      showEdit={false}
       userProfile={
         Object {
           "bid_statistics": Array [
@@ -55,6 +56,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
     className="portfolio-row"
   >
     <BidderPortfolioStatRow
+      showEdit={false}
       userProfile={
         Object {
           "bid_statistics": Array [],
@@ -87,6 +89,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
     className="portfolio-row"
   >
     <BidderPortfolioStatRow
+      showEdit={false}
       userProfile={
         Object {
           "bid_statistics": Array [],
@@ -119,6 +122,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
     className="portfolio-row"
   >
     <BidderPortfolioStatRow
+      showEdit={false}
       userProfile={
         Object {
           "bid_statistics": Array [
@@ -166,6 +170,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
     className="portfolio-row"
   >
     <BidderPortfolioStatRow
+      showEdit={false}
       userProfile={
         Object {
           "bid_statistics": Array [],
@@ -198,6 +203,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
     className="portfolio-row"
   >
     <BidderPortfolioStatRow
+      showEdit={false}
       userProfile={
         Object {
           "bid_statistics": Array [

src/Components/BidderPortfolio/BidderPortfolioPage/BidderPortfolioPage.jsx

@@ -12,16 +12,22 @@ class BidderPortfolioPage extends Component {
   constructor(props) {
     super(props);
     this.changeViewType = this.changeViewType.bind(this);
+    this.changeEditType = this.changeEditType.bind(this);
     this.state = {
       viewType: { value: 'card' },
+      editType: { show: false },
     };
   }
   changeViewType(value) {
     const { viewType } = this.state;
     viewType.value = value;
     this.setState({ viewType });
   }
+  changeEditType(value) {
+    this.setState({ editType: value });
+  }
   render() {
+    const { editType } = this.state;
     const { bidderPortfolio, bidderPortfolioIsLoading,
     bidderPortfolioHasErrored, pageSize, queryParamUpdate, pageNumber,
     bidderPortfolioCounts } = this.props;
@@ -44,6 +50,8 @@ class BidderPortfolioPage extends Component {
 
     // pass zero if waiting on value
     const biddersNumerator = bidderPortfolio.count || 0;
+
+    const showEdit = editType.show;
     return (
       <div className={`bidder-portfolio-page ${viewTypeClass}`}>
         <BidderPortfolioSearch onUpdate={queryParamUpdate} />
@@ -59,6 +67,8 @@ class BidderPortfolioPage extends Component {
                 isLoading={isLoading}
                 viewType={this.state.viewType.value}
                 changeViewType={this.changeViewType}
+                showEditButtons={isListView}
+                onEditChange={this.changeEditType}
               />
             </div>
           }
@@ -75,6 +85,7 @@ class BidderPortfolioPage extends Component {
                   queryParamUpdate={queryParamUpdate}
                   pageNumber={pageNumber}
                   showListView={isListView}
+                  showEdit={showEdit}
                 />
             }
           </div>

src/Components/BidderPortfolio/BidderPortfolioPage/__snapshots__/BidderPortfolioPage.test.jsx.snap

@@ -27,7 +27,9 @@ exports[`BidderPortfolioPageComponent matches snapshot 1`] = `
         biddersNumerator={6}
         changeViewType={[Function]}
         isLoading={false}
+        onEditChange={[Function]}
         queryParamUpdate={[Function]}
+        showEditButtons={false}
         viewType="card"
       />
     </div>
@@ -236,6 +238,7 @@ exports[`BidderPortfolioPageComponent matches snapshot 1`] = `
         pageNumber={1}
         pageSize={8}
         queryParamUpdate={[Function]}
+        showEdit={false}
         showListView={false}
       />
     </div>

src/Components/BidderPortfolio/BidderPortfolioStatRow/BidderPortfolioStatRow.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { get, orderBy } from 'lodash';
+import PropTypes from 'prop-types';
 import { BIDDER_OBJECT } from '../../../Constants/PropTypes';
 import SkillCodeList from '../../SkillCodeList';
 import { getPostName } from '../../../utilities';
@@ -8,8 +9,9 @@ import ClientBadgeList from '../ClientBadgeList';
 import StaticDevContent from '../../StaticDevContent';
 import LinkButton from '../../LinkButton';
 import Avatar from '../../Avatar';
+import CheckboxList from '../CheckboxList';
 
-const BidderPortfolioStatRow = ({ userProfile }) => {
+const BidderPortfolioStatRow = ({ userProfile, showEdit }) => {
   const sortedAssignments = orderBy(userProfile.assignments, 'start_date', 'desc');
   const currentAssignment = get(sortedAssignments, '[0].position.post');
   const currentAssignmentText = getPostName(currentAssignment, NO_POST);
@@ -38,29 +40,42 @@ const BidderPortfolioStatRow = ({ userProfile }) => {
           <dt>Post:</dt><dd>{currentAssignmentText}</dd>
         </div>
       </div>
-
-      <div className="bidder-portfolio-stat-row-updates">
-        <StaticDevContent>
-          <ClientBadgeList
-            statuses={{
-              handshake: 1,
-              sixeight: 0,
-              fairshare: 1,
-              retirement: 2,
-            }}
-          />
-        </StaticDevContent>
-      </div>
-
-      <div>
-        <LinkButton className="usa-button-secondary" toLink={`/profile/public/${userProfile.id}`}>View Details</LinkButton>
-      </div>
+      {
+        !showEdit &&
+        <div className="bidder-portfolio-stat-row-updates">
+          <StaticDevContent>
+            <ClientBadgeList
+              statuses={{
+                handshake: 1,
+                sixeight: 0,
+                fairshare: 1,
+                retirement: 2,
+              }}
+            />
+          </StaticDevContent>
+        </div>
+      }
+      {
+        !showEdit &&
+        <div>
+          <LinkButton className="usa-button-secondary" toLink={`/profile/public/${userProfile.id}`}>View Details</LinkButton>
+        </div>
+      }
+      {
+        showEdit &&
+        <CheckboxList id={userProfile.id} />
+      }
     </div>
   );
 };
 
 BidderPortfolioStatRow.propTypes = {
   userProfile: BIDDER_OBJECT.isRequired,
+  showEdit: PropTypes.bool,
+};
+
+BidderPortfolioStatRow.defaultProps = {
+  showEdit: false,
 };
 
 export default BidderPortfolioStatRow;

src/Components/BidderPortfolio/CheckboxList/CheckboxList.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CheckBox from '../../CheckBox';
+import CLIENT_EDITS from '../../../Constants/ClientEdits';
+
+const ClientBadgeList = ({ id }) => (
+  <div className="client-checkbox-list">
+    {CLIENT_EDITS.map(c => (
+      <CheckBox
+        id={`${id}-${c.value}`}
+        label={c.label}
+        small
+        value={false}
+        key={c.value}
+      />
+    ))}
+  </div>
+);
+
+ClientBadgeList.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+ClientBadgeList.defaultProps = {
+  statuses: {},
+};
+
+export default ClientBadgeList;

src/Components/BidderPortfolio/CheckboxList/index.js

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

src/Components/BidderPortfolio/EditButtons/EditButtons.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { EMPTY_FUNCTION } from '../../../Constants/PropTypes';
+
+class EditButtons extends Component {
+  constructor(props) {
+    super(props);
+    this.onShow = this.onShow.bind(this);
+    this.onCancel = this.onCancel.bind(this);
+    this.onSave = this.onSave.bind(this);
+    this.state = {
+      showSave: false,
+    };
+  }
+  onShow() {
+    this.setState({ showSave: true }, () => this.props.onChange({ show: true, type: 'show' }));
+  }
+  onCancel() {
+    this.setState({ showSave: false }, () => this.props.onChange({ show: false, type: 'cancel' }));
+  }
+  onSave() {
+    this.setState({ showSave: false }, () => this.props.onChange({ show: false, type: 'save' }));
+  }
+  changeSaveState(val) {
+    this.setState({ showSave: val });
+  }
+  render() {
+    const { showSave } = this.state;
+    return (
+      <div className="edit-buttons-container">
+        {!showSave && <button onClick={this.onShow}>Edit</button>}
+        {showSave && <button onClick={this.onCancel} className="usa-button-secondary">{'Don\'t save'}</button>}
+        {showSave && <button onClick={this.onSave}>Save</button>}
+      </div>
+    );
+  }
+}
+
+EditButtons.propTypes = {
+  onChange: PropTypes.func,
+};
+
+EditButtons.defaultProps = {
+  onChange: EMPTY_FUNCTION,
+};
+
+export default EditButtons;