IO-940 Clear event color and ats.

client/src/components/job-at-change/schedule-event.color.component.jsx

@@ -21,7 +21,10 @@ export function ScheduleEventColor({ bodyshop, event }) {
 
   const onClick = async ({ key }) => {
     const result = await updateAppointment({
-      variables: { appid: event.id, app: { color: key } },
+      variables: {
+        appid: event.id,
+        app: { color: key === "null" ? null : key },
+      },
     });
 
     if (!!!result.errors) {
@@ -34,6 +37,13 @@ export function ScheduleEventColor({ bodyshop, event }) {
       });
     }
   };
+
+  const selectedColor =
+    event.color &&
+    bodyshop.appt_colors &&
+    bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
+      ?.label;
+
   const menu = (
     <Menu selectedKeys={[event.color]} onClick={onClick}>
       {bodyshop.appt_colors &&
@@ -42,11 +52,15 @@ export function ScheduleEventColor({ bodyshop, event }) {
             {color.label}
           </Menu.Item>
         ))}
+      <Menu.Divider />
+      <Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
     </Menu>
   );
+  console.log(`event`, event);
   return (
     <Dropdown overlay={menu}>
       <a href=" #" onClick={(e) => e.preventDefault()}>
+        {selectedColor}
         <DownOutlined />
       </a>
     </Dropdown>