Better description for items

package.json

@@ -43,7 +43,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.4.0",
-    "react-maintenance-planner": "^0.1.2-alpha-b7d332d.0",
+    "react-maintenance-planner": "^0.1.2-alpha-1e751ac.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^4.0.3",
     "react-toggle-slider": "^0.4.0",

src/components/Legend.module.scss

@@ -0,0 +1,29 @@
+.container {
+  background-color: #dadada;
+  padding: 1rem 1.5rem 2rem 1.5rem;
+  border: 1px solid #333;
+  width: 22rem;
+  min-width: 15vw;
+  height: 100%;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  padding-top: .5rem;
+}
+
+.color {
+  background-color: #000;
+  width: 1.5rem;
+  height: 0.8rem;
+  margin-right: 1.3rem;
+}
+
+.label {
+  cursor: pointer;
+}
+
+.active {
+  font-weight: bold;
+}

src/components/Legend.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion/dist/framer-motion";
+
+import styles from "./Legend.module.scss";
+import classNames from "classnames";
+
+interface Props {
+  title: string;
+  items: Array<{
+    code: string;
+    color: string;
+    name: string;
+    active?: boolean;
+  }>;
+  onSelectLegendItem: (selectedItems: Array<string>) => void;
+}
+
+const Legend = ({ title, items, onSelectLegendItem }: Props) => {
+  const [selectedItems, setSelectedItems] = useState<Array<string>>([]);
+
+  useEffect(() => {
+    onSelectLegendItem(selectedItems)
+  }, [selectedItems])
+
+  const handleClick = (index, item) => {
+    const newItems = [...items];
+    newItems[index].active = !newItems[index].active;
+
+    const updatedSelectedItems = selectedItems.includes(item.code)
+      ? selectedItems.filter((code) => code !== item.code)
+      : [...selectedItems, item.code];
+    setSelectedItems(updatedSelectedItems);
+  };
+
+  return (
+    <div className={styles["container"]}>
+      <h3>{title}</h3>
+      <>
+        {items.map((legendItem, index) => {
+          return (
+            <div
+              key={index}
+              className={classNames([
+                styles["item"],
+                legendItem.active ? styles["active"] : null,
+              ])}
+              onClick={() => handleClick(index, legendItem)}
+            >
+              <div
+                className={styles["color"]}
+                style={{ background: `${legendItem.color}` }}
+              />
+              <motion.div
+                className={styles["label"]}
+                whileHover={{ scale: 1.1, transition: { duration: 0.1 } }}
+              >
+                {legendItem.name}
+              </motion.div>
+            </div>
+          );
+        })}
+      </>
+    </div>
+  );
+};
+
+export default Legend;

src/components/PlanEditor.module.scss

@@ -66,6 +66,24 @@
     }
   }
 
+  .editor-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+  }
+
+  .editor {
+    width: 100vw;
+  }
+
+  .fixed-legend {
+    position: fixed;
+    left: 77vw;
+    top: 30vh;
+    margin: 1rem;
+  }
+
   .table {
     width: 70vw;
     height: 70vh;

src/components/PlanEditor.tsx

@@ -9,6 +9,7 @@ import {
   pushRestrictionsToTaskList,
 } from "../utils/Utils";
 import classNames from "classnames";
+import Legend from "./Legend";
 
 import {
   GroupInterface,
@@ -18,6 +19,7 @@ import {
 
 import "react-maintenance-planner/dist/react-maintenance-planner.css";
 import * as styles from "./PlanEditor.module.scss";
+import Tooltip from "./Tooltip";
 
 interface Props {
   workPackage: RevisionPlanInterface;
@@ -36,7 +38,10 @@ const PlanEditor = ({
     taskList: false,
   });
   const [taskList, setTaskList] = useState<Array<PlanPartInterface>>([]);
-  const [showTCTypeCategory, setShowTCTypeCategory] = useState<boolean>(false);
+  const [filteredTaskList, setFilteredTaskList] = useState<
+    Array<PlanPartInterface>
+  >([]);
+  const [filteredTaskTypes, setFilteredTaskTypes] = useState<Array<string>>([]);
 
   const workPackageItems: Array<PlanPartInterface> = [];
   const taskListWithResources: Array<PlanPartInterface> = [];
@@ -48,24 +53,29 @@ const PlanEditor = ({
   useEffect(() => {
     updateData();
     setTaskList([...taskListWithRestrictions]);
-  }, [showTCTypeCategory]);
+  }, []);
 
   useEffect(() => {
-    setShowTCTypeCategory((prevState) => !prevState);
-    setTimeout(() => {
-      setShowTCTypeCategory((prevState) => !prevState);
-    }, 500);
-  }, []);
+    const filteredTaskList = taskList.filter((i) => {
+      if (i.taskType?.["task-category"]) {
+        return i.taskType?.["task-category"]
+          ? filteredTaskTypes.some((selected) =>
+              i.taskType?.["task-category"]?.includes(selected)
+            )
+          : false;
+      }
+      if (i.applicationType) {
+        return i.applicationType
+          ? filteredTaskTypes.some((selected) =>
+              i.applicationType?.includes(selected)
+            )
+          : false;
+      }
+    });
+    setFilteredTaskList(filteredTaskList);
+  }, [filteredTaskTypes]);
 
-  buildData(
-    dataWithoutRevisionPlan,
-    workPackageItems,
-    0,
-    null,
-    null,
-    groups,
-    showTCTypeCategory
-  );
+  buildData(dataWithoutRevisionPlan, workPackageItems, 0, null, null, groups);
 
   const updateData = () => {
     pushResourcesToTaskList(workPackageItems, taskListWithResources, groups);
@@ -100,6 +110,10 @@ const PlanEditor = ({
     });
   };
 
+  const handleOnLabelClick = (taskTypes: Array<string>) => {
+    setFilteredTaskTypes(taskTypes);
+  };
+
   return (
     <div className={styles["container"]}>
       <div className={styles["header"]}>
@@ -117,22 +131,30 @@ const PlanEditor = ({
             Table
           </button>
         </div>
-        <button
-          onClick={() => setShowTCTypeCategory((prevState) => !prevState)}
-        >
-          Toggle Task Card Type Group
-        </button>
       </div>
+
       {isActive.planEditor && taskList.length > 0 && taskList && (
         <div style={showPopUp()}>
-          <span key={showTCTypeCategory.toString()}>
-            <h4>{workPackageTitle}</h4>
-            <PlanningTool
-              items={taskList}
-              groups={groups}
-              legendItems={LEGEND_ITEMS}
-            />
-          </span>
+          <h4>{workPackageTitle}</h4>
+          <div className={styles["editor-container"]}>
+            <div className={styles["editor"]}>
+              <PlanningTool
+                key={filteredTaskList}
+                items={
+                  filteredTaskList.length > 0 ? filteredTaskList : taskList
+                }
+                groups={groups}
+                tooltip={<Tooltip />}
+              />
+            </div>
+            <div className={styles["fixed-legend"]}>
+              <Legend
+                title={"Legend"}
+                items={LEGEND_ITEMS}
+                onSelectLegendItem={handleOnLabelClick}
+              />
+            </div>
+          </div>
         </div>
       )}
       {isActive.table && taskList.length > 0 && (

src/components/Tooltip.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { GroupInterface, PlanPartInterface } from "../utils/Interfaces";
+import { Constants } from "../utils/Constants";
+
+interface Props {
+  item?: PlanPartInterface;
+  group?: GroupInterface;
+}
+const Tooltip = ({ item, group }: Props) => {
+  return (
+    <div>
+      {item?.applicationType !== Constants.APPLICATION_TYPE.SESSION_PLAN &&
+        !item?.taskType && (
+          <div>
+            <p>{item?.title}</p>
+          </div>
+        )}
+
+      {item?.applicationType === Constants.APPLICATION_TYPE.SESSION_PLAN && (
+        <div>
+          <p>Description: {item?.title}</p>
+          <p>Mechanic: {group?.title}</p>
+        </div>
+      )}
+
+      {item?.taskType && (
+        <>
+          <p>Scope: {item?.taskType?.scope}</p>
+          <p>Code: {item?.taskType?.code}</p>
+          <br />
+          <p>Description:</p>
+          <p>{item?.title}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;

src/utils/Constants.ts

@@ -47,7 +47,6 @@ const Constants = {
     SESSION_PLAN: "SessionPlan",
     TASK_PLAN: "TaskPlan",
     RESTRICTION_PLAN: "RestrictionPlan",
-    MECHANIC: "Mechanic",
   },
   TASK_CATEGORY: {
     TASK_CARD: "task-card",
@@ -113,8 +112,8 @@ const LEGEND_ITEMS = [
     color: "#a90000",
   },
   {
-    code: Constants.APPLICATION_TYPE.MECHANIC,
-    name: "Mechanic",
+    code: Constants.APPLICATION_TYPE.SESSION_PLAN,
+    name: "Session Plan",
     color: "#CFCBC8",
   },
 ];

src/utils/Interfaces.ts

@@ -40,6 +40,7 @@ export interface PlanPartInterface {
   endTime?: number | null;
   workTime?: number;
   taskType?: TaskType;
+  taskCategory?: TaskCategory;
   applicationType?: string;
   group?: any;
   start?: any;
@@ -75,6 +76,7 @@ export interface TaskType {
   phase?: Title;
   taskType?: string;
   "task-category"?: TaskCategory;
+  code?: number;
 }
 
 export enum Title {
@@ -105,4 +107,5 @@ export interface GroupInterface {
   parent: number | null;
   show: boolean;
   title: string | null;
+  level: number;
 }