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

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