Updated MyTasks to work like Tasks (multi-select)

client/AdminMgmt/Tasks/taskForm.js

@@ -69,13 +69,13 @@ Template.taskForm.events({
         let taskDateErr = false;
         let userInfo;
         let actDate = [];
-        console.dir(taskNameArr);
+        // console.dir(taskNameArr);
 
         if (taskNameArr == null || taskNameArr == []) {
             taskNameErr = true;
         }
 
-        if (taskDate == null || taskDate == []) {
+        if (taskDateArr == null || taskDateArr == []) {
             taskDateErr = true;
         } else {
             for (i = 0; i < taskDateArr.length; i++) {
@@ -97,7 +97,6 @@ Template.taskForm.events({
                     console.log("    ERROR adding the new task: " + err);
                 } else {
                     console.log("    SUCCESS adding the new task.");
-                    M.Chips.getInstance($("#taskName")).deleteChip();
                     Session.set("taskDateArr", []);
                     $("#taskDate").val("");
                     $("#taskUser").val("");

client/MyTasks/myTasksForm.html

@@ -1,16 +1,20 @@
 <template name="myTasksForm">
     <h4>MyTasks</h4>
-    <div class="row">
+    <form class="row" style="gap: 1em;">
-        <div class="col s12 m6 l6 input-field">
+        <div class="col s12 m6 l6 chips chips-placeholder" id="taskName">
-            <input type="text" class="myTaskName" id="myTaskName" />
-            <label for="myTaskName">Task Name</label>
         </div>
+        
         <div class="col s12 m6 l6 input-field">
             <input type="text" class="datepicker" id="myTaskDate" />
             <label for="myTaskDate">Due Date</label>
-        </div>
-    </div>
             <div class="row">
+                {{#each taskDate in taskDates}}
+                    <div class="col s4 l2 m3">
+                        <span>{{taskDate}}</span>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
         <div class="col s6 m4 l4">
             <p>
                 <label>
@@ -28,8 +32,8 @@
               </p>
         </div>
         <div class="col s12 m4 l4">
-                <a class="waves-effect waves-light btn addNewTask green right">Add</a>
+                <a class="waves-effect waves-light btn addNewTask green white-text right">Add</a>
-        </div>
         </div>
+    </form>
     {{> snackbar}}
 </template>

client/MyTasks/myTasksForm.js

@@ -8,42 +8,70 @@ Template.myTasksForm.onCreated(function() {
 Template.myTasksForm.onRendered(function() {  
     var elems = document.querySelectorAll('.datepicker');
     var instances = M.Datepicker.init(elems, {});
+
+    var elemsd = document.querySelectorAll('.chips');
+    var instancesd = M.Chips.init(elemsd, {});
+
     Session.set("hideComplete", true);
     Session.set("onlyToday", true);
+    Session.set("taskDateArr", []);
 });
 
 Template.myTasksForm.helpers({
-
+    taskDates: function() {
+        return Session.get("taskDateArr");
+    },
 });
 
 Template.myTasksForm.events({
     'click .addNewTask' (event) {
         event.preventDefault();
-        let taskName = $("#myTaskName").val();
+        let taskNameErr = false;
-        let taskDate = $("#myTaskDate").val();
+        let taskDateErr = false;
-        let actDate = new Date(taskDate);
+        let elemsc = document.getElementById('taskName');
+        let taskNameArray = M.Chips.getInstance(elemsc).chipsData;
+        let taskDateArray = Session.get("taskDateArr");
+        let actDate = [];
 
-        if (taskName == null || taskName == "" || taskDate == "" || taskDate == null) {
+        if (taskNameArray == null || taskNameArray == [] || taskNameArray == "") {
-            taskEntryErr = true;
+            taskNameErr = true;
-            showSnackbar("Task Name and Date are Required!", "red");
+        }
-            return;
+
+        if (taskDateArray == null || taskDateArray == []|| taskDateArray == "") {
+            taskDateErr = true;
         } else {
-            Meteor.call("add.mytask", taskName, "self", "selfId", taskDate, actDate, function(err, result) {
+            for (i = 0; i < taskDateArray.length; i++) {
+                // console.log(taskDateArray[i]);
+                let actDateTask = new Date(taskDateArray[i]);
+                actDate.push(actDateTask);
+            }
+        }
+
+        console.log("Date Error: " + taskDateErr + " - Name Error: " + taskNameErr);
+        if (taskDateErr == false && taskNameErr == false) {
+            Meteor.call("add.task", taskNameArray, "self", "selfId", taskDateArray, actDate, function(err, result) {
                 if (err) {
                     console.log("    ERROR adding task for self: " + err);
                     showSnackbar("ERROR adding task for self!", "red");
                 } else {
                     console.log("    SUCCESS adding task for self.");
+                    Session.set("taskDateArr", []);
                     $("#myTaskName").val("");
                     $("#myTaskDate").val("");
+                    showSnackbar("Added Tasks Successfully!", "green");
                 }
             });
+        } else {
+            showSnackbar("Error! Both Task & Date are Required!", "red");
         }
+        
     },
     'click #showMyCompletedTasks' (event) {
         let hide = $("#showMyCompletedTasks").prop('checked');
         if (hide == true) {
             Session.set("hideComplete", false);
+            Session.set("onlyToday", false);
+            $("#showAllTasks").prop('checked', true);
         } else {
             Session.set("hideComplete", true);
         }
@@ -56,5 +84,11 @@ Template.myTasksForm.events({
             Session.set("onlyToday", true);
         }
 
-    }
+    },
+    'change #myTaskDate' (event) {
+        let taskDate = $("#myTaskDate").val();
+        let taskDateArr = Session.get("taskDateArr");
+        taskDateArr.push(taskDate);
+        Session.set("taskDateArr", taskDateArr);
+    },
 });

client/MyTasks/myTasksTbl.html

@@ -2,7 +2,7 @@
     <ul class="collapsible">
         {{#each tasks}}
         <li>
-            <div class="collapsible-header {{#if $eq passedDate false}}yellow{{/if}}{{#if $eq isComplete true}}green lighten-2{{/if}}"><h5>{{taskName}} </h5></div>
+            <div class="collapsible-header {{#if $eq passedDate false}}yellow black-text{{/if}}{{#if $eq isComplete true}}green{{/if}}"><h5>{{taskName}} </h5></div>
             <div class="collapsible-body">
                 <span>
                     <ul class="collection">