Updated Menus and Menu Items to use newer materialize

This commit is contained in:
Brian McGonagill 2024-07-23 14:59:43 -05:00
parent ea3ed117ff
commit 81559683eb
9 changed files with 59 additions and 54 deletions

View file

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

View file

@ -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();
},
});

View file

@ -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>

View file

@ -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);