feat: add combine species (#32)

* feat: add combine species * fix: remove unused states * fix: change species active to boolean
Greenstand · Feb 28, 2021 · 36f4135 · 36f4135
1 parent 030ad92
commit 36f4135
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 5 deletions.
diff --git a/src/api/treeTrackerApi.js b/src/api/treeTrackerApi.js
@@ -197,7 +197,7 @@ export default {
       body: JSON.stringify({
         name: payload.name,
         desc: payload.desc,
-        active: 0,
+        active: true,
         valueFactor: 0,
       }),
     })
@@ -217,7 +217,7 @@ export default {
         id: id,
         name: name,
         desc: desc,
-        active: 0,
+        active: true,
         valueFactor: 0,
       }),
     })
@@ -239,6 +239,27 @@ export default {
       .then(handleResponse)
       .catch(handleError);
   },
+  combineSpecies(combine, name, desc) {
+    const query = `${process.env.REACT_APP_API_ROOT}/api/species/combine`;
+    return fetch(query, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        Authorization: session.token,
+      },
+      body: JSON.stringify({
+        combine,
+        species: {
+          name,
+          desc,
+          active: true,
+          valueFactor: 0,
+        },
+      }),
+    })
+      .then(handleResponse)
+      .catch(handleError);
+  },
   /*
    * get tree count by species
    */

diff --git a/src/components/SpeciesTable.js b/src/components/SpeciesTable.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import {
+  Checkbox,
   Grid,
+  List,
+  ListItem,
+  ListItemText,
   TableContainer,
   Table,
   TableHead,
@@ -52,6 +56,7 @@ const styles = (theme) => ({
   },
   addUser: {
     color: 'white',
+    marginLeft: '20px',
   },
   input: {
     margin: theme.spacing(0, 1, 4, 1),
@@ -93,6 +98,15 @@ const styles = (theme) => ({
     bottom: 12,
     left: 10,
   },
+  listItem: {
+    padding: '0 16px',
+  },
+  paddingBottom: {
+    paddingBottom: '24px',
+  },
+  minWidth: {
+    minWidth: '320px',
+  },
 });
 
 const SpeciesTable = (props) => {
@@ -107,6 +121,8 @@ const SpeciesTable = (props) => {
   const [openDelete, setOpenDelete] = React.useState(false);
   const [sortedSpeciesList, setSortedSpeciesList] = React.useState([]);
   const [option, setOption] = React.useState(sortOptions.byName);
+  const [selected, setSelected] = React.useState([]);
+  const [showCombine, setShowCombine] = React.useState(false);
 
   const tableRef = React.useRef(null);
 
@@ -165,6 +181,16 @@ const SpeciesTable = (props) => {
     setOpenDelete(true);
   };
 
+  const openCombineModal = () => {
+    if (selected.length > 1) setShowCombine(true);
+    else alert('Please select two or more species to be combined!');
+  };
+
+  const handleSelect = (checked, id) => {
+    if (checked) setSelected([...selected, id]);
+    else setSelected(selected.filter((item) => item !== id));
+  };
+
   const renderSpecies = () => {
     return (rowsPerPage > 0
       ? sortedSpeciesList.slice(
@@ -174,6 +200,11 @@ const SpeciesTable = (props) => {
       : sortedSpeciesList
     ).map((species) => (
       <TableRow key={species.id} role="listitem">
+        <TableCell>
+          <Checkbox
+            onChange={(e) => handleSelect(e.target.checked, species.id)}
+          />
+        </TableCell>
         <TableCell component="th" scope="row">
           {species.id}
         </TableCell>
@@ -233,6 +264,13 @@ const SpeciesTable = (props) => {
                 </Grid>
               </Grid>
               <Grid item className={classes.addUserBox}>
+                <Button
+                  onClick={openCombineModal}
+                  variant="outlined"
+                  color="primary"
+                >
+                  COMBINE SPECIES
+                </Button>
                 <Button
                   onClick={() => setIsAdding(true)}
                   variant="contained"
@@ -248,6 +286,7 @@ const SpeciesTable = (props) => {
                 <Table className={classes.table} aria-label="simple table">
                   <TableHead>
                     <TableRow>
+                      <TableCell></TableCell>
                       <TableCell>
                         ID
                         <IconButton
@@ -309,6 +348,15 @@ const SpeciesTable = (props) => {
         deleteSpecies={props.speciesDispatch.deleteSpecies}
         loadSpeciesList={props.speciesDispatch.loadSpeciesList}
       />
+      <CombineModal
+        show={showCombine}
+        setShow={setShowCombine}
+        data={sortedSpeciesList}
+        combineSpecies={props.speciesDispatch.combineSpecies}
+        loadSpeciesList={props.speciesDispatch.loadSpeciesList}
+        selected={selected}
+        styles={{ ...classes }}
+      />
     </>
   );
 };
@@ -323,12 +371,10 @@ const EditModal = ({
   editSpecies,
 }) => {
   const onNameChange = (e) => {
-    console.log(e.target.value);
     setSpeciesEdit({ ...speciesEdit, name: e.target.value });
   };
 
   const onDescChange = (e) => {
-    console.log(e.target.value);
     setSpeciesEdit({ ...speciesEdit, desc: e.target.value });
   };
 
@@ -371,7 +417,6 @@ const EditModal = ({
           </Grid>
           <Grid item className={styles.desc}>
             <TextField
-              autoFocus
               id="desc"
               label="Description"
               type="text"
@@ -397,6 +442,101 @@ const EditModal = ({
   );
 };
 
+const CombineModal = ({
+  show,
+  setShow,
+  selected,
+  data,
+  combineSpecies,
+  loadSpeciesList,
+  styles,
+}) => {
+  const [name, setName] = React.useState('');
+  const [desc, setDesc] = React.useState('');
+
+  const list = data
+    .filter((species) => selected.includes(species.id))
+    .map((species) => species.name);
+
+  const handleClose = () => {
+    setShow(false);
+    setName('');
+    setDesc('');
+  };
+
+  const handleSave = async () => {
+    if (!name || !desc) return;
+
+    setShow(false);
+    await combineSpecies({ combine: selected, name, desc });
+    loadSpeciesList();
+    setName('');
+    setDesc('');
+  };
+
+  return (
+    <Dialog open={show} aria-labelledby="form-dialog-title">
+      <DialogTitle id="form-dialog-title">Combine Species</DialogTitle>
+      <DialogContent>
+        <Grid container>
+          <Grid item>
+            <Typography variant="body1">Combining:</Typography>
+            <List>
+              {list.map((item) => (
+                <ListItem className={styles.listItem} key={item}>
+                  <ListItemText primary={item} />
+                </ListItem>
+              ))}
+            </List>
+            <Typography variant="body1" className={styles.paddingBottom}>
+              As:
+            </Typography>
+            <Grid container>
+              <Grid item className={styles.name}>
+                <TextField
+                  autoFocus
+                  id="name"
+                  label="Name"
+                  type="text"
+                  variant="outlined"
+                  fullWidth
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                  value={name}
+                  className={styles.input}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </Grid>
+              <Grid item className={styles.desc}>
+                <TextField
+                  id="desc"
+                  label="Description"
+                  type="text"
+                  variant="outlined"
+                  fullWidth
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                  value={desc}
+                  className={styles.input}
+                  onChange={(e) => setDesc(e.target.value)}
+                />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button variant="contained" color="primary" onClick={handleSave}>
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
 const DeleteDialog = ({
   speciesEdit,
   setSpeciesEdit,

diff --git a/src/models/species.js b/src/models/species.js
@@ -111,6 +111,11 @@ const species = {
       let deletedSpecies = await api.deleteSpecies(id);
       console.debug('delete outdated species:', deletedSpecies);
     },
+
+    async combineSpecies(payload) {
+      const { combine, name, desc } = payload;
+      await api.combineSpecies(combine, name, desc);
+    },
   },
 };