diff --git a/resources/js/Components/customer/CustomerCreate.jsx b/resources/js/Components/customer/CustomerCreate.jsx new file mode 100644 index 0000000..7f4a79a --- /dev/null +++ b/resources/js/Components/customer/CustomerCreate.jsx @@ -0,0 +1,71 @@ +function CustomerCreate({ getList }) { + async function Save() { + let customerName = document.getElementById('customerName').value; + let customerEmail = document.getElementById('customerEmail').value; + let customerMobile = document.getElementById('customerMobile').value; + + if (customerName.length === 0) { + errorToast("Customer Name Required !") + } else if (customerEmail.length === 0) { + errorToast("Customer Email Required !") + } else if (customerMobile.length === 0) { + errorToast("Customer Mobile Required !") + } else { + + document.getElementById('modal-close').click(); + + showLoader(); + let res = await axios.post("/api/customers", { + name: customerName, + email: customerEmail, + mobile: customerMobile + }) + hideLoader(); + + if (res.status === 201) { + successToast(res.data['message']); + document.getElementById("save-form").reset(); + await getList(); + + } else { + errorToast("Request fail !") + } + } + } + + return (<> + + + + ); +} + +export default CustomerCreate; \ No newline at end of file diff --git a/resources/js/Components/customer/CustomerDelete.jsx b/resources/js/Components/customer/CustomerDelete.jsx new file mode 100644 index 0000000..aa09163 --- /dev/null +++ b/resources/js/Components/customer/CustomerDelete.jsx @@ -0,0 +1,44 @@ +const CustomerDelete = (props) => { + + function closeDeleteModal() { + document.getElementById('deleteID').value = ''; + $("#delete-modal").hide(); + } + async function itemDelete() { + let id = document.getElementById('deleteID').value; + closeDeleteModal(); + showLoader(); + let res = await axios.delete(`/api/customers/${id}`) + hideLoader(); + if (res.data['success'] === true) { + successToast("Request completed") + await props.getList(); + } else { + errorToast("Request fail!") + } + } + + return (<> +
+
+
+
+

Delete !

+

Once delete, you can't get it back.

+ + +
+
+
+ + +
+
+
+
+
+ + ); +}; + +export default CustomerDelete; \ No newline at end of file diff --git a/resources/js/Components/customer/CustomerList.jsx b/resources/js/Components/customer/CustomerList.jsx new file mode 100644 index 0000000..37f37e7 --- /dev/null +++ b/resources/js/Components/customer/CustomerList.jsx @@ -0,0 +1,100 @@ +import React, { useEffect, useRef } from 'react'; +import DataTable from 'datatables.net-react'; +import DT from 'datatables.net-dt'; +import CustomerCreate from './CustomerCreate'; +import CustomerUpdate from './CustomerUpdate'; +import CustomerDelete from './CustomerDelete'; + +function CustomerList() { + const updateRef = useRef(); + + getList(); + + + async function getList() { + showLoader(); + let res = await axios.get("/api/customers"); + res = res.data[0]; + + hideLoader(); + + let tableList = $("#tableList"); + let tableData = $("#tableData"); + + if ($.fn.DataTable.isDataTable(tableData)) { + tableData.DataTable().destroy(); + } + tableList.empty(); + + res.forEach(function (item, index) { + let row = ` + ${index + 1} + ${item['name']} + ${item['email']} + ${item['mobile']} + + + + + ` + tableList.append(row) + }) + + $('.editBtn').on('click', async function () { + let id = $(this).data('id'); + $("#update-modal").show(); + if (updateRef.current) { + await updateRef.current.FillUpUpdateForm(id); + } else { + console.error("updateRef.current is undefined"); + } + }) + + $('.deleteBtn').on('click', function () { + let id = $(this).data('id'); + $("#delete-modal").show(); + $("#deleteID").val(id); + }) + + DataTable.use(DT); + } + + return (<> +
+
+
+
+
+
+

Customer

+
+
+ +
+
+
+ + + + + + + + + + + + + +
NoNameEmailMobileAction
+
+
+
+
+ + + + ); +} + +export default CustomerList; \ No newline at end of file diff --git a/resources/js/Components/customer/CustomerUpdate.jsx b/resources/js/Components/customer/CustomerUpdate.jsx new file mode 100644 index 0000000..6893e74 --- /dev/null +++ b/resources/js/Components/customer/CustomerUpdate.jsx @@ -0,0 +1,96 @@ +import React, { forwardRef, useImperativeHandle } from 'react'; + +const CustomerUpdate = forwardRef((props, ref) => { + useImperativeHandle(ref, () => ({ + FillUpUpdateForm + })); + + async function FillUpUpdateForm(id) { + document.getElementById('updateID').value = id; + showLoader(); + let res = await axios.get(`/api/customers/${id}`); + res = res.data[0]; + + hideLoader(); + document.getElementById('customerNameUpdate').value = res['name']; + document.getElementById('customerEmailUpdate').value = res['email']; + document.getElementById('customerMobileUpdate').value = res['mobile']; + } + + function closeUpdateModal() { + document.getElementById('update-form').reset(); + $("#update-modal").hide(); + } + async function Update() { + + let customerName = document.getElementById('customerNameUpdate').value; + let customerEmail = document.getElementById('customerEmailUpdate').value; + let customerMobile = document.getElementById('customerMobileUpdate').value; + let updateID = document.getElementById('updateID').value; + + + if (customerName.length === 0) { + errorToast("Customer Name Required !") + } else if (customerEmail.length === 0) { + errorToast("Customer Email Required !") + } else if (customerMobile.length === 0) { + errorToast("Customer Mobile Required !") + } else { + showLoader(); + + let res = await axios.patch(`/api/customers/${updateID}`, { + name: customerName, + email: customerEmail, + mobile: customerMobile, + }) + hideLoader(); + + if (res.status === 200 && res.data['success'] === true) { + successToast('Request completed'); + closeUpdateModal(); + await props.getList(); + } else { + errorToast("Request fail !") + } + } + } + + + return (<> + + ); +}); + +export default CustomerUpdate; \ No newline at end of file diff --git a/resources/js/Pages/CustomerPage.jsx b/resources/js/Pages/CustomerPage.jsx new file mode 100644 index 0000000..1214787 --- /dev/null +++ b/resources/js/Pages/CustomerPage.jsx @@ -0,0 +1,11 @@ + +import CustomerList from "../Components/customer/CustomerList"; +import SidenavLayout from "../Layouts/SidenavLayout"; + +export default function DashboardPage() { + return ( + + + + ); +} \ No newline at end of file