SÁBADO
30/3/2024
// import React from 'react'
import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import { useState, useEffect } from "react";
import axios from "axios";
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
border: "2px solid #000",
boxShadow: 24,
p: 4,
};
function Show() {
const [userData, setUserData] = useState([]);
const runfun = async (id) =>{
console.log(id);
let a = id;
try {
const result = await axios.post(http://192.168.0.146:5000/get-single-data/${a});
setUserData(result.data…Read more
8:45 p. m.
app.post('/get-single-data/:id', (req, res) => {
// const id = 2225;
const { id } = req.params;
console.log(id);
const query = 'SELECT * FROM app_deperment_section WHERE id = ? ';
connection.query(query, [id], (err, results) => {
if (err) {
console.error(err.message);
return res.status(500).send(err);
}
res.json(results);
console.log(results)
});
});
8:46 p. m.
1/4/2024
metoxi-bootstrap-5-admin-dashboard-template-2023-12-06-06-35-20-utc.zip
ZIP•113 MB
6:14 p. m.
VIERNES
in bootstrap if i click then run a function and close this model in react
3:02 p. m.
+918767170191
9:52 p. m.
+918767170191
9:53 p. m.
+918767170191
10:04 p. m.
SÁBADO
10:06 a. m.
TODAY
import React from "react";
import Master from "../Layout/Master";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Loding from "../Loding/Loding";
import { server } from "..//../main";
import { confirmAlert } from "react-confirm-alert"; // Import
import "react-confirm-alert/src/react-confirm-alert.css"; // Import css
function Client() {
// !hook for model update
const [modalOpen, setModalOpen] = useState(false);
// !hook for model create Button
const [create_modalOpen, setCreate_modalOpen] = useState(false);
const [userData, setUserData] = useState([]);
// const [selectedUserId, setSelectedUserId] = useState(null);
// ! loading hook
const [isLoading, setIsLoading] = useState(true);
const sessionStorage_user_id = sessionStorage.getItem("user_id");
const [userField, setUserField] = useState({
user_name: "",
user_m_no: "",
user_w_name: "",
user_e_nid: "",
user_a: "",
user_u_id: "sessionStorage_user_id",
});
const changeUserFieldHandler = (e) => {
setUserField({
...userField,
[e.target.name]: e.target.value,
});
};
// ! --------------------------------------------------
// Function to open the modal
const handleCreateButtonOpen = () => {
console.log("handleCreateButtonOpen");
setCreate_modalOpen(true);
};
// Function to close the modal
const handleCreateButtonClose = () => {
setCreate_modalOpen(false);
};
// ! --------------------------------------------------
const onSubmitChange = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
${server}/api_v2/clients/cleint_add,
userField
);
var response_data = response.data.msg;
var response_status = response.data.status;
if (response_status == "success") {
fetchData();
toast.success(response_data);
// console.log(response_data);
// toast.success(response_data);
// Close the modal on success
setCreate_modalOpen(false);
} else {
setCreate_modalOpen(true);
// toast.success(response_data);
toast.error(response_data);
// console.log(response.data);
}
} catch (err) {
console.log("Something Wrong in react ");
toast.error(response_data);
}
};
const handleDelete = async (id) => {
// console.log(id)
try {
const result = await axios.post(
"http://192.168.0.109/rpgi/craftzoneapi/api_v2/clients/delete_cleint",
{
client_id: id,
tc_auth_id: sessionStorage_user_id,
}
// console.log(result.data.msg);
);
if (result.data.msg == "success") {
toast.success(result.data.msg);
// fetchData();
} else {
toast.error(result.data.msg);
}
fetchData();
} catch (error) {
// console.log(error);
toast.error("Internal Server Error");
}
};
// ! -----------------------Get data---------------------------
const fetchData = async () => {
//
try {
const result = await axios.post(
"http://192.168.0.109/rpgi/craftzoneapi/api_v2/clients/get_cleints"
);
//console.log("FEATCH");
// console.log(result);
if (result.data.status === "success") {
console.log("first")
setUserData(result.data.clients);
console.log("FEATCH");
} else {
toast.error(result.data.msg);
}
} catch (err) {
console.log("Something went wrong");
}
};
// ! -----------------------Delete data---------------------------
const deleteData = async (id) => {
// console.log(id);
fetchData();
confirmAlert({
title: "Confirm to Delete",
message: "Are you sure to do this.",
buttons: [
{
label: "Yes",
onClick: () => handleDelete(id),
// alert("Click Yes"),
},
{
label: "No",
// onClick: () =>
// alert("Click No"),
},
],
});
};
useEffect(() => {
fetchData();
}, []);
// ! -----------------------show single data data---------------------------
// const [single_cleint_data, setSingle_cleint_data] = useState({});
// ! -----------------------Update data---------------------------
// const [data, setData] = useState([]);
const [selectedData, setSelectedData] = useState(null);
const handleCloseModal = () => {
setModalOpen(false);
};
const fetchDataFromServer = async (id) => {
try {
const response = await axios.post(
http://192.168.0.109/rpgi/craftzoneapi/api_v2/clients/get_cleint,
{
user_id: id,
}
);
// console.log(update);
return response.data;
} catch (error) {
toast.error("Internal Server Error");
}
};
const handleEditClick = async (id) => {
try {
const newData = await fetchDataFromServer(id);
if (newData.status == "success") {
setSelectedData(newData.client[0]);
setModalOpen(true);
} else {
toast.error(newData.msg);
}
} catch (error) {
toast.error("Internal Server Error");
}
};
const handleUpdateData = async () => {
// Perform actions to update the data
console.log("Updated data:", selectedData);
try {
const users = {
user_id: selectedData.tc_id,
user_name: selectedData.tc_name,
user_m_no: selectedData.tc_m_no,
user_w_name: selectedData.tc_w_no,
user_e_nid: selectedData.tc_e_id,
user_a: selectedData.tc_address,
user_u_id: sessionStorage_user_id,
};
const result = await axios.post(
"http://192.168.0.109/rpgi/craftzoneapi/api_v2/clients/update_cleint",
users
);
if (result.data.status == "success") {
// alert("User Data Updated Successfully");
toast.success(result.data.msg);
setModalOpen(false);
fetchData();
} else {
toast.error(result.data.msg);
}
// Close the modal
} catch (err) {
toast.error("Internal Server Error");
}
};
setTimeout(() => {
// setIsLoading(false);
}, 2000);
return (
<>
<Master />
{/* //! update modal */}
<>
<div
className={modal ${modalOpen ? "show" : ""}}
tabIndex="-1"
role="dialog"
style={{ display: modalOpen ? "block" : "none" }}
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Edit Data</h5>
<button
type="button"
className="close"
onClick={handleCloseModal}
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
{selectedData && (
<form onSubmit={handleUpdateData}>
<div className="form-group">
<label htmlFor="name">Name:</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={selectedData.tc_name}
onChange={(e) =>
setSelectedData({
...selectedData,
tc_name: e.target.value,
})
}
/>
</div>
<div className="form-group">
<label htmlFor="name">Mobile Number:</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={selectedData.tc_m_no}
onChange={(e) =>
setSelectedData({
...selectedData,
tc_m_no: e.target.value,
})
}
/>
</div>
<div className="form-group">
<label htmlFor="name">Whatsapp Number:</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={selectedData.tc_w_no}
onChange={(e) =>
setSelectedData({
...selectedData,
tc_w_no: e.target.value,
})
}
/>
</div>
<div className="form-group">
<label htmlFor="name">Email:</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={selectedData.tc_e_id}
onChange={(e) =>
setSelectedData({
...selectedData,
tc_e_id: e.target.value,
})
}
/>
</div>
<div className="form-group">
<label htmlFor="name">Address:</label>
<input
type="text"
className="form-control"
id="name"
name="name"
value={selectedData.tc_address}
onChange={(e) =>
setSelectedData({
...selectedData,
tc_address: e.target.value,
})
}
/>
</div>
</form>
)}
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
onClick={handleCloseModal}
>
Close
</button>
<button
type="button"
className="btn btn-primary"
onClick={handleUpdateData}
>
Update
</button>
</div>
</div>
</div>
</div>
{/* Modal backdrop */}
<div
className={modal-backdrop ${modalOpen ? "show" : ""}}
style={{ display: modalOpen ? "block" : "none" }}
></div>
</>
{/* */}
{/* //! */}
<div id="main-content">
<div className="row clearfix">
<div className="col-lg-12 col-md-12">
<div className="card planned_task">
{/* */}
<div className="container-fluid">
<div className="block-header">
<div className="row clearfix">
<div className="col-md-6 col-sm-12">
<h1>Clients</h1>
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
<li className="breadcrumb-item">
<Link to="/dashboard">
<i className="icon-home"> </i>
</Link>
</li>
<li className="breadcrumb-item">Dashboard</li>
<li className="breadcrumb-item active">Clients</li>
</ol>
</nav>
</div>
{/* //! Create Clients model button */}
<div
className="col-md-6 col-sm-12 text-right hidden-xs"
// onClick={handleCreateButtonOpen}
>
<div className="d-flex flex-row-reverse">
<button
onClick={handleCreateButtonOpen}
className="btn btn-success ml-1 mr-1"
data-toggle="modal"
// data-target=".bd-example-modal-lg"
>
<i className="icon-plus"></i> Create Clients
</button>
{/* //! Create Clients model */}
{/* */}
{/* //! Edit user model */}
{/* */}
</div>
</div>
{/* !------------------------------ */}
</div>
</div>
<>
<div
className={modal ${create_modalOpen ? "show" : ""}}
tabIndex="-1"
role="dialog"
style={{
display: create_modalOpen ? "block" : "none",
}}
>
<div className="modal-dialog modal-lg">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title h4" id="myLargeModalLabel">
New Client
</h5>
<button
type="button"
className="close"
// data-dismiss="modal"
// aria-label="Close"
onClick={handleCreateButtonClose}
>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
{/* */}
<form onSubmit={onSubmitChange}>
<div className="form-group">
<label
for="exampleInputEmail1"
className="d-flex"
>
Client Name
</label>
<input
type="text"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Client Name"
name="user_name"
onChange={(e) => changeUserFieldHandler(e)}
required
/>
</div>
<div className="form-group">
<label
for="exampleInputPassword1"
className="d-flex"
>
Phone Number
</label>
<input
type="tel"
// pattern="[0-9]{10}"
min={10}
maxLength={10}
className="form-control"
// id="exampleInputPassword1"
placeholder=" Client Number"
name="user_m_no"
onChange={(e) => changeUserFieldHandler(e)}
required
/>
</div>
{/* */}
<div className="form-group">
<label
for="exampleInputPassword1"
className="d-flex"
>
WhatsApp Number
</label>
<input
type="tel"
// pattern="[0-9]{10}"
min={10}
maxLength={10}
className="form-control"
// id="exampleInputPassword1"
placeholder=" Client Number"
name="user_w_name"
onChange={(e) => changeUserFieldHandler(e)}
required
/>
</div>
{/* */}
<div className="form-group">
<label
for="exampleInputPassword1"
className="d-flex"
>
Email
</label>
<input
type="email"
className="form-control"
id="exampleInputPassword1"
placeholder=" Client Email"
name="user_e_nid"
onChange={(e) => changeUserFieldHandler(e)}
required
/>
</div>
{/* */}
<div className="form-group">
<label
for="exampleInputPassword1"
className="d-flex"
>
Client Address
</label>
<input
type="text"
className="form-control"
id="exampleInputPassword1"
placeholder=" Client Address"
name="user_a"
onChange={(e) => changeUserFieldHandler(e)}
required
/>
</div>
{/* */}
<div className="modal-footer">
<button
type="submit"
className="btn btn-primary pl-5
pr-5
pt-2
pb-2"
onClick={handleCreateButtonClose}
>
Add
</button>
</div>
</form>
{/* */}
</div>
</div>
</div>
</div>
<div
className={`modal-backdrop ${
create_modalOpen ? "show" : ""
}`}
style={{
display: create_modalOpen ? "block" : "none",
}}
></div>
</>
{/* */}
<div className="table-responsive">
<table className="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>NAME</th>
<th>Mobile Number</th>
<th>Whatsapp Number</th>
<th>Email</th>
<th>Address</th>
<th>Action</th>
<td></td>
</tr>
</thead>
<tbody>
{userData.length > 0 ? (
userData.map((item, i) => (
<tr key={i}>
<td>{item.tc_id}</td>
<td>{item.tc_name}</td>
<td>{item.tc_m_no}</td>
<td>{item.tc_w_no}</td>
<td>{item.tc_e_id}</td>
<th>{item.tc_address}</th>
<td>
<button
data-toggle="modal"
data-target=".bd-example-modal-lg2"
className="btn btn-success ml-1 mr-1"
data-backdrop="static"
data-keyboard="false"
onClick={() => handleEditClick(item.tc_id)}
>
Edit
</button>
</td>
<td>
<button
className="btn btn-danger btn-round ml-1 mr-1"
onClick={() => deleteData(item.tc_id)}
>
Delete
</button>
</td>
</tr>
))
) : (
<>
<tr>
<td colSpan={8} className="text-center">
No data available
</td>
</tr>
</>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="colored"
// transition: Bounce,
/>
</div>
</>
);
}
export default Client