feature(client): add autocomplete for plants names and events inputs

Also: - Disabled app zoom
MDeLuise · Aug 9, 2023 · 65dfef9 · 65dfef9
1 parent d44658b
commit 65dfef9
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 130 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
  <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">

diff --git a/frontend/src/components/AddLogEntry.tsx b/frontend/src/components/AddLogEntry.tsx
@@ -5,13 +5,8 @@ import {
  Checkbox,
  Drawer,
  InputLabel,
- MenuItem,
- OutlinedInput,
- Select,
- SelectChangeEvent,
  TextField,
- Theme,
- useTheme
+ Typography,
 } from "@mui/material";
 import { AxiosInstance } from "axios";
 import React, { useState } from "react";
@@ -40,15 +35,6 @@ export default function AddLogEntry(props: {
  const [note, setNote] = useState<string>();
  const [loading, setLoading] = useState<boolean>(false);
 
- const handleChange2 = (_event: any, newValue: string[]) => {
- setSelectedPlantName(newValue);
- };
-
-
- const handleChange = (_event: any, newValue: string[]) => {
- setSelectedEventType(newValue);
- };
-
  const addEvent = (): void => {
  setLoading(true);
  selectedPlantName.forEach((plantId) => {
@@ -104,28 +90,36 @@ export default function AddLogEntry(props: {
  multiple
  options={props.plants.map(pl => pl.personalName)}
  value={selectedPlantName}
- onChange={handleChange2}
- limitTags={3}
+ onChange={(_event: any, newValue: string[]) => setSelectedPlantName(newValue)}
  fullWidth
- // sx={{
- // ".MuiAutocomplete-inputRoot": {
- // flexWrap: "nowrap !important",
- // overflow: "hidden",
- // width: "100%",
- // }
- // }}
- renderOption={(props, option, { selected }) => (
- <li {...props}>
- <Checkbox
- icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
- checkedIcon={<CheckBoxIcon fontSize="small" />}
- style={{ marginRight: 8 }}
- checked={selected}
- />
- {option}
- </li>
- )}
- renderInput={(params) => <TextField {...params} fullWidth />}
+ renderTags={(selected) => {
+ let renderedValues = selected.join(", ");
+ return (
+ <Typography
+ noWrap={true}
+ color="textPrimary"
+ >
+ {renderedValues}
+ </Typography>
+ );
+ }}
+ sx={{
+ ".MuiAutocomplete-inputRoot": {
+ flexWrap: "nowrap !important",
+ }
+ }}
+ renderOption={(props, option, { selected }) => (
+ <li {...props}>
+ <Checkbox
+ icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+ checkedIcon={<CheckBoxIcon fontSize="small" />}
+ style={{ marginRight: 8 }}
+ checked={selected}
+ />
+ {option}
+ </li>
+ )}
+ renderInput={(params) => <TextField {...params} fullWidth />}
  />
  </Box>
 
@@ -135,11 +129,25 @@ export default function AddLogEntry(props: {
  disableCloseOnSelect
  disablePortal
  multiple
- limitTags={3}
  options={props.eventTypes}
  value={selectedEventType}
- getOptionLabel={(option) => titleCase(option)}
- onChange={handleChange}
+ onChange={(_event: any, newValue: string[]) => setSelectedEventType(newValue)}
+ renderTags={(selected) => {
+ let renderedValues = selected.map(ev => titleCase(ev)).join(", ");
+ return (
+ <Typography
+ noWrap={true}
+ color="textPrimary"
+ >
+ {renderedValues}
+ </Typography>
+ );
+ }}
+ sx={{
+ ".MuiAutocomplete-inputRoot": {
+ flexWrap: "nowrap !important",
+ }
+ }}
  renderOption={(props, option, { selected }) => (
  <li {...props}>
  <Checkbox
@@ -153,26 +161,6 @@ export default function AddLogEntry(props: {
  )}
  renderInput={(params) => <TextField {...params} fullWidth />}
  />
- {/* <Select
- labelId="event-type"
- fullWidth
- multiple
- required
- value={selectedEventType}
- onChange={handleEventTypeChange}
- MenuProps={MenuProps}
- input={<OutlinedInput label="Event type" />}
- >
- {props.eventTypes.map((type) => (
- <MenuItem
- key={type}
- value={type}
- style={getEventTypeStyles(type, selectedEventType, theme)}
- >
- {titleCase(type)}
- </MenuItem>
- ))}
- </Select> */}
  </Box>
 
  <Box sx={{ width: "100%" }}>
@@ -198,32 +186,6 @@ export default function AddLogEntry(props: {
  </Box>
  </Box>
 
- {/* <Button sx={{
- backgroundColor: "primary.main",
- color: "white",
- width: "90%",
- margin: "0 auto",
- marginBottom: "20px",
- padding: "15px",
- }}
- onClick={addEvent}
- >Save event</Button> */}
- {/* <LoadingButton
- loading={loading}
- loadingPosition="center"
- sx={{
- backgroundColor: "primary.main",
- color: "secondary",
- width: "90%",
- margin: "0 auto",
- marginBottom: "20px",
- padding: "15px",
- }}
- variant="contained"
- onClick={addEvent}
- >
- Save event
- </LoadingButton> */}
  <Button sx={{
  backgroundColor: loading ? alpha("#3a5e49", .7) : "primary.main",
  color: "white",

diff --git a/frontend/src/components/AllLogs.tsx b/frontend/src/components/AllLogs.tsx
@@ -1,4 +1,4 @@
-import { Accordion, AccordionDetails, AccordionSummary, Box, CircularProgress, FormControl, InputLabel, MenuItem, Select, Typography } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Box, Checkbox, CircularProgress, FormControl, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
 import { AxiosInstance } from "axios";
 import LogEntry from "./LogEntry";
 import { useState, useEffect, useRef } from "react";
@@ -7,10 +7,11 @@ import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import { titleCase } from "../common";
 import { GrClose } from "react-icons/gr";
 import { BsFilter } from "react-icons/bs";
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 function Filters(props: {
- entityNames: string[],
- entityIds: number[],
+ plants: plant[],
  setFilteredPlantIds: (ids: number[]) => void,
  eventTypes: string[],
  setFilteredEventType: (types: string[]) => void;
@@ -46,7 +47,7 @@ function Filters(props: {
  alignItems: "center",
  justifyContent: "space-between",
  }}>
- <Box sx={{display: "flex", alignItems: "center", gap: "5px"}}>
+ <Box sx={{ display: "flex", alignItems: "center", gap: "5px" }}>
  <BsFilter />
  <Typography>Filter</Typography>
  </Box>
@@ -66,52 +67,87 @@ function Filters(props: {
  </AccordionSummary>
  <AccordionDetails sx={{ display: "flex", gap: "10px", justifyContent: "center" }}>
  <FormControl fullWidth>
- <InputLabel id="plant-filter-label">Plant</InputLabel>
- <Select
- labelId="plant-filter-label"
- value={selectedFilteredEntitiyNames}
- label="Plant"
+ <Autocomplete
+ disableCloseOnSelect
+ disablePortal
  multiple
- onChange={(event) => {
- props.setFilteredPlantIds([...event.target.value].map((en) => Number(en)));
- setSelectedFilteredEntitiyNames([...event.target.value]);
+ options={props.plants.map(pl => pl.personalName)}
+ value={selectedFilteredEntitiyNames}
+ onChange={(_event: any, newValue: string[]) => {
+ let selectedIds = props.plants.filter(pl => newValue.includes(pl.personalName)).map(pl => pl.id);
+ props.setFilteredPlantIds(selectedIds);
+ setSelectedFilteredEntitiyNames(newValue);
  }}
- sx={{ width: "100%" }}
- >
- {
- props.entityNames.map((name: string, index: number) => {
- return <MenuItem
- value={props.entityIds[index]}
+ renderTags={(selected) => {
+  let renderedValues = selected.join(", ");
+  return (
+  <Typography
+  noWrap={true}
+ color="textPrimary"
  >
- {name}
- </MenuItem>;
- })
- }
- </Select>
+ {renderedValues}
+ </Typography>
+ );
+ }}
+ sx={{
+ ".MuiAutocomplete-inputRoot": {
+ flexWrap: "nowrap !important",
+ }
+ }}
+ renderOption={(props, option, { selected }) => (
+ <li {...props}>
+ <Checkbox
+ icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+ checkedIcon={<CheckBoxIcon fontSize="small" />}
+ style={{ marginRight: 8 }}
+ checked={selected}
+ />
+ {titleCase(option)}
+ </li>
+ )}
+ renderInput={(params) => <TextField {...params} label="Plant" fullWidth />}
+ />
  </FormControl>
  <FormControl fullWidth>
- <InputLabel id="event-filter-label">Event</InputLabel>
- <Select
- labelId="event-filter-label"
- value={selectedFilteredEventTypes}
- label="Event"
+ <Autocomplete
+ disableCloseOnSelect
+ disablePortal
  multiple
- onChange={(event) => {
- props.setFilteredEventType([...event.target.value]);
- setSelectedFilteredEventTypes([...event.target.value]);
+ options={props.eventTypes}
+ value={selectedFilteredEventTypes}
+ onChange={(_event: any, newValue: string[]) => {
+ props.setFilteredEventType(newValue);
+ setSelectedFilteredEventTypes(newValue);
  }}
- sx={{ width: "100%" }}
- >
- {
- props.eventTypes.map((name: string) => {
- return <MenuItem
- value={name}
+ renderTags={(selected) => {
+  let renderedValues = selected.map(ev => titleCase(ev)).join(", ");
+  return (
+  <Typography
+  noWrap={true}
+ color="textPrimary"
  >
- {titleCase(name)}
- </MenuItem>;
- })
- }
- </Select>
+ {renderedValues}
+ </Typography>
+ );
+ }}
+ sx={{
+ ".MuiAutocomplete-inputRoot": {
+ flexWrap: "nowrap !important",
+ }
+ }}
+ renderOption={(props, option, { selected }) => (
+ <li {...props}>
+ <Checkbox
+ icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+ checkedIcon={<CheckBoxIcon fontSize="small" />}
+ style={{ marginRight: 8 }}
+ checked={selected}
+ />
+ {titleCase(option)}
+ </li>
+ )}
+ renderInput={(params) => <TextField {...params} label="Event" fullWidth />}
+ />
  </FormControl>
  </AccordionDetails>
  </Accordion>
@@ -217,8 +253,7 @@ export default function AllLogs(props: {
  }}>
 
  <Filters
- entityNames={props.plants.map((en) => en.personalName)}
- entityIds={props.plants.map((en) => en.id)}
+ plants={props.plants}
  setFilteredPlantIds={setFilteredPlantId}
  eventTypes={props.eventTypes}
  setFilteredEventType={setFilteredEventType}