mirror of
https://github.com/supanadit/todo.git
synced 2024-11-10 01:42:20 +00:00
Update Todo Item CRUD
This commit is contained in:
parent
15e9ca1d91
commit
7ac23e6791
@ -5,6 +5,7 @@ Simple Todo Application
|
|||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
- `composer install`
|
- `composer install`
|
||||||
|
- `php artisan key:generate`
|
||||||
- create `.env` file
|
- create `.env` file
|
||||||
- `php artisan key:generate`
|
- `php artisan key:generate`
|
||||||
- `php artisan migrate`
|
- `php artisan migrate`
|
||||||
|
0
app/Todo.php
Normal file → Executable file
0
app/Todo.php
Normal file → Executable file
0
app/TodoItem.php
Normal file → Executable file
0
app/TodoItem.php
Normal file → Executable file
0
database/migrations/2020_06_23_170808_create_todos_table.php
Normal file → Executable file
0
database/migrations/2020_06_23_170808_create_todos_table.php
Normal file → Executable file
0
database/migrations/2020_06_23_170816_create_todo_items_table.php
Normal file → Executable file
0
database/migrations/2020_06_23_170816_create_todo_items_table.php
Normal file → Executable file
@ -144,11 +144,46 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- /.modal-dialog -->
|
<!-- /.modal-dialog -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade" id="todo-item-edit-modal">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<form action="/" method="post" id="todo-item-edit-modal-form">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span></button>
|
||||||
|
<h4 class="modal-title">Edit Todo Item</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" class="form-control"
|
||||||
|
placeholder="Edit todo item name here"
|
||||||
|
id="todo-item-edit-modal-field-name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-default pull-left"
|
||||||
|
id="todo-item-edit-modal-cancel-button">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary">
|
||||||
|
<i class="fa fa-spinner fa-spin" id="todo-item-edit-modal-save-loading-indicator"></i>
|
||||||
|
<span id="todo-item-edit-modal-save-button">Save</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<!-- /.modal-content -->
|
||||||
|
</div>
|
||||||
|
<!-- /.modal-dialog -->
|
||||||
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('js')
|
@section('js')
|
||||||
<script type="application/javascript">
|
<script type="application/javascript">
|
||||||
let todoId = null;
|
let todo = null;
|
||||||
|
let todoItem = null;
|
||||||
|
|
||||||
$(document).bind('keydown', function (e) {
|
$(document).bind('keydown', function (e) {
|
||||||
// CTRL + S
|
// CTRL + S
|
||||||
@ -197,41 +232,93 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const todoComponent = function (todo) {
|
const todoComponent = function (t) {
|
||||||
const description = (todo.description != null ? (todo.description.length > 20) ? todo.description.substring(0, 20).concat("...") : todo.description : "");
|
const description = (t.description != null ? (t.description.length > 20) ? t.description.substring(0, 20).concat("...") : t.description : "");
|
||||||
const todoData = "<div class=\"col-md-4 col-sm-6 col-xs-12\">\n" +
|
const todoData = "<div class=\"col-md-4 col-sm-6 col-xs-12\">\n" +
|
||||||
" <div class=\"box box-widget widget-user\">\n" +
|
" <div class=\"box box-widget widget-user\">\n" +
|
||||||
" <!-- Add the bg color to the header using any of the bg-* classes -->\n" +
|
" <!-- Add the bg color to the header using any of the bg-* classes -->\n" +
|
||||||
" <div class=\"widget-user-header bg-aqua-active\">\n" +
|
" <div class=\"widget-user-header bg-aqua-active\">\n" +
|
||||||
" <h3 class=\"widget-user-username\">" + todo.name + "</h3>\n" +
|
" <h3 class=\"widget-user-username\">" + t.name + "</h3>\n" +
|
||||||
" <h5 class=\"widget-user-desc\">" + description + "</h5>\n" +
|
" <h5 class=\"widget-user-desc\">" + description + "</h5>\n" +
|
||||||
" </div>\n" +
|
" </div>\n" +
|
||||||
" </div>\n" +
|
" </div>\n" +
|
||||||
" </div>";
|
" </div>";
|
||||||
return $(todoData).click(function () {
|
return $(todoData).click(function () {
|
||||||
todoId = todo.id;
|
todo = t;
|
||||||
|
|
||||||
loadTodoItemList();
|
loadTodoItemList();
|
||||||
|
|
||||||
$("#todo-view-modal-title").html(todo.name);
|
$("#todo-view-modal-title").html(t.name);
|
||||||
$("#todo-view-modal-description").html(todo.description);
|
$("#todo-view-modal-description").html(t.description);
|
||||||
|
|
||||||
$("#todo-view-modal").modal('show');
|
$("#todo-view-modal").modal('show');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const todoItemTableRowComponent = function (todoItem) {
|
const todoItemTableRowComponent = function (todoItem) {
|
||||||
const buttonToggleMark = "<button type=\"button\" class=\"btn btn-xs " + (!todoItem.complete ? "btn-danger" : "btn-success") + "\"><i class=\"fa " + (!todoItem.complete ? "fa-toggle-off" : "fa-toggle-on") + "\"></i></button>";
|
const buttonToggleMark = "<button type=\"button\" class=\"btn btn-xs " + (!todoItem.complete ? "btn-danger" : "btn-success") + " btn-todo-toggle-mark\"><i class=\"fa " + (!todoItem.complete ? "fa-toggle-off" : "fa-toggle-on") + "\"></i></button>";
|
||||||
const buttonEdit = "<button class=\"btn btn-xs btn-info\"><i class=\"fa fa-edit\"></i></button>";
|
const buttonEdit = "<button class=\"btn btn-xs btn-info btn-todo-edit\"><i class=\"fa fa-edit\"></i></button>";
|
||||||
return "<tr>\n" +
|
const buttonDelete = "<button class=\"btn btn-xs btn-danger btn-todo-delete\"><i class=\"fa fa-trash\"></i></button>";
|
||||||
|
const row = "<tr>\n" +
|
||||||
" <td>" + todoItem.name + "</td>\n" +
|
" <td>" + todoItem.name + "</td>\n" +
|
||||||
" <td><label class=\"label " + (!todoItem.complete ? "label-danger" : "label-success") + "\">" + (!todoItem.complete ? "Not complete" : "Complete") + "</label></td>\n" +
|
" <td><label class=\"label " + (!todoItem.complete ? "label-danger" : "label-success") + "\">" + (!todoItem.complete ? "Not complete" : "Complete") + "</label></td>\n" +
|
||||||
" <td>\n" +
|
" <td>\n" +
|
||||||
" " + buttonToggleMark + "\n" +
|
" " + buttonToggleMark + "\n" +
|
||||||
" " + buttonEdit + "\n" +
|
" " + buttonEdit + "\n" +
|
||||||
" <button class=\"btn btn-xs btn-danger\"><i class=\"fa fa-trash\"></i></button>\n" +
|
" " + buttonDelete + "\n" +
|
||||||
" </td>\n" +
|
" </td>\n" +
|
||||||
" </tr>";
|
" </tr>";
|
||||||
|
return $(row).on('click', 'button.btn-todo-toggle-mark', function () {
|
||||||
|
toggleTodoItem(todoItem);
|
||||||
|
}).on('click', 'button.btn-todo-edit', function () {
|
||||||
|
editTodoItem(todoItem);
|
||||||
|
}).on('click', 'button.btn-todo-delete', function () {
|
||||||
|
deleteTodoItem(todoItem);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleTodoItem = function (todoItem) {
|
||||||
|
$.ajax({
|
||||||
|
type: "GET",
|
||||||
|
url: "/web/todo/item/" + (todoItem.complete ? "unmark" : "mark") + "/" + todoItem.id,
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
||||||
|
},
|
||||||
|
contentType: "application/json",
|
||||||
|
async: true,
|
||||||
|
success: function (result) {
|
||||||
|
loadTodoItemList();
|
||||||
|
},
|
||||||
|
error: function (result) {
|
||||||
|
toastr.error(result.responseJSON.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const editTodoItem = function (t) {
|
||||||
|
todoItem = t;
|
||||||
|
$("#todo-item-edit-modal-field-name").val(todoItem.name);
|
||||||
|
|
||||||
|
$("#todo-view-modal").modal('hide');
|
||||||
|
$("#todo-item-edit-modal").modal('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteTodoItem = function (todoItem) {
|
||||||
|
$.ajax({
|
||||||
|
type: "DELETE",
|
||||||
|
url: "/web/todo/item/" + todoItem.id,
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
||||||
|
},
|
||||||
|
contentType: "application/json",
|
||||||
|
async: true,
|
||||||
|
success: function (result) {
|
||||||
|
loadTodoItemList();
|
||||||
|
},
|
||||||
|
error: function (result) {
|
||||||
|
toastr.error(result.responseJSON.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadTodoItemList = function () {
|
const loadTodoItemList = function () {
|
||||||
@ -242,7 +329,7 @@
|
|||||||
" </tr>");
|
" </tr>");
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "GET",
|
type: "GET",
|
||||||
url: "/web/todo/item/" + todoId,
|
url: "/web/todo/item/" + todo.id,
|
||||||
headers: {
|
headers: {
|
||||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
||||||
},
|
},
|
||||||
@ -272,6 +359,7 @@
|
|||||||
// Component Initialization
|
// Component Initialization
|
||||||
$("#todo-create-modal-save-loading-indicator").hide();
|
$("#todo-create-modal-save-loading-indicator").hide();
|
||||||
$("#todo-item-create-modal-save-loading-indicator").hide();
|
$("#todo-item-create-modal-save-loading-indicator").hide();
|
||||||
|
$("#todo-item-edit-modal-save-loading-indicator").hide();
|
||||||
|
|
||||||
// Create Todo Submit Action
|
// Create Todo Submit Action
|
||||||
$("#todo-create-modal-form").on("submit", function (e) {
|
$("#todo-create-modal-form").on("submit", function (e) {
|
||||||
@ -333,7 +421,7 @@
|
|||||||
},
|
},
|
||||||
data: JSON.stringify({
|
data: JSON.stringify({
|
||||||
"name": name.val(),
|
"name": name.val(),
|
||||||
"todo_id": todoId,
|
"todo_id": todo.id,
|
||||||
}),
|
}),
|
||||||
contentType: "application/json",
|
contentType: "application/json",
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
@ -364,6 +452,53 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Edit Todo Item Submit Action
|
||||||
|
$("#todo-item-edit-modal-form").on("submit", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const name = $("#todo-item-edit-modal-field-name");
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
type: "PUT",
|
||||||
|
url: "/web/todo/item",
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
|
||||||
|
},
|
||||||
|
data: JSON.stringify({
|
||||||
|
"name": name.val(),
|
||||||
|
"id": todoItem.id,
|
||||||
|
"todo_id": todoItem.todo_id,
|
||||||
|
"complete": todoItem.complete,
|
||||||
|
}),
|
||||||
|
contentType: "application/json",
|
||||||
|
dataType: "json",
|
||||||
|
async: true,
|
||||||
|
beforeSend: function () {
|
||||||
|
$("#todo-item-edit-modal-save-loading-indicator").show();
|
||||||
|
$("#todo-item-edit-modal-save-button-label").hide();
|
||||||
|
},
|
||||||
|
success: function (result) {
|
||||||
|
$("#todo-item-edit-modal-save-loading-indicator").hide();
|
||||||
|
$("#todo-item-edit-modal-save-button-label").show();
|
||||||
|
|
||||||
|
name.val(null);
|
||||||
|
|
||||||
|
toastr.success(result.message);
|
||||||
|
|
||||||
|
$("#todo-view-modal").modal('show');
|
||||||
|
$("#todo-item-edit-modal").modal('hide');
|
||||||
|
|
||||||
|
loadTodoItemList();
|
||||||
|
},
|
||||||
|
error: function (result) {
|
||||||
|
$("#todo-item-edit-modal-save-loading-indicator").hide();
|
||||||
|
$("#todo-item-edit-modal-save-button-label").show();
|
||||||
|
|
||||||
|
toastr.error(result.responseJSON.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Search
|
// Search
|
||||||
$("input#search-todo").on('keyup', function () {
|
$("input#search-todo").on('keyup', function () {
|
||||||
loadTodoList();
|
loadTodoList();
|
||||||
@ -380,6 +515,12 @@
|
|||||||
$("#todo-view-modal").modal('show');
|
$("#todo-view-modal").modal('show');
|
||||||
$("#todo-item-create-modal").modal('hide');
|
$("#todo-item-create-modal").modal('hide');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Button Cancel On Edit Todo Item Modal
|
||||||
|
$("#todo-item-edit-modal-cancel-button").click(function () {
|
||||||
|
$("#todo-view-modal").modal('show');
|
||||||
|
$("#todo-item-edit-modal").modal('hide');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
|
Loading…
Reference in New Issue
Block a user