Merge pull request #346 from topcoder-platform/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

@@ -38,7 +38,7 @@ function NoMatchingProfilesResultCard({ role }) {
             <p>/Week</p>
           </div>
         )}
-        <Link to="/taas/myteams/createnewteam">
+        <Link to="/taas/createnewteam">
           <Button type="secondary" styleName="button">
             Modify Search Criteria
           </Button>