Ganti todo item menjadi textarea, dan keyboard shortcut dengan CTRL + ENTER untuk save todo item

This commit is contained in:
Supan Adit Pratama 2020-07-02 19:22:13 +07:00
parent 1c17fa89f1
commit abbdd5ce10

View File

@ -156,9 +156,9 @@
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label>Name</label> <label>Name</label>
<input type="text" class="form-control" <textarea class="form-control"
placeholder="Insert todo item name here" placeholder="Insert todo item name here"
id="todo-item-create-modal-field-name"> id="todo-item-create-modal-field-name"></textarea>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -188,9 +188,9 @@
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label>Name</label> <label>Name</label>
<input type="text" class="form-control" <textarea class="form-control"
placeholder="Edit todo item name here" placeholder="Edit todo item name here"
id="todo-item-edit-modal-field-name"> id="todo-item-edit-modal-field-name"></textarea>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -218,6 +218,7 @@
let todoModalIsShown = false; let todoModalIsShown = false;
// Untuk Keyboard Shortcut
$(document).bind('keydown', function (e) { $(document).bind('keydown', function (e) {
// ESC Key // ESC Key
if (e.key === "Escape") { if (e.key === "Escape") {
@ -545,10 +546,11 @@
} }
$(document).ready(function () { $(document).ready(function () {
$('#todo-view-modal').on('shown.bs.modal', function (e) { const todoViewModal = $("#todo-view-modal");
todoViewModal.on("shown.bs.modal", function (e) {
todoModalIsShown = true; todoModalIsShown = true;
}) })
$('#todo-view-modal').on('hide.bs.modal', function (e) { todoViewModal.on("hide.bs.modal", function (e) {
todoModalIsShown = false; todoModalIsShown = false;
}) })
// Prepare Data From Backend // Prepare Data From Backend
@ -565,8 +567,22 @@
// Create Todo by CTRL + ENTER at Todo Description // Create Todo by CTRL + ENTER at Todo Description
$("#todo-create-field-description").keydown(function (e) { $("#todo-create-field-description").keydown(function (e) {
if (e.ctrlKey && e.keyCode == 13) { if (e.ctrlKey && e.keyCode === 13) {
createNewTodo(); $("#todo-create-modal-form").submit();
}
});
// Create Todo Item by CTRL + ENTER at Todo Description
$("#todo-item-create-modal-field-name").keydown(function (e) {
if (e.ctrlKey && e.keyCode === 13) {
$("#todo-item-create-modal-form").submit();
}
});
// Edit Todo Item by CTRL + ENTER at Todo Description
$("#todo-item-edit-modal-field-name").keydown(function (e) {
if (e.ctrlKey && e.keyCode === 13) {
$("#todo-item-edit-modal-form").submit();
} }
}); });