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

View file

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

View file

@ -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> -->
</div>
<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>
</form>
{{> snackbar}}
</template>

View file

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

View file

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

View file

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

View file

@ -19,7 +19,7 @@
</div>
</div>
<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>
@ -33,7 +33,7 @@
</div>
</div>
<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>
@ -52,7 +52,7 @@
{{/each}}
</div>
<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>
@ -67,7 +67,7 @@
</div>
</div>
<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>

View file

@ -7,10 +7,10 @@
<div class="modal-footer">
<div class="row">
<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 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>

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 (j=0; j < taskNameArr.length; j++) {
TaskItems.insert({
taskName: taskNameArr[j].tag,
taskName: taskNameArr[j].id,
taskDate: taskDateArr[i],
actualDate: actDate[i],
assignedTo: username,