Merge pull request #345 from mbaghel/roles-finalfix

Roles finalfix challenge

Author: nikolay83

src/components/MonthPicker/index.jsx

@@ -15,7 +15,7 @@ function getCurrMonthYear() {
   return new Date(`${year}-${month + 1}`);
 }
 
-function MonthPicker({ name, value, onChange, onBlur }) {
+function MonthPicker({ name, value, onChange, onBlur, onFocus }) {
   return (
     <div styleName="month-picker">
       <DatePicker
@@ -26,6 +26,7 @@ function MonthPicker({ name, value, onChange, onBlur }) {
         showMonthYearPicker
         showPopperArrow={false}
         onBlur={onBlur}
+        onFocus={onFocus}
         popperPlacement="top-end"
         showFourColumnMonthYearPicker
         minDate={getCurrMonthYear()}

src/components/NumberInput/index.jsx

@@ -0,0 +1,56 @@
+/**
+ * Number Input
+ * A custom number input to be used in forms
+ * Removed default buttons and adds custom buttons
+ */
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import "./styles.module.scss";
+
+function NumberInput({ name, value, onChange, onBlur, onFocus, min, error }) {
+  const incrementVal = (step) => {
+    const newVal = +value + step;
+    if (typeof newVal === "number" && !isNaN(newVal)) {
+      onChange(newVal);
+    }
+  };
+  const decrementVal = (step) => {
+    const newVal = value - step;
+    if (newVal >= min) {
+      onChange(value - step);
+    }
+  };
+
+  return (
+    <div styleName="container">
+      <button styleName="left-button" onClick={() => decrementVal(1)}>
+        –
+      </button>
+      <input
+        styleName={cn("input", { error: error })}
+        type="number"
+        name={name}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+      />
+      <button styleName="right-button" onClick={() => incrementVal(1)}>
+        +
+      </button>
+    </div>
+  );
+}
+
+NumberInput.propTypes = {
+  name: PT.string,
+  value: PT.string,
+  onChange: PT.func,
+  onFocus: PT.func,
+  onBlur: PT.func,
+  min: PT.string,
+  error: PT.bool,
+};
+
+export default NumberInput;

src/components/NumberInput/styles.module.scss

@@ -0,0 +1,43 @@
+@import "styles/include";
+
+// remove default buttons and style input as text input
+.input {
+  appearance: textfield;
+  text-align: center;
+
+  &.error {
+    border-color: #fe665d;
+  }
+}
+.input::-webkit-inner-spin-button,
+.input::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.container {
+  position: relative;
+  width: fit-content;
+}
+
+.left-button,
+.right-button {
+  @include font-roboto;
+  font-size: 22px;
+  color: #137D60;
+  outline: none;
+  border: none;
+  background: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  padding: 0 11px;
+}
+
+.left-button {
+  left: 0;
+}
+
+.right-button {
+  right: 0;
+}

src/constants/index.js

@@ -257,7 +257,7 @@ export const ACTION_TYPE = {
   CLEAR_SEARCHED_ROLES: "CLEAR_SEARCHED_ROLES",
   ADD_SEARCHED_ROLE: "ADD_SEARCHED_ROLE",
   ADD_ROLE_SEARCH_ID: "ADD_ROLE_SEARCH_ID",
-  REPLACE_SEARCHED_ROLES: "REPLACE_SEARCHED_ROLES",
+  DELETE_SEARCHED_ROLE: "DELETE_SEARCHED_ROLE",
 };
 
 /**

src/root.component.jsx

@@ -25,7 +25,7 @@ export default function Root() {
         <Router>
           <Redirect from="/taas" to="/taas/myteams" exact />
           <MyTeamsList path="/taas/myteams" />
-          <CreateNewTeam path="/taas/myteams/createnewteam" />
+          <CreateNewTeam path="/taas/createnewteam" />
           <MyTeamsDetails path="/taas/myteams/:teamId" />
           <JobDetails path="/taas/myteams/:teamId/positions/:jobId" />
           <JobForm path="/taas/myteams/:teamId/positions/:jobId/edit" />
@@ -34,9 +34,9 @@ export default function Root() {
           <ResourceBookingForm path="/taas/myteams/:teamId/rb/:resourceBookingId/edit" />
           <PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
           <TeamAccess path="/taas/myteams/:teamId/access" />
-          <InputJobDescription path="/taas/myteams/createnewteam/jd/*" />
-          <InputSkills path="/taas/myteams/createnewteam/skills/*" />
-          <SelectRole path="/taas/myteams/createnewteam/role/*" />
+          <InputJobDescription path="/taas/createnewteam/jd/*" />
+          <InputSkills path="/taas/createnewteam/skills/*" />
+          <SelectRole path="/taas/createnewteam/role/*" />
         </Router>
 
         {/* Global config for Toastr popups */}

src/routes/CreateNewTeam/actions/index.js

@@ -22,9 +22,9 @@ const addPreviousSearchId = (id) => ({
   payload: id,
 });
 
-export const replaceSearchedRoles = (roles) => ({
-  type: ACTION_TYPE.REPLACE_SEARCHED_ROLES,
-  payload: { roles, lastRoleId: roles[roles.length - 1].searchId },
+const deleteRole = (id) => ({
+  type: ACTION_TYPE.DELETE_SEARCHED_ROLE,
+  payload: id,
 });
 
 export const clearSearchedRoles = () => (dispatch, getState) => {
@@ -41,3 +41,8 @@ export const addRoleSearchId = (id) => (dispatch, getState) => {
   dispatch(addPreviousSearchId(id));
   updateLocalStorage(getState().searchedRoles);
 };
+
+export const deleteSearchedRole = (id) => (dispatch, getState) => {
+  dispatch(deleteRole(id));
+  updateLocalStorage(getState().searchedRoles);
+};

src/routes/CreateNewTeam/components/AddedRolesAccordion/index.jsx

@@ -19,7 +19,8 @@ function AddedRolesAccordion({ addedRoles }) {
         <div styleName="heading">
           <h4 styleName="title">
             {addedRoles.length}{" "}
-            {addedRoles.length > 1 ? "roles have" : "role has"} been added.
+            {addedRoles.length > 1 ? "positions have" : "position has"} been
+            added.
           </h4>
         </div>
         <div styleName={cn("arrow", { [isOpen ? "up" : "down"]: true })}></div>

src/routes/CreateNewTeam/components/ItemList/index.jsx

@@ -37,7 +37,7 @@ function ItemList({
     <div styleName="item-list">
       <PageHeader
         title={title}
-        backTo="/taas/myteams/createnewteam"
+        backTo="/taas/createnewteam"
         aside={
           <>
             <Input

src/routes/CreateNewTeam/components/ItemList/styles.module.scss

@@ -7,7 +7,7 @@
   margin-right: 20px;
   position: relative;
   height: 80vh;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   > header {
     padding: 16px 24px;
@@ -33,9 +33,9 @@ input:not([type="checkbox"]).filter-input {
   color: #2a2a2a;
   font-size: 14px;
   height: 40px;
-  line-height: 38px;
+  line-height: normal;
   outline: none;
-  padding: 0 15px;
+  padding: 8px 15px;
 
   &:not(:focus) {
     background-image: url("../../../../assets/images/icon-search.svg");

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx

@@ -25,14 +25,20 @@ function NoMatchingProfilesResultCard({ role }) {
           We will be looking internally for members matching your requirements
           and be back at them in about 2 weeks.
         </p>
-        {role && (
+        {role.rates && role.name ? (
           <div styleName="niche-rate-box">
             <p>{role.name} Rate</p>
             <p styleName="cost">{formatMoney(role.rates[0].global)}</p>
             <p>/Week</p>
           </div>
+        ) : (
+          <div styleName="niche-rate-box">
+            <p>Custom Rate</p>
+            <p styleName="cost">$1,200</p>
+            <p>/Week</p>
+          </div>
         )}
-        <Link to="/taas/myteams/createnewteam">
+        <Link to="/taas/createnewteam">
           <Button type="secondary" styleName="button">
             Modify Search Criteria
           </Button>

src/routes/CreateNewTeam/components/ResultCard/index.jsx

@@ -32,6 +32,10 @@ function ResultCard({ role }) {
     isExternalMember,
     skillsMatch,
     rates: [rates],
+    jobTitle,
+    name,
+    timeToCandidate,
+    timeToInterview,
   } = role;
   const [userHandle, setUserHandle] = useState(null);
   const [showRates, setShowRates] = useState(false);
@@ -54,6 +58,9 @@ function ResultCard({ role }) {
         <Curve styleName="curve" />
         <IconEarthCheck styleName="transparent-icon" />
       </div>
+      <h4 styleName="job-title">
+        {jobTitle && jobTitle.length ? jobTitle : name}
+      </h4>
       <div styleName="button-group">
         <Button
           type={!showRates ? "segment-selected" : "segment"}
@@ -202,14 +209,14 @@ function ResultCard({ role }) {
               <IconMultipleActionsCheck />
               <div>
                 <p>Qualified candidates within</p>
-                <h6>24h</h6>
+                <h6>{timeToCandidate}h</h6>
               </div>
             </div>
             <div styleName="timeline-info">
               <IconTeamMeetingChat />
               <div>
                 <p>Interviews can start within</p>
-                <h6>48h</h6>
+                <h6>{timeToInterview}h</h6>
               </div>
             </div>
           </div>

src/routes/CreateNewTeam/components/ResultCard/styles.module.scss

@@ -13,7 +13,7 @@
   justify-content: flex-start;
   align-items: center;
   padding: 30px 0 60px 0;
-  margin-bottom: 30px;
+  margin-bottom: 14px;
   color: #fff;
   background-image: linear-gradient(225deg, #0ab88a 0%, #137d60 100%);
   position: relative;
@@ -40,6 +40,18 @@
   }
 }
 
+.job-title {
+  @include font-barlow;
+  font-size: 22px;
+  margin-bottom: 18px;
+  font-weight: 600;
+  text-align: center;
+  text-transform: uppercase;
+  // position text over bottom of header image
+  position: relative;
+  z-index: 100;
+}
+
 .button-group {
   display: flex;
   flex-direction: row;

src/routes/CreateNewTeam/components/RoleDetailsModal/index.jsx

@@ -90,19 +90,21 @@ function RoleDetailsModal({ roleId, open, onClose }) {
             Skills
           </Button>
         </div>
-        {showSkills ? (
-          <ul styleName="body skill-list">
-            {skills.map((skill, i) => (
-              <li styleName="skill-item" key={i}>
-                {skill}
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <div styleName="markdown-container">
-            <MarkdownViewer value={role?.description} />
-          </div>
-        )}
+        <div styleName="content">
+          {showSkills ? (
+            <ul styleName="body skill-list">
+              {skills.map((skill, i) => (
+                <li styleName="skill-item" key={i}>
+                  {skill}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div styleName="markdown-container">
+              <MarkdownViewer value={role?.description} />
+            </div>
+          )}
+        </div>
       </div>
     </BaseCreateModal>
   );

src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss

@@ -58,3 +58,8 @@
   margin-bottom: 10px;
   font-size: 12px;
 }
+
+.content {
+  height: 180px;
+  overflow-y: auto;
+}