From 69bc887616a11b0db946ac5a241d6f6844cc3130 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Thu, 29 Oct 2020 22:46:00 -0400 Subject: [PATCH 1/3] Create QueueSelector component placeholder --- src/components/QueueSelector/QueueSelector.js | 16 ++++++++++++++++ src/components/QueueSelector/QueueSelector.md | 11 +++++++++++ src/components/QueueSelector/index.js | 1 + 3 files changed, 28 insertions(+) create mode 100644 src/components/QueueSelector/QueueSelector.js create mode 100644 src/components/QueueSelector/QueueSelector.md create mode 100644 src/components/QueueSelector/index.js diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js new file mode 100644 index 0000000..ce9925f --- /dev/null +++ b/src/components/QueueSelector/QueueSelector.js @@ -0,0 +1,16 @@ +import React from "react"; +import PropTypes from "prop-types"; + +export default function QueueSelector(){ + return ( + QueueSelector + ); +}; + +QueueSelector.propTypes = { + +}; + +QueueSelector.defaultProps = { + +}; \ No newline at end of file diff --git a/src/components/QueueSelector/QueueSelector.md b/src/components/QueueSelector/QueueSelector.md new file mode 100644 index 0000000..4cb3f01 --- /dev/null +++ b/src/components/QueueSelector/QueueSelector.md @@ -0,0 +1,11 @@ +QueueSelector + +--- +```jsx +import QueueSelector from "./QueueSelector"; + + +``` +```jsx static + +``` \ No newline at end of file diff --git a/src/components/QueueSelector/index.js b/src/components/QueueSelector/index.js new file mode 100644 index 0000000..4686319 --- /dev/null +++ b/src/components/QueueSelector/index.js @@ -0,0 +1 @@ +export { default } from "./QueueSelector"; \ No newline at end of file From 4f95eb14862e67a9a5bb9ba845bb3e37ea7b1330 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 2 Nov 2020 16:18:46 -0500 Subject: [PATCH 2/3] Update component and docs --- src/components/QueueSelector/QueueSelector.js | 51 +++++++++++++++++-- src/components/QueueSelector/QueueSelector.md | 33 ++++++++++-- 2 files changed, 76 insertions(+), 8 deletions(-) diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js index ce9925f..f4d8c4a 100644 --- a/src/components/QueueSelector/QueueSelector.js +++ b/src/components/QueueSelector/QueueSelector.js @@ -1,16 +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(){ - return ( - QueueSelector +export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) { + return( + { + setSelectedQueues(newValue) + }} + renderInput={(params) => { + return( + + ); + }} + getOptionLabel={(option) => `${option.name} (${option.number_of_items})`} + renderOption={(option, { selected }) => ( + <> + } + checkedIcon={} + 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": [] }; \ No newline at end of file diff --git a/src/components/QueueSelector/QueueSelector.md b/src/components/QueueSelector/QueueSelector.md index 4cb3f01..ea505eb 100644 --- a/src/components/QueueSelector/QueueSelector.md +++ b/src/components/QueueSelector/QueueSelector.md @@ -1,11 +1,38 @@ -QueueSelector +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(); + + + + ``` ```jsx static - + ``` \ No newline at end of file From d728722c32d10f18248ca969086b1018c916b29c Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Mon, 2 Nov 2020 16:19:50 -0500 Subject: [PATCH 3/3] Implement QueueSelector component and modify API call for multiple queues --- src/App.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 8320c96..92034cc 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ 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); @@ -15,15 +16,26 @@ function App() { 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() { + console.log("Clicked!") }/>