customer page added with components

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 (<>
+        <div className="modal animated zoomIn" id="create-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">Create Customer</h5>
+                    </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">Customer Name *</label>
+                                        <input className="form-control" id="customerName" type="text" />
+                                        <label className="form-label">Customer Email *</label>
+                                        <input className="form-control" id="customerEmail" type="text" />
+                                        <label className="form-label">Customer Mobile *</label>
+                                        <input className="form-control" id="customerMobile" 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 CustomerCreate;

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 (<>
+        <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-primary mx-2" id="delete-modal-close" data-bs-dismiss="modal" type="button" onClick={closeDeleteModal}>Cancel</button>
+                            <button className="btn bg-gradient-danger" id="confirmDelete" type="button" onClick={itemDelete}>Delete</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </>);
+};
+
+export default CustomerDelete;

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 = `<tr>
+                    <td>${index + 1}</td>
+                    <td>${item['name']}</td>
+                    <td>${item['email']}</td>
+                    <td>${item['mobile']}</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');
+            $("#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 (<>
+        <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>Customer</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-dark" />
+                        <table className="table" id="tableData">
+                            <thead>
+                                <tr className="bg-light">
+                                    <th>No</th>
+                                    <th>Name</th>
+                                    <th>Email</th>
+                                    <th>Mobile</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody id="tableList">
+
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <CustomerCreate getList={getList} />
+        <CustomerUpdate ref={updateRef} getList={getList} />
+        <CustomerDelete getList={getList} />
+    </>);
+}
+
+export default CustomerList;

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 (<>
+        <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 Customer</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">Customer Name *</label>
+                                        <input className="form-control" id="customerNameUpdate" type="text" />
+
+                                        <label className="form-label mt-3">Customer Email *</label>
+                                        <input className="form-control" id="customerEmailUpdate" type="text" />
+
+                                        <label className="form-label mt-3">Customer Mobile *</label>
+                                        <input className="form-control" id="customerMobileUpdate" type="text" />
+
+                                        <input className="d-none" id="updateID" type="text" />
+                                    </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" onClick={closeUpdateModal}>Close</button>
+                        <button className="btn bg-gradient-success" id="update-btn" onClick={Update}>Update</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>);
+});
+
+export default CustomerUpdate;

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 (
+        <SidenavLayout>
+            <CustomerList />
+        </SidenavLayout>
+    );
+}