You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
486 lines
15 KiB
486 lines
15 KiB
$(function () { |
|
// Search Items |
|
$(".searchbar > input").on("keyup", function () { |
|
var rex = new RegExp($(this).val(), "i"); |
|
$(".todo-listing .todo-item").hide(); |
|
$(".todo-listing .todo-item") |
|
.filter(function () { |
|
return rex.test($(this).text()); |
|
}) |
|
.show(); |
|
}); |
|
}); |
|
|
|
// ##################################################### |
|
// Notification Badge |
|
// ##################################################### |
|
|
|
function dynamicNumberNotify(setTaskSectionCount) { |
|
var taskSectionCount = setTaskSectionCount; |
|
|
|
// Get Parents Div(s) |
|
var get_ParentsDiv = $(".todo-item"); |
|
var get_TaskAllListParentsDiv = $(".todo-item.all-todo-list"); |
|
var get_TaskCompletedListParentsDiv = $(".todo-item.current-task-done"); |
|
var get_TaskImportantListParentsDiv = $(".todo-item.current-task-important"); |
|
|
|
// Get Parents Div(s) Counts |
|
var get_TastListCount = get_TaskAllListParentsDiv.length; |
|
var get_CompletedTaskElementsCount = get_TaskCompletedListParentsDiv.length; |
|
var get_ImportantTaskElementsCount = get_TaskImportantListParentsDiv.length; |
|
|
|
// Get Badge Div(s) |
|
var getBadgeAllTaskDiv = $("#all-todo-list .todo-badge"); |
|
var getBadgeCompletedTaskListDiv = $("#current-task-done .todo-badge"); |
|
var getBadgeImportantTaskListDiv = $("#current-task-important .todo-badge"); |
|
|
|
if (taskSectionCount === "allList") { |
|
if (get_TastListCount === 0) { |
|
getBadgeAllTaskDiv.text(""); |
|
return; |
|
} |
|
if (get_TastListCount > 9) { |
|
getBadgeAllTaskDiv.css({ |
|
padding: "2px 0px", |
|
height: "25px", |
|
width: "25px", |
|
}); |
|
} else if (get_TastListCount <= 9) { |
|
getBadgeAllTaskDiv.removeAttr("style"); |
|
} |
|
getBadgeAllTaskDiv.text(get_TastListCount); |
|
} else if (taskSectionCount === "completedList") { |
|
if (get_CompletedTaskElementsCount === 0) { |
|
getBadgeCompletedTaskListDiv.text(""); |
|
return; |
|
} |
|
if (get_CompletedTaskElementsCount > 9) { |
|
getBadgeCompletedTaskListDiv.css({ |
|
padding: "2px 0px", |
|
height: "25px", |
|
width: "25px", |
|
}); |
|
} else if (get_CompletedTaskElementsCount <= 9) { |
|
getBadgeCompletedTaskListDiv.removeAttr("style"); |
|
} |
|
getBadgeCompletedTaskListDiv.text(get_CompletedTaskElementsCount); |
|
} else if (taskSectionCount === "importantList") { |
|
if (get_ImportantTaskElementsCount === 0) { |
|
getBadgeImportantTaskListDiv.text(""); |
|
return; |
|
} |
|
if (get_ImportantTaskElementsCount > 9) { |
|
getBadgeImportantTaskListDiv.css({ |
|
padding: "2px 0px", |
|
height: "25px", |
|
width: "25px", |
|
}); |
|
} else if (get_ImportantTaskElementsCount <= 9) { |
|
getBadgeImportantTaskListDiv.removeAttr("style"); |
|
} |
|
getBadgeImportantTaskListDiv.text(get_ImportantTaskElementsCount); |
|
} |
|
} |
|
|
|
new dynamicNumberNotify("allList"); |
|
new dynamicNumberNotify("completedList"); |
|
new dynamicNumberNotify("importantList"); |
|
|
|
// ##################################################### |
|
// Quill data |
|
// ##################################################### |
|
|
|
var quill = new Quill("#taskdescription", { |
|
modules: { |
|
toolbar: [ |
|
[{ header: [1, 2, false] }], |
|
["bold", "italic", "underline"], |
|
["image", "code-block"], |
|
], |
|
}, |
|
placeholder: "Add description here...", |
|
theme: "snow", // or 'bubble' |
|
}); |
|
|
|
$("#addTaskModal").on("hidden.bs.modal", function (e) { |
|
// do something... |
|
$(this).find("input,textarea,select").val("").end(); |
|
quill.deleteText(0, 2000); |
|
}); |
|
|
|
$("#add-task").on("click", function (event) { |
|
event.preventDefault(); |
|
$(".add-tsk").show(); |
|
$(".edit-tsk").hide(); |
|
$("#addTaskModal").modal("show"); |
|
}); |
|
|
|
// ##################################################### |
|
// Checkbox checked event |
|
// ##################################################### |
|
function donecheckCheckbox() { |
|
$('.todo-item input[type="checkbox"]').click(function () { |
|
if ($(this).is(":checked")) { |
|
$(this).parents(".todo-item").addClass("current-task-done"); |
|
} else if ($(this).is(":not(:checked)")) { |
|
$(this).parents(".todo-item").removeClass("current-task-done"); |
|
} |
|
new dynamicNumberNotify("completedList"); |
|
}); |
|
} |
|
|
|
// ##################################################### |
|
// Remove current task |
|
// ##################################################### |
|
function removeDropdown() { |
|
$(".dropdown-action .dropdown-menu .remove.dropdown-item").click(function () { |
|
if (!$(this).parents(".todo-item").hasClass("current-todo-delete")) { |
|
var getTaskParent = $(this).parents(".todo-item"); |
|
var getTaskClass = getTaskParent.attr("class"); |
|
|
|
var getFirstClass = getTaskClass.split(" ")[1]; |
|
var getSecondClass = getTaskClass.split(" ")[2]; |
|
var getThirdClass = getTaskClass.split(" ")[3]; |
|
|
|
if (getFirstClass === "all-todo-list") { |
|
getTaskParent.removeClass(getFirstClass); |
|
} |
|
if ( |
|
getSecondClass === "current-task-done" || |
|
getSecondClass === "current-task-important" |
|
) { |
|
getTaskParent.removeClass(getSecondClass); |
|
} |
|
if ( |
|
getThirdClass === "current-task-done" || |
|
getThirdClass === "current-task-important" |
|
) { |
|
getTaskParent.removeClass(getThirdClass); |
|
} |
|
$(this).parents(".todo-item").addClass("current-todo-delete"); |
|
} else if ($(this).parents(".todo-item").hasClass("current-todo-delete")) { |
|
$(this).parents(".todo-item").removeClass("current-todo-delete"); |
|
} |
|
new dynamicNumberNotify("allList"); |
|
new dynamicNumberNotify("completedList"); |
|
new dynamicNumberNotify("importantList"); |
|
}); |
|
} |
|
|
|
// ##################################################### |
|
// Remove current task permanently |
|
// ##################################################### |
|
function deletePermanentlyDropdown() { |
|
$(".dropdown-action .dropdown-menu .permanent-delete.dropdown-item").on( |
|
"click", |
|
function (event) { |
|
event.preventDefault(); |
|
if ($(this).parents(".todo-item").hasClass("current-todo-delete")) { |
|
$(this).parents(".todo-item").remove(); |
|
} |
|
} |
|
); |
|
} |
|
|
|
// ##################################################### |
|
// Move current task with other tasks |
|
// ##################################################### |
|
function reviveTaskDropdown() { |
|
$(".dropdown-action .dropdown-menu .revive.dropdown-item").on( |
|
"click", |
|
function (event) { |
|
event.preventDefault(); |
|
if ($(this).parents(".todo-item").hasClass("current-todo-delete")) { |
|
var getTaskParent = $(this).parents(".todo-item"); |
|
var getTaskClass = getTaskParent.attr("class"); |
|
var getFirstClass = getTaskClass.split(" ")[1]; |
|
$(this).parents(".todo-item").removeClass(getFirstClass); |
|
$(this).parents(".todo-item").addClass("all-todo-list"); |
|
$(this).parents(".todo-item").hide(); |
|
} |
|
new dynamicNumberNotify("allList"); |
|
new dynamicNumberNotify("completedList"); |
|
new dynamicNumberNotify("importantList"); |
|
} |
|
); |
|
} |
|
|
|
// ##################################################### |
|
// Make task Important |
|
// ##################################################### |
|
function importantTaskDropdown() { |
|
$(".important").click(function () { |
|
if (!$(this).parents(".todo-item").hasClass("current-task-important")) { |
|
$(this).parents(".todo-item").addClass("current-task-important"); |
|
$(this).html("Back to List"); |
|
} else if ( |
|
$(this).parents(".todo-item").hasClass("current-task-important") |
|
) { |
|
$(this).parents(".todo-item").removeClass("current-task-important"); |
|
$(this).html("Important"); |
|
$(".list-group-item-action#all-todo-list").trigger("click"); |
|
} |
|
new dynamicNumberNotify("importantList"); |
|
}); |
|
} |
|
|
|
// ##################################################### |
|
// Edit Current task |
|
// ##################################################### |
|
function editTaskDropdown() { |
|
$(".dropdown-action .dropdown-menu .edit.dropdown-item").click(function () { |
|
event.preventDefault(); |
|
var $_outerThis = $(this); |
|
|
|
$(".add-tsk").hide(); |
|
$(".edit-tsk").show(); |
|
|
|
var $_taskTitle = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-header") |
|
.attr("data-todo-header"); |
|
var $_taskText = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-subtext") |
|
.attr("data-todosubtextText"); |
|
var $_taskJson = JSON.parse($_taskText); |
|
|
|
$("#task").val($_taskTitle); |
|
quill.setContents($_taskJson); |
|
|
|
$(".edit-tsk") |
|
.off("click") |
|
.on("click", function (event) { |
|
var $_innerThis = $(this); |
|
var $_task = document.getElementById("task").value; |
|
var $_taskDescription = |
|
document.getElementById("taskdescription").value; |
|
// Get current date |
|
var today = new Date(); |
|
var dd = String(today.getDate()).padStart(2, "0"); |
|
var mm = String(today.getMonth()); //January is 0! |
|
var yyyy = today.getFullYear(); |
|
var monthNames = [ |
|
"Jan", |
|
"Feb", |
|
"Mar", |
|
"Apr", |
|
"May", |
|
"Jun", |
|
"Jul", |
|
"Aug", |
|
"Sep", |
|
"Oct", |
|
"Nov", |
|
"Dec", |
|
]; |
|
today = dd + " " + monthNames[mm] + " " + yyyy; |
|
// getting text of task title and task description |
|
var $_taskDescriptionText = quill.getText(); |
|
var $_taskDescriptionInnerHTML = quill.root.innerHTML; |
|
|
|
var delta = quill.getContents(); |
|
var $_textDelta = JSON.stringify(delta); |
|
|
|
var length = 125; |
|
|
|
var trimmedString = |
|
$_taskDescriptionText.length > length |
|
? $_taskDescriptionText.substring(0, length - 3) + "..." |
|
: $_taskDescriptionText; |
|
|
|
var $_taskEditedTitle = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-header") |
|
.html($_task); |
|
var $_taskEditedText = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-subtext") |
|
.html(trimmedString); |
|
var $_taskEditedText = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-time") |
|
.html(today); |
|
|
|
var $_taskEditedTitleDataAttr = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-header") |
|
.attr("data-todo-header", $_task); |
|
var $_taskEditedTextDataAttr = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-subtext") |
|
.attr("data-todosubtextText", $_textDelta); |
|
var $_taskEditedTextDataAttr = $_outerThis |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-subtext") |
|
.attr("data-todosubtext-html", $_taskDescriptionInnerHTML); |
|
$("#addTaskModal").modal("hide"); |
|
}); |
|
$("#addTaskModal").modal("show"); |
|
}); |
|
} |
|
|
|
// ##################################################### |
|
// Click on current task get more detail |
|
// ##################################################### |
|
function taskItem() { |
|
$(".todo-item .content-todo").on("click", function (event) { |
|
event.preventDefault(); |
|
|
|
var $_taskTitle = $(this) |
|
.parents(".todo-item") |
|
.children() |
|
.find(".todo-header") |
|
.attr("data-todo-header"); |
|
var $todoHtml = $(this).find(".todo-subtext").attr("data-todosubtext-html"); |
|
|
|
$(".task-heading").text($_taskTitle); |
|
$(".task-text").html($todoHtml); |
|
|
|
$("#todoShowListItem").modal("show"); |
|
}); |
|
} |
|
|
|
var $btns = $(".list-group-item-action").click(function () { |
|
if (this.id == "all-todo-list") { |
|
var $el = $("." + this.id).fadeIn(); |
|
$("#all-todo-container > div").not($el).hide(); |
|
} else if (this.id == "current-todo-delete") { |
|
var $el = $("." + this.id).fadeIn(); |
|
$("#all-todo-container > div").not($el).hide(); |
|
} else { |
|
var $el = $("." + this.id).fadeIn(); |
|
$("#all-todo-container > div").not($el).hide(); |
|
} |
|
$btns.removeClass("active"); |
|
$(this).addClass("active"); |
|
}); |
|
|
|
donecheckCheckbox(); |
|
removeDropdown(); |
|
deletePermanentlyDropdown(); |
|
reviveTaskDropdown(); |
|
importantTaskDropdown(); |
|
editTaskDropdown(); |
|
taskItem(); |
|
|
|
// ##################################################### |
|
// Add New Task |
|
// ##################################################### |
|
$(".add-tsk").click(function (e) { |
|
// Setting current date |
|
var today = new Date(); |
|
var dd = String(today.getDate()).padStart(2, "0"); |
|
var mm = String(today.getMonth()); //January is 0! |
|
var time = String(today.getTime()); |
|
var yyyy = today.getFullYear(); |
|
var monthNames = [ |
|
"Jan", |
|
"Feb", |
|
"Mar", |
|
"Apr", |
|
"May", |
|
"Jun", |
|
"Jul", |
|
"Aug", |
|
"Sep", |
|
"Oct", |
|
"Nov", |
|
"Dec", |
|
]; |
|
today = dd + " " + monthNames[mm] + " " + yyyy; |
|
var cdate = dd + mm + time; |
|
var $_task = document.getElementById("task").value; |
|
|
|
var $_taskDescriptionText = quill.getText(); |
|
var $_taskDescriptionInnerHTML = quill.root.innerHTML; |
|
|
|
var delta = quill.getContents(); |
|
var $_textDelta = JSON.stringify(delta); |
|
|
|
$html = |
|
'<div class="todo-item all-todo-listtodo-item all-todo-list p-3 border-bottom position-relative">' + |
|
'<div class="inner-item d-flex align-items-start">' + |
|
'<div class="w-100">' + |
|
'<div class="checkbox checkbox-info d-flex align-items-start">' + |
|
'<input type="checkbox" class="material-inputs" id="' + |
|
cdate + |
|
'">' + |
|
'<label for="' + |
|
cdate + |
|
'"></label>' + |
|
"<div>" + |
|
'<h5 class="font-medium font-16 todo-header mb-0" data-todo-header="' + |
|
$_task + |
|
'">' + |
|
$_task + |
|
"</h5>" + |
|
"<div class='todo-subtext text-muted' data-todosubtext-html='" + |
|
$_taskDescriptionInnerHTML + |
|
"' data-todosubtextText='" + |
|
$_textDelta + |
|
"'> " + |
|
$_taskDescriptionText + |
|
"</div>" + |
|
'<span class="todo-time font-12 text-muted"><i class="icon-calender mr-1"></i>' + |
|
today + |
|
"</span>" + |
|
"</div>" + |
|
'<div class="ml-auto">' + |
|
'<div class="dropdown-action">' + |
|
'<div class="dropdown todo-action-dropdown">' + |
|
'<button class="btn btn-link text-dark p-1 dropdown-toggle text-decoration-none todo-action-dropdown" type="button" id="more-action-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + |
|
'<i class="icon-options-vertical"></i>' + |
|
"</button>" + |
|
'<div class="dropdown-menu dropdown-menu-right" aria-labelledby="more-action-1">' + |
|
'<a class="edit dropdown-item" href="javascript:void(0);"><i class="fas fa-edit text-info mr-1"></i> Edit</a>' + |
|
'<a class="important dropdown-item" href="javascript:void(0);"><i class="fas fa-star text-warning mr-1"></i> Important</a>' + |
|
'<a class="remove dropdown-item" href="javascript:void(0);"><i class="far fa-trash-alt text-danger mr-1"></i>Remove</a>' + |
|
'<a class="permanent-delete dropdown-item" href="javascript:void(0);">Permanent Delete</a>' + |
|
'<a class="revive dropdown-item" href="javascript:void(0);">Revive Task</a>' + |
|
"</div>" + |
|
"</div>" + |
|
"</div>" + |
|
"</div>" + |
|
"</div>" + |
|
"</div>" + |
|
"</div>" + |
|
"</div>"; |
|
|
|
$("#all-todo-container").prepend($html); |
|
$("#addTaskModal").modal("hide"); |
|
donecheckCheckbox(); |
|
removeDropdown(); |
|
deletePermanentlyDropdown(); |
|
reviveTaskDropdown(); |
|
editTaskDropdown(); |
|
taskItem(); |
|
importantTaskDropdown(); |
|
new dynamicNumberNotify("allList"); |
|
$(".list-group-item-action#all-todo-list").trigger("click"); |
|
|
|
$(".add-tsk").attr("disabled", "disabled"); |
|
}); |
|
|
|
$("#task").keyup(function () { |
|
var empty = false; |
|
$("#task").each(function () { |
|
if ($(this).val() == "") { |
|
empty = true; |
|
} |
|
}); |
|
|
|
if (empty) { |
|
$(".add-tsk").attr("disabled", "disabled"); |
|
} else { |
|
$(".add-tsk").removeAttr("disabled"); |
|
} |
|
});
|
|
|