Allow user to delete positions in Team Details popup. Rename Roles to Positions in Added Roles Accordion.

Author: mbaghel

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/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/TeamDetailsModal/index.jsx

@@ -6,13 +6,16 @@
 import React, { useState } from "react";
 import PT from "prop-types";
 import { Form, Field, useField } from "react-final-form";
+import { useDispatch } from "react-redux";
 import FormField from "components/FormField";
 import BaseCreateModal from "../BaseCreateModal";
 import { FORM_FIELD_TYPE } from "constants/";
 import { formatPlural } from "utils/format";
 import Button from "components/Button";
 import MonthPicker from "components/MonthPicker";
 import InformationTooltip from "components/InformationTooltip";
+import { deleteSearchedRole } from "../../actions";
+import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
 import "./styles.module.scss";
 
 const Error = ({ name }) => {
@@ -32,6 +35,8 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
     return roles;
   });
 
+  const dispatch = useDispatch();
+
   const toggleDescription = () => {
     setShowDescription((prevState) => !prevState);
   };
@@ -169,6 +174,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                   <th># of resources</th>
                   <th>Duration (weeks)</th>
                   <th>Start month</th>
+                  <th></th>
                 </tr>
                 {addedRoles.map(({ searchId: id, name }) => (
                   <tr styleName="role-row" key={id}>
@@ -193,7 +199,7 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                       />
                       <Error name={`${id}.durationWeeks`} />
                     </td>
-                    <td styleName="start-month">
+                    <td>
                       {startMonthVisible[id] ? (
                         <>
                           <Field
@@ -231,6 +237,14 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
                         </div>
                       )}
                     </td>
+                    <td>
+                      <button
+                        styleName="delete-role"
+                        onClick={() => dispatch(deleteSearchedRole(id))}
+                      >
+                        <IconCrossLight height="12px" width="12px" />
+                      </button>
+                    </td>
                   </tr>
                 ))}
               </table>

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

@@ -42,7 +42,7 @@
       color: #2a2a2a;
       border-bottom: 1px solid #e9e9e9;
 
-      &.start-month {
+      &:last-child {
         padding-right: 0;
       }
 
@@ -73,6 +73,17 @@
   display: block;
 }
 
+.delete-role {
+  border: none;
+  background: none;
+
+  &:hover {
+    g {
+      stroke: red;
+    }
+  }
+}
+
 .modal-body {
   textarea {
     height: 95px;

src/routes/CreateNewTeam/reducers/index.js

@@ -18,9 +18,18 @@ const loadState = () => {
     return defaultState;
   }
 };
-
 const initialState = loadState();
 
+const deleteRoleInState = (state, deleteId) => {
+  const filteredRoles = state.addedRoles.filter(
+    (role) => role.searchId !== deleteId
+  );
+  return {
+    ...state,
+    addedRoles: filteredRoles,
+  };
+};
+
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case ACTION_TYPE.CLEAR_SEARCHED_ROLES:
@@ -42,12 +51,8 @@ const reducer = (state = initialState, action) => {
         previousSearchId: action.payload,
       };
 
-    case ACTION_TYPE.REPLACE_SEARCHED_ROLES:
-      return {
-        ...state,
-        addedRoles: action.payload.roles,
-        previousSearchId: action.payload.lastRoleId,
-      };
+    case ACTION_TYPE.DELETE_SEARCHED_ROLE:
+      return deleteRoleInState(state, action.payload);
 
     default:
       return state;