Trương Việt Hoàng-QE180166

1. `$(document).ready(function() { ... });`:

- Hàm này đảm bảo rằng đoạn mã bên trong chỉ chạy sau khi tài liệu HTML đã được
tải xong hoàn toàn.

2. `var $pagination = $('#categoryPagination');`:

- Khai báo biến `$pagination` để lưu trữ phần tử HTML với id là
`#categoryPagination`, phần tử này sẽ được sử dụng để hiển thị và điều khiển phân
trang.

3. `var inpSearchCategoryName = "";`:

- Khai báo biến `inpSearchCategoryName` để lưu trữ giá trị tìm kiếm danh mục. Ban
đầu, nó được gán giá trị chuỗi rỗng.

4. `$pagination.twbsPagination(defaultOpts);`:
- Khởi tạo phân trang cho phần tử `$pagination` với các tùy chọn mặc định được lưu
trong `defaultOpts`.

5. `this.onSearchByName = function() { ... }`:

- Định nghĩa hàm `onSearchByName` để xử lý sự kiện tìm kiếm danh mục theo tên.

6. `inpSearchCategoryName = $
("#inpSearchCategoryName").val();`:
- Lấy giá trị từ ô nhập liệu tìm kiếm có id là `#inpSearchCategoryName` và gán nó
cho biến `inpSearchCategoryName`.
7. `this.getCategories(0, defaultPageSize,
inpSearchCategoryName);`:
- Gọi hàm `getCategories` với các tham số:
- `0`: trang đầu tiên
- `defaultPageSize`: kích thước trang mặc định
- `inpSearchCategoryName`: tên tìm kiếm hiện tại
- Mục đích là để lấy danh sách danh mục từ server dựa trên các tham số tìm kiếm và
phân trang đã chỉ định.
1. Định nghĩa phương thức `getCategories`

- this.getCategories = function(page = 0, size = defaultPageSize, name = "") {

- `page`: Số trang hiện tại, mặc định là 0.

- `size`: Số lượng bản ghi trên mỗi trang, mặc định là `defaultPageSize`.
- `name`: Tên của danh mục cần tìm kiếm, mặc định là chuỗi rỗng.
2. Gọi AJAX để lấy dữ liệu từ API

- $.ajax({
- type: 'GET',
- dataType: "json",
- url: `${domain}/api/category?type=filter&page=${page}&size=${size}&name=$
{name}`,
- headers: {},
- success: (res) => {

- `type: 'GET'`: Sử dụng phương thức GET để lấy dữ liệu.

- `dataType: "json"`: Dữ liệu trả về có định dạng JSON.
- `url`: URL của API để lấy dữ liệu, với các tham số `page`, `size`, và `name` được
chèn vào URL.
3. Xử lý dữ liệu trả về

- let appendHTML = "";

- $("#tblCategories").empty();
- // Reset pagination.
- $pagination.twbsPagination('destroy');
- if (!res.success || res.data.totalRecord === 0) {
- // Append text No Data when records empty;
- $("#tblCategories").append(`<tr><td colspan="9" style="text-align: center;">No
Data</td></tr>`);
- return;
- }

- `$("#tblCategories").empty();`: Xóa nội dung cũ của bảng trước khi thêm dữ liệu
mới.
- `if (!res.success || res.data.totalRecord === 0)`: Kiểm tra nếu dữ liệu trả về không
thành công hoặc không có bản ghi nào thì hiển thị thông báo "No Data".
4. Duyệt qua các bản ghi và tạo HTML để hiển thị

- for (const record of res.data.records) {

- appendHTML += "<tr>";
- appendHTML += `<td>${record.id}</td>`;
- appendHTML += `<td>${record.name}</td>`;
- appendHTML += `<td>${record.description}</td>`;
- appendHTML += `<td><span class="badge ${record.status.toLocaleLowerCase()
=== 'active' ? 'bg-success' : 'bg-danger'}">${record.status}</span></td>`;
- appendHTML += `<td>${record.createdBy}</td>`;
- appendHTML += `<td>${record.createdDate}</td>`;
- appendHTML += `<td>${record.updatedBy}</td>`;
- appendHTML += `<td>${record.updatedDate}</td>`;
- appendHTML += `<td class="text-right">
- <a class="btn btn-info btn-sm" onclick="swicthViewCategory(false, $
{record.id})"><i class="fas fa-pencil-alt"></i></a>
- <a class="btn btn-danger btn-sm" onclick="deleteCategory(${record.id})"><i
class="fas fa-trash"></i></a>
- </td>`;
- appendHTML += "</tr>";
- }
5. Xây dựng phân trang (pagination)
 - $pagination.twbsPagination($.extend({}, defaultOpts, {
- startPage: res.data.page + 1,
- totalPages: Math.ceil(res.data.totalRecord / res.data.size)
- }));

- `startPage`: Trang bắt đầu, cộng thêm 1 vì trang đầu tiên là 0.

- `totalPages`: Tổng số trang, tính bằng cách lấy tổng số bản ghi chia cho kích thước
trang và làm tròn lên.
6. Thêm sự kiện khi trang thay đổi

- $pagination.on('page', (event, num) => {

- this.getCategories(num - 1, defaultPageSize, inpSearchCategoryName);
- });

- Khi trang thay đổi, gọi lại `getCategories` với số trang mới (giảm 1 vì
`twbsPagination` bắt đầu từ 1).
7. Thêm HTML vào bảng

- $("#tblCategories").append(appendHTML);
8. Xử lý lỗi nếu có
- error: (err) => {
- toastr.error(err.errMsg);
- }

Tổng kết
Phương thức `getCategories` được sử dụng để lấy dữ liệu danh mục từ API, sau đó hiển thị
chúng trong một bảng HTML với chức năng phân trang. Nó bao gồm xử lý lỗi và cập nhật
giao diện người dùng một cách động khi người dùng tương tác.
1. Định nghĩa phương thức `swicthViewCategory`

- this.swicthViewCategory = function(isViewTable, id = null) {

- `isViewTable`: Biến boolean xác định xem có hiển thị bảng hay không.
- `id = null`: Tham số mặc định là `null`, xác định ID của danh mục khi cần chỉnh
sửa.

2. Kiểm tra biến `isViewTable`

- if (isViewTable) {

- Nếu `isViewTable` là `true`, thì hiển thị bảng danh sách danh mục.

3. Hiển thị bảng và ẩn biểu mẫu

- $("#category-table").css("display", "block");
 - $("#category-form").css("display", "none");
- this.getCategories(0, defaultPageSize);

- `$("#category-table").css("display", "block");`: Hiển thị bảng danh sách danh mục.

- `$("#category-form").css("display", "none");`: Ẩn biểu mẫu tạo/chỉnh sửa danh
mục.
- `this.getCategories(0, defaultPageSize);`: Gọi phương thức `getCategories` để lấy
danh sách danh mục từ trang đầu tiên với kích thước trang mặc định.

4. Hiển thị biểu mẫu và ẩn bảng

- } else {
- $("#category-table").css("display", "none");
- $("#category-form").css("display", "block");

- Nếu `isViewTable` là `false`, thì hiển thị biểu mẫu tạo/chỉnh sửa danh mục.

5. Kiểm tra ID

- if (id == null) {
- $("#inpCategoryId").val(null);
- $("#inpCategoryName").val(null);
- $("#inpCategoryDesc").val(null);
- $("#inpCategoryCreatedBy").val(null);
- } else {
- this.getCategoryById(id);
- }

- `if (id == null) { ... }`: Nếu ID là `null`, thì xóa nội dung của các trường nhập liệu
trong biểu mẫu để chuẩn bị cho việc tạo danh mục mới.
- `$("#inpCategoryId").val(null);`: Xóa giá trị của trường ID.
- `$("#inpCategoryName").val(null);`: Xóa giá trị của trường tên danh mục.
- `$("#inpCategoryDesc").val(null);`: Xóa giá trị của trường mô tả danh mục.
- `$("#inpCategoryCreatedBy").val(null);`: Xóa giá trị của trường người tạo.
 - `else { this.getCategoryById(id); }`: Nếu ID không phải là `null`, gọi phương thức
`getCategoryById` với ID để lấy thông tin danh mục cần chỉnh sửa và điền vào biểu
mẫu.

- Thiết lập chế độ xem mặc định là bảng

- // Set default view mode is table.

- this.swicthViewCategory(true);

- `this.swicthViewCategory(true);`: Gọi phương thức `swicthViewCategory` với tham

số `true` để thiết lập chế độ xem mặc định là bảng khi trang được tải.

Tổng kết
Phương thức `swicthViewCategory` có chức năng thay đổi giữa hai chế độ xem: bảng (hiển
thị danh sách danh mục) và biểu mẫu (tạo hoặc chỉnh sửa danh mục). Khi chế độ xem là
bảng, nó sẽ hiển thị bảng và gọi phương thức để lấy danh sách danh mục. Khi chế độ xem
là biểu mẫu, nó sẽ hiển thị biểu mẫu và kiểm tra xem có ID danh mục không; nếu có, nó sẽ
lấy thông tin danh mục đó để chỉnh sửa, nếu không, nó sẽ hiển thị biểu mẫu trống để tạo
danh mục mới. Chế độ xem mặc định được thiết lập là bảng.
A. Định nghĩa hàm và tham số:

- this.deleteCategory = function(id) {

- id: ID của danh mục cần xóa. Đây là tham số duy nhất của hàm, được truyền vào
khi gọi hàm để xác định danh mục nào sẽ bị xóa.
B. Gửi yêu cầu AJAX:

- $.ajax({
- type: 'DELETE',
- dataType: "json",
- url: `${domain}/api/category?id=${id}`,
- success: (res) => {

- type: Loại yêu cầu là DELETE, điều này cho biết server rằng yêu cầu này là để xóa
dữ liệu.
- dataType: Định dạng dữ liệu trả về là JSON, giúp dễ dàng xử lý kết quả trả về.
- url: URL của API với tham số id của danh mục cần xóa. URL này được xây dựng
bằng cách nối domain với đường dẫn API và tham số id.
C. Xử lý kết quả trả về:
- if (res.success) {
- this.swicthViewCategory(true);
- toastr.success('Delete category success !')
- } else {
- toastr.error(res.errMsg);
- }

- Kiểm tra kết quả trả về:

- Nếu yêu cầu thành công (res.success là true):
- Gọi hàm swicthViewCategory(true) để cập nhật giao diện. Hàm này có thể được sử
dụng để làm mới danh sách danh mục hoặc chuyển đổi chế độ xem.
- Hiển thị thông báo thành công bằng toastr.success với thông điệp "Delete category
success !".
- Nếu yêu cầu không thành công (res.success là false):
- Hiển thị thông báo lỗi bằng toastr.error với thông điệp lỗi từ res.errMsg.
D. Xử lý lỗi:

- error: (err) => {

 - toastr.error(err.errMsg);
- }

- Nếu có lỗi xảy ra trong quá trình gọi API, hàm sẽ hiển thị thông báo lỗi bằng
toastr.error với thông điệp lỗi từ err.errMsg.

Tổng kết
Hàm deleteCategory có nhiệm vụ gọi API để xóa một danh mục cụ thể dựa trên ID của nó.
Sau khi xóa thành công, hàm sẽ cập nhật giao diện người dùng và hiển thị thông báo thành
công. Nếu có lỗi xảy ra trong quá trình xóa, hàm sẽ hiển thị thông báo lỗi.

1) Định nghĩa hàm và tham số:

- this.getCategoryById = function(id) {

- id: ID của danh mục cần lấy thông tin. Đây là tham số duy nhất của hàm, được
truyền vào khi gọi hàm để xác định danh mục nào sẽ được lấy thông tin.

2) Gửi yêu cầu AJAX:

- $.ajax({
- type: 'GET',
- dataType: "json",
- url: `${domain}/api/category?type=getOne&id=${id}`,
- success: (res) => {

- type: Loại yêu cầu là GET, điều này cho biết server rằng yêu cầu này là để lấy dữ
liệu.
- dataType: Định dạng dữ liệu trả về là JSON, giúp dễ dàng xử lý kết quả trả về.
- url: URL của API với tham số id của danh mục cần lấy thông tin. URL này được
xây dựng bằng cách nối domain với đường dẫn API và tham số id.

3) Xử lý kết quả trả về:

- if (res.success) {
- $("#inpCategoryId").val(id);
- $("#inpCategoryName").val(res.data.name);
- $("#inpCategoryDesc").val(res.data.description);
- $("#inpCategoryCreatedBy").val(res.data.createdBy);
- } else {
- toastr.error(res.errMsg);
- }

- Kiểm tra kết quả trả về:

- Nếu yêu cầu thành công (res.success là true):
- Gán giá trị của các trường thông tin trên giao diện với dữ liệu trả về từ API:
- $("#inpCategoryId").val(id): Gán giá trị ID của danh mục vào trường
inpCategoryId.
- $("#inpCategoryName").val(res.data.name): Gán giá trị tên của danh mục vào
trường inpCategoryName.
- $("#inpCategoryDesc").val(res.data.description): Gán giá trị mô tả của danh mục
vào trường inpCategoryDesc.
- $("#inpCategoryCreatedBy").val(res.data.createdBy): Gán giá trị người tạo của
danh mục vào trường inpCategoryCreatedBy.
- Nếu yêu cầu không thành công (res.success là false):
- Hiển thị thông báo lỗi bằng toastr.error với thông điệp lỗi từ res.errMsg.

4) Xử lý lỗi:
 - error: (err) => {
- toastr.error(err.errMsg);
- }

- Nếu có lỗi xảy ra trong quá trình gọi API, hàm sẽ hiển thị thông báo lỗi bằng
toastr.error với thông điệp lỗi từ err.errMsg.

Tổng kết
Hàm getCategoryById có nhiệm vụ gọi API để lấy thông tin chi tiết của một danh mục cụ
thể dựa trên ID của nó. Sau khi lấy thông tin thành công, hàm sẽ cập nhật các trường
thông tin trên giao diện người dùng với dữ liệu trả về. Nếu có lỗi xảy ra trong quá trình lấy
thông tin, hàm sẽ hiển thị thông báo lỗi.

I. Định nghĩa hàm:

- this.saveCategory = function() {
 II. Lấy giá trị ID hiện tại:

- const currentId = $("#inpCategoryId").val();

- currentId: Lấy giá trị ID của danh mục từ trường inpCategoryId. Nếu giá trị này
tồn tại, tức là đang chỉnh sửa danh mục; nếu không, tức là đang tạo mới danh mục.

III. Tạo đối tượng body chứa dữ liệu danh mục:

- const body = {
- "name": $("#inpCategoryName").val(),
- "description": $("#inpCategoryDesc").val(),
- "createdBy": $("#inpCategoryCreatedBy").val()
- }

- body: Đối tượng chứa dữ liệu danh mục, bao gồm tên (name), mô tả (description),
và người tạo (createdBy).

IV. Gửi yêu cầu AJAX:

- $.ajax({
- type: currentId ? 'PUT' : 'POST',
- dataType: "json",
- contentType: 'application/json',
- url: currentId ? `${domain}/api/category?id=${currentId}` :
`${domain}/api/category`,
- data: JSON.stringify(body),
- success: (res) => {

- type: Loại yêu cầu là PUT nếu currentId tồn tại (chỉnh sửa), ngược lại là POST (tạo
mới).
- dataType: Định dạng dữ liệu trả về là JSON.
- contentType: Định dạng dữ liệu gửi đi là JSON.
 - url: URL của API. Nếu currentId tồn tại, URL sẽ bao gồm tham số id để chỉnh sửa
danh mục; nếu không, URL sẽ là đường dẫn tạo mới danh mục.
- data: Dữ liệu danh mục được chuyển thành chuỗi JSON.

V. Xử lý kết quả trả về:

- if (res.success) {
- this.swicthViewCategory(true);
- toastr.success(`${currentId ? "Update" : "Create"} category success !`)
- } else {
- toastr.error(res.errMsg);
- }

- Kiểm tra kết quả trả về:

- Nếu yêu cầu thành công (res.success là true):
- Gọi hàm swicthViewCategory(true) để cập nhật giao diện (có thể là để làm mới
danh sách danh mục hoặc chuyển đổi chế độ xem).
- Hiển thị thông báo thành công bằng toastr.success với thông điệp "Update category
success !" nếu đang chỉnh sửa, hoặc "Create category success !" nếu đang tạo mới.
- Nếu yêu cầu không thành công (res.success là false):
- Hiển thị thông báo lỗi bằng toastr.error với thông điệp lỗi từ res.errMsg.

VI. Xử lý lỗi:

- error: (err) => {

- toastr.error(err.errMsg);
- }

- Nếu có lỗi xảy ra trong quá trình gọi API, hàm sẽ hiển thị thông báo lỗi bằng
toastr.error với thông điệp lỗi từ err.errMsg.

Tổng kết
Hàm saveCategory có nhiệm vụ gọi API để tạo mới hoặc chỉnh sửa một danh mục dựa trên
việc ID của danh mục có tồn tại hay không. Sau khi thực hiện thành công, hàm sẽ cập nhật
giao diện người dùng và hiển thị thông báo thành công. Nếu có lỗi xảy ra trong quá trình
thực hiện, hàm sẽ hiển thị thông báo lỗi.