agenda item maintenance container TM-2496

src/Components/Agenda/AgendaItemMaintenanceContainer/AgendaItemMaintenanceContainer.jsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import FontAwesome from 'react-fontawesome';
+import InteractiveElement from 'Components/InteractiveElement';
+import { Tooltip } from 'react-tippy';
+import BackButton from '../../BackButton';
+
+const AgendaItemMaintenanceContainer = () => {
+  const [expandContainer, setExpandContainer] = useState(true);
+
+  function toggleExpand() {
+    setExpandContainer(!expandContainer);
+  }
+
+  const rotate = expandContainer ? 'rotate(-180deg)' : 'rotate(0)';
+
+  return (
+    <div className="agenda-item-maintenace-container">
+      <BackButton />
+      <div className="ai-maintenance-containers">
+        <div className={`maintenance-container-left${expandContainer ? '' : '-expanded'}`}>
+          Left Maintenance Container
+          <div className="expand-arrow">
+            <InteractiveElement onClick={toggleExpand}>
+              <Tooltip
+                title={expandContainer ? 'Expand container' : 'Collapse container'}
+                arrow
+              >
+                <FontAwesome
+                  style={{ transform: rotate, transition: 'all 0.65s linear' }}
+                  name="arrow-circle-left"
+                  size="lg"
+                />
+              </Tooltip>
+            </InteractiveElement>
+          </div>
+        </div>
+        {
+          expandContainer &&
+          <div className="maintenance-container-right">
+            Right Maintenance Container
+          </div>
+        }
+      </div>
+    </div>
+  );
+};
+
+export default AgendaItemMaintenanceContainer;

src/Components/Agenda/AgendaItemMaintenanceContainer/AgendaItemMaintenanceContainer.test.jsx

@@ -0,0 +1,15 @@
+import { shallow } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import AgendaItemMaintenanceContainer from './AgendaItemMaintenanceContainer';
+
+describe('AgendaItemMaintenanceContainerComponent', () => {
+  it('is defined', () => {
+    const wrapper = shallow(<AgendaItemMaintenanceContainer />);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('matches snapshot', () => {
+    const wrapper = shallow(<AgendaItemMaintenanceContainer />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+});

src/Components/Agenda/AgendaItemMaintenanceContainer/__snapshots__/AgendaItemMaintenanceContainer.test.jsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AgendaItemMaintenanceContainerComponent matches snapshot 1`] = `
+<div
+  className="agenda-item-maintenace-container"
+>
+  <Connect(withRouter(BackButton)) />
+  <div
+    className="ai-maintenance-containers"
+  >
+    <div
+      className="maintenance-container-left"
+    >
+      Left Maintenance Container
+      <div
+        className="expand-arrow"
+      >
+        <InteractiveElement
+          className=""
+          onClick={[Function]}
+          type="div"
+        >
+          <Tooltip
+            animateFill={true}
+            animation="shift"
+            arrow={true}
+            arrowSize="regular"
+            className=""
+            delay={0}
+            disabled={false}
+            distance={10}
+            duration={375}
+            followCursor={false}
+            hideDelay={0}
+            hideDuration={375}
+            hideOnClick={true}
+            html={null}
+            inertia={false}
+            interactive={false}
+            interactiveBorder={2}
+            multiple={false}
+            offset={0}
+            onHidden={[Function]}
+            onHide={[Function]}
+            onRequestClose={[Function]}
+            onShow={[Function]}
+            onShown={[Function]}
+            popperOptions={Object {}}
+            position="top"
+            size="regular"
+            sticky={false}
+            stickyDuration={200}
+            style={Object {}}
+            tag="div"
+            theme="dark"
+            title="Expand container"
+            touchHold={false}
+            trigger="mouseenter focus"
+            unmountHTMLWhenHide={false}
+            zIndex={9999}
+          >
+            <FontAwesome
+              name="arrow-circle-left"
+              size="lg"
+              style={
+                Object {
+                  "transform": "rotate(-180deg)",
+                  "transition": "all 0.65s linear",
+                }
+              }
+            />
+          </Tooltip>
+        </InteractiveElement>
+      </div>
+    </div>
+    <div
+      className="maintenance-container-right"
+    >
+      Right Maintenance Container
+    </div>
+  </div>
+</div>
+`;

src/Components/Agenda/AgendaItemMaintenanceContainer/index.js

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

src/Components/Agenda/EmployeeAgendaSearchCard/EmployeeAgendaSearchCard.jsx

@@ -22,7 +22,6 @@ const EmployeeAgendaSearchCard = ({ isCDO, result }) => {
   const ted = get(currentAssignment, 'TED') || '';
   const perdet = get(person, 'perdet', '');
   const userRole = isCDO ? 'cdo' : 'ao';
-  const hideCreate = true;
   const employeeID = get(person, 'employeeID', '');
 
   const formatDate = (d) => isDate(new Date(d)) ? format(new Date(d), 'MM/yy') : 'None listed';
@@ -98,9 +97,7 @@ const EmployeeAgendaSearchCard = ({ isCDO, result }) => {
             <LinkButton className="view-agenda-item-button" toLink={`/profile/${userRole}/agendaitemhistory/${perdet}`}>View History</LinkButton>
           </div>
           <div className="create-ai-box-container">
-            {!hideCreate &&
-              <LinkButton className="create-ai-box-button" toLink="#">Create Agenda Item</LinkButton>
-            }
+            <LinkButton className="create-ai-box-button" toLink={`/profile/${userRole}/createagendaitem/${perdet}`}>Create Agenda Item</LinkButton>
           </div>
         </div>
       </div>

src/Components/Agenda/EmployeeAgendaSearchCard/__snapshots__/EmployeeAgendaSearchCard.test.jsx.snap

@@ -148,7 +148,14 @@ exports[`EmployeeAgendaSearchCards matches snapshot 1`] = `
       </div>
       <div
         className="create-ai-box-container"
-      />
+      >
+        <LinkButton
+          className="create-ai-box-button"
+          toLink="/profile/ao/createagendaitem/"
+        >
+          Create Agenda Item
+        </LinkButton>
+      </div>
     </div>
   </div>
 </BoxShadow>

src/Components/Agenda/EmployeeAgendaSearchRow/EmployeeAgendaSearchRow.jsx

@@ -19,7 +19,6 @@ const EmployeeAgendaSearchRow = ({ isCDO, result }) => {
   const ted = get(currentAssignment, 'TED') || '';
   const userRole = isCDO ? 'cdo' : 'ao';
   const perdet = get(person, 'perdet', '');
-  const hideCreate = true;
   const employeeID = get(person, 'employeeID', '');
 
   const formatDate = (d) => isDate(new Date(d)) ? format(new Date(d), 'MM/yy') : 'None listed';
@@ -79,10 +78,7 @@ const EmployeeAgendaSearchRow = ({ isCDO, result }) => {
             <LinkButton className="view-agenda-item-button" toLink={`/profile/${userRole}/agendaitemhistory/${perdet}`}>View History</LinkButton>
           </div>
           <div className="create-ai-box-container">
-            {
-              !hideCreate &&
-                <LinkButton className="create-ai-box-button" toLink="#">Create Agenda Item</LinkButton>
-            }
+            <LinkButton className="create-ai-box-button" toLink={`/profile/${userRole}/createagendaitem/${perdet}`}>Create Agenda Item</LinkButton>
           </div>
         </div>
 

src/Components/Agenda/EmployeeAgendaSearchRow/__snapshots__/EmployeeAgendaSearchRow.test.jsx.snap

@@ -127,7 +127,14 @@ exports[`EmployeeAgendaSearchRow matches snapshot 1`] = `
       </div>
       <div
         className="create-ai-box-container"
-      />
+      >
+        <LinkButton
+          className="create-ai-box-button"
+          toLink="/profile/ao/createagendaitem/"
+        >
+          Create Agenda Item
+        </LinkButton>
+      </div>
     </div>
   </div>
 </div>

src/Components/BureauPage/BureauPage.jsx

@@ -6,6 +6,7 @@ import PositionManager from './PositionManager';
 import PositionManagerDetails from './PositionManagerDetails';
 import EmployeeAgendaSearch from '../../Components/Agenda/EmployeeAgendaSearch/EmployeeAgendaSearch';
 import AgendaItemHistory from '../../Components/Agenda/AgendaItemHistory/AgendaItemHistory';
+import AgendaItemMaintenanceContainer from '../../Components/Agenda/AgendaItemMaintenanceContainer/AgendaItemMaintenanceContainer';
 
 const BureauPage = () => {
   const dashboardProps = {
@@ -25,6 +26,7 @@ const BureauPage = () => {
       <Switch>
         <Route path="/profile/ao/employeeagenda" render={() => <EmployeeAgendaSearch />} />
         <Route path="/profile/ao/agendaitemhistory/:id" render={() => <AgendaItemHistory />} />
+        <Route path="/profile/ao/createagendaitem/:id" render={() => <AgendaItemMaintenanceContainer />} />
         <Route path="/profile/(bureau|ao)/dashboard" render={() => <Dashboard {...dashboardProps} />} />
         <Route path="/profile/bureau/stats" render={() => <Stats {...statsProps} />} />
         <Route path="/profile/bureau/positionmanager/:type/:id" render={() => <PositionManagerDetails />} />

src/Components/CdoPage/CdoPage.jsx

@@ -3,6 +3,7 @@ import BidderPortfolio from 'Containers/BidderPortfolio';
 import AvailableBidderContainer from 'Components/AvailableBidder/AvailableBidderContainer';
 import EmployeeAgendaSearch from 'Components/Agenda/EmployeeAgendaSearch/EmployeeAgendaSearch';
 import AgendaItemHistory from 'Components/Agenda/AgendaItemHistory/AgendaItemHistory';
+import AgendaItemMaintenanceContainer from '../../Components/Agenda/AgendaItemMaintenanceContainer/AgendaItemMaintenanceContainer';
 
 const CdoPage = () => (
   <div className="usa-grid-full profile-content-container">
@@ -11,6 +12,7 @@ const CdoPage = () => (
       <Route path="/profile/cdo/bidderportfolio" render={() => <BidderPortfolio />} />
       <Route path="/profile/cdo/employeeagenda" render={() => <EmployeeAgendaSearch isCDO />} />
       <Route path="/profile/cdo/agendaitemhistory/:id" render={() => <AgendaItemHistory />} />
+      <Route path="/profile/cdo/createagendaitem/:id" render={() => <AgendaItemMaintenanceContainer />} />
     </Switch>
   </div>
 );

src/sass/_agenda.scss

@@ -762,3 +762,61 @@
 
   }
 }
+
+.agenda-item-maintenace-container {
+  margin: 10px;
+
+  .expand-arrow {
+    float: right;
+    position: relative;
+    top: 46%;
+  }
+
+  .maintenance-container-left {
+    background-color: $color-white;
+    float: left;
+    height: 500px;
+    width: 50%;
+  }
+
+  .maintenance-container-left-expanded {
+    background-color: $color-white;
+    float: left;
+    height: 500px;
+    width: 99%;
+  }
+
+  .maintenance-container-right {
+    background-color: $color-white;
+    float: left;
+    height: 500px;
+    margin-left: 20px;
+    width: 48%;
+  }
+}
+
+@media screen and (max-width: 1650px) {
+  .ai-maintenance-containers {
+    display: grid;
+
+    .maintenance-container-left {
+      background-color: $color-white;
+      float: left;
+      height: 500px;
+      width: 99%;
+
+      .expand-arrow {
+        display: none;
+      }
+    }
+
+    .maintenance-container-right {
+      background-color: $color-white;
+      float: left;
+      height: 500px;
+      margin-left: 0;
+      margin-top: 20px;
+      width: 99%
+    }
+  }
+}