Adding more methods and views, updated dashboards a bit. Still not ready

This commit is contained in:
Brian McGonagill 2022-08-16 16:46:14 -05:00
parent 266dbd0856
commit 42643a37f5
23 changed files with 374 additions and 32 deletions

View file

@ -1,21 +1,15 @@
<template name="catMgmtTbl">
<table class="highlight striped responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<div class="row">
<div class="col s12">
<ul class="collection">
{{#each cats}}
<tr>
<td>{{categoryName}}</td>
<td>
<i class="material-icons clickable deleteCategory">delete</i>
<i class="material-icons clickable editCategory">edit</i>
</td>
</tr>
<li class="collection-item">
{{categoryName}}
<i class="material-icons clickable deleteCategory right">delete</i>
<i class="material-icons clickable editCategory right">edit</i>
</li>
{{/each}}
</tbody>
</table>
</ul>
</div>
</div>
</template>

View file

@ -0,0 +1,5 @@
<template name="listMgmt">
{{> listMgmtForm}}
<hr>
{{> listMgmtTbl}}
</template>

View file

@ -0,0 +1,16 @@
Template.listMgmt.onCreated(function() {
});
Template.listMgmt.onRendered(function() {
});
Template.listMgmt.helpers({
});
Template.listMgmt.events({
});

View file

@ -0,0 +1,18 @@
<template name="listMgmtForm">
<h4>Lists</h4>
<form action="submit" class="listAdd">
<div class="row">
<div class="col s8 m8 l10 input-field">
<input type="text" class="listNameInp" style="{{#if $eq listNameErr true}}border: 2px solid red{{/if}}" id="listNameInp" />
<label for="listNameInp">List Name</label>
</div>
<div class="col s4 m4 l2">
{{#if $eq editMode false}}
<a class="waves-effect waves-light btn saveListMgmt green right">Add</a>
{{else}}
<a class="waves-effect waves-light btn renameListMgmt blue right">Rename</a>
{{/if}}
</div>
</div>
</form>
</template>

View file

@ -0,0 +1,92 @@
import { Lists } from '../../../imports/api/lists.js';
Template.listMgmtForm.onCreated(function() {
this.subscribe("myLists");
});
Template.listMgmtForm.onRendered(function() {
Session.set("listNameMiss", false);
Session.set("listNameEditMode", false);
});
Template.listMgmtForm.helpers({
listNameErr: function() {
return Session.get("listNameMiss");
},
editMode: function() {
return Session.get("listNameEditMode");
}
});
Template.listMgmtForm.events({
'click .saveListMgmt' (event) {
event.preventDefault();
let listName = $("#listNameInp").val();
if (listName == null || listName == "") {
Session.set("listNameMiss", true);
return;
} else {
Meteor.call('add.list', listName, function(err, result) {
if (err) {
console.log(" ERROR adding list name: " + err);
} else {
console.log(" SUCCESS adding list name.");
$("#listNameInp").val("");
}
});
}
},
'click .renameListMgmt' (event) {
event.preventDefault();
let listName = $("#listNameInp").val();
let listId = Session.get("listItemId");
if (listName == null || listName == "") {
Session.set("listNameMiss", true);
return;
} else {
Meteor.call('edit.list', listId, listName, function(err, result) {
if (err) {
console.log(" ERROR editing list name: " + err);
} else {
console.log(" SUCCESS editing list name.");
$("#listNameInp").val("");
Session.set("listNameEditMode", false);
}
});
}
},
'submit .listAdd' (event) {
event.preventDefault();
let editMode = Session.get("listNameEditMode");
let listName = $("#listNameInp").val();
let listId = Session.get("listItemId");
if (listName == null || listName == "") {
Session.set("listNameMiss", true);
return;
} else {
if (editMode == false) {
Meteor.call('add.list', listName, function(err, result) {
if (err) {
console.log(" ERROR adding list name: " + err);
} else {
console.log(" SUCCESS adding list name.");
$("#listNameInp").val("");
}
});
} else {
Meteor.call('edit.list', listId, listName, function(err, result) {
if (err) {
console.log(" ERROR editing list name: " + err);
} else {
console.log(" SUCCESS editing list name.");
$("#listNameInp").val("");
Session.set("listNameEditMode", false);
}
});
}
}
}
});

View file

@ -0,0 +1,16 @@
<template name="listMgmtTbl">
<div class="row">
<div class="col s12">
<ul class="collection">
{{#each lists}}
<li class="collection-item">
{{listName}}
<i class="material-icons clickable deleteListName tooltipped right" data-position="top" data-tooltip="Delete This List">delete</i>
<i class="material-icons clickable editListName tooltipped right" data-position="top" data-tooltip="Edit This List">edit</i>
<i class="material-icons clickable markListComplete tooltipped right" data-position="top" data-tooltip="Mark Complete">check</i>
</li>
{{/each}}
</ul>
</div>
</div>
</template>

View file

@ -0,0 +1,47 @@
import { Lists } from '../../../imports/api/lists.js';
Template.listMgmtTbl.onCreated(function() {
this.subscribe("myLists");
});
Template.listMgmtTbl.onRendered(function() {
$('.tooltipped').tooltip();
});
Template.listMgmtTbl.helpers({
lists: function() {
return Lists.find({});
}
});
Template.listMgmtTbl.events({
'click .deleteListName' (event) {
event.preventDefault();
let listId = this._id;
Meteor.call('delete.list', listId, function(err, result) {
if (err) {
console.log(" ERROR deleting list: " + err);
} else {
console.log(" SUCCESS deleting list.");
}
});
},
'click .editListName' (event) {
event.preventDefault();
let listName = Lists.findOne({ _id: this._id }).listName;
$("#listNameInp").val(listName);
Session.set("listNameEditMode", true);
Session.set("listItemId", this._id);
},
'click .markListComplete' (event) {
event.preventDefault();
let listId = this._id;
Meteor.call('mark.complete', listId, function(err, result) {
if (err) {
console.log(" ERROR marking complete: " + err);
} else {
console.log(" SUCCESS marking complete.");
}
});
}
});

View file

@ -1,12 +1,12 @@
<template name="mgmtPage">
<div class="row">
<div class="col s12 m6 l6">
<div class="col s12">
<ul class="collection with-header">
<li class="collection-header"><h4>Management</h4></li>
{{#if isInRole "systemadmin"}}
<li><a href="#!" id="userMgmt" class="collection-item">User Management</a></li>
{{/if}}
<li><a href="#!" id="manageList" class="collection-item">List</a></li>
<li><a href="#!" id="manageLists" class="collection-item">List</a></li>
<li><a href="#!" id="manageCategory" class="collection-item">Category</a></li>
<li><a href="#!" id="manageProduct" class="collection-item">Product</a></li>
<li><a href="#!" id="manageLocation" class="collection-item">Location</a></li>

View file

@ -23,7 +23,7 @@
{{#each stores}}
<option value="{{storeName}}">{{storeName}}</option>
{{/each}}
<option id="addNewStore" class="modal-trigger" href="modalStore" value="addNewStore">Add New Store</option>
<option id="addNewStore" value="addNewStore">Add New Store</option>
</select>
<label for="prodStore">Store</label>
</div>
@ -46,7 +46,8 @@
<a class="waves-effect waves-light btn saveProdMgmt green right">Add</a>
</div>
</div>
<!-- Modal Structure -->
<!-- Store Modal Structure -->
<div id="modalStore" class="modal">
<div class="modal-content">
<h4>Add New Store</h4>
@ -56,4 +57,26 @@
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
</div>
</div>
<!-- Location Modal Structure -->
<div id="modalLocation" class="modal">
<div class="modal-content">
<h4>Add New Location</h4>
{{> locMgmtForm}}
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
</div>
</div>
<!-- Category Modal Structure -->
<div id="modalCategory" class="modal">
<div class="modal-content">
<h4>Add New Category</h4>
{{> catMgmtForm}}
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Done</a>
</div>
</div>
</template>

View file

@ -62,6 +62,10 @@ Template.prodMgmtForm.events({
// console.log(" ERROR: can't add product: " + err);
} else {
// console.log(" SUCCESS adding product.");
$("#prodName").val("");
$("#prodCategory").val("");
$("#prodStore").val("");
$("#prodLocation").val("");
}
});
}
@ -71,7 +75,7 @@ Template.prodMgmtForm.events({
$("#prodName").val("");
$("#prodCategory").val("");
$("#prodStore").val("");
$("#prodLocation").val("")
$("#prodLocation").val("");
},
'change #prodStore' (event) {
event.preventDefault();
@ -81,7 +85,6 @@ Template.prodMgmtForm.events({
$("#prodStore").val("");
// open a modal to enter store information.
$('#modalStore').modal('open');
}
},
'change #prodLocation' (event) {
@ -98,10 +101,13 @@ Template.prodMgmtForm.events({
event.preventDefault();
let val = $("#prodCategory").val();
if (val == "addNewCategory") {
if (val == "addNewCat") {
$("#prodCategory").val("");
// open a modal to enter store information.
$('#modalCategory').modal('open');
}
},
'click .modal-close' (event) {
$('select').formSelect();
}
});

View file

@ -17,6 +17,69 @@
</div>
</div>
{{/if}}
<div class="col s12 m6 l4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title"><h4>My Lists</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>
{{#if isInRole 'systemadmin'}}
<div class="card-action">
<a href="#" id="usermgmtlink">List Management</a>
</div>
{{/if}}
</div>
</div>
<div class="col s12 m6 l4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title"><h4>My Products</h4></span>
<div class="row">
<div class="col s8"><i class="medium material-icons">qr_code_scanner</i></div>
<div class="col s4"><h2>{{productCount}}</h2></div>
</div>
</div>
{{#if isInRole 'systemadmin'}}
<div class="card-action">
<a href="#" id="usermgmtlink">Product Management</a>
</div>
{{/if}}
</div>
</div>
<div class="col s12 m6 l4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title"><h4>My Stores</h4></span>
<div class="row">
<div class="col s8"><i class="medium material-icons">local_mall</i></div>
<div class="col s4"><h2>{{storeCount}}</h2></div>
</div>
</div>
{{#if isInRole 'systemadmin'}}
<div class="card-action">
<a href="#" id="usermgmtlink">Store Management</a>
</div>
{{/if}}
</div>
</div>
<div class="col s12 m6 l4">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title"><h4>My Categories</h4></span>
<div class="row">
<div class="col s8"><i class="medium material-icons">category</i></div>
<div class="col s4"><h2>{{catCount}}</h2></div>
</div>
</div>
{{#if isInRole 'systemadmin'}}
<div class="card-action">
<a href="#" id="usermgmtlink">Category Management</a>
</div>
{{/if}}
</div>
</div>
</div>
</template>

View file

@ -1,7 +1,15 @@
import { Categories } from "../../imports/api/category";
import { Lists } from "../../imports/api/lists";
import { Products } from "../../imports/api/products";
import { Stores } from "../../imports/api/stores";
Template.dashboard.onCreated(function() {
this.subscribe("userList");
this.subscribe("myLists");
this.subscribe("myCategories");
this.subscribe("storeInfo");
this.subscribe("myProducts");
});
Template.dashboard.onRendered(function() {
@ -11,6 +19,18 @@ Template.dashboard.onRendered(function() {
Template.dashboard.helpers({
userCount: function() {
return Meteor.users.find().count();
},
listCount: function() {
return Lists.find().count();
},
storeCount: function() {
return Stores.find().count();
},
productCount: function() {
return Products.find().count();
},
catCount: function() {
return Categories.find().count();
}
});

View file

@ -19,8 +19,8 @@
</nav>
<ul class="sidenav" id="mobile-demo">
{{#if currentUser}}
<li><a href="#!" id="mylists">My Lists</a></li>
<li><a href="#!" id="manage">Manage</a></li>
<li><a href="#!" id="mylists" class="navBtn">My Lists</a></li>
<li><a href="#!" id="manage" class="navBtn">Manage</a></li>
<li><a href="#!" class="signOut">Sign Out</a></li>
{{else}}
<li><a href="#!" id="login" class="navBtn">Login</a></li>

View file

@ -20,3 +20,7 @@ input.dark-mode {
select.dark-mode {
color: #fcfcfc;
}
li.collection-item {
font-size: 24px;
}

View file

@ -21,7 +21,8 @@ Meteor.methods({
return Lists.insert({
listName: listName,
listOwner: this.userId;
listOwner: this.userId,
listComplete: false,
});
},
'edit.list' (listId, listName) {
@ -47,11 +48,32 @@ Meteor.methods({
let listInfo = Lists.findOne({ _id: listId });
let myId = this.userId;
if (myId == listInfo.owner) {
if (myId == listInfo.listOwner) {
return Lists.remove({ _id: listId });
} else {
console.log("User not allowed to delete this list. Not the owner!");
return("Not Allowed!");
}
},
'mark.complete' (listId) {
check(listId, String);
if (!this.userId) {
throw new Meteor.Error('You are not allowed to mark lists complete. Make sure you are logged in with valid user credentials.');
}
let listInfo = Lists.findOne({ _id: listId });
let myId = this.userId;
if (myId == listInfo.listOwner) {
return Lists.update({ _id: listId }, {
$set: {
listComplete: true,
completedOn: new Date()
}
});
} else {
console.log("User not allowed to mark lists complete. Not a member of the list!");
return("Not Allowed!");
}
}
});

View file

@ -74,3 +74,10 @@ FlowRouter.route('/manageLocation', {
BlazeLayout.render('MainLayout', { main: 'locMgmt' });
}
});
FlowRouter.route('/manageLists', {
name: 'manageLists',
action() {
BlazeLayout.render('MainLayout', { main: 'listMgmt' });
}
});

View file

@ -4,6 +4,7 @@ import { UserConfigOptions } from '../imports/api/userConfigOptions.js';
import { Products } from '../imports/api/products.js';
import { Categories } from '../imports/api/category.js';
import { Locations } from '../imports/api/location.js';
import { Lists } from '../imports/api/lists.js';
Meteor.publish("SystemConfig", function() {
try {
@ -48,3 +49,11 @@ Meteor.publish("myLocations", function() {
console.log(" ERROR pulling location data: " + error);
}
});
Meteor.publish("myLists", function() {
try {
return Lists.find({ listOwner: this.userId, listComplete: false });
} catch (error) {
console.log(" ERROR pulling list data: " + error);
}
});