Lots of changes and additions to the project. Still early, and not usable.

client/AdminMgmt/ProductMgmt/prodMgmt.html

@@ -0,0 +1,5 @@
+<template name="prodMgmt">
+    {{> prodMgmtForm}}
+    <hr>
+    {{> prodMgmtTbl}}
+</template>

client/AdminMgmt/ProductMgmt/prodMgmt.js

@@ -0,0 +1,17 @@
+import { Products } from '../../../imports/api/products.js';
+
+Template.prodMgmt.onCreated(function() {
+    this.subscribe("myProducts");
+});
+
+Template.prodMgmt.onRendered(function() {
+
+});
+
+Template.prodMgmt.helpers({
+
+});
+
+Template.prodMgmt.events({
+
+});

client/AdminMgmt/ProductMgmt/prodMgmtForm.html

@@ -0,0 +1,59 @@
+<template name="prodMgmtForm">
+    <h4>Product Management</h4>
+    <div class="row">
+        <div class="col s12 m6 l6 input-field">
+            <input type="text" class="prodName" style="{{#if $eq prodNameErr true}}border: 2px solid red;{{/if}}" id="prodName" />
+            <label for="prodName">Name*</label>
+        </div>
+        <div class="col s12 m6 l6 input-field">
+            <select name="prodCategory" id="prodCategory" class="prodCategory">
+                <option value="" disabled selected></option>
+                {{#each category}}
+                    <option value="{{categoryName}}">{{categoryName}}</option>
+                {{/each}}
+                <option id="addNewCategory" value="addNewCat">Add New Category</option>
+            </select>
+            <label for="prodCategory">Category</label>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col s12 m6 l6 input-field">
+            <select name="prodStore" id="prodStore" class="prodStore">
+                <option value="" disabled selected></option>
+                {{#each stores}}
+                    <option value="{{storeName}}">{{storeName}}</option>
+                {{/each}}
+                <option id="addNewStore" class="modal-trigger" href="modalStore" value="addNewStore">Add New Store</option>
+            </select>
+            <label for="prodStore">Store</label>
+        </div>
+        <div class="col s12 m6 l6 input-field">
+            <select name="prodLocation" id="prodLocation" class="prodLocation {{#if $eq darkmode true}}dark-mode{{/if}}">
+                <option value="" disabled selected></option>
+                {{#each locations}}
+                    <option value="{{locationName}}">{{locationName}}</option>
+                {{/each}}
+                <option id="addNewLocation" value="addNewLocation">Add New Location</option>
+            </select>
+            <label for="prodLocation">Location</label>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col s6 m6 l6">
+            <a class="waves-effect waves-light btn cancelProdMgmt orange">Cancel</a>
+        </div>
+        <div class="col s6 m6 l6">
+            <a class="waves-effect waves-light btn saveProdMgmt green right">Add</a>
+        </div>
+    </div>
+    <!-- Modal Structure -->
+    <div id="modalStore" class="modal">
+        <div class="modal-content">
+            <h4>Add New Store</h4>
+            {{> storeMgmtForm}}
+        </div>
+        <div class="modal-footer">
+            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
+        </div>
+    </div>
+</template>

client/AdminMgmt/ProductMgmt/prodMgmtForm.js

@@ -0,0 +1,107 @@
+import { Products } from '../../../imports/api/products.js';
+import { Stores } from '../../../imports/api/stores.js';
+import { Categories } from '../../../imports/api/category.js';
+import { Locations } from '../../../imports/api/location.js';
+
+Template.prodMgmtForm.onCreated(function() {
+    this.subscribe("myProducts");
+    this.subscribe("storeInfo");
+    this.subscribe("myCategories");
+    this.subscribe("myLocations");
+});
+
+Template.prodMgmtForm.onRendered(function() {
+    Meteor.setTimeout(function() {
+        $('select').formSelect();
+    }, 200);
+    $('select').formSelect();
+    $('.modal').modal();
+});
+
+Template.prodMgmtForm.helpers({
+    stores: function() {
+        return Stores.find({}); 
+    },
+    prodNameErr: function() {
+        return Session.get("prodNameRed");
+    },
+    category: function() {
+        return Categories.find({});
+    },
+    locations: function() {
+        return Locations.find({});
+    },
+});
+
+Template.prodMgmtForm.events({
+    'click .saveProdMgmt' (event) {
+        event.preventDefault();
+        let name=$("#prodName").val();
+        let cat = $("#prodCategory").val();
+        let store = $("#prodStore").val();
+        let location = $("#prodLocation").val();
+
+        if (cat == null) {
+            cat = "";
+        }
+
+        if (location == null) {
+            location = "";
+        }
+
+        if (store == null) {
+            store = "";
+        }
+
+        if (name == "" || name == null) {
+            Session.set("prodNameRed", true);
+            return;
+        } else {
+            Meteor.call('add.product', name, cat, store, location, function(err, result) {
+                if (err) {
+                    // console.log("     ERROR: can't add product: " + err);
+                } else {
+                    // console.log("    SUCCESS adding product.");
+                }
+            });
+        }
+    },
+    'click .cancelProdMgmt' (event) {
+        event.preventDefault();
+        $("#prodName").val("");
+        $("#prodCategory").val("");
+        $("#prodStore").val("");
+        $("#prodLocation").val("")
+    },
+    'change #prodStore' (event) {
+        event.preventDefault();
+        let val = $("#prodStore").val();
+        
+        if (val == "addNewStore") {
+            $("#prodStore").val("");
+            // open a modal to enter store information.
+            $('#modalStore').modal('open');
+
+        }
+    },
+    'change #prodLocation' (event) {
+        event.preventDefault();
+        let val = $("#prodLocation").val();
+        
+        if (val == "addNewLocation") {
+            $("#prodLocation").val("");
+            // open a modal to enter store information.
+            $('#modalLocation').modal('open');
+        }
+    },
+    'change #prodCategory' (event) {
+        event.preventDefault();
+        let val = $("#prodCategory").val();
+        
+        if (val == "addNewCategory") {
+            $("#prodCategory").val("");
+            // open a modal to enter store information.
+            $('#modalCategory').modal('open');
+        }
+    },
+});

client/AdminMgmt/ProductMgmt/prodMgmtTbl.html

@@ -0,0 +1,31 @@
+<template name="prodMgmtTbl">
+    <div class="row">
+        <div class="col s12 m12 l12">
+            <table class="highlight striped responsive-table">
+                <thead>
+                    <tr>
+                        <th>Product Name</th>
+                        <th>Category</th>
+                        <th>Store</th>
+                        <th>Location</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each products}}
+                        <tr>
+                            <td>{{prodName}}</td>
+                            <td>{{prodCategory}}</td>
+                            <td>{{prodStore}}</td>
+                            <td>{{prodLocation}}</td>
+                            <td>
+                                <i class="material-icons clickable deleteProduct">delete</i>
+                                <i class="material-icons clickable editProduct">edit</i>
+                            </td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>

client/AdminMgmt/ProductMgmt/prodMgmtTbl.js

@@ -0,0 +1,19 @@
+import { Products } from '../../../imports/api/products.js';
+
+Template.prodMgmtTbl.onCreated(function() {
+    this.subscribe("myProducts");
+});
+
+Template.prodMgmtTbl.onRendered(function() {
+
+});
+
+Template.prodMgmtTbl.helpers({
+    products: function() {
+        return Products.find({});
+    },
+});
+
+Template.prodMgmtTbl.events({
+
+});