Updated Tasks and the delete confirmation modal for new materialize version.

This commit is contained in:
Brian McGonagill 2024-07-22 16:47:50 -05:00
parent e44ef98be4
commit 3d060e2eef
11 changed files with 76 additions and 41 deletions

View file

@ -5,13 +5,22 @@
{{#each lists}} {{#each lists}}
<li class="collection-item"> <li class="collection-item">
<span class="{{#if $eq listShared true}}green-text{{/if}}">{{listName}}</span> <span class="{{#if $eq listShared true}}green-text{{/if}}">{{listName}}</span>
<i class="material-icons clickable deleteListName tooltipped right" data-position="top" data-tooltip="Delete This List">delete</i> <i class="material-icons clickable deleteListName tooltipped right modal-trigger" data-position="top" data-tooltip-id="deleteListIcon" data-target="modalDelete">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 editListName tooltipped right" data-position="top" data-tooltip-id="editThisListIcon">edit</i>
<i class="material-icons clickable markListComplete tooltipped right" data-position="top" data-tooltip="Mark Complete">check</i> <i class="material-icons clickable markListComplete tooltipped right" data-position="top" data-tooltip-id="markCompleteIcon">check</i>
</li> </li>
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
<div id="deleteListIcon" style="display: none;">
Delete this list
</div>
<div id="editThisListIcon" style="display: none;">
Edit this list
</div>
<div id="markCompleteIcon" style="display: none;">
Mark list complete
</div>
</div> </div>
{{> deleteConfirmationModal}} {{> deleteConfirmationModal}}
</template> </template>

View file

@ -1,13 +1,15 @@
import { Lists } from '../../../imports/api/lists.js'; import { Lists } from '../../../imports/api/lists.js';
import { M } from '../../lib/assets/materialize.js';
Template.listMgmtTbl.onCreated(function() { Template.listMgmtTbl.onCreated(function() {
this.subscribe("myLists"); this.subscribe("myLists");
}); });
Template.listMgmtTbl.onRendered(function() { Template.listMgmtTbl.onRendered(function() {
Meteor.setTimeout(function() { var elems = document.querySelectorAll('.tooltipped');
$('.tooltipped').tooltip(); var instances = M.Tooltip.init(elems, {});
}, 150); var elemm = document.querySelectorAll('.modal');
var instancem = M.Modal.init(elemm, {});
}); });
Template.listMgmtTbl.helpers({ Template.listMgmtTbl.helpers({
@ -23,7 +25,6 @@ Template.listMgmtTbl.events({
Session.set("method", "delete.list"); Session.set("method", "delete.list");
Session.set("item", this.listName); Session.set("item", this.listName);
Session.set("view", "Lists"); Session.set("view", "Lists");
$('#modalDelete').modal('open');
let listId = this._id; let listId = this._id;
}, },
'click .editListName' (event) { 'click .editListName' (event) {

View file

@ -1,9 +1,9 @@
<template name="taskForm"> <template name="taskForm">
<h4>Tasks</h4> <h4>Tasks</h4>
<div class="row"> <form class="row" style="gap: 1em;">
<div class="col s12 m6 l4 input-field chips chips-placeholder" id="taskName"> <div class="col s12 m6 l4 chips chips-placeholder" id="taskName">
</div> </div>
<div class="col s12 m6 l4 input-field"> <div class="col s12 m6 l4 input-field outlined">
<select name="taskUser" id="taskUser" class="taskUser"> <select name="taskUser" id="taskUser" class="taskUser">
<option value="" disabled selected>Assign to user...</option> <option value="" disabled selected>Assign to user...</option>
{{#each taskUsers}} {{#each taskUsers}}
@ -11,7 +11,7 @@
{{/each}} {{/each}}
</select> </select>
</div> </div>
<div class="col s12 m6 l4 input-field"> <div class="col s12 m6 l4 input-field outlined">
<input type="text" class="datepicker" id="taskDate" /> <input type="text" class="datepicker" id="taskDate" />
<label for="taskDate">Task Date (multiple entries)</label> <label for="taskDate">Task Date (multiple entries)</label>
<div class="row"> <div class="row">
@ -22,8 +22,6 @@
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="col s12 m6 l6"> <div class="col s12 m6 l6">
<p> <p>
<label> <label>
@ -33,9 +31,9 @@
</p> </p>
</div> </div>
<div class="col s12 m6 l6"> <div class="col s12 m6 l6">
<a class="waves-effect waves-light btn saveTaskMgmt green right">Add</a> <a class="waves-effect waves-light btn saveTaskMgmt green white-text right">Add</a>
<!-- <a class="waves-effect waves-light btn testChips blue left" id="testChips">Test Chips</a> --> <!-- <a class="waves-effect waves-light btn testChips blue white-text left" id="testChips">Test Chips</a> -->
</div>
</div> </div>
</form>
{{> snackbar}} {{> snackbar}}
</template> </template>

View file

@ -1,4 +1,5 @@
import { Tasks } from '../../../imports/api/tasks.js'; import { Tasks } from '../../../imports/api/tasks.js';
import { M } from '../../lib/assets/materialize.js';
Template.taskForm.onCreated(function() { Template.taskForm.onCreated(function() {
this.subscribe("userList"); this.subscribe("userList");
@ -6,16 +7,18 @@ Template.taskForm.onCreated(function() {
}); });
Template.taskForm.onRendered(function() { Template.taskForm.onRendered(function() {
Meteor.setTimeout(function() { var elems = document.querySelectorAll('select');
$('select').formSelect(); var instances = M.FormSelect.init(elems, {});
}, 100);
$('select').formSelect(); var elemd = document.querySelectorAll('.datepicker');
$('.datepicker').datepicker(); var instanced = M.Datepicker.init(elemd, {});
$('.chips').chips();
$('.chips-placeholder').chips({ var elemc = document.querySelectorAll('.chips');
var instancec = M.Chips.init(elemc, {
placeholder: 'Task Name', placeholder: 'Task Name',
secondaryPlaceholder: '+Task Name', secondaryPlaceholder: '+Task Name',
}); });
Session.set("taskNameErr", false); Session.set("taskNameErr", false);
Session.set("taskUserErr", false); Session.set("taskUserErr", false);
Session.set("taskDateErr", false); Session.set("taskDateErr", false);
@ -41,9 +44,9 @@ Template.taskForm.helpers({
Template.taskForm.events({ Template.taskForm.events({
'click #testChips' (event) { 'click #testChips' (event) {
event.preventDefault(); event.preventDefault();
let taskName = M.Chips.getInstance($("#taskName")).chipsData; let elemcc = document.getElementById('taskName');
let taskName = M.Chips.getInstance(elemcc).chipsData;
console.log(taskName); console.log(taskName);
console.log(Session.get("taskDateArr"));
}, },
'change #taskDate' (event) { 'change #taskDate' (event) {
let taskDate = $("#taskDate").val(); let taskDate = $("#taskDate").val();
@ -53,7 +56,8 @@ Template.taskForm.events({
}, },
'click .saveTaskMgmt' (event) { 'click .saveTaskMgmt' (event) {
event.preventDefault(); event.preventDefault();
let taskNameArr = M.Chips.getInstance($("#taskName")).chipsData; let elemcc = document.getElementById('taskName');
let taskNameArr = M.Chips.getInstance(elemcc).chipsData;
let taskDateArr = Session.get("taskDateArr"); let taskDateArr = Session.get("taskDateArr");
let taskUser = $("#taskUser").val(); let taskUser = $("#taskUser").val();
let taskUserErr = false; let taskUserErr = false;
@ -61,10 +65,9 @@ Template.taskForm.events({
let taskDateErr = false; let taskDateErr = false;
let userInfo; let userInfo;
let actDate = []; let actDate = [];
console.dir(taskNameArr);
// console.log("taskUser value: " + taskUser); if (taskNameArr == null || taskNameArr == []) {
if (taskNameArr == null || taskName == []) {
taskNameErr = true; taskNameErr = true;
} }

View file

@ -24,7 +24,7 @@
{{/if}} {{/if}}
</td> </td>
<td> <td>
<i class="material-icons clickable deleteTask">delete</i> <i class="material-icons clickable deleteTask modal-trigger" data-target="modalDelete">delete</i>
<i class="material-icons clickable markTaskComplete">check</i> <i class="material-icons clickable markTaskComplete">check</i>
</td> </td>
</tr> </tr>

View file

@ -1,11 +1,15 @@
import { TaskItems } from '../../../imports/api/tasks.js'; import { TaskItems } from '../../../imports/api/tasks.js';
import moment from 'moment'; import moment from 'moment';
import { M } from '../../lib/assets/materialize.js';
Template.taskTbl.onCreated(function() { Template.taskTbl.onCreated(function() {
this.subscribe("allTasks"); this.subscribe("allTasks");
}); });
Template.taskTbl.onRendered(function() { Template.taskTbl.onRendered(function() {
var elem = document.querySelectorAll('.modal');
var instance = M.Modal.init(elem, {});
Session.set("hideCompletedTasks", false); Session.set("hideCompletedTasks", false);
}); });
@ -34,7 +38,7 @@ Template.taskTbl.events({
Session.set("method", "delete.task"); Session.set("method", "delete.task");
Session.set("item", this.taskName); Session.set("item", this.taskName);
Session.set("view", "Tasks"); Session.set("view", "Tasks");
$('#modalDelete').modal('open'); // $('#modalDelete').modal('open');
}, },
'click .markTaskComplete' (event) { 'click .markTaskComplete' (event) {
event.preventDefault(); event.preventDefault();

View file

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#" class="cardLink" id="taskMgmtLink">List Management</a> <a href="#" class="cardLink white-text" id="taskMgmtLink">List Management</a>
</div> </div>
</div> </div>
</div> </div>
@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#" class="cardLink" id="listMgmtLink">List Management</a> <a href="#" class="cardLink white-text" id="listMgmtLink">List Management</a>
</div> </div>
</div> </div>
</div> </div>
@ -52,7 +52,7 @@
{{/each}} {{/each}}
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#" class="cardLink" id="myMenuLink">My Menus</a> <a href="#" class="cardLink white-text" id="myMenuLink">My Menus</a>
</div> </div>
</div> </div>
</div> </div>
@ -67,7 +67,7 @@
</div> </div>
</div> </div>
<div class="card-action"> <div class="card-action">
<a href="#" class="cardLink" id="userMgmtLink">User Management</a> <a href="#" class="cardLink white-text" id="userMgmtLink">User Management</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -7,10 +7,10 @@
<div class="modal-footer"> <div class="modal-footer">
<div class="row"> <div class="row">
<div class="col s6 m6 l6"> <div class="col s6 m6 l6">
<a class="modal-close waves-effect waves-light btn left cancelDelete orange">Cancel</a> <a class="modal-close waves-effect waves-light btn left cancelDelete orange white-text">Cancel</a>
</div> </div>
<div class="col s6 m6 l6"> <div class="col s6 m6 l6">
<a class="waves-effect waves-light btn confirmDelete red right">Delete</a> <a class="waves-effect waves-light btn confirmDelete red white-text right modal-close">Delete</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -0,0 +1,3 @@
<template name="userConfig">
</template>

View file

@ -0,0 +1,17 @@
import { UserConfig } from "../../imports/api/userConfig";
Template.userConfig.onCreated(function() {
});
Template.userConfig.onRendered(function() {
});
Template.userConfig.helpers({
});
Template.userConfig.events({
});

View file

@ -36,7 +36,7 @@ Meteor.methods({
for (i=0; i < taskDateArr.length; i++) { for (i=0; i < taskDateArr.length; i++) {
for (j=0; j < taskNameArr.length; j++) { for (j=0; j < taskNameArr.length; j++) {
TaskItems.insert({ TaskItems.insert({
taskName: taskNameArr[j].tag, taskName: taskNameArr[j].id,
taskDate: taskDateArr[i], taskDate: taskDateArr[i],
actualDate: actDate[i], actualDate: actDate[i],
assignedTo: username, assignedTo: username,