avatar

src/Pages/CrmTest/CrmTest.js

@@ -14,6 +14,7 @@ import {
   Typography,
   notification,
   Badge,
+  Popover,
 } from "antd";
 import { useTranslation } from "react-i18next";
 import {
@@ -42,6 +43,8 @@ import { MySupsenseFallback } from "../../Components/MySupsenseFallback";
 import { linkDialogPlugin } from "@mdxeditor/editor";
 import { tablePlugin } from "@mdxeditor/editor";
 import { frontmatterPlugin } from "@mdxeditor/editor";
+import { MyAvatar } from "../../Components/MyAvatar";
+import { useAppContext } from "../../Contexts/AppContext";
 
 const CRM_TYPE = {
   CUSTOMERS: 0,
@@ -55,6 +58,7 @@ function MyBadge({ count }) {
 
 export default function CrmTest() {
   const { t } = useTranslation();
+  const appContext = useAppContext();
   const crmContext = useCrmContext();
 
   const [isRequesting, setIsRequesting] = useState(false);
@@ -94,6 +98,11 @@ export default function CrmTest() {
 
   const getTableContent = () => {
     return [
+      {
+        title: "Assignee",
+        dataIndex: "assignee",
+        key: "assignee",
+      },
       {
         title: t("crm.table.firstName"),
         dataIndex: "firstName",
@@ -151,6 +160,32 @@ export default function CrmTest() {
     data.forEach((item) => {
       items.push({
         key: item.Id,
+        assignee: (
+          <>
+            <Popover
+              placement="right"
+              trigger="hover"
+              content={
+                <MyAvatar
+                  userId={item.AssignedEmployee}
+                  allUsers={appContext.users}
+                  avatarWidth={256}
+                />
+              }
+            >
+              <>
+                <MyAvatar
+                  userId={item.AssignedEmployee}
+                  allUsers={appContext.users}
+                />{" "}
+                {
+                  appContext.users.find((u) => u.Id === item.AssignedEmployee)
+                    ?.Username
+                }
+              </>
+            </Popover>
+          </>
+        ),
         id: item.Id,
         firstName: item.FirstName,
         lastName: item.LastName,
@@ -158,7 +193,29 @@ export default function CrmTest() {
         telephone: item.Telephone,
         email: item.Email,
         lastContact: FormatDatetime(item.LastContact),
-        createdBy: item.CreatedBy,
+        createdBy: (
+          <>
+            <Popover
+              placement="right"
+              trigger="hover"
+              content={
+                <MyAvatar
+                  userId={item.CreatedBy}
+                  allUsers={appContext.users}
+                  avatarWidth={256}
+                />
+              }
+            >
+              <>
+                <MyAvatar userId={item.CreatedBy} allUsers={appContext.users} />{" "}
+                {
+                  appContext.users.find((u) => u.Id === item.CreatedBy)
+                    ?.Username
+                }
+              </>
+            </Popover>
+          </>
+        ),
       });
     });
 
@@ -335,6 +392,7 @@ export default function CrmTest() {
 
 function CustomerDrawer({ isOpen, setIsOpen, onClose, notificationApi }) {
   const { t } = useTranslation();
+  const appContext = useAppContext();
   const crmContext = useCrmContext();
 
   const [formDealInfo] = Form.useForm();
@@ -441,6 +499,7 @@ function CustomerDrawer({ isOpen, setIsOpen, onClose, notificationApi }) {
             formDealInfo.setFieldsValue({
               Pipeline: 1,
               DealPhase: 1,
+              AssignedEmployee: appContext.userId.current,
             });
             return;
           }
@@ -460,8 +519,8 @@ function CustomerDrawer({ isOpen, setIsOpen, onClose, notificationApi }) {
             changedFields.push("Notes");
           }
 
-          // check if something has changed (length 2 = only the pipeline and deal phase)
+          // check if something has changed (length 2 = only the pipeline, deal phase and assigned employee)
-          if (changedFields.length === 2) return;
+          if (changedFields.length === 3) return;
 
           Object.keys(values).forEach((key) => {
             if (values[key] !== undefined) {
@@ -559,14 +618,36 @@ function CustomerDrawer({ isOpen, setIsOpen, onClose, notificationApi }) {
       onClose={onClose}
       width={720}
       extra={
-        <Button
+        <Space>
-          onClick={() => {
+          <Form form={formDealInfo} layout="inline">
-            onClose();
+            <Form.Item name="AssignedEmployee">
-            handleCloseDrawer();
+              <Select>
-          }}
+                {appContext.users.map((user) => (
-        >
+                  <Select.Option key={user.Id} value={user.Id}>
-          {t("crm.buttonUndo")}
+                    <Space>
-        </Button>
+                      <MyAvatar
+                        userId={user.Id}
+                        allUsers={appContext.users}
+                        avatarWidth={24}
+                      />
+
+                      {user.Username}
+                    </Space>
+                  </Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </Form>
+
+          <Button
+            onClick={() => {
+              onClose();
+              handleCloseDrawer();
+            }}
+          >
+            {t("crm.buttonUndo")}
+          </Button>
+        </Space>
       }
     >
       <Tabs
@@ -609,6 +690,7 @@ function CollapseContainer({ children, label }) {
 
 function TabContentDealInfo({ form }) {
   const pipeline = Form.useWatch("Pipeline", form);
+  const dealPhase = Form.useWatch("DealPhase", form);
 
   const FormItem = ({ name, label }) => (
     <Form.Item name={name} label={t(label)}>
@@ -647,9 +729,18 @@ function TabContentDealInfo({ form }) {
   // set deal phase to 1 when the pipeline changes
   // without this the user could set a deal phase that is not available for the selected pipeline
   useEffect(() => {
-    form.setFieldsValue({
+    const options = t(
-      DealPhase: 1,
+      pipeline === 1
-    });
+        ? "crm.dmcPipeline.segmentedOptions"
+        : "crm.setterCloser.segmentedOptions",
+      { returnObjects: true }
+    );
+
+    if (dealPhase > options.length) {
+      form.setFieldsValue({
+        DealPhase: options.length,
+      });
+    }
   }, [pipeline]);
 
   return (
@@ -829,11 +920,6 @@ function TabContentDealInfo({ form }) {
                 label:
                   "crm.tabContent.dealInfo.collapseDealProperties.bookedPackages",
               },
-              {
-                name: "AssignedEmployee",
-                label:
-                  "crm.tabContent.dealInfo.collapseDealProperties.assignedEmployee",
-              },
             ]}
           />
         </Space>