IO-3166-Global-Notifications-Part-2 - Checkpoint

2025-03-05 11:07:28 -05:00
parent ec8a413ed1
commit f8ae6dc5af
12 changed files with 377 additions and 239 deletions
--- a/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
+++ b/client/src/components/job-watcher-toggle/job-watcher-toggle.component.jsx
@@ -0,0 +1,141 @@
+import React from "react";
+import { EyeFilled, EyeOutlined, UserOutlined } from "@ant-design/icons";
+import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } from "antd";
+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";
+
+const { Text } = Typography;
+
+export default function JobWatcherToggleComponent({
+  jobWatchers,
+  isWatching,
+  watcherLoading,
+  adding,
+  removing,
+  open,
+  setOpen,
+  selectedWatcher,
+  setSelectedWatcher,
+  selectedTeam,
+  bodyshop,
+  Enhanced_Payroll,
+  handleToggleSelf,
+  handleRemoveWatcher,
+  handleWatcherSelect,
+  handleTeamSelect
+}) {
+  const { t } = useTranslation();
+
+  const handleRenderItem = (watcher) => {
+    // Check if watcher is defined and has user_email
+    if (!watcher || !watcher.user_email) {
+      return null; // Skip rendering invalid watchers
+    }
+
+    const employee = bodyshop?.employees?.find((e) => e.user_email === watcher.user_email);
+    const displayName = employee ? `${employee.first_name} ${employee.last_name}` : watcher.user_email;
+
+    return (
+      <List.Item
+        actions={[
+          <Button
+            type="default"
+            danger
+            size="small"
+            onClick={() => handleRemoveWatcher(watcher.user_email)}
+            disabled={adding || removing} // Optional: Disable button during mutations
+          >
+            {t("notifications.actions.remove")}
+          </Button>
+        ]}
+      >
+        <List.Item.Meta
+          avatar={<Avatar icon={<UserOutlined />} />}
+          title={<Text>{displayName}</Text>}
+          description={watcher.user_email}
+        />
+      </List.Item>
+    );
+  };
+
+  const popoverContent = (
+    <div style={{ width: 600 }}>
+      <Button
+        block
+        type={isWatching ? "primary" : "default"}
+        icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
+        onClick={handleToggleSelf}
+        loading={adding || removing}
+      >
+        {isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}
+      </Button>
+      <Divider />
+
+      <Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
+        {t("notifications.labels.watching-issue")}
+      </Text>
+      {watcherLoading ? (
+        <LoadingSpinner />
+      ) : jobWatchers && jobWatchers.length > 0 ? (
+        <List dataSource={jobWatchers} renderItem={handleRenderItem} />
+      ) : (
+        <Text type="secondary">{t("notifications.labels.no-watchers")}</Text>
+      )}
+      <Divider />
+
+      <Text type="secondary">{t("notifications.labels.add-watchers")}</Text>
+      <EmployeeSearchSelectComponent
+        style={{ minWidth: "100%" }}
+        options={bodyshop?.employees?.filter((e) => jobWatchers.every((w) => w.user_email !== e.user_email)) || []}
+        placeholder={t("notifications.labels.employee-search")}
+        value={selectedWatcher}
+        onChange={(value) => {
+          setSelectedWatcher(value);
+          handleWatcherSelect(value);
+        }}
+      />
+      {Enhanced_Payroll && bodyshop?.employee_teams?.length > 0 && (
+        <>
+          <Divider />
+          <Text type="secondary">{t("notifications.labels.add-watchers-team")}</Text>
+          <Select
+            showSearch
+            style={{ minWidth: "100%" }}
+            placeholder={t("notifications.labels.teams-search")}
+            value={selectedTeam}
+            onChange={handleTeamSelect}
+            options={
+              bodyshop?.employee_teams?.map((team) => {
+                const teamMembers = team.employee_team_members
+                  .map((member) => {
+                    const employee = bodyshop?.employees?.find((e) => e.id === member.employeeid);
+                    return employee ? employee.user_email : null;
+                  })
+                  .filter(Boolean);
+
+                return {
+                  value: JSON.stringify(teamMembers),
+                  label: team.name
+                };
+              }) || []
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Popover content={popoverContent} trigger="click" open={open} onOpenChange={setOpen}>
+      <Tooltip title={isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}>
+        <Button
+          shape="circle"
+          type={isWatching ? "primary" : "default"}
+          icon={isWatching ? <EyeFilled /> : <EyeOutlined />}
+          loading={watcherLoading}
+        />
+      </Tooltip>
+    </Popover>
+  );
+}