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

client/AdminMgmt/ListMgmt/listMgmtTbl.html

@@ -5,13 +5,22 @@
                 {{#each lists}}
                     <li class="collection-item">
                         <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 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>
+                        <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-id="editThisListIcon">edit</i>
+                        <i class="material-icons clickable markListComplete tooltipped right" data-position="top" data-tooltip-id="markCompleteIcon">check</i>
                     </li>
                 {{/each}}
             </ul>
         </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>
     {{> deleteConfirmationModal}}
 </template>

client/AdminMgmt/ListMgmt/listMgmtTbl.js

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

client/AdminMgmt/Tasks/taskForm.html

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

client/AdminMgmt/Tasks/taskForm.js

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

client/AdminMgmt/Tasks/taskTbl.html

@@ -24,7 +24,7 @@
                                 {{/if}}
                             </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>
                             </td>
                         </tr>

client/AdminMgmt/Tasks/taskTbl.js

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