Merge pull request #2 from MangoCubes/subtask

Tasks edit: Added toggle switch for hidden and completed tasks

Author: MangoCubes

src/Tasks/TaskSelector.tsx

@@ -1,5 +1,5 @@
 import { TaskType } from "../pim-types";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, List } from "@material-ui/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, List, Switch } from "@material-ui/core";
 import React from "react";
 import TaskSelectorListItem from "./TaskSelectorListItem";
 
@@ -13,9 +13,15 @@ interface PropsType {
 
 export default function TaskSelector(props: PropsType) {
 
-  const itemList = props.entries.filter((e) => !e.relatedTo)
+  const [showHidden, setShowHidden] = React.useState(false);
+  const [showCompleted, setShowCompleted] = React.useState(false);
+
+  const itemList = props.entries
+    .filter((e) => !e.relatedTo && (showHidden || !e.hidden) && (showCompleted || !e.finished))
     .map((e) => 
       <TaskSelectorListItem
+        showHidden={showHidden}
+        showCompleted={showCompleted}
         key={e.uid}
         entries={props.entries}
         thisEntry={e}
@@ -29,6 +35,26 @@ export default function TaskSelector(props: PropsType) {
         Select parent task
       </DialogTitle>
       <DialogContent>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showCompleted}
+                onChange={(e) => setShowCompleted(e.target.checked)}
+              />
+            }
+            label="Show completed"
+          />
+          <FormControlLabel
+            control={
+              <Switch
+                checked={showHidden}
+                onChange={(e) => setShowHidden(e.target.checked)}
+              />
+            }
+            label="Show hidden"
+          />
+        </FormGroup>
         <List>
           {itemList}
         </List>

src/Tasks/TaskSelectorListItem.tsx

@@ -4,12 +4,15 @@ import React from "react";
 
 interface PropsType {
   entries: TaskType[];
+  showHidden: boolean;
+  showCompleted: boolean;
   onClick: (uid: string) => void;
   thisEntry: TaskType;
 }
 
 export default function TaskSelectorListItem(props: PropsType) {
-  const tasks = props.entries.filter((e) => e.relatedTo === props.thisEntry.uid);
+  const tasks = props.entries
+    .filter((e) => e.relatedTo === props.thisEntry.uid && (props.showHidden || !e.hidden) && (props.showCompleted || !e.finished));
 
   return (
     <ListItem
@@ -18,6 +21,8 @@ export default function TaskSelectorListItem(props: PropsType) {
       onClick={() => props.onClick(props.thisEntry.uid)}
       nestedItems={tasks.map((e) => 
         <TaskSelectorListItem
+          showHidden={props.showHidden}
+          showCompleted={props.showCompleted}
           key={e.uid}
           entries={props.entries}
           onClick={props.onClick}