Task list: implement 1-level task hierarchy.

This is the first step towards fixing #124

src/components/Tasks/TaskList.tsx

@@ -208,6 +208,19 @@ export default function TaskList(props: PropsType) {
     entries = potentialEntries;
   }
 
+  const subEntriesMap = new Map<string, TaskType[]>();
+
+  entries = entries.filter((x) => {
+    const relatedTo = x.relatedTo;
+    if (relatedTo) {
+      const cur = subEntriesMap.get(relatedTo) ?? [];
+      cur.push(x);
+      subEntriesMap.set(relatedTo, cur);
+      return false;
+    }
+    return true;
+  });
+
   const sortedEntries = entries.sort(getSortFunction(sortBy));
 
   const itemList = sortedEntries.map((entry) => {
@@ -217,8 +230,9 @@ export default function TaskList(props: PropsType) {
       <TaskListItem
         key={uid}
         entry={entry}
+        subEntries={subEntriesMap.get(uid)}
         onClick={props.onItemClick}
-        onToggleComplete={(completed: boolean) => handleToggleComplete(entry, completed)}
+        onToggleComplete={(entry: TaskType, completed: boolean) => handleToggleComplete(entry, completed)}
       />
     );
   });

src/components/Tasks/TaskListItem.tsx

@@ -34,13 +34,15 @@ const TagsList = React.memo((props: { tags: string[] }) => (
 
 interface PropsType {
   entry: TaskType;
+  subEntries?: TaskType[];
   onClick: (task: TaskType) => void;
-  onToggleComplete: (completed: boolean) => void;
+  onToggleComplete: (task: TaskType, completed: boolean) => void;
 }
 
 export default React.memo(function TaskListItem(props: PropsType) {
   const {
     entry: task,
+    subEntries,
     onClick,
     onToggleComplete,
   } = props;
@@ -55,11 +57,14 @@ export default React.memo(function TaskListItem(props: PropsType) {
       primaryText={title}
       secondaryText={secondaryText}
       secondaryTextColor={task.overdue ? 'error' : 'textSecondary'}
+      nestedItems={subEntries?.map((x) => (
+        <TaskListItem key={x.uid} entry={x} onClick={onClick} onToggleComplete={onToggleComplete} />
+      ))}
       onClick={() => onClick(task)}
       leftIcon={
         <Checkbox
           onClick={(e) => e.stopPropagation()}
-          onChange={(_e, checked) => onToggleComplete(checked)}
+          onChange={(_e, checked) => onToggleComplete(task, checked)}
           checked={task.finished}
           icon={<CheckBoxOutlineBlankIcon style={{ color: checkboxColor[mapPriority(task.priority)] }} />}
         />

src/pim-types.ts

@@ -226,6 +226,18 @@ export class TaskType extends EventType {
     return this.component.getFirstPropertyValue('completed');
   }
 
+  set relatedTo(parentUid: string | undefined) {
+    if (parentUid !== undefined) {
+      this.component.updatePropertyWithValue('related-to', parentUid);
+    } else {
+      this.component.removeAllProperties('related-to');
+    }
+  }
+
+  get relatedTo(): string | undefined {
+    return this.component.getFirstPropertyValue('related-to');
+  }
+
   get endDate() {
     // XXX: A hack to override this as it shouldn't be used
     return undefined as any;