[ITG-104] Add icon of type to the task.

cabra/package.json

@@ -30,6 +30,7 @@
     "react-query": "^3.34.18",
     "react-router-dom": "^6.3.0",
     "react-select": "^5.2.2",
+    "react-tooltip": "^4.2.21",
     "vite": "^2.6.14",
     "yup": "^0.32.11"
   },

cabra/src/api/tasks.ts

@@ -18,7 +18,7 @@ export const filtersToUrlParams = (filters: IFilterFormState): string => {
   return params.toString();
 };
 
-interface TaskApiInput extends Omit<ITask, "id" | "dueDate"> {
+interface TaskApiInput extends Omit<ITask, "id" | "dueDate" | "relationTypes"> {
   dueDate: Date | string | null;
 }
 

cabra/src/pages/components/CreateTaskForm.tsx

@@ -6,7 +6,7 @@ import TaskForm from "./TaskForm";
 import { routeHelpers } from "../../routes";
 import { useNavigate } from "react-router-dom";
 
-const emptyTask: Omit<ITask, "id"> = {
+const emptyTask: Omit<ITask, "id" | "relationTypes"> = {
   description: "",
   dueDate: null,
   title: "",

cabra/src/pages/components/SubtasksListEdit.tsx

@@ -17,7 +17,7 @@ const AddDependenceButton = styled.button(
 );
 const Label = styled.label(tw`text-gray-50 font-bold`);
 
-const emptyTask: Omit<ITask, "id"> = {
+const emptyTask: Omit<ITask, "id" | "relationTypes"> = {
   description: "",
   dueDate: null,
   title: "",

cabra/src/pages/components/TaskForm.tsx

@@ -16,9 +16,9 @@ import { zonedTimeToUtc } from "date-fns-tz";
 
 type Props = {
   onSubmit: (inputs: TaskFormInputs) => Promise<unknown>;
-  task: Omit<ITask, "id">;
+  task: Omit<ITask, "id" | "relationTypes">;
 };
-export type TaskFormInputs = Omit<ITask, "id" | "dueDate"> & {
+export type TaskFormInputs = Omit<ITask, "id" | "dueDate" | "relationTypes"> & {
   dueDate: Date | null;
 };
 

cabra/src/pages/components/TaskListItem.tsx

@@ -5,8 +5,10 @@ import { useMutation, useQueryClient } from "react-query";
 
 import { ArrowRightIcon } from "@heroicons/react/solid";
 import CheckBox from "./CheckBox";
+import { DirectedRelationType } from "../../types/taskRelation";
 import { Link } from "react-router-dom";
 import NavigationButton from "./NavigationButton";
+import { TaskTypeIcon } from "./TaskTypeIcon";
 import { formatDateTime } from "../../utils/dates";
 import { routeHelpers } from "../../routes";
 import { useState } from "react";
@@ -44,8 +46,15 @@ export default function TaskListItem({ task }: Props) {
     }
   };
 
+  const isSubtask = task.relationTypes.includes(DirectedRelationType.Subtask);
+
   return (
-    <div tw="rounded-xl w-full bg-primary text-stone-50 shadow-2xl p-4 grid grid-cols-[1fr 30%] gap-x-4">
+    <div
+      css={[
+        tw`rounded-xl w-full text-stone-50 shadow-2xl p-4 grid grid-cols-[1fr 30%] gap-x-4`,
+        isSubtask ? tw`bg-primary bg-opacity-60` : tw`bg-primary`,
+      ]}
+    >
       <Column>
         <Card tw="text-lg font-bold py-4">{task.title}</Card>
         <Card tw="text-sm flex gap-y-1 gap-x-2">
@@ -76,6 +85,13 @@ export default function TaskListItem({ task }: Props) {
             </Link>
           </Card>
         </div>
+        {task.relationTypes.length > 0 && (
+          <Card tw="flex gap-2">
+            {task?.relationTypes.map((type) => (
+              <TaskTypeIcon key={type} type={type} />
+            ))}
+          </Card>
+        )}
       </Column>
       {errorMessage && (
         <p tw="flex items-center text-orange-500 pt-1">&nbsp;{errorMessage}</p>

cabra/src/pages/components/TaskTypeIcon.tsx

@@ -0,0 +1,62 @@
+import {
+  ArrowCircleDownIcon,
+  ArrowCircleUpIcon,
+  CollectionIcon,
+  DuplicateIcon,
+  SwitchHorizontalIcon,
+} from "@heroicons/react/solid";
+import tw, { styled } from "twin.macro";
+
+import { DirectedRelationType } from "../../types/taskRelation";
+import ReactTooltip from "react-tooltip";
+
+interface Props {
+  type: DirectedRelationType;
+}
+
+const Icon = styled.div`
+  ${tw`text-blue-700 bg-tertiary p-0.5 rounded`}
+`;
+
+export function TaskTypeIcon({ type }: Props) {
+  let icon;
+  let message: string = type;
+  switch (type) {
+    case DirectedRelationType.Subtask:
+      icon = <DuplicateIcon height={20} width={20} data-tip data-for={type} />;
+      message = "Subtask";
+      break;
+    case DirectedRelationType.Supertask:
+      icon = <CollectionIcon height={20} width={20} data-tip data-for={type} />;
+      message = "Has subtask";
+      break;
+    case DirectedRelationType.Blocks:
+      icon = (
+        <ArrowCircleDownIcon height={20} width={20} data-tip data-for={type} />
+      );
+      message = "Blocks task";
+      break;
+    case DirectedRelationType.IsBlockedBy:
+      icon = (
+        <ArrowCircleUpIcon height={20} width={20} data-tip data-for={type} />
+      );
+      message = "Is blocked by task";
+      break;
+    case DirectedRelationType.Interchangable:
+      icon = (
+        <SwitchHorizontalIcon height={20} width={20} data-tip data-for={type} />
+      );
+      message = "Interchangeable task";
+      break;
+    default:
+      return <div></div>;
+  }
+  return (
+    <Icon>
+      {icon}
+      <ReactTooltip id={type} place="bottom" effect="solid">
+        {message}
+      </ReactTooltip>
+    </Icon>
+  );
+}

cabra/src/types/task.ts

@@ -1,3 +1,5 @@
+import { DirectedRelationType } from "./taskRelation";
+
 export interface ITag {
   id: string;
   name: string;
@@ -16,4 +18,5 @@ export interface ITask {
   dueDate: string | null;
   status: TaskStatus;
   tags: ITag[];
+  relationTypes: DirectedRelationType[];
 }