make meal detail view to be full screen dialog

this makes editing from detail view possible. Will do that next

client/src/components/ContentWrapper.jsx

@@ -26,7 +26,7 @@ const theme = createMuiTheme({
       main: '#658404',
     },
     secondary: {
-      main: '#607d8b',
+      main: '#466f84',
     },
     error: {
       // main: '#992222',

client/src/components/Images/PhotoDropzone.jsx

@@ -18,7 +18,8 @@ const useStyles = makeStyles((theme) => ({
       // margin: '0.5rem 0.5rem 0.5rem 0',
       '&:hover': {
         cursor: 'pointer',
-      }
+      },
+      marginLeft: '2px', // borderWidth for alignment
     },
   dragAccept: {
     borderColor: theme.palette.primary.main,

client/src/components/Meals/EditMeal.jsx

@@ -153,7 +153,7 @@ const EditMeal = (props) => {
   return (
     <>
       {meal ?
-        <Dialog open={open} onClose={closeDialog} aria-labelledby="form-dialog-mealTitle" onKeyDown={e => {
+        <Dialog open={open} fullScreen onClose={closeDialog} aria-labelledby="form-dialog-mealTitle" onKeyDown={e => {
           if (e.keyCode === 13) {
             // validateForm();
             closeDialog();
@@ -224,6 +224,7 @@ const EditMeal = (props) => {
 
 EditMeal.propTypes = {
   meal: shape({
+    _id: string,
     mealTitle: string,
     images: arrayOf(shape({
       name: string,
@@ -239,6 +240,7 @@ EditMeal.propTypes = {
 
 EditMeal.defaultProps = {
   meal: {
+    _id: 'idnotfound',
     mealTitle: '',
     images: [],
     recipeLink: '',

client/src/components/Meals/MealDetailView.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Divider, Typography, GridList, GridListTile, Card, CardContent } from '@material-ui/core';
+import { Divider, Typography, GridList, GridListTile, Card, CardContent, Dialog } from '@material-ui/core';
 // import MuiAlert from '@material-ui/lab/Alert';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
@@ -26,84 +26,47 @@ const MealDetailView = (props) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
-  const { id: mealId } = useParams();
-  let history = useHistory();
-
-  console.log('param', mealId);
-
-  const emptyMeal = {
-    mealTitle: '',
-    images: [],
-    recipeLink: '',
-    comment: '',
-  };
-
-  const [meal, setMeal] = useState(emptyMeal);
-
+  const { meal, open, closeDialog } = props;
   const [carouselShowing, setCarouselShowing] = useState(false);
   const [carouselStartKey, setCarouselStartKey] = useState(0);
 
-  useEffect(() => {
-    fetchMeal();
-  }, [mealId]);
-
-  const fetchMeal = () => {
-    axios.get(serverURL + '/meals/' + mealId)
-         .then(res => {
-           setMeal(res.data);
-           console.log('get meal', meal);
-         })
-         .catch(err => {
-           console.log(err.message);
-         });
-  }
-
-  const chooseImageAsMain = (image) => {
-    console.log('trying to set image as main', image);
-
-    axios.post(serverURL + '/meals/setAsMain/' + mealId + '/' + image._id)
-         .then(res => {
-           console.log('result of set meal image as main', res);
-           fetchMeal();
-         }).catch(err => {console.log(err)});
-  }
-
   const getCarousel = (key) => {
     return <ImageCarousel images={meal.images} startIndex={key} dismissCarousel={() => {setCarouselShowing(false);}} />;
   };
 
-  const goBack = () => {history.goBack();}
-
   return (
     <>
-      <Navbar pageTitle={t('Meal')}
-              rightSideComponent={<FontButton label={t('Share')} onClick={() => {console.log('share');}} />}
-              leftSideComponent={<BackButton onClick={goBack} />} />
-      <div className={classes.content}>
-        <Card>
-          <CardContent>
-            <Typography variant="h4">{meal.title}</Typography>
-            {meal.recipeLink ?
-              <>
-                <Typography><a href={meal.recipeLink}>{meal.recipeLink}</a></Typography>
-              </> : ''}
-            {meal.comment ?
-              <>
-                <Typography>{meal.comment}</Typography>
-              </> : ''}
-            {meal.images && meal.images.length > 0 ? <ImageGrid images={meal.images} allowChoosingMain={false} onChoosingMain={chooseImageAsMain} /> : ''}
-          </CardContent>
-        </Card>
-        {carouselShowing ? getCarousel(carouselStartKey) : ''}
-      </div>
-
+      {meal ?
+        <Dialog open={open} fullScreen>
+          <Navbar pageTitle={t('Meal')}
+                  rightSideComponent={<FontButton label={t('Share')} onClick={() => {console.log('share');}} />}
+                  leftSideComponent={<BackButton onClick={closeDialog} />} />
+          <div className={classes.content}>
+            <Card>
+              <CardContent>
+                <Typography variant="h4">{meal.title}</Typography>
+                {meal.recipeLink ?
+                  <>
+                    <Typography><a href={meal.recipeLink}>{meal.recipeLink}</a></Typography>
+                  </> : ''}
+                {meal.comment ?
+                  <>
+                    <Typography>{meal.comment}</Typography>
+                  </> : ''}
+                {meal.images && meal.images.length > 0 ? <ImageGrid images={meal.images} allowChoosingMain={false} /> : ''}
+              </CardContent>
+            </Card>
+            {carouselShowing ? getCarousel(carouselStartKey) : ''}
+          </div>
+        </Dialog>
+        : ''}
     </>
   );
 }
 
 MealDetailView.propTypes = {
   meal: shape({
-    mealTitle: string,
+    title: string,
     images: arrayOf(shape({
       name: string,
       path: string,
@@ -111,15 +74,19 @@ MealDetailView.propTypes = {
     recipeLink: '',
     comment: '',
   }),
+  open: bool,
+  closeDialog: func.isRequired,
 }
 
 MealDetailView.defaultProps = {
   meal: {
-    mealTitle: '',
+    _id: 'idnotfound',
+    title: '',
     images: [],
     recipeLink: '',
     comment: '',
   },
+  open: true,
 }
 
 export default MealDetailView;

client/src/components/Meals/Meals.jsx

@@ -10,6 +10,7 @@ import { faUtensils } from "@fortawesome/free-solid-svg-icons";
 import EditMeal from "./EditMeal";
 import EditButton from "../Buttons/EditButton";
 import { useTranslation } from "react-i18next";
+import MealDetailView from "./MealDetailView";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 
@@ -32,6 +33,8 @@ const Meals = () => {
 
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [mealBeingEdited, setMealBeingEdited] = useState(null);
+  const [detailViewOpen, setDetailViewOpen] = useState(false);
+  const [mealBeingViewed, setMealBeingViewed] = useState(null);
 
   const fetchAndUpdateMeals = () => {
     axios.get('http://localhost:5000/meals')
@@ -49,7 +52,10 @@ const Meals = () => {
   }, []);
 
   const goToAddMeal = () => {history.push('/meals/add');};
-  const openMealDetailView = (mealId) => {history.push('/meals/view/' + mealId);};
+  const openMealDetailView = (meal) => {
+    setMealBeingViewed(meal);
+    setDetailViewOpen(true);
+  };
 
   const openEditItemDialog = (mealItem) => {
     setMealBeingEdited(mealItem);
@@ -73,7 +79,7 @@ const Meals = () => {
       }
       return (
         <div key={meal._id}>
-          <ListItem button onClick={() => {openMealDetailView(meal._id);}}>
+          <ListItem button onClick={() => {openMealDetailView(meal);}}>
             <ListItemAvatar>
               {avatar}
             </ListItemAvatar>
@@ -100,6 +106,11 @@ const Meals = () => {
         setMealBeingEdited(null);
         setEditDialogOpen(false);
       }} onDoneEditing={fetchAndUpdateMeals} />
+
+      <MealDetailView open={detailViewOpen} meal={mealBeingViewed} closeDialog={() => {
+        setMealBeingViewed(null);
+        setDetailViewOpen(false);
+      }} />
     </>
   );
 }

client/src/components/Plans/AddPlanItem.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Checkbox, FormControlLabel, TextField } from '@material-ui/core';
+import { Button, Checkbox, FormControlLabel, TextField, Box, Grid } from '@material-ui/core';
 import { Autocomplete } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
@@ -9,8 +9,11 @@ import FontButton from "../Buttons/FontButton";
 import { useHistory } from "react-router-dom";
 import BackButton from "../Buttons/BackButton";
 import { useTranslation } from "react-i18next";
+import { faMinusCircle, faPlusCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import DeleteButton from "../Buttons/DeleteButton";
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   dateSelectionWrapper: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -25,17 +28,48 @@ const useStyles = makeStyles({
     marginLeft: 'auto',
   },
   form: {
-    padding: '1em 3.5em',
+    padding: '1em 2.5em',
   },
   textField: {
     width: '100%',
     marginTop: '1em',
     marginBottom: '1em',
   },
+  buttonGridCell: {
+    maxWidth: 'calc(2em + 8px)',
+    flexGrow: 1,
+    flexBasis: 0,
+    textAlign: 'center',
+  },
+  missingIngredientsBox: {
+    paddingLeft: '2em',
+    marginTop: '0.5em',
+  },
+  newIngredientInputGrid: {
+    marginBottom: '0.5em',
+  },
+  addIngredientButton: {
+    borderRadius: '100%',
+    minWidth: '1em',
+    padding: 0,
+    color: '#ffffff',
+  },
+  addIngredientButtonIcon: {
+    color: theme.palette.secondary.main,
+  },
+  removeIngredientButtonIcon: {
+    color: theme.palette.error.light,
+  },
+  missingIngredientItem: {
+    display: 'flex',
+  },
+  missingIngredientCheckbox: {
+    padding: '5px 9px',
+  },
   submitButton: {
     margin: '1.5em 0 0',
   }
-});
+}));
 
 const AddPlanItem = (props) => {
   const classes = useStyles();
@@ -49,6 +83,12 @@ const AddPlanItem = (props) => {
   const [date, setDate] = useState(new Date());
   const [useDate, setUseDate] = useState(false);
   const [gotEverything, setGotEverything] = useState(true);
+  const [newIngredient, setNewIngredient] = useState('');
+  const [missingIngredients, setMissingIngredients] = useState([]);
+
+  const [, updateState] = React.useState();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+
   const [meals, setMeals] = useState([]);
 
   const fetchAndUpdateMeals = () => {
@@ -89,7 +129,31 @@ const AddPlanItem = (props) => {
       });
     }
   }
-  console.log('title', title)
+
+  const addIngredient = () => {
+    const ingredientToAdd = {
+      name: newIngredient,
+      checked: false,
+    }
+    setMissingIngredients(prevIngredients => [...prevIngredients, ingredientToAdd]);
+    setNewIngredient('');
+  }
+
+  const setIngredientChecked = (ingredient, newCheckedStatus) => {
+    const updatedIngredients = missingIngredients;
+    updatedIngredients.forEach(i => i.checked = (i === ingredient) ? newCheckedStatus : i.checked);
+    setMissingIngredients(updatedIngredients);
+    forceUpdate();
+  }
+
+  const removeIngredient = (ingredient) => {
+    const updatedIngredients = missingIngredients.filter(i => i !== ingredient);
+    console.log(updatedIngredients);
+
+    setMissingIngredients(updatedIngredients);
+    // forceUpdate();
+  }
+
   return (
     <>
 
@@ -97,23 +161,13 @@ const AddPlanItem = (props) => {
               leftSideComponent={<BackButton onClick={() => {history.goBack()}} />}
               rightSideComponent={title ? <FontButton label={t('Done')} onClick={addNewPlan} /> : ''} />
       <form noValidate onSubmit={addNewPlan} className={classes.form}>
-        <Autocomplete
-          id="planTitle"
-          freeSolo
-          value={connectedMeal}
-          onChange={(event, newValue) => {
-            setConnectedMeal(newValue);
-          }}
-          inputValue={title}
-          onInputChange={(event, newInputValue) => {
-            setTitle(newInputValue);
-          }}
-          options={meals}
-          getOptionLabel={(option) => option.title || ''}
-          renderInput={(params) => (
-            <TextField {...params} className={classes.textField} label={t('New Plan')} variant="outlined" autoFocus required />
-          )}
-        />
+        <Autocomplete id="planTitle" freeSolo value={connectedMeal} onChange={(event, newValue) => {
+          setConnectedMeal(newValue);
+        }} inputValue={title} onInputChange={(event, newInputValue) => {
+          setTitle(newInputValue);
+        }} options={meals} getOptionLabel={(option) => option.title || ''} renderInput={(params) => (
+          <TextField {...params} className={classes.textField} label={t('New Plan')} variant="outlined" autoFocus required />
+        )} />
         <div className={classes.dateSelectionWrapper}>
           <FormControlLabel className={classes.dateLabel} label="Date" control={
             <Checkbox checked={useDate} onChange={e => setUseDate(e.target.checked)} color="primary" />
@@ -131,9 +185,47 @@ const AddPlanItem = (props) => {
         <FormControlLabel label={t('Got everything?')} control={
           <Checkbox checked={gotEverything} onChange={e => setGotEverything(e.target.checked)} color="primary" />
         } />
+        <Box className={classes.missingIngredientsBox} hidden={gotEverything}>
+
+          <Grid container spacing={1} justify="space-between" alignItems="flex-end" className={classes.newIngredientInputGrid}>
+            <Grid item xs>
+              <TextField value={newIngredient} color="secondary" name="newIngredient" onChange={e => setNewIngredient(e.target.value)} onKeyUp={(event) => {
+                if (event.key === 'Enter') {
+                  addIngredient();
+                }
+              }} label={t('Add missing ingredient')} variant="standard" />
+            </Grid>
+            <Grid item className={classes.buttonGridCell}>
+              <Button type="button"
+                      disabled={!newIngredient}
+                      className={classes.addIngredientButton}
+                      onClick={addIngredient}
+                      variant='contained'><FontAwesomeIcon className={classes.addIngredientButtonIcon} icon={faPlusCircle} size="2x" /></Button>
+            </Grid>
+          </Grid>
+
+          {missingIngredients.map(ingredient =>
+            <Grid container spacing={1} justify="space-between" alignItems="center">
+              <Grid item xs>
+                <FormControlLabel label={ingredient.name} className={classes.missingIngredientItem} control={
+                  <Checkbox className={classes.missingIngredientCheckbox}
+                            checked={ingredient.checked}
+                            onChange={e => setIngredientChecked(ingredient, e.target.checked)}
+                            color="secondary" />
+                } />
+              </Grid>
+              <Grid item className={classes.buttonGridCell}>
+                <Button type="button"
+                        className={classes.addIngredientButton}
+                        onClick={() => {removeIngredient(ingredient)}}
+                        variant='contained'><FontAwesomeIcon className={classes.removeIngredientButtonIcon} icon={faMinusCircle} size="lg" /></Button>
+              </Grid>
+            </Grid>
+          )}
+        </Box>
         <br />
 
-        <Button type="submit" disabled={!title} className={classes.submitButton} variant='contained' color='primary'>{t('Add')}</Button>
+        <Button type="submit" disabled={!title} className={classes.submitButton} variant='contained' color='primary'>{t('Add Plan')}</Button>
       </form>
     </>
   );

client/src/components/Plans/Plans.jsx

@@ -9,6 +9,7 @@ import Navbar from "../Navbar";
 import AddButton from "../Buttons/AddButton";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import MealDetailView from "../Meals/MealDetailView";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 const dateStringOptions = { year: 'numeric', month: 'numeric', day: 'numeric' };
@@ -34,6 +35,9 @@ const Plans = (props) => {
   const [plans, setPlans] = useState([]);
   const [itemBeingEdited, setItemBeingEdited] = useState(null);
 
+  const [detailViewOpen, setDetailViewOpen] = useState(false);
+  const [mealBeingViewed, setMealBeingViewed] = useState(null);
+
   useEffect(() => {
     fetchAndUpdatePlans();
   }, []);
@@ -49,8 +53,10 @@ const Plans = (props) => {
          });
   }
 
-  const goToMealDetailView = (mealId) => {history.push('/meals/view/' + mealId);};
-
+  const openMealDetailView = (meal) => {
+    setMealBeingViewed(meal);
+    setDetailViewOpen(true);
+  };
   const openEditItemDialog = (planItem) => {
     setItemBeingEdited(planItem);
     console.log(itemBeingEdited, planItem, itemBeingEdited === planItem)
@@ -99,7 +105,7 @@ const Plans = (props) => {
                   {plan.connectedMeal ?
                     <Grid container spacing={1} justify="space-between" alignItems="center">
                       <Grid item xs={9} onClick={() => {openEditItemDialog(plan);}}>{plan.title}</Grid>
-                      <Grid item xs={3} onClick={() => {goToMealDetailView(plan.connectedMeal._id);}}>{getMealAvatar(plan.connectedMeal)}</Grid>
+                      <Grid item xs={3} onClick={() => {openMealDetailView(plan.connectedMeal);}}>{getMealAvatar(plan.connectedMeal)}</Grid>
                     </Grid>
                     : plan.title
                   }
@@ -118,6 +124,10 @@ const Plans = (props) => {
         setEditDialogOpen(false);
       }} onDoneEditing={fetchAndUpdatePlans} />
 
+      <MealDetailView open={detailViewOpen} meal={mealBeingViewed} closeDialog={() => {
+        setMealBeingViewed(null);
+        setDetailViewOpen(false);
+      }} />
     </>
   );
 }

client/src/i18n.js

@@ -15,6 +15,7 @@ const resources = {
       "Settings": "Settings",
       "Edit Meal": "Edit Meal",
       "Edit Plan": "Edit Plan",
+      "Add Plan": "Add Plan",
       "New Meal": "New Meal",
       "New Plan": "New Plan",
       "deleted": "deleted",
@@ -35,6 +36,7 @@ const resources = {
       "Login": "Login",
       "Logout": "Logout",
       "en-GB": "en-US",
+      "Add missing ingredient": "Add missing ingredient",
     }
   },
   de: {
@@ -47,6 +49,7 @@ const resources = {
       "Settings": "Einstellungen",
       "Edit Meal": "Gericht bearbeiten",
       "Edit Plan": "Plan bearbeiten",
+      "Add Plan": "Plan hinzufügen",
       "New Meal": "Gericht erstellen",
       "New Plan": "Plan erstellen",
       "deleted": "gelöscht",
@@ -67,6 +70,7 @@ const resources = {
       "Login": "Anmelden",
       "Logout": "Abmelden",
       "en-GB": "de-DE",
+      "Add missing ingredient": "Fehlende Zutat hinzufügen",
     }
   }
 };

server/controllers/plans.controller.js

@@ -46,6 +46,7 @@ export const updatePlan = async (req, res) => {
       plan.set('hasDate', !!newPlan.date);
       plan.set('gotEverything', newPlan.gotEverything);
       plan.set('missingIngredients', newPlan.missingIngredients);
+      plan.set('connectedMealId', newPlan.connectedMealId);
       plan.set('tags', newPlan.tags);
       plan.save().then(plan => {
         res.status(201).json({ 'info': 'plan updated', plan })