diff --git a/resources/js/Components/category/CategoryCreate.jsx b/resources/js/Components/category/CategoryCreate.jsx new file mode 100644 index 0000000..f6ae978 --- /dev/null +++ b/resources/js/Components/category/CategoryCreate.jsx @@ -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 (<> + + ); +} + +export default CategoryCreate; \ No newline at end of file diff --git a/resources/js/Components/category/CategoryDelete.jsx b/resources/js/Components/category/CategoryDelete.jsx new file mode 100644 index 0000000..3b6ac16 --- /dev/null +++ b/resources/js/Components/category/CategoryDelete.jsx @@ -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 (<>
+
+
+
+

Delete !

+

Once delete, you can't get it back.

+ +
+
+
+ + +
+
+
+
+
+ ); +} + +export default CategoryDelete; \ No newline at end of file diff --git a/resources/js/Components/category/CategoryList.jsx b/resources/js/Components/category/CategoryList.jsx new file mode 100644 index 0000000..38f9e9c --- /dev/null +++ b/resources/js/Components/category/CategoryList.jsx @@ -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 = ` + ${index + 1} + ${item['name']} + + + + + ` + 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 (<> +
+
+
+
+
+
+

Category

+
+
+ +
+
+
+
+ + + + + + + + + + + +
NoCategoryAction
+
+
+
+
+
+ + + + + ); +} + +export default CategoryList; \ No newline at end of file diff --git a/resources/js/Components/category/CategoryUpdate.jsx b/resources/js/Components/category/CategoryUpdate.jsx new file mode 100644 index 0000000..0fd82f4 --- /dev/null +++ b/resources/js/Components/category/CategoryUpdate.jsx @@ -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 (<> + ); +}); + +export default CategoryUpdate; \ No newline at end of file diff --git a/resources/js/Pages/CategoryPage.jsx b/resources/js/Pages/CategoryPage.jsx new file mode 100644 index 0000000..20fa23a --- /dev/null +++ b/resources/js/Pages/CategoryPage.jsx @@ -0,0 +1,10 @@ +import CategoryList from "../Components/category/CategoryList"; +import SidenavLayout from "../Layouts/SidenavLayout"; + +export default function DashboardPage() { + return ( + + + + ); +} \ No newline at end of file