Skip to content

Commit

Permalink
category page added with components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mabdusshakur
mabdusshakur committed Sep 7, 2024
1 parent 8925da5 commit fbea645
Show file tree
Hide file tree
Showing 5 changed files with 266 additions and 0 deletions.
53 changes: 53 additions & 0 deletions resources/js/Components/category/CategoryCreate.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
function CategoryCreate({ getList }) {

async function Save() {
let categoryName = document.getElementById('categoryName').value;
if (categoryName.length === 0) {
errorToast("Category Required !")
} else {
document.getElementById('modal-close').click();
showLoader();
let res = await await axios.post("/api/categories", {
name: categoryName
})
hideLoader();
if (res.status === 201) {
successToast('Request completed');
document.getElementById("save-form").reset();
await getList();
} else {
errorToast("Request fail !")
}
}
}

return (<>
<div className="modal animated zoomIn" id="create-modal" aria-labelledby="exampleModalLabel" aria-hidden="true" tabIndex="-1">
<div className="modal-dialog modal-dialog-centered modal-md">
<div className="modal-content">
<div className="modal-header">
<h6 className="modal-title" id="exampleModalLabel">Create Category</h6>
</div>
<div className="modal-body">
<form id="save-form">
<div className="container">
<div className="row">
<div className="col-12 p-1">
<label className="form-label">Category Name *</label>
<input className="form-control" id="categoryName" type="text" />
</div>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button className="btn bg-gradient-primary" id="modal-close" data-bs-dismiss="modal" aria-label="Close">Close</button>
<button className="btn bg-gradient-success" id="save-btn" onClick={Save}>Save</button>
</div>
</div>
</div>
</div>
</>);
}

export default CategoryCreate;
36 changes: 36 additions & 0 deletions resources/js/Components/category/CategoryDelete.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
function CategoryDelete({ getList }) {
async function itemDelete() {
let id = document.getElementById('deleteID').value;
document.getElementById('delete-modal-close').click();
showLoader();
let res = await axios.delete(`/api/categories/${id}`)
hideLoader();
if (res.data['success'] === true) {
successToast("Request completed")
await getList();
} else {
errorToast("Request fail!")
}
}

return (<><div className="modal animated zoomIn" id="delete-modal">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-body text-center">
<h3 className="text-warning mt-3">Delete !</h3>
<p className="mb-3">Once delete, you can't get it back.</p>
<input className="d-none" id="deleteID" />
</div>
<div className="modal-footer justify-content-end">
<div>
<button className="btn bg-gradient-success mx-2" id="delete-modal-close" data-bs-dismiss="modal" type="button">Cancel</button>
<button className="btn bg-gradient-danger" id="confirmDelete" type="button" onClick={itemDelete}>Delete</button>
</div>
</div>
</div>
</div>
</div>
</>);
}

export default CategoryDelete;
96 changes: 96 additions & 0 deletions resources/js/Components/category/CategoryList.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React, { useEffect, useRef } from 'react';
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';
import CategoryCreate from './CategoryCreate';
import CategoryUpdate from './CategoryUpdate';
import CategoryDelete from './CategoryDelete';

function CategoryList() {
const updateRef = useRef();

getList();

async function getList() {
showLoader();
let res = await axios.get("/api/categories");
res = res.data[0];
hideLoader();

let tableList = $("#tableList");
let tableData = $("#tableData");

tableData.DataTable().destroy();
tableList.empty();

res.forEach(function (item, index) {
let row = `<tr>
<td>${index + 1}</td>
<td>${item['name']}</td>
<td>
<button data-id="${item['id']}" class="btn editBtn btn-sm btn-outline-success">Edit</button>
<button data-id="${item['id']}" class="btn deleteBtn btn-sm btn-outline-danger">Delete</button>
</td>
</tr>`
tableList.append(row)
})

$('.editBtn').on('click', async function () {
let id = $(this).data('id');
if (updateRef.current) {
await updateRef.current.FillUpUpdateForm(id);
} else {
console.error("updateRef.current is undefined");
}
new bootstrap.Modal(document.getElementById('update-modal')).show();
})

$('.deleteBtn').on('click', function () {
let id = $(this).data('id');
new bootstrap.Modal(document.getElementById('delete-modal')).show();
$("#deleteID").val(id);
})

DataTable.use(DT);

}

return (<>
<div className="container-fluid">
<div className="row">
<div className="col-md-12 col-sm-12 col-lg-12">
<div className="card px-5 py-5">
<div className="row justify-content-between">
<div className="align-items-center col">
<h4>Category</h4>
</div>
<div className="align-items-center col">
<button className="float-end btn bg-gradient-primary m-0" data-bs-toggle="modal" data-bs-target="#create-modal">Create</button>
</div>
</div>
<hr className="bg-secondary" />
<div className="table-responsive">
<table className="table" id="tableData">
<thead>
<tr className="bg-light">
<th>No</th>
<th>Category</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableList">

</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<CategoryCreate getList={getList} />
<CategoryUpdate ref={updateRef} getList={getList} />
<CategoryDelete getList={getList} />
</>);
}

export default CategoryList;
71 changes: 71 additions & 0 deletions resources/js/Components/category/CategoryUpdate.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { forwardRef, useImperativeHandle } from 'react';

const CategoryUpdate = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
FillUpUpdateForm
}));

async function FillUpUpdateForm(id) {
document.getElementById('updateID').value = id;
showLoader();
let res = await axios.get(`/api/categories/${id}`);
res = res.data[0];
hideLoader();
document.getElementById('categoryNameUpdate').value = res['name'];
}

async function Update() {

let categoryName = document.getElementById('categoryNameUpdate').value;
let updateID = document.getElementById('updateID').value;

if (categoryName.length === 0) {
errorToast("Category Required !")
} else {
document.getElementById('update-modal-close').click();
showLoader();
let res = await axios.patch(`/api/categories/${updateID}`, {
name: categoryName
})
hideLoader();

if (res.status === 200 && res.data['success'] === true) {
document.getElementById("update-form").reset();
successToast("Request success !")
await props.getList();
} else {
errorToast("Request fail !")
}
}
}

return (<><div className="modal animated zoomIn" id="update-modal" aria-labelledby="exampleModalLabel" aria-hidden="true" tabIndex="-1">
<div className="modal-dialog modal-md modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Update Category</h5>
</div>
<div className="modal-body">
<form id="update-form">
<div className="container">
<div className="row">
<div className="col-12 p-1">
<label className="form-label">Category Name *</label>
<input className="form-control" id="categoryNameUpdate" type="text" />
<input className="d-none" id="updateID" />
</div>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button className="btn bg-gradient-primary" id="update-modal-close" data-bs-dismiss="modal" aria-label="Close">Close</button>
<button className="btn bg-gradient-success" id="update-btn" onClick={Update}>Update</button>
</div>
</div>
</div>
</div>
</>);
});

export default CategoryUpdate;
10 changes: 10 additions & 0 deletions resources/js/Pages/CategoryPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import CategoryList from "../Components/category/CategoryList";
import SidenavLayout from "../Layouts/SidenavLayout";

export default function DashboardPage() {
return (
<SidenavLayout>
<CategoryList />
</SidenavLayout>
);
}

0 comments on commit fbea645

Please sign in to comment.