Add filters to boards for issue type and priority

Partial implementation for #182
mglaman · Apr 11, 2020 · 73de190 · 73de190
1 parent e3e5eb1
commit 73de190
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 26 deletions.
diff --git a/frontend/src/components/Board/Board.js b/frontend/src/components/Board/Board.js
@@ -16,7 +16,7 @@ function Board({ board, lists, classes }) {
   return (
     <Grid container className={classes.root} spacing={1}>
       {lists.map((list) => (
-        <BoardList key={list.id} board={board} list={list.attributes} />
+        <BoardList key={list.id} board={board} list={list} />
       ))}
     </Grid>
   );

diff --git a/frontend/src/components/Board/List.js b/frontend/src/components/Board/List.js
@@ -28,13 +28,15 @@ function BoardList({ board, list, classes }) {
   useEffect(() => {
     async function fetchListItems() {
       const filterData = {
-        ...list,
-        project_nid: list.project_nid.concat(board.attributes.project_nid),
-        tag: list.tag.concat(board.attributes.tag),
+        ...list.attributes,
+        project_nid: list.attributes.project_nid.concat(
+          board.attributes.project_nid
+        ),
+        tag: list.attributes.tag.concat(board.attributes.tag),
         parent_issue: board.attributes.parent_issue
           ? board.attributes.parent_issue
-          : list.parent_issue,
-        version: list.version.concat(board.attributes.version),
+          : list.attributes.parent_issue,
+        version: list.attributes.version.concat(board.attributes.version),
       };
       const queryString = {
         limit: 100,
@@ -91,14 +93,16 @@ function BoardList({ board, list, classes }) {
           });
       }
     }
+    setListItems([]);
+    setCurrentState("LOADING");
     fetchListItems();
   }, [board, list]);
 
   return (
     <Grid item key={list.id} className={classes.gridItem}>
       <Paper elevation={0} className={classes.paper}>
         <Typography gutterBottom variant="subtitle1">
-          {list.title} ({listItems.length})
+          {list.attributes.title} ({listItems.length})
         </Typography>
         {currentState !== "OK"
           ? [<span key={list.id}>Loading...</span>]

diff --git a/frontend/src/components/Board/NodeBoard.js b/frontend/src/components/Board/NodeBoard.js
@@ -19,8 +19,8 @@ const styles = (theme) => ({
     overflow: "scroll",
   },
   item: {
-    flex: "0 0 300px",
-    maxWidth: "300px",
+    flex: "0 0 320px",
+    maxWidth: "320px",
     position: "relative",
     transform: "translate3d(0, 0, 0)",
     maxHeight: "100%",
@@ -54,17 +54,18 @@ function NodeBoard({ board, classes }) {
   }, [board]);
 
   function NodeBoardList({ issues, label, statuses }) {
+    const listIssues = issues.filter((item) => {
+      return statuses.includes(parseInt(item.field_issue_status));
+    });
     return (
       <Grid item className={classes.item}>
         <Paper elevation={0} className={classes.paper}>
-          <Typography variant="subtitle1">{label}</Typography>
-          {issues
-            .filter((item) => {
-              return statuses.includes(parseInt(item.field_issue_status));
-            })
-            .map((item) => (
-              <KanbanCard key={item.nid} data={item} />
-            ))}
+          <Typography variant="subtitle1">
+            {label} ({listIssues.length})
+          </Typography>
+          {listIssues.map((item) => (
+            <KanbanCard key={item.nid} data={item} />
+          ))}
         </Paper>
       </Grid>
     );

diff --git a/frontend/src/pages/Board.js b/frontend/src/pages/Board.js
@@ -1,5 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { withStyles } from "@material-ui/core/styles";
+import {
+  Grid,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Typography,
+} from "@material-ui/core";
 import { useParams } from "react-router-dom";
 import {
   apiFetch,
@@ -10,17 +18,27 @@ import useWindowHeight from "../hooks/windowHeight";
 import usePageTitle from "../hooks/pageTitle";
 import KanbanBoard from "../components/Board/Board";
 
-const styles = () => ({
+const styles = (theme) => ({
   root: {
     position: "relative",
     height: "100%",
   },
+  boardBar: {
+    padding: theme.spacing(1, 2),
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
 });
 
 function Board({ classes }) {
   const { machineName } = useParams();
   const [currentState, setCurrentState] = useState("LOADING");
   const [board, setBoard] = useState(null);
+  const [lists, setBoardLists] = useState([]);
+  const [filterCategory, setFilterCategory] = useState("");
+  const [filterPriority, setFilterPriority] = useState("");
   const [heightFix, setHeightFix] = useState("100%");
   const windowHeight = useWindowHeight();
 
@@ -44,11 +62,32 @@ function Board({ classes }) {
     getBoard();
   }, [machineName]);
   useEffect(() => {
-    // toolbar height, offset.
+    // toolbar height, offset. filters.
     // @todo keep dynamic based off of styles.
-    setHeightFix(windowHeight - 70);
+    setHeightFix(windowHeight - 70 - 36 - 40);
   }, [windowHeight]);
 
+  useEffect(() => {
+    if (board !== null) {
+      const mappedIncludes = getMappedIncludes(board);
+      const lists = getRelationshipFromMappedIncludes(
+        board.data[0],
+        "lists",
+        mappedIncludes
+      );
+      const newLists = lists.map((item) => ({
+        ...item,
+        attributes: {
+          ...item.attributes,
+          category: filterCategory === "" ? null : filterCategory,
+          priority: filterPriority === "" ? null : filterPriority,
+        },
+      }));
+
+      setBoardLists(newLists);
+    }
+  }, [board, filterCategory, filterPriority]);
+
   const boardTitle = board?.data?.[0].attributes.title;
   usePageTitle(boardTitle ? boardTitle : "Board");
   if (currentState === "LOADING") {
@@ -57,19 +96,68 @@ function Board({ classes }) {
   if (currentState === "ERROR") {
     return <span>Error!</span>;
   }
-  const mappedIncludes = getMappedIncludes(board);
-  const lists = getRelationshipFromMappedIncludes(
-    board.data[0],
-    "lists",
-    mappedIncludes
-  );
   return (
     <div
       className={classes.root}
       style={{
         height: heightFix,
       }}
     >
+      <Grid
+        container
+        justify="space-between"
+        alignItems="center"
+        className={classes.boardBar}
+      >
+        <Grid item>
+          <Typography component="h2" variant="h6">
+            {boardTitle}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <FormControl
+            variant="outlined"
+            className={classes.formControl}
+            size="small"
+          >
+            <InputLabel>Type</InputLabel>
+            <Select
+              label="Type"
+              value={filterCategory}
+              onChange={(event) => setFilterCategory(event.target.value)}
+            >
+              <MenuItem value="">
+                <em>All</em>
+              </MenuItem>
+              <MenuItem value={1}>Bug</MenuItem>
+              <MenuItem value={2}>Task</MenuItem>
+              <MenuItem value={3}>Feature</MenuItem>
+              <MenuItem value={4}>Support</MenuItem>
+              <MenuItem value={5}>Plan</MenuItem>
+            </Select>
+          </FormControl>
+          <FormControl
+            variant="outlined"
+            className={classes.formControl}
+            size="small"
+          >
+            <InputLabel>Priority</InputLabel>
+            <Select
+              label="Priority"
+              value={filterPriority}
+              onChange={(event) => setFilterPriority(event.target.value)}
+            >
+              <MenuItem value="">
+                <em>All</em>
+              </MenuItem>
+              <MenuItem value={400}>Critical</MenuItem>
+              <MenuItem value={300}>Major</MenuItem>
+              <MenuItem value={200}>Normal</MenuItem>
+              <MenuItem value={100}>Minor</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+      </Grid>
       <KanbanBoard board={board.data[0]} lists={lists} />
     </div>
   );