add category icon select (still need to add the selecting logic)

client/src/components/Settings/EditMealCategories.jsx

@@ -5,8 +5,11 @@ import { getSettingsOfUser, updateUserSettingsForCategory } from "./settings.uti
 import { useAuth0 } from "@auth0/auth0-react";
 import { useTranslation } from "react-i18next";
 import { makeStyles } from "@material-ui/styles";
-import { Chip } from "@material-ui/core";
+import { Chip, Dialog, GridListTile, GridList, Button } from "@material-ui/core";
 import { Delete, Face } from "@material-ui/icons";
+import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import categoryIcons from "../util/CategoryIcons";
 
 const useStyles = makeStyles(theme => ({
   chipInput: {
@@ -19,12 +22,38 @@ const useStyles = makeStyles(theme => ({
   chip: {
     margin: theme.spacing(0.5),
   },
+  chipIcon: {
+    background: "transparent",
+  },
+  iconSelectDialog: {
+    borderRadius: '25px',
+  },
+  iconGrid: {
+    padding: '1rem',
+  },
+  iconListButton: {
+    height: '50px',
+    width: '50px',
+    minWidth: '50px',
+    maxWidth: '50px',
+    // backgroundColor: theme.palette.text.secondary,
+    border: '1px solid '+ theme.palette.text.primary,
+    borderRadius: '25px',
+  },
+  iconListButtonSelected: {
+    backgroundColor: theme.palette.primary.main,
+  },
+  iconInList: {
+    color: theme.palette.text.primary,
+  }
 }));
 
 const EditMealCategories = (props) => {
   const classes = useStyles();
   const { onUpdateSettings, onUpdateCategories } = props;
   const [categories, setCategories] = useState([]);
+  const [isIconSelectOpen, setIsIconSelectOpen] = useState(false);
+  const [categoryInIconSelect, setCategoryInIconSelect] = useState(null);
   const { user } = useAuth0();
   const { t } = useTranslation();
 
@@ -53,7 +82,7 @@ const EditMealCategories = (props) => {
   }
 
   const addCategory = (categoryToAdd) => {
-    categories.push(categoryToAdd);
+    categories.push({ name: categoryToAdd });
     updateCategories(categories);
   }
 
@@ -64,11 +93,37 @@ const EditMealCategories = (props) => {
 
   console.log('categories', categories);
 
-  return (
-    <ChipInput label={t('Categories')} color="primary" classes={{ inputRoot: classes.chipInput, input: classes.input }} chipRenderer={(data) => {
-      console.log('data', data);
-      return <Chip color="primary" label={data.text} onDelete={data.handleDelete} deleteIcon={<Delete />} className={classes.chip} icon={<Face />} />
-    }} fullWidth variant="outlined" value={categories} onAdd={addCategory} onDelete={removeCategory} />
+  const openIconSelect = (category) => {
+    console.log('open icon select', category);
+    setIsIconSelectOpen(true);
+    setCategoryInIconSelect(category);
+  }
+
+  return (<>
+      <ChipInput label={t('Categories')} color="primary" classes={{ inputRoot: classes.chipInput, input: classes.input }} chipRenderer={(data) => {
+        const { value: category, value: { name, icon } } = data;
+        return <Chip color="primary"
+                     label={name}
+                     clickable
+                     onClick={openIconSelect(category)}
+                     n
+                     onDelete={data.handleDelete}
+                     deleteIcon={<Delete />}
+                     className={classes.chip}
+                     avatar={<FontAwesomeIcon icon={icon || faPlusCircle} className={classes.chipIcon} />} />
+      }} fullWidth variant="outlined" value={categories} onAdd={addCategory} onDelete={removeCategory} />
+      <Dialog open={isIconSelectOpen} PaperProps={{className: classes.iconSelectDialog}}>
+        <GridList cellHeight={60} className={classes.iconGrid} cols={5}>
+          {categoryIcons.map((icon) => (
+            <GridListTile key={icon.iconName} cols={1}>
+              <Button className={`${classes.iconListButton} ${categoryInIconSelect && categoryInIconSelect.icon && categoryInIconSelect.icon.iconName === icon.iconName && classes.iconListButtonSelected}`}>
+                <FontAwesomeIcon icon={icon} size="2x" className={classes.iconInList} />
+              </Button>
+            </GridListTile>
+          ))}
+        </GridList>
+      </Dialog>
+    </>
   );
 }
 

client/src/components/Settings/Settings.jsx

@@ -17,7 +17,6 @@ import { func } from "prop-types";
 import EditMealTags from "./EditMealTags";
 import EditMealCategories from "./EditMealCategories";
 import categoryIcons from "../util/CategoryIcons";
-import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const useStyles = makeStyles(theme => ({

client/src/components/util/CategoryIcons.jsx

@@ -22,16 +22,16 @@ const solidIconNames = [
   'shopping-cart', 'shopping-basket', 'shopping-bag',
   'globe-africa', 'globe-americas', 'globe-asia', 'globe-europe',
   'suitcase-rolling', 'suitcase',
-  'snowflake', 'fire', 'thermometer-empty', 'thermometer-full', 'thermometer-half', 'thermometer-quarter', 'thermometer-three-quarters',
+  'snowflake', 'fire', 'thermometer-empty', 'thermometer-quarter', 'thermometer-half','thermometer-three-quarters', 'thermometer-full',
   'book', 'bookOpen',
   'disease',
   'tag', 'tags', 'thumbtack',
-  '-percent',
+  'percent',
   'user-friends', 'users', 'user', 'user-tie', 'user-nurse', 'user-graduate', 'user-check',
   'hands-helping',
   'houseUser', 'home', 'caravan',
   'newspaper',
-  'baby-carriage', 'baby',
+  'baby-carriage', 'baby', 'child',
   'dog', 'cat'];
 
 function sortFunction(a, b) { // icons will get sorted in the order they appear in the list above

server/models/settings.model.js

@@ -5,8 +5,11 @@ const settingsSchema = mongoose.Schema({
   contacts: [],
   language: String,
   prefersDarkMode: Boolean,
-  mealCategories: [],
-  mealTags: [],
+  mealCategories: [{
+    name: String,
+    icon: Object,
+  }],
+  mealTags: [String],
 });
 
 const Settings = mongoose.model('Settings', settingsSchema);