-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #126 from ECN/improve-QueueSelector
Improve queue selector
- Loading branch information
Showing
2 changed files
with
120 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,124 @@ | ||
| import React from "react"; | ||
| import React, { useState, useEffect } from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { TextField, Checkbox} from "@material-ui/core"; | ||
| import { TextField, Checkbox, InputAdornment, Box, useTheme } from "@material-ui/core"; | ||
| import { Autocomplete } from "@material-ui/lab"; | ||
| import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; | ||
| import CheckBoxIcon from '@material-ui/icons/CheckBox'; | ||
| import CircularProgress from '@material-ui/core/CircularProgress'; | ||
| import { useToken } from "../AuthProvider/"; | ||
|
|
||
| export default function QueueSelector({ queueSelectorOpen, setQueueSelectorOpen, selectedQueues, setSelectedQueues }) { | ||
| const open = queueSelectorOpen; | ||
| const setOpen = setQueueSelectorOpen; | ||
| const [queueCounts, setQueueCounts] = useState([]); | ||
| const access_token = useToken(); | ||
| const loading = open && queueCounts.length === 0; | ||
|
|
||
| useEffect( _ => { | ||
| const getQueueCounts = async _ => { | ||
| if (access_token === null){ | ||
| return undefined | ||
| } | ||
|
|
||
| let myHeaders = new Headers(); | ||
| myHeaders.append("Authorization", `Bearer ${access_token}`); | ||
| let requestOptions = { headers: myHeaders }; | ||
|
|
||
| const apiResponse = await fetch(`/api/get_queues`, requestOptions); | ||
| const queueCountJson = await apiResponse.json(); | ||
| setQueueCounts(queueCountJson); | ||
| }; | ||
|
|
||
| if (loading) { | ||
| getQueueCounts(); | ||
| } | ||
|
|
||
| }, [loading, access_token]); | ||
|
|
||
| useEffect(() => { | ||
| if (!open) { | ||
| setQueueCounts([]); | ||
| } | ||
| }, [open]); | ||
|
|
||
| const theme = useTheme(); | ||
|
|
||
| const handleChange = (event, newValue) => { | ||
| setSelectedQueues(newValue) | ||
| }; | ||
|
|
||
| const optionRenderer = (option, { selected }) => ( | ||
| <> | ||
| <Checkbox | ||
| icon={<CheckBoxOutlineBlankIcon fontSize="small" />} | ||
| checkedIcon={<CheckBoxIcon fontSize="small" />} | ||
| style={{ marginRight: 8 }} | ||
| checked={selected} | ||
| /> | ||
| {`${option.name} (${option.number_of_items})`} | ||
| </> | ||
| ); | ||
|
|
||
| export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) { | ||
| return( | ||
| <Autocomplete | ||
| options={queues} | ||
| onChange={(event, newValue) => { | ||
| setSelectedQueues(newValue) | ||
| }} | ||
| renderInput={(params) => { | ||
| return( | ||
| <Box margin={`${theme.spacing(1)}px`}> | ||
| <Autocomplete | ||
| renderInput={(params) => ( | ||
| <TextField | ||
| {...params} | ||
| placeholder={selectedQueues.length === 0 ? "Click to select queues." : ""} | ||
| variant="outlined" | ||
| placeholder={selectedQueues.length === 0 ? "Click or type to select queues." : ""} | ||
| autoFocus | ||
| // The MUI Autocomplete component uses the InputProps.startAdornment to store chips fpr multi-selection. | ||
| // Using InputProps.startAdornment directly will override those chips. Code below is a workaround. | ||
| // See: https://github.com/mui-org/material-ui/issues/19479 | ||
| InputProps={{ | ||
| ...params.InputProps, | ||
| startAdornment: ( | ||
| <> | ||
| <InputAdornment position="start"> | ||
| Active Queues: | ||
| </InputAdornment> | ||
| {params.InputProps.startAdornment} | ||
| </> | ||
| ), | ||
| endAdornment: ( | ||
| <> | ||
| {loading ? <CircularProgress color="inherit" size={20} /> : null} | ||
| {params.InputProps.endAdornment} | ||
| </> | ||
| ) | ||
| }} | ||
| /> | ||
| ); | ||
| }} | ||
| 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 | ||
| /> | ||
| )} | ||
|
|
||
| options={queueCounts} | ||
| value={selectedQueues} | ||
| onChange={handleChange} | ||
| getOptionLabel={(option) => `${option.name} (${option.number_of_items})`} | ||
| renderOption={optionRenderer} | ||
| getOptionSelected={ (option, value) => option.name === value.name } | ||
| size="small" | ||
| open={open} | ||
| onOpen={_ => setOpen(true)} | ||
| onClose={_ => setOpen(false)} | ||
| loading={true} | ||
| disableCloseOnSelect | ||
| disableListWrap | ||
| fullWidth | ||
| multiple | ||
| autoHighlight | ||
| /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| QueueSelector.propTypes = { | ||
| /** An array of objects with keys of name and number of items for each queue. */ | ||
| "queues": PropTypes.array, | ||
| /** State variable to manage open status. */ | ||
| "queueSelectorOpen": PropTypes.bool.isRequired, | ||
| /** Function to update state variable that manages open status. */ | ||
| "setQueueSelectorOpen": PropTypes.func.isRequired, | ||
| /** 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": [] | ||
| "setSelectedQueues": PropTypes.func.isRequired, | ||
| }; |