diff --git a/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx index 54edf4465..605d75561 100644 --- a/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx +++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx @@ -4,6 +4,7 @@ import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } f import { useTranslation } from "react-i18next"; import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx"; +import { BiSolidTrash } from "react-icons/bi"; const { Text } = Typography; @@ -42,7 +43,8 @@ export default function JobWatcherToggleComponent({ - - - - {t("notifications.labels.watching-issue")} - + + : } + size="medium" + onClick={handleToggleSelf} + loading={adding || removing} + > + {isWatching ? t("notifications.labels.unwatch") : t("notifications.labels.watch")} + + ]} + > + + + {t("notifications.labels.watching-issue")} + + + + {watcherLoading ? ( ) : jobWatchers && jobWatchers.length > 0 ? ( @@ -82,12 +92,16 @@ export default function JobWatcherToggleComponent({ ) : ( {t("notifications.labels.no-watchers")} )} - + {t("notifications.labels.add-watchers")} jobWatchers.every((w) => w.user_email !== e.user_email)) || []} + options={ + bodyshop?.employees?.filter((e) => + jobWatchers.every((w) => w.user_email !== e.user_email && e.active && e.user_email) + ) || [] + } placeholder={t("notifications.labels.employee-search")} value={selectedWatcher} onChange={(value) => { @@ -110,10 +124,9 @@ export default function JobWatcherToggleComponent({ const teamMembers = team.employee_team_members .map((member) => { const employee = bodyshop?.employees?.find((e) => e.id === member.employeeid); - return employee ? employee.user_email : null; + return employee?.user_email && employee?.active ? employee.user_email : null; }) .filter(Boolean); - return { value: JSON.stringify(teamMembers), label: team.name @@ -128,7 +141,7 @@ export default function JobWatcherToggleComponent({ return ( - +