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

cabra/src/api/tasks.ts

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

cabra/src/pages/components/CreateTaskForm.tsx

@@ -5,7 +5,7 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 
 import TaskForm from "./TaskForm";
 
-const emptyTask: Omit<ITask, "id" | "isBlocked"> = {
+const emptyTask: Omit<ITask, "id" | "relationTypes" | "isBlocked"> = {
   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" | "isBlocked"> = {
+const emptyTask: Omit<ITask, "id" | "relationTypes" | "isBlocked"> = {
   description: "",
   dueDate: null,
   title: "",

cabra/src/pages/components/TaskForm.tsx

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

cabra/src/pages/components/TaskListItem.tsx

@@ -1,10 +1,12 @@
+import { EmptyIcon, TaskTypeIcon } from "./TaskTypeIcon";
 import { ITask, TaskStatus } from "../../types/task";
 import { getTask, getTasks, updateTask } from "../../api/tasks";
 import tw, { styled } from "twin.macro";
 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 { formatDateTime } from "../../utils/dates";
@@ -45,10 +47,10 @@ export default function TaskListItem({ task }: Props) {
   };
 
   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 tw="rounded-xl w-full text-stone-50 bg-primary shadow-2xl p-4 grid grid-cols-[1fr 30%] gap-x-4">
       <Column>
-        <Card tw="text-lg font-bold py-4">{task.title}</Card>
-        <Card tw="text-sm flex gap-y-1 gap-x-2">
+        <Card tw="text-lg font-bold py-8">{task.title}</Card>
+        <Card tw="text-sm flex gap-y-1 gap-x-2 py-3">
           Tags:
           {task.tags.length > 0
             ? task.tags.map((tag) => <TagChip key={tag.id}>{tag.name}</TagChip>)
@@ -77,6 +79,15 @@ export default function TaskListItem({ task }: Props) {
             </Link>
           </Card>
         </div>
+        <Card tw="grid grid-cols-5 py-2 gap-1.5 justify-items-center">
+          {Object.values(DirectedRelationType).map((type) =>
+            task.relationTypes.includes(type) ? (
+              <TaskTypeIcon key={type} type={type} />
+            ) : (
+              <EmptyIcon />
+            )
+          )}
+        </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,58 @@
+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 IconContainer = styled.div`
+  ${tw`text-blue-700 bg-tertiary p-1 rounded`}
+`;
+
+export const EmptyIcon = styled.div`
+  ${tw`bg-primary p-1 h-7 w-7 rounded`}
+`;
+
+const TYPES_TO_ICONS = {
+  [DirectedRelationType.Subtask]: {
+    Icon: DuplicateIcon,
+    message: "Subtask",
+  },
+  [DirectedRelationType.Supertask]: {
+    Icon: CollectionIcon,
+    message: "Has subtask",
+  },
+  [DirectedRelationType.Blocks]: {
+    Icon: ArrowCircleDownIcon,
+    message: "Blocks another task",
+  },
+  [DirectedRelationType.IsBlockedBy]: {
+    Icon: ArrowCircleUpIcon,
+    message: "Is blocked by another task",
+  },
+  [DirectedRelationType.Interchangable]: {
+    Icon: SwitchHorizontalIcon,
+    message: "Interchangeable task",
+  },
+};
+
+export function TaskTypeIcon({ type }: Props) {
+  const { Icon, message } = TYPES_TO_ICONS[type];
+  return (
+    <IconContainer>
+      <Icon height={20} width={20} data-tip data-for={type} />
+      <ReactTooltip id={type} place="bottom" effect="solid">
+        {message}
+      </ReactTooltip>
+    </IconContainer>
+  );
+}

cabra/src/types/task.ts

@@ -1,3 +1,5 @@
+import { DirectedRelationType } from "./taskRelation";
+
 export interface ITag {
   id: string;
   name: string;
@@ -17,4 +19,5 @@ export interface ITask {
   status: TaskStatus;
   isBlocked: boolean;
   tags: ITag[];
+  relationTypes: DirectedRelationType[];
 }

cabra/src/types/taskRelation.ts

@@ -14,9 +14,9 @@ export interface IRelatedTask {
 }
 
 export enum DirectedRelationType {
-  Blocks = "blocks",
-  IsBlockedBy = "is_blocked_by",
-  Subtask = "subtask",
   Supertask = "supertask",
+  Subtask = "subtask",
+  IsBlockedBy = "is_blocked_by",
   Interchangable = "interchangable",
+  Blocks = "blocks",
 }