Merge pull request #110 from ECN/feature-create-queue-selector-component

Feature create queue selector component

src/App.js

@@ -8,22 +8,34 @@ import ItemTableAppBar from "./components/ItemTableAppBar/";
 import ItemTable from "./components/ItemTable/";
 import ItemViewAppBar from "./components/ItemViewAppBar/";
 import ItemView from "./components/ItemView/";
+import QueueSelector from "./components/QueueSelector/";
 
 function App() {
 	const [darkMode, setDarkMode] = useState(false);
 	const [activeItem, setActiveItem] = useState({});
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
+	const [selectedQueues, setSelectedQueues] = useState([]);
 
 	useEffect( _ => {
 		async function getQueues(){
-			const apiResponse = await fetch("/api/ce");
-			const queueJson = await apiResponse.json();
-			setQueues(queueJson);
+			if (selectedQueues.length > 0){
+				let queuesToLoad = "";
+
+				for (let selectedQueue of selectedQueues){
+					queuesToLoad += `+${selectedQueue.name}`;
+				}
+
+				const apiResponse = await fetch(`/api/${queuesToLoad}`);
+				const queueJson = await apiResponse.json();
+				setQueues(queueJson);
+			} else {
+				setQueues([])
+			}
 		}
 		getQueues();
-	}, []);
+	}, [selectedQueues]);
 
 	useEffect( _ => {
 		let tempItems = [];
@@ -73,6 +85,7 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
+					<QueueSelector selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
 					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
 				</Box>
 

src/components/QueueSelector/QueueSelector.js

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TextField, Checkbox} from "@material-ui/core";
+import { Autocomplete } from "@material-ui/lab";
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+
+export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) {
+    return(
+        <Autocomplete
+            options={queues}
+            onChange={(event, newValue) => {
+                setSelectedQueues(newValue)
+            }}
+            renderInput={(params) => {
+                return(
+                    <TextField
+                        {...params}
+                        placeholder={selectedQueues.length === 0 ? "Click to select queues." : ""}
+                    />
+                );
+            }}
+            getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
+            renderOption={(option, { selected }) => (
+                <>
+                    <Checkbox
+                        icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+                        checkedIcon={<CheckBoxIcon fontSize="small" />}
+                        style={{ marginRight: 8 }}
+                        checked={selected}
+                    />
+                    {`${option.name} (${option.number_of_items})`}
+                </>
+            )}
+            getOptionSelected={ (option, value) => option.name === value.name }
+            disableCloseOnSelect
+            autoComplete
+            disableListWrap
+            openOnFocus
+            fullWidth
+            multiple
+        />
+    );
+};
+
+QueueSelector.propTypes = {
+    /** An array of objects with keys of name and number of items for each queue. */
+    "queues": PropTypes.array,
+    /** State variable to manage selected queues. */
+    "selectedQueues": PropTypes.array.isRequired,
+    /** Function to update state variable that manages selected queues. */
+    "setSelectedQueues": PropTypes.func.isRequired
+};
+
+QueueSelector.defaultProps = {
+    "queues": []
+};

src/components/QueueSelector/QueueSelector.md

@@ -0,0 +1,38 @@
+Allows the selection, removal and viewing of active queues. Its extends the [MUI Autocomplete component](https://material-ui.com/components/autocomplete/).
+
+---
+```jsx
+import React, { useState } from "react";
+import { Paper, makeStyles } from "@material-ui/core";
+import QueueSelector from "./QueueSelector";
+
+const [selectedQueues, setSelectedQueues] = useState([]);
+const queues = [
+    {
+        'name': 'bidc', 
+        'number_of_items': 5
+    }, 
+    {
+        'name': 'epics', 
+        'number_of_items': 6
+    }, 
+    {
+        'name': 'wang', 
+        'number_of_items': 13
+    }
+];
+
+const useStyles = makeStyles({
+    root: {
+        padding: "16px",
+    }
+});
+const classes = useStyles();
+
+<Paper classes={{ root: classes.root }}>
+    <QueueSelector queues={queues} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+</Paper>
+```
+```jsx static
+<QueueSelector queues={queues} selectedQueues={selectedQueues} setSelectedQueues={setSelectedQueues} />
+```

src/components/QueueSelector/index.js

@@ -0,0 +1 @@
+export { default } from "./QueueSelector";