IO-1998 Filter schedule by event type.

client/src/components/schedule-calendar/schedule-calendar.component.jsx

@@ -1,6 +1,8 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Col, PageHeader, Row, Space } from "antd";
-import React from "react";
+import { Button, Card, Checkbox, Col, PageHeader, Row, Space } from "antd";
+import { t } from "i18next";
+import React, { useMemo } from "react";
+import useLocalStorage from "../../utils/useLocalStorage";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
@@ -8,6 +10,23 @@ import ScheduleProductionList from "../schedule-production-list/schedule-product
 import ScheduleVerifyIntegrity from "../schedule-verify-integrity/schedule-verify-integrity.component";
 
 export default function ScheduleCalendarComponent({ data, refetch }) {
+  const [filter, setFilter] = useLocalStorage("filter_events", {
+    intake: true,
+    manual: true,
+    employeevacation: true,
+  });
+  const filteredData = useMemo(() => {
+    return data.filter(
+      (d) =>
+        d.block ||
+        (filter.intake && d.isintake) ||
+        (filter.manual && !d.isintake && d.block === false) ||
+        (d.__typename === "employee_vacation" &&
+          filter.employeevacation &&
+          !!d.employee)
+    );
+  }, [data, filter]);
+
   return (
     <Row gutter={[16, 16]}>
       <ScheduleModal />
@@ -16,6 +35,30 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
         <PageHeader
           extra={
             <Space wrap>
+              <Checkbox
+                checked={filter?.intake}
+                onChange={(e) => {
+                  setFilter({ ...filter, intake: e.target.checked });
+                }}
+              >
+                {t("schedule.labels.intake")}
+              </Checkbox>
+              <Checkbox
+                checked={filter?.manual}
+                onChange={(e) => {
+                  setFilter({ ...filter, manual: e.target.checked });
+                }}
+              >
+                {t("schedule.labels.manual")}
+              </Checkbox>
+              <Checkbox
+                checked={filter?.employeevacation}
+                onChange={(e) => {
+                  setFilter({ ...filter, employeevacation: e.target.checked });
+                }}
+              >
+                {t("schedule.labels.employeevacation")}
+              </Checkbox>
               <ScheduleVerifyIntegrity />
               <Button
                 onClick={() => {
@@ -35,7 +78,7 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
       <Col span={24}>
         <Card>
           <ScheduleCalendarWrapperComponent
-            data={data}
+            data={filteredData}
             refetch={refetch}
             style={{ height: "100rem" }}
           />