dev work on menu to prod link

client/AdminMgmt/Tasks/taskForm.js

@@ -18,6 +18,10 @@ Template.taskForm.onRendered(function() {
       placeholder: 'Task Name',
       secondaryPlaceholder: '+Task Name',
     });
+
+    setTimeout(function() {
+        instances = M.FormSelect.init(elems, {});
+    }, 350);
     
     Session.set("taskNameErr", false);
     Session.set("taskUserErr", false);

client/MenuItems/menuItemsTbl.html

@@ -2,8 +2,15 @@
     <div class="row">
         <div class="col s12">
             <table>
+                <thead>
+                    <tr>
+                        <th>Menu Item</th>
+                        <th>Date to Serve</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
                 {{#each thisMenuItems}}
-                <tr class="clickable">
+                <tr>
                     <td>
                         <span>
                             {{#if $eq itemMade true}}
@@ -17,12 +24,16 @@
                         {{serveDate}}
                     </td>
                     <td>
-                        <i class="material-icons clickable deleteMenuItem right modal-trigger" data-target="modalDelete">delete</i>
+                        <i class="material-icons tooltipped modal-trigger deleteMenuItem clickable" href="#modalDelete" data-position="top" data-tooltip-id="deleteMenuTip">delete</i>
+                        <i class="material-icons tooltipped modal-trigger linkToProducts clickable" href="#modalLinkProducts" data-position="top" data-tooltip-id="linkMenuTip">link</i>
                     </td>
                 </tr>
                 {{/each}}
             </table>
+            <div class="tooltip-content" style="display: none;" id="deleteMenuTip">Delete this menu item</div>
+            <div class="tooltip-content" style="display: none;" id="linkMenuTip">Link Products that make up this menu item</div>
         </div>
     </div>
     {{> deleteConfirmationModal}}
+    {{> modalLinkProducts}}
 </template>

client/MenuItems/menuItemsTbl.js

@@ -10,6 +10,14 @@ Template.menuItemsTbl.onCreated(function() {
 Template.menuItemsTbl.onRendered(function() {
     var elems = document.querySelectorAll('.modal');
     var instances = M.Modal.init(elems, {});
+
+    var elemt = document.querySelectorAll('.tooltipped');
+    var instancet = M.Tooltip.init(elemt, {});
+
+    Meteor.setTimeout(function() {
+        var instances = M.Modal.init(elems, {});
+        var instancet = M.Tooltip.init(elemt, {});
+    }, 500);
 });
 
 Template.menuItemsTbl.helpers({
@@ -26,4 +34,8 @@ Template.menuItemsTbl.events({
         Session.set("item", this.itemName);
         Session.set("view", "Menu Items");
     },
+    'click .linkToProducts' (event) {
+        event.preventDefault();
+        Session.set("menuItemId", this._id);
+    }
 });

client/MenuItems/modalLinkProducts.html

@@ -0,0 +1,29 @@
+<template name="modalLinkProducts">
+    <div id="modalLinkProducts" class="modal">
+        <div class="modal-content">
+            <p class="flow-text">Choose Product Items below that are used to make this menu item.</p>
+            <div class="col s12 input-field outlined" id="prouctsForMenudiv">
+                <select name="" id="prodForMenu" class="prodForMenu" multiple>
+                    <option value="" disabled>Choose...</option>
+                    {{#each products}}
+                        <option value="{{prodName}}">{{prodName}}</option>
+                    {{/each}}
+                </select>
+            </div>
+        </div>
+        <br>
+        <hr>
+
+        <div class="modal-footer">
+            <div class="row">
+                <div class="col s6">
+                    <a id="cancelLInk" class="btn waves-effect wave-light orange white-text left modal-close">Cancel</a>
+                </div>
+                <div class="col s6">
+                    <a id="saveLink" class="btn waves-effect waves-light green white-text right modal-close">Save</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{> snackbar}}
+</template>

client/MenuItems/modalLinkProducts.js

@@ -0,0 +1,51 @@
+import { M } from '../lib/assets/materialize.js';
+import { Products } from '../../imports/api/products.js';
+import { MenuItems } from '../../imports/api/menuItems';
+import { MenuProdLinks } from '../../imports/api/menuProdLinks.js';
+
+Template.modalLinkProducts.onCreated(function() {
+    this.subscribe("myMenuItems");
+    this.subscribe("myProducts");
+    this.subscribe("menuProdLinkData");
+});
+
+Template.modalLinkProducts.onRendered(function() {
+    var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
+
+    var elemse = document.querySelectorAll('select');
+    var instancese = M.FormSelect.init(elemse, {
+        dropdownOptions: 4,
+    });
+    
+    setTimeout(function() {
+        var instances = M.Modal.init(elems, {});
+        var instancese = M.FormSelect.init(elemse, {
+            dropdownOptions: 4,
+        });
+    }, 250);
+});
+
+Template.modalLinkProducts.helpers({
+    products: function() {
+        return Products.find({});
+    }
+});
+
+Template.modalLinkProducts.events({
+    'click #saveLink' (event) {
+        event.preventDefault();
+        let menuItemId = Session.get("menuItemId");
+        let linkSelect = document.getElementById('prodForMenu');
+        let links = M.FormSelect.getInstance(linkSelect).getSelectedValues();
+        if (typeof links != undefined && links != [] && links != null) {
+            Meteor.call("add.menuProdLinks", menuItemId, links, function(err, result) {
+                if (err) {
+                    console.log("    ERROR adding product links to this menu item: " + err);
+                } else {
+                    showSnackbar("Products added to Menu Item successfully!", "green");
+                }
+            });
+        }
+    }
+});