Updated Menus and Menu Items to use newer materialize

client/Dashboard/dashboard.html

@@ -1,7 +1,7 @@
 <template name="dashboard">
     <h4>My Dashboard</h4>
     <div class="row">
-        <div class="col s12 m6 l6">
+        <div class="col s12 m6 l4">
             <div class="card blue darken-3" id="taskInfoCard">
                 <div class="card-content white-text">
                 <span class="card-title"><h4>My Tasks</h4></span>
@@ -19,17 +19,16 @@
                     </div>
                 </div>
                 <div class="card-action">
-                    <a href="#" class="cardLink white-text" id="taskMgmtLink">List Management</a>
+                    <a href="#" class="cardLink white-text" id="taskMgmtLink">Task Management</a>
                 </div>
             </div>
         </div>
-        <div class="col s12 m6 l6">
+        <div class="col s12 m6 l4">
             <div class="card blue-grey darken-1" id="listInfoCard">
                 <div class="card-content white-text">
-                <span class="card-title"><h4>My Lists</h4></span>
+                <span class="card-title"><h4>My Lists <span class="right">{{listCount}}</span></h4></span>
                     <div class="row">
                         <div class="col s8"><i class="medium material-icons">list</i></div>
-                        <div class="col s4"><h2>{{listCount}}</h2></div>
                     </div>
                 </div>
                 <div class="card-action">
@@ -37,17 +36,17 @@
                 </div>
             </div>
         </div>
-        <div class="col s12 m6 l6">
+        <div class="col s12 m6 l4">
             <div class="card blue darken-3" id="menuInfoCard">
                 <div class="card-content white-text">
                 <span class="card-title"><h4>{{todayDate}}</h4></span>
                 {{#each todayMenuItem}}
                     <div class="row">
-                        <div class="col s12"><h4><i class="medium material-icons">local_dining</i> {{itemName}}</h4></div>
+                        <div class="col s12"><h4><i class="medium material-icons">local_dining</i> <span class="right">{{itemName}}</span></h4></div>
                     </div>
                 {{else}}
                     <div class="row">
-                        <div class="col s12"><h4><i class="medium material-icons">local_dining</i> No Menu Today</h4></div>
+                        <div class="col s12"><h4><i class="medium material-icons">local_dining</i><span clas="right">No Menu Today</span></h4></div>
                     </div>
                 {{/each}}
                 </div>
@@ -57,13 +56,12 @@
             </div>
         </div>
         {{#if isInRole 'systemadmin'}}
-        <div class="col s12 m6 l6">
+        <div class="col s12 m6 l4">
             <div class="card blue-grey darken-1" id="userInfoCard">
                 <div class="card-content white-text">
-                <span class="card-title"><h4>Users</h4></span>
+                <span class="card-title"><h4>Users <span class="right">{{userCount}}</span></h4></span>
                     <div class="row">
                         <div class="col s8"><i class="medium material-icons">person</i></div>
-                        <div class="col s4"><h2>{{userCount}}</h2></div>
                     </div>
                 </div>
                 <div class="card-action">

client/MenuItems/menuItemsForm.js

@@ -1,6 +1,7 @@
 import { MenuItems } from '../../imports/api/menuItems.js';
 import { Menus } from '../../imports/api/menu.js';
 import moment from 'moment';
+import { M } from '../lib/assets/materialize.js';
 
 Template.menuItemsForm.onCreated(function() {
     this.subscribe("myMenus");
@@ -8,7 +9,9 @@ Template.menuItemsForm.onCreated(function() {
 });
 
 Template.menuItemsForm.onRendered(function() {
-    $('.datepicker').datepicker();
+    var elems = document.querySelectorAll('.datepicker');
+    var instances = M.Datepicker.init(elems, {});
+
     Session.set("menuItemErr", false);
 });
 

client/MenuItems/menuItemsTbl.html

@@ -17,7 +17,7 @@
                         {{serveDate}}
                     </td>
                     <td>
-                        <i class="material-icons clickable deleteMenuItem right">delete</i>
+                        <i class="material-icons clickable deleteMenuItem right modal-trigger" data-target="modalDelete">delete</i>
                     </td>
                 </tr>
                 {{/each}}

client/MenuItems/menuItemsTbl.js

@@ -1,4 +1,5 @@
 import { MenuItems } from '../../imports/api/menuItems.js';
+import { M } from '../lib/assets/materialize.js';
 
 Template.menuItemsTbl.onCreated(function() {
     this.autorun( () => {
@@ -7,7 +8,8 @@ Template.menuItemsTbl.onCreated(function() {
 });
 
 Template.menuItemsTbl.onRendered(function() {
-
+    var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
 });
 
 Template.menuItemsTbl.helpers({
@@ -19,13 +21,9 @@ Template.menuItemsTbl.helpers({
 Template.menuItemsTbl.events({
     'click .deleteMenuItem' (event) {
         event.preventDefault();
-        let menuItemId = this._id;
+        Session.set("deleteId", this._id);
-        Meteor.call('delete.menuItem', menuItemId, function(err, result) {
+        Session.set("method", "delete.menuItem");
-            if (err) {
+        Session.set("item", this.itemName);
-                console.log("    ERROR: can't delte menu item: " + err);
+        Session.set("view", "Menu Items");
-            } else {
-                console.log("    SUCCESS deleting menu item.");
-            }
-        });
     },
 });

client/MenuItems/menuitemsForm.html

@@ -1,22 +1,22 @@
 <template name="menuItemsForm">
     <h5>{{menuName}}</h5>
-    <form action="" class="menuItemFrm" id="menuItemFrm">
+    <form class="menuItemFrm row" style="gap: 1em;" id="menuItemFrm">
-        <div class="row">
+        <div class="col s12 m6 l9 input-field outlined">
-            <div class="col s8 input-field">
+            <input type="text" class="menuItemInp" style="{{#if $eq menuItemErr true}}border: 2px solid red{{/if}}" id="menuItemInp" />
-                <input type="text" class="menuItemInp" style="{{#if $eq menuItemErr true}}border: 2px solid red{{/if}}" id="menuItemInp" />
+            <label for="menuItemInp">Add Menu Item</label>
-                <label for="menuItemInp">Add Menu Item</label>
-            </div>
-            <div class="col s4 input-field">
-                <input type="text" class="datepicker" id="dateServed" />
-                <label for="dateserved">Date to Serve</label>
-            </div>
         </div>
-        <div class="row">
+        <div class="col s12 m6 l3 input-field outlined">
-            <div class="col s6">
+            <input type="text" class="datepicker" id="dateServed" />
-                <a class="waves-effect waves-light btn shiftOneDay blue">Shift All By 1 Day</a>
+            <label for="dateserved">Date to Serve</label>
-            </div>
+        </div>
-            <div class="col s6">
+        <div class="col s12">
-                <a class="waves-effect waves-light btn saveMenuItem green right">Add</a>
+            <div class="row">
+                <div class="col s6 m6 l6">
+                    <a class="waves-effect waves-light btn shiftOneDay blue white-text left">Shift All By 1 Day</a>
+                </div>
+                <div class="col s6 m6 l6">
+                    <a class="waves-effect waves-light btn saveMenuItem green white-text right">Add</a>
+                </div>
             </div>
         </div>
     </form>

client/Menus/addMenuModal.html

@@ -2,19 +2,25 @@
     <div id="modalMenu" class="modal">
         <div class="modal-content">
             <h4>Add New Menu</h4>
-            <form action="submit" class="menuAdd">
+            <form class="menuAdd row">
-                <div class="row">
+                <div class="col s12 input-field">
-                    <div class="col s12 input-field">
+                    <input type="text" class="menuNameInp {{#if $eq menuNameErr true}}red lighten-2 white-text{{/if}}" id="menuNameInp" />
-                        <input type="text" class="menuNameInp" style="{{#if $eq menuNameErr true}}border: 2px solid red{{/if}}" id="menuNameInp" />
+                    <label for="menuNameInp">Menu Name</label>
-                        <label for="menuNameInp">Menu Name</label>
-                    </div>
                 </div>
+                {{#if $eq menuNameErr true}}
+                <p class="red-text">
+                    Menu Name is Required!
+                </p>
+                {{/if}}
             </form>
         </div>
         <div class="modal-footer">
             <div class="row">
-                <div class="col s12">
+                <div class="col s6">
-                    <a class="waves-effect waves-light btn saveMenu green right">Add</a>
+                    <a class="waves-effect waves-light left btn orange white-text modal-close">Cancel</a>
+                </div>
+                <div class="col s6">
+                    <a class="waves-effect waves-light btn saveMenu green white-text right modal-close">Add</a>
                 </div>
             </div>
         </div>

client/Menus/addMenuModal.js

@@ -1,4 +1,5 @@
 import { Menus } from '../../imports/api/menu.js';
+import { M } from '../lib/assets/materialize.js';
 
 Template.addMenuModal.onCreated(function() {
     this.subscribe("myMenus");
@@ -6,7 +7,8 @@ Template.addMenuModal.onCreated(function() {
 
 Template.addMenuModal.onRendered(function() {
     Session.set("menuNameErr", false);
-    $('.modal').modal();
+    var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
 });
 
 Template.addMenuModal.helpers({
@@ -31,13 +33,8 @@ Template.addMenuModal.events({
                 } else {
                     console.log("    SUCCESS adding menu.");
                     $("#menuNameInp").val("");
-                    $("#modalMenu").modal('close');
                 }
             });
         }
     },
-    'click .renameMenu' (event) {
-        event.preventDefault();
-
-    },
 });

client/Menus/mainMenuTbl.html

@@ -8,7 +8,7 @@
                     <i class="material-icons clickable markComplete right" id="check_{{this._id}}">check</i>
                 </li>
                 {{/each}}
-                <li class="collection-item clickable addNew" id="addMenu"> + Add New Menu</li>
+                <li class="collection-item clickable addNew modal-trigger" data-target="modalMenu" id="addMenu"> + Add New Menu</li>
             </ul>
         </div>
     </div>

client/Menus/mainMenuTbl.js

@@ -1,4 +1,5 @@
 import { Menus } from '../../imports/api/menu.js';
+import { M } from '../lib/assets/materialize.js';
 
 Template.mainMenuTbl.onCreated(function() {
     this.subscribe("myMenus");
@@ -6,6 +7,8 @@ Template.mainMenuTbl.onCreated(function() {
 
 Template.mainMenuTbl.onRendered(function() {
     Session.set("menuEditMode", false);
+    var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
 });
 
 Template.mainMenuTbl.helpers({
@@ -23,7 +26,7 @@ Template.mainMenuTbl.events({
         if (sender.localName == "li") {
             let menuId = event.currentTarget.id;
             if (menuId == "addMenu") {
-                $('#modalMenu').modal('open');
+                // console.log("add menu clicked");
             } else {
                 console.log("menuId is: " + menuId);
                 Session.set("menuId", menuId);