Tasks edit: Added parent task selector

Author: MangoCubes

src/Tasks/Main.tsx

@@ -72,7 +72,7 @@ export default function TasksMain() {
     history.goBack();
   }
 
-  const flatEntries = [];
+  const flatEntries: TaskType[] = [];
   for (const col of entries.values()) {
     for (const item of col.values()) {
       flatEntries.push(item);
@@ -113,6 +113,7 @@ export default function TasksMain() {
         exact
       >
         <TaskEdit
+          entries={flatEntries}
           collections={cachedCollections}
           onSave={onItemSave}
           onDelete={onItemDelete}
@@ -154,6 +155,7 @@ export default function TasksMain() {
                 exact
               >
                 <TaskEdit
+                  entries={flatEntries}
                   key={itemUid}
                   initialCollection={item.collectionUid}
                   item={item}

src/Tasks/TaskEdit.tsx

@@ -42,8 +42,10 @@ import { History } from "history";
 import ColoredRadio from "../widgets/ColoredRadio";
 import RRule, { RRuleOptions } from "../widgets/RRule";
 import { CachedCollection } from "../Pim/helpers";
+import TaskSelector from "./TaskSelector";
 
 interface PropsType {
+  entries: TaskType[];
   collections: CachedCollection[];
   initialCollection?: string;
   item?: TaskType;
@@ -68,6 +70,8 @@ export default class TaskEdit extends React.PureComponent<PropsType> {
     description: string;
     tags: string[];
     collectionUid: string;
+    showSelectorDialog: boolean;
+    parentEntry: string;
 
     error?: string;
     showDeleteDialog: boolean;
@@ -76,6 +80,7 @@ export default class TaskEdit extends React.PureComponent<PropsType> {
   constructor(props: PropsType) {
     super(props);
     this.state = {
+      parentEntry: "",
       uid: "",
       title: "",
       status: TaskStatusType.NeedsAction,
@@ -85,6 +90,7 @@ export default class TaskEdit extends React.PureComponent<PropsType> {
       description: "",
       tags: [],
       timezone: null,
+      showSelectorDialog: false,
 
       collectionUid: "",
       showDeleteDialog: false,
@@ -322,6 +328,17 @@ export default class TaskEdit extends React.PureComponent<PropsType> {
             </Select>
           </FormControl>
 
+          <Button onClick={() => this.setState({ showSelectorDialog: true })} style={styles.fullWidth}>
+            Select parent task
+          </Button>
+          <TextField
+            style={styles.fullWidth}
+            label="Parent task"
+            name="parent"
+            disabled
+            value={this.props.entries.find((e) => e.uid === this.state.parentEntry)?.title ?? "None"}
+          />
+
           <FormControl style={styles.fullWidth}>
             <InputLabel>
               Status
@@ -492,6 +509,13 @@ export default class TaskEdit extends React.PureComponent<PropsType> {
         >
           Are you sure you would like to delete this task?
         </ConfirmationDialog>
+        <TaskSelector
+          entries={this.props.entries}
+          orig=""
+          open={this.state.showSelectorDialog}
+          onConfirm={(entry) => console.log(entry)}
+          onCancel={() => this.setState({ openSelector: false })}
+        />
       </React.Fragment>
     );
   }

src/Tasks/TaskSelector.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { TaskType } from "../pim-types";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, List } from "@material-ui/core";
+import React from "react";
+import TaskSelectorListItem from "./TaskSelectorListItem";
+
+interface PropsType {
+  entries: TaskType[];
+  orig: string;
+  open: boolean;
+  onConfirm: (entry: string | null) => void;
+  onCancel: () => void;
+}
+
+export default function TaskSelector(props: PropsType) {
+  const [itemId, setItemId] = useState<string | null>(props.orig);
+
+  const select = () => {
+    if (itemId) {
+      props.onConfirm(itemId);
+    }
+  };
+
+  const itemList = props.entries.filter((e) => !e.relatedTo)
+    .map((e) => 
+      <TaskSelectorListItem
+        key={e.uid}
+        entries={props.entries}
+        thisEntry={e}
+        onClick={setItemId}
+        selected={itemId}
+      />
+    );
+
+  return (
+    <Dialog open={props.open} onClose={props.onCancel} fullWidth>
+      <DialogTitle>
+        Select parent task
+      </DialogTitle>
+      <DialogContent>
+        <List>
+          {itemList}
+        </List>
+      </DialogContent>
+      <DialogActions>
+        <Button color="primary" onClick={props.onCancel}>
+          Cancel
+        </Button>
+        <Button color="primary" onClick={() => props.onConfirm(null)}>
+          Clear
+        </Button>
+        <Button color="primary" onClick={select}>
+          Select
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/Tasks/TaskSelectorListItem.tsx

@@ -0,0 +1,32 @@
+import { TaskType } from "../pim-types";
+import { ListItem } from "../widgets/List";
+import React from "react";
+
+interface PropsType {
+  entries: TaskType[];
+  onClick: (uid: string) => void;
+  selected: string | null;
+  thisEntry: TaskType;
+}
+
+export default function TaskSelectorListItem(props: PropsType) {
+  const tasks = props.entries.filter((e) => e.relatedTo === props.thisEntry.uid);
+
+  return (
+    <ListItem
+      primaryText={props.thisEntry.title}
+      selected={props.selected === props.thisEntry.uid}
+      key={props.thisEntry.uid}
+      onClick={() => props.onClick(props.thisEntry.uid)}
+      nestedItems={tasks.map((e) => 
+        <TaskSelectorListItem
+          key={e.uid}
+          entries={props.entries}
+          onClick={props.onClick}
+          selected={props.selected}
+          thisEntry={e}
+        />
+      )}
+    />
+  );
+}