Feat/menu redo (#29)

* adding a new layout to the menu app

* updating flow for new design

* updating styles and adding more layout

* fixing broken menu item model select

* adding links to the menu item stuff

* adjusing bootstrap css

* adding some basic CSS

* adding better working to the menu groups

* format date in the history table

* adding hooks to the news page from the menu page

* fixing some lint issues and adding a no menu items page

* removing end date and auto updating complete date

* adding a seperate component to the UI for the news page

* code cleanup

* code cleanup

* fixing lint issues

modules/common/config.js

@@ -26,4 +26,5 @@ export const serverURLs = {
   list_item: apiUrl + '/list/items/',
   bulk_list_item: apiUrl + '/list/bulk_item/',
   menu_item: apiUrl + '/menu/menu-item/',
+  menu_stats: apiUrl + '/menu/menu-stats/',
 };

modules/index.js

@@ -18,7 +18,7 @@ import List from './list/containers/List'
 import Browse from './browse/containers/Browse'
 import Form from './recipe_form/containers/Form'
 import RecipeView from './recipe/components/RecipeView'
-import Menu from './menu/components/Menu'
+import Menu from './menu/containers/Menu'
 
 // Load required polyfills
 import {
@@ -60,8 +60,7 @@ const main = (
                 <Route path='/list/:list' component={ List } />
                 <Route path='/list' component={ List } />
 
-                <Route path='/menu/:menuId' component={ Menu } />
-                <Route path='/menu' component={ Menu } />
+                <Route path='/Menu' component={ Menu } />
 
                 <Route path='/NotFound' component={ NotFound } />
                 <Redirect path="*" to="/NotFound" />

modules/menu/actions/MenuItemActions.js

@@ -3,10 +3,20 @@ import { serverURLs } from '../../common/config'
 import MenuItemConstants from '../constants/MenuItemConstants';
 import StatusConstants from '../constants/StatusConstants';
 
-export const load = () => {
+export const loadStats = () => {
   return (dispatch) => {
     request()
-      .get(serverURLs.menu_item)
+      .get(serverURLs.menu_stats)
+      .then(res => dispatch({
+        type: MenuItemConstants.MENU_ITEM_LOAD_STATS, data: res.body
+      }))
+  }
+};
+
+export const loadItems = () => {
+  return (dispatch) => {
+    request()
+      .get(serverURLs.menu_item + '?complete=false')
       .then(res => dispatch({
         type: MenuItemConstants.MENU_ITEM_LOAD, data: res.body.results
       }))
@@ -69,6 +79,18 @@ export const save = (id, data) => {
   }
 };
 
+export const completeMenuItem = (id) => {
+  return (dispatch) => {
+    request()
+      .patch(serverURLs.menu_item + id + '/' )
+      .send({complete: true})
+      .then(res => dispatch({
+        type: MenuItemConstants.MENU_ITEM_COMPLETE,
+        id: id
+      }))
+  }
+};
+
 export const remove = (id) => {
   return (dispatch) => {
     dispatch({

modules/menu/actions/RecipeListActions.js

@@ -10,7 +10,7 @@ export const fetchRecipeList = (searchTerm) => {
         titles.push({ value: parseInt(recipe.id, 10), label: recipe.title });
         return recipe;
       });
-      return { options: titles };
+      return titles;
     })
     .catch(err => [])
 };

modules/menu/actions/validation.js

@@ -12,5 +12,4 @@ export const menuItemValidation = [
   { name: 'menu', validators: [double] },
   { name: 'recipe', validators: [double] },
   { name: 'start_date', validators: [isDate] },
-  { name: 'end_date', validators: [isDate] },
 ];

modules/menu/components/FullMenu.js

@@ -0,0 +1,65 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+import OnTheMenu from './OnTheMenu'
+
+const FullMenu = ({ menuItems, completeMenuItem, editMenuItem }) => {
+  let nextWeek = moment().add(1, 'week').startOf('week').format('MMMM D');
+  let thisWeek = moment().startOf('week').format('MMMM D');
+  let lastWeek = moment().subtract(1, 'week').startOf('week').format('MMMM D');
+
+  let groups = menuItems.reduce((acc, menuItem) => {
+    let date = menuItem.start_date;
+    let weekStart = moment(date).startOf('week').format('MMMM D');
+    let weekEnd = moment(date).endOf('week').format('MMMM D');
+
+    let title = weekStart + ' - ' + weekEnd;
+    if (thisWeek === weekStart) {
+      title = 'This Week (' + title + ')'
+    } else if (nextWeek === weekStart) {
+      title = 'Next Week (' + title + ')'
+    } else if (lastWeek === weekStart) {
+      title = 'Last Week (' + title + ')'
+    }
+
+    if (typeof acc[title] === 'undefined') {
+      acc[title] = [];
+    }
+    acc[title].push(menuItem);
+    return acc;
+  }, {});
+
+  if (menuItems.length > 0) {
+    return (
+      <div className="col-xs-12 recipes">
+        {Object.keys(groups).map((key) => (
+          <div key={key} className="row">
+            <h3 className="page-header">{key}</h3>
+            <OnTheMenu
+              completeMenuItem={completeMenuItem}
+              editMenuItem={editMenuItem}
+              menuItems={groups[key]}
+            />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="col-xs-12 recipes">
+      <div className="row">
+        <h3 className="page-header">Nothings on the Menu</h3>
+        <a onClick={() => editMenuItem(0)}>Add one now</a>
+      </div>
+    </div>
+  )
+};
+
+FullMenu.propTypes = {
+  menuItems: PropTypes.array.isRequired,
+  completeMenuItem: PropTypes.func.isRequired,
+  editMenuItem: PropTypes.func.isRequired,
+};
+
+export default FullMenu

modules/menu/components/MenuLayout.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import Tabs from '../components/Tabs'
+import Status from '../containers/Status'
+
+require("../css/menu.scss");
+
+class MenuLayout extends React.Component {
+  render() {
+    return (
+      <div className="container menu-planner">
+        <div className="row">
+          <div className="col-xs-12">
+            <Status/>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-sm-12 col-md-2">
+            <Tabs
+              activeTab={this.props.tab}
+              changeTab={this.props.changeTab}
+              onMenuItemShow={this.props.onMenuItemShow}
+            />
+          </div>
+          <div className="col-sm-12 col-md-10 content">
+            {this.props.children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default MenuLayout

modules/menu/components/OnTheMenu.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ListRecipes from '../../browse/components/ListRecipes'
+
+const OnTheMenu = ({ menuItems, completeMenuItem, editMenuItem }) => (
+  <ListRecipes
+    format="col-xs-12 col-sm-6 col-md-4 col-lg-3"
+    data={menuItems.map(x => {return {...x.recipe_data, menuItemId: x.id}})}
+    footer={(recipe) => (
+      <div className="row recipe-card-news-footer">
+        <div className="col-xs-6">
+          <button
+            className="menu-complete-btn btn btn-success"
+            title="Complete the Recipe"
+            onClick={() => completeMenuItem(recipe.menuItemId)}
+          >
+            <span className="glyphicon glyphicon-ok" aria-hidden="true"/>
+          </button>
+        </div>
+        <div className="col-xs-6">
+          <button
+            className="menu-edit-btn btn btn-warning"
+            title="Edit the Menu Item"
+            onClick={() => editMenuItem(recipe.menuItemId)}
+          >
+            <span className="glyphicon glyphicon-pencil" aria-hidden="true"/>
+          </button>
+        </div>
+      </div>
+    )}
+  />
+);
+
+OnTheMenu.propTypes = {
+  menuItems: PropTypes.array.isRequired,
+  completeMenuItem: PropTypes.func.isRequired,
+  editMenuItem: PropTypes.func.isRequired,
+};
+
+export default OnTheMenu

modules/menu/components/Stats.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
+import moment from 'moment'
+
+const RecipeEvent = ({ stats }) => (
+  <table className="table table-hover">
+    <thead>
+      <tr>
+        <th>Recipe</th>
+        <th>Count</th>
+        <th>Last Made</th>
+      </tr>
+    </thead>
+    <tbody>
+      {stats.map(row => (
+        <tr key={row.slug}>
+          <th><Link to={'/recipe/' + row.slug}>{row.title}</Link></th>
+          <th>{row.num_menuitems}</th>
+          <th>{moment(row.last_made).format('ddd, MMMM D, YYYY')}</th>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+RecipeEvent.propTypes = {
+  stats: PropTypes.array.isRequired,
+};
+
+export default RecipeEvent

modules/menu/components/StatusBar.js

@@ -1,7 +1,5 @@
 import React from 'react'
 
-require('../css/rbc-calendar-alert.scss');
-
 const Status = ({ alert, message, close }) => {
   if (message.length > 1) {
     let cssClass = "alert alert-info alert-dismissible";

modules/menu/components/Tabs.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import TC from '../constants/TabConstants.js'
+
+const Tab = ({ changeTab, activeTab, onMenuItemShow }) => (
+  <ul className="nav nav-pills nav-stacked">
+    <li role="presentation" onClick={() => changeTab(TC.OnTheMenu)} className={activeTab === TC.OnTheMenu ? "active" : ""}>
+      <a>On The Menu</a>
+    </li>
+    <li role="presentation" onClick={() => changeTab(TC.Stats)} className={activeTab === TC.Stats ? "active" : ""}>
+      <a>History</a>
+    </li>
+    <li role="presentation" onClick={() => onMenuItemShow(0)}>
+      <a>New Menu Item</a>
+    </li>
+  </ul>
+);
+
+Tab.propTypes = {
+  changeTab: PropTypes.func,
+  activeTab: PropTypes.string,
+};
+
+export default Tab