first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,315 @@
|
||||
// selectedBlog = [id, blog_id, description, status]
|
||||
const selectedBlog = [];
|
||||
|
||||
// Current state
|
||||
let currentPageNo = 1;
|
||||
let currentPageSize = 10;
|
||||
const filterParams = {
|
||||
blog_id: 0,
|
||||
description: '',
|
||||
status: -1
|
||||
};
|
||||
|
||||
$('#add-form').submit(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
const inputs = $('#add-form input, #add-form select');
|
||||
const data = {};
|
||||
|
||||
inputs.each(function() {
|
||||
data[this.name] = $(this).val();
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/blog_app_articles/store',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
|
||||
success: function(res) {
|
||||
loadPage(filterParams);
|
||||
alert(res.message);
|
||||
},
|
||||
|
||||
error: function(err) {
|
||||
alertErr(err.responseJSON.errors);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#update-form').submit(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
const inputs = $('#update-form input, #update-form select');
|
||||
const data = {};
|
||||
|
||||
inputs.each(function() {
|
||||
data[this.name] = $(this).val();
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/blog_app_articles/update',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
|
||||
success: function(res) {
|
||||
loadPage(filterParams);
|
||||
alert(res.message);
|
||||
},
|
||||
|
||||
error: function(err) {
|
||||
alertErr(err.responseJSON.errors);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#filter-form').submit(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
const inputs = $('#filter-form input, #filter-form select');
|
||||
|
||||
inputs.each(function() {
|
||||
filterParams[this.name] = $(this).val();
|
||||
});
|
||||
|
||||
// Set pageNo back to 1 when filter blogs
|
||||
currentPageNo = 1;
|
||||
|
||||
loadPage(filterParams);
|
||||
});
|
||||
|
||||
function deleteBlog(el) {
|
||||
const r = confirm('Are you sure?');
|
||||
|
||||
if(r === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
id: $(el).data('id')
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/blog_app_articles/delete',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
|
||||
success: function(res) {
|
||||
loadPage(filterParams);
|
||||
},
|
||||
|
||||
error: function(err) {
|
||||
alertErr(err.responseJSON.errors);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindRowSelectEvent() {
|
||||
$('#blog-table tr').click(function(e) {
|
||||
if($(e.target)[0].tagName.toLowerCase() === 'button' || !$(e.target).parent().data('id')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#add-form-wrapper').hide();
|
||||
$('#update-form-wrapper').show();
|
||||
|
||||
selectedBlog[0] = $(this).data('id');
|
||||
selectedBlog[1] = $(this).find('td').eq(0).text();
|
||||
selectedBlog[2] = $(this).find('td').eq(1).text();
|
||||
selectedBlog[3] = $(this).find('td').eq(2).data('status');
|
||||
|
||||
const inputs = $('#update-form input, #update-form select');
|
||||
|
||||
$.each(selectedBlog, function(index, value) {
|
||||
$(inputs[index]).val(value);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showAddForm() {
|
||||
$('#add-form-wrapper').show();
|
||||
$('#update-form-wrapper').hide();
|
||||
}
|
||||
|
||||
function loadPage(params = null) {
|
||||
$('#blog-table').hide();
|
||||
$('#blog-table-loading').show();
|
||||
|
||||
const data = {
|
||||
pageNo: currentPageNo,
|
||||
pageSize: currentPageSize
|
||||
};
|
||||
|
||||
if(params) {
|
||||
data.params = params;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/blog_app_articles/getBlogs',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
|
||||
success: function(res) {
|
||||
$('#blog-table').show();
|
||||
$('#blog-table-loading').hide();
|
||||
|
||||
if (res.result.length === 0 && res.pageNo > 0) {
|
||||
currentPageNo--;
|
||||
return loadPage(filterParams);
|
||||
}
|
||||
|
||||
renderBlogTable(res.result);
|
||||
renderPagination(res.total, res.pageSize, res.pageNo + 1);
|
||||
},
|
||||
|
||||
error: function(err) {
|
||||
$('#blog-table').show();
|
||||
$('#blog-table-loading').hide();
|
||||
|
||||
alertErr(err.responseJSON.errors);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getBlogs(params = null, pageNo = 1, pageSize = 10) {
|
||||
$('#blog-table').hide();
|
||||
$('#blog-table-loading').show();
|
||||
|
||||
const data = {
|
||||
params,
|
||||
pageNo,
|
||||
pageSize
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
method: 'post',
|
||||
url: '/blog_app_articles/getBlogs',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
|
||||
success: function(res) {
|
||||
$('#blog-table').show();
|
||||
$('#blog-table-loading').hide();
|
||||
|
||||
renderBlogTable(res.result);
|
||||
},
|
||||
|
||||
error: function(err) {
|
||||
$('#blog-table').show();
|
||||
$('#blog-table-loading').hide();
|
||||
|
||||
alertErr(err.responseJSON.errors);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderBlogTable(result) {
|
||||
$('#blog-table tbody').empty();
|
||||
|
||||
if (result.length === 0) {
|
||||
const tr = "<tr><td>No result</td><td>No result</td><td>No result</td><td>No result</td></tr>";
|
||||
$('#blog-table tbody').append(tr);
|
||||
return;
|
||||
}
|
||||
|
||||
for (index in result) {
|
||||
var id = result[index].id;
|
||||
var blog_id = result[index].blog_id;
|
||||
var description = result[index].description;
|
||||
var status = result[index].status;
|
||||
|
||||
var tr = `<tr data-id="${id}" style='cursor: pointer'>`;
|
||||
tr += `<td>${blog_id}</td>`;
|
||||
tr += `<td>${description}</td>`;
|
||||
tr += `<td data-status="${status}" style="text-align:center">${status == 1 ? 'Active' : 'Inactive'}</td>`;
|
||||
tr += `<td><button data-id="${id}" class="btn btn-danger" onclick="deleteBlog(this)">Delete</button></td>`;
|
||||
tr += "</tr>";
|
||||
|
||||
$('#blog-table tbody').append(tr);
|
||||
}
|
||||
|
||||
bindRowSelectEvent();
|
||||
}
|
||||
|
||||
function renderPagination(total, pageSize, pageNo = 1) {
|
||||
$('#blog-pagination').empty();
|
||||
$('#blog-pagination').unbind('page');
|
||||
$('#blog-pagination').bootpag({
|
||||
total: Math.ceil(total / pageSize),
|
||||
page: pageNo,
|
||||
maxVisible: 5,
|
||||
leaps: true,
|
||||
firstLastUse: true,
|
||||
first: '←',
|
||||
last: '→',
|
||||
wrapClass: 'pagination',
|
||||
activeClass: 'active',
|
||||
disabledClass: 'disabled',
|
||||
nextClass: 'next',
|
||||
prevClass: 'prev',
|
||||
lastClass: 'last',
|
||||
firstClass: 'first'
|
||||
}).on("page", function(event, pageNo) {
|
||||
// Save current state for loadPage function
|
||||
currentPageNo = pageNo;
|
||||
currentPageSize = pageSize;
|
||||
|
||||
getBlogs(filterParams, pageNo, pageSize);
|
||||
});
|
||||
}
|
||||
|
||||
function alertErr(err) {
|
||||
const errors = Object.values(err);
|
||||
let message = '';
|
||||
|
||||
for (index in errors) {
|
||||
message += errors[index] + ' ';
|
||||
}
|
||||
|
||||
alert(message);
|
||||
}
|
||||
|
||||
// Handle blog select
|
||||
// Get all blogs from blog.float.sg and render it
|
||||
function loadBlogs() {
|
||||
$.ajax({
|
||||
method: 'get',
|
||||
url: 'https://blog.float.sg/wp-json/float/v1/latest-articles?limit=1000',
|
||||
dataType: 'json',
|
||||
|
||||
success: function(res) {
|
||||
$('#blog_list').empty();
|
||||
$('#blog_list').append(
|
||||
`<option value="">Select blog</option>`
|
||||
);
|
||||
$.each(res, function() {
|
||||
$('#blog_list').append(
|
||||
`<option value="${this.ID}|${this.post_title}">${this.ID} | ${this.post_title}</option>`
|
||||
);
|
||||
})
|
||||
},
|
||||
|
||||
error: function(err) {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Bind event select blog from blog list select
|
||||
$('#blog_list').change(function() {
|
||||
let val = $(this).val();
|
||||
let blog_id = val.split('|')[0];
|
||||
let description = val.split('|')[1];
|
||||
|
||||
if (val) {
|
||||
$('#new_blog_id').val(blog_id);
|
||||
$('#new_blog_description').val(description);
|
||||
return;
|
||||
}
|
||||
|
||||
$('#new_blog_id').val('');
|
||||
$('#new_blog_description').val('');
|
||||
});
|
||||
Reference in New Issue
Block a user