added home page panels
This commit is contained in:
syedmujahidahmed
parent
dfa6067a19
commit
ab89359b80
@ -23,6 +23,7 @@ import {
|
||||
cilText,
|
||||
cilUser,
|
||||
cilAlarm,
|
||||
cilFeaturedPlaylist,
|
||||
} from "@coreui/icons";
|
||||
import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react";
|
||||
|
||||
@ -169,6 +170,12 @@ const _nav = [
|
||||
icon: <CIcon icon={cilText} customClassName="nav-icon" />,
|
||||
to: "/content",
|
||||
},
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Home",
|
||||
icon: <CIcon icon={cilFeaturedPlaylist} customClassName="nav-icon" />,
|
||||
to: "/home",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -122,6 +122,11 @@ import CreateBlog from "./views/Blog/CreateBlog";
|
||||
import users from "./views/Users/users";
|
||||
import UpdateBlog from "./views/Blog/EditBlog";
|
||||
import ViewBlog from "./views/Blog/ViewBlog";
|
||||
import Home from "./views/Home/home";
|
||||
import EditPanel1 from "./views/Home/editPanel1";
|
||||
import EditPanel2 from "./views/Home/editPanel2";
|
||||
import EditPanel3 from "./views/Home/editPanel3";
|
||||
import Editpanel4 from "./views/Home/editPanel4";
|
||||
const routes = [
|
||||
{ path: "/", exact: true, name: "Home" },
|
||||
{
|
||||
@ -304,6 +309,38 @@ const routes = [
|
||||
element: EditAboutUs,
|
||||
},
|
||||
|
||||
// Home
|
||||
{
|
||||
path: "/home",
|
||||
name: "Home",
|
||||
element: Home,
|
||||
},
|
||||
{
|
||||
path: "/home/panel-1",
|
||||
name: "EditPanel1",
|
||||
element: EditPanel1,
|
||||
},
|
||||
{
|
||||
path: "/home/panel-2",
|
||||
name: "EditPanel2",
|
||||
element: EditPanel2,
|
||||
},
|
||||
{
|
||||
path: "/home/panel-3",
|
||||
name: "EditPanel3",
|
||||
element: EditPanel3,
|
||||
},
|
||||
{
|
||||
path: "/home/panel-4",
|
||||
name: "EditPanel4",
|
||||
element: Editpanel4,
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
|
||||
//Complaints
|
||||
{
|
||||
|
||||
@ -36,7 +36,6 @@ export default function EditPrivacyPolicy() {
|
||||
});
|
||||
if (response.status === 200) {
|
||||
// console.log(response);
|
||||
|
||||
setContent(response?.data?.privacyAndPolicy[0]?.privacyAndPolicyContent);
|
||||
setId(response?.data?.privacyAndPolicy[0]?._id);
|
||||
setOlderContent(
|
||||
|
||||
403
src/views/Home/editPanel1.js
Normal file
403
src/views/Home/editPanel1.js
Normal file
@ -0,0 +1,403 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link } from "react-router-dom";
|
||||
import ReactQuill from "react-quill";
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
const TOOLBAR_OPTIONS = [
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ font: [] }],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
["bold", "italic", "underline", "strike"],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
[{ script: "super" }, { script: "sub" }],
|
||||
["undo", "redo"],
|
||||
];
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
} from "@mui/material";
|
||||
|
||||
const EditPanel1 = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [displayPanel, setDisplayPanel] = useState(false);
|
||||
const [content, setContent] = useState("");
|
||||
const [olderContent, setOlderContent] = useState("");
|
||||
const [image, setimage] = useState(null);
|
||||
const [title, setTitle] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
||||
const [Img, setImg] = useState(true);
|
||||
const [id, setId] = useState(null);
|
||||
|
||||
const handleContentChange = (content, delta, source, editor) => {
|
||||
setContent(editor.getHTML());
|
||||
};
|
||||
//get Blogdata
|
||||
const getPanel = async () => {
|
||||
try {
|
||||
const res = await axios.get(`/api/panel/panel1/get`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
setTitle(res?.data?.panel1[0]?.title);
|
||||
setimage(res?.data?.panel1[0]?.image);
|
||||
setContent(res?.data?.panel1[0]?.content);
|
||||
setOlderContent(res?.data?.panel1[0]?.content);
|
||||
setDisplayPanel(res?.data?.panel1[0]?.displayPanel);
|
||||
setId(res?.data?.panel1[0]?._id);
|
||||
setImg(false);
|
||||
} catch (err) {
|
||||
swal({
|
||||
title: "Error",
|
||||
text: "Unable to fetch the panel content",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPanel();
|
||||
}, []);
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files;
|
||||
// Reset error state
|
||||
setError("");
|
||||
|
||||
// Check if more than one image is selected
|
||||
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
|
||||
setError("You can only upload one image.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
const file = files[0]; // Only one file is selected, so we get the first one
|
||||
|
||||
if (allowedTypes.includes(file.type)) {
|
||||
setNewUpdatedImages(file);
|
||||
setimage(file);
|
||||
|
||||
} else {
|
||||
setError("Please upload only PNG, JPEG, or JPG files.");
|
||||
}
|
||||
};
|
||||
|
||||
const handelDelete = async (public_id) => {
|
||||
const ary = public_id.split("/");
|
||||
setNewUpdatedImages(null);
|
||||
|
||||
const res = await axios.delete(
|
||||
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res) {
|
||||
setimage(null);
|
||||
setImg(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const addContent = async () => {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
formData.append("image", image);
|
||||
|
||||
|
||||
const response = await axios.post(
|
||||
"/api/panel/panel1/add",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (response.status == 201) {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "Panel 1 added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updateContent = () => {
|
||||
if (title === "" || content === "") {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
|
||||
if (newUpdatedImages !== null) {
|
||||
formData.append("image", newUpdatedImages);
|
||||
}
|
||||
|
||||
axios
|
||||
.patch(`/api/panel/panel1/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Updated",
|
||||
text: " Updated successfully!",
|
||||
icon: "success",
|
||||
button: "ok",
|
||||
});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
|
||||
const message = err.response?.data?.message
|
||||
? err.response?.data?.message
|
||||
: "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
if (olderContent.length === 0) {
|
||||
addContent();
|
||||
} else {
|
||||
updateContent();
|
||||
}
|
||||
// // Reload terms and conditions
|
||||
// await getPrivacyPolicy();
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setDisplayPanel(event.target.checked);
|
||||
};
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Panel 1
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={displayPanel}
|
||||
onChange={handleChange}
|
||||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
/>
|
||||
}
|
||||
label="Display Panel"
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => handleSaveClick()}
|
||||
disabled={loading}
|
||||
>
|
||||
{"Save"}
|
||||
</Button>
|
||||
<Link to="/home">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Panel 1 Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="name"
|
||||
placeholder="Enter title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="image" className="form-label">
|
||||
Panel Image
|
||||
</label>
|
||||
<Box>
|
||||
<label htmlFor="upload-Image">
|
||||
<TextField
|
||||
style={{
|
||||
display: "none",
|
||||
width: "350px",
|
||||
height: "350px",
|
||||
borderRadius: "10%",
|
||||
}}
|
||||
fullWidth
|
||||
id="upload-Image"
|
||||
type="file"
|
||||
accept=".jpg , .png ,.jpeg"
|
||||
label="file"
|
||||
multiple
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
marginLeft: "0.5rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<div>
|
||||
<strong className="fs-6 fst-italic">
|
||||
*You cannot upload more than 1 image
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<Box style={{ display: "flex" }}>
|
||||
{ image !== null ? (
|
||||
<Box marginRight={"2rem"}>
|
||||
<img
|
||||
src={image?.url || URL.createObjectURL(newUpdatedImages) || null}
|
||||
alt="Panel Image"
|
||||
style={{
|
||||
width: 350,
|
||||
height: 270,
|
||||
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handelDelete(image?.public_id)}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<label>Panel Content</label>
|
||||
<ReactQuill
|
||||
theme="snow"
|
||||
value={content}
|
||||
onChange={handleContentChange}
|
||||
modules={{ toolbar: TOOLBAR_OPTIONS }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditPanel1;
|
||||
409
src/views/Home/editPanel2.js
Normal file
409
src/views/Home/editPanel2.js
Normal file
@ -0,0 +1,409 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link } from "react-router-dom";
|
||||
import ReactQuill from "react-quill";
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
const TOOLBAR_OPTIONS = [
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ font: [] }],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
["bold", "italic", "underline", "strike"],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
[{ script: "super" }, { script: "sub" }],
|
||||
["undo", "redo"],
|
||||
];
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
} from "@mui/material";
|
||||
|
||||
const EditPanel2 = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [displayPanel, setDisplayPanel] = useState(false);
|
||||
const [content, setContent] = useState("");
|
||||
const [olderContent, setOlderContent] = useState("");
|
||||
const [image, setimage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
||||
const [Img, setImg] = useState(true);
|
||||
const [id, setId] = useState(null);
|
||||
|
||||
const handleContentChange = (content, delta, source, editor) => {
|
||||
setContent(editor.getHTML());
|
||||
};
|
||||
//get panel data
|
||||
const getPanel = async () => {
|
||||
try {
|
||||
const res = await axios.get(`/api/panel/panel2/get`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res?.status === 200) {
|
||||
setTitle(res?.data?.panel2[0]?.title);
|
||||
setimage(res?.data?.panel2[0]?.image);
|
||||
setContent(res?.data?.panel2[0]?.content);
|
||||
setOlderContent(res?.data?.panel2[0]?.content);
|
||||
setDisplayPanel(res?.data?.panel2[0]?.displayPanel);
|
||||
setId(res?.data?.panel2[0]?._id);
|
||||
setImg(false);
|
||||
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
swal({
|
||||
title: "Error",
|
||||
text: "Unable to fetch the panel content",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPanel();
|
||||
}, []);
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files;
|
||||
// Reset error state
|
||||
setError("");
|
||||
|
||||
// Check if more than one image is selected
|
||||
if (files.length > 1 || newUpdatedImages !== null) {
|
||||
setError("You can only upload one image.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
const file = files[0]; // Only one file is selected, so we get the first one
|
||||
|
||||
if (allowedTypes.includes(file.type)) {
|
||||
setNewUpdatedImages(file);
|
||||
setimage(file);
|
||||
|
||||
} else {
|
||||
setError("Please upload only PNG, JPEG, or JPG files.");
|
||||
}
|
||||
};
|
||||
|
||||
const handelDelete = async (public_id) => {
|
||||
const ary = public_id.split("/");
|
||||
setNewUpdatedImages(null);
|
||||
|
||||
const res = await axios.delete(
|
||||
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res) {
|
||||
setimage(null);
|
||||
setImg(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const addContent = async () => {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
formData.append("image", image);
|
||||
|
||||
|
||||
const response = await axios.post(
|
||||
"/api/panel/panel2/add",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (response.status == 201) {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "Panel 2 added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updateContent = () => {
|
||||
if (title === "" || content === "") {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
|
||||
if (newUpdatedImages !== null) {
|
||||
formData.append("image", newUpdatedImages);
|
||||
}
|
||||
|
||||
axios
|
||||
.patch(`/api/panel/panel2/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Updated",
|
||||
text: " Updated successfully!",
|
||||
icon: "success",
|
||||
button: "ok",
|
||||
});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
|
||||
const message = err.response?.data?.message
|
||||
? err.response?.data?.message
|
||||
: "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
console.log(olderContent)
|
||||
if (olderContent?.length === 0 || olderContent===undefined) {
|
||||
addContent();
|
||||
} else {
|
||||
updateContent();
|
||||
}
|
||||
// // Reload terms and conditions
|
||||
// await getPrivacyPolicy();
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setDisplayPanel(event.target.checked);
|
||||
};
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Panel 2
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={displayPanel}
|
||||
onChange={handleChange}
|
||||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
/>
|
||||
}
|
||||
label="Display Panel"
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => handleSaveClick()}
|
||||
disabled={loading}
|
||||
>
|
||||
{"Save"}
|
||||
</Button>
|
||||
<Link to="/home">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Panel 2 Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="name"
|
||||
placeholder="Enter title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="image" className="form-label">
|
||||
Panel Image
|
||||
</label>
|
||||
<Box>
|
||||
<label htmlFor="upload-Image">
|
||||
<TextField
|
||||
style={{
|
||||
display: "none",
|
||||
width: "350px",
|
||||
height: "350px",
|
||||
borderRadius: "10%",
|
||||
}}
|
||||
fullWidth
|
||||
id="upload-Image"
|
||||
type="file"
|
||||
accept=".jpg , .png ,.jpeg"
|
||||
label="file"
|
||||
multiple
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
marginLeft: "0.5rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<div>
|
||||
<strong className="fs-6 fst-italic">
|
||||
*You cannot upload more than 1 image
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<Box style={{ display: "flex" }}>
|
||||
{image && (
|
||||
<Box marginRight={"2rem"}>
|
||||
<img
|
||||
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
|
||||
alt="Panel Image"
|
||||
style={{
|
||||
width: 350,
|
||||
height: 270,
|
||||
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handelDelete(image?.public_id)}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<label>Panel Content</label>
|
||||
<ReactQuill
|
||||
theme="snow"
|
||||
value={content}
|
||||
onChange={handleContentChange}
|
||||
modules={{ toolbar: TOOLBAR_OPTIONS }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditPanel2;
|
||||
407
src/views/Home/editPanel3.js
Normal file
407
src/views/Home/editPanel3.js
Normal file
@ -0,0 +1,407 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link } from "react-router-dom";
|
||||
import ReactQuill from "react-quill";
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
const TOOLBAR_OPTIONS = [
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ font: [] }],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
["bold", "italic", "underline", "strike"],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
[{ script: "super" }, { script: "sub" }],
|
||||
["undo", "redo"],
|
||||
];
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
} from "@mui/material";
|
||||
|
||||
const EditPanel3 = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [displayPanel, setDisplayPanel] = useState(false);
|
||||
const [content, setContent] = useState("");
|
||||
const [olderContent, setOlderContent] = useState("");
|
||||
const [image, setimage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
||||
const [Img, setImg] = useState(true);
|
||||
const [id, setId] = useState(null);
|
||||
|
||||
const handleContentChange = (content, delta, source, editor) => {
|
||||
setContent(editor.getHTML());
|
||||
};
|
||||
//get Blogdata
|
||||
const getPanel = async () => {
|
||||
try {
|
||||
const res = await axios.get(`/api/panel/panel3/get`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res?.status === 200) {
|
||||
setTitle(res?.data?.panel3[0]?.title);
|
||||
setimage(res?.data?.panel3[0]?.image);
|
||||
setContent(res?.data?.panel3[0]?.content);
|
||||
setOlderContent(res?.data?.panel3[0]?.content);
|
||||
setDisplayPanel(res?.data?.panel3[0]?.displayPanel);
|
||||
setId(res?.data?.panel3[0]?._id);
|
||||
setImg(false);
|
||||
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
swal({
|
||||
title: "Error",
|
||||
text: "Unable to fetch the panel content",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPanel();
|
||||
}, []);
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files;
|
||||
// Reset error state
|
||||
setError("");
|
||||
|
||||
// Check if more than one image is selected
|
||||
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
|
||||
setError("You can only upload one image.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
const file = files[0]; // Only one file is selected, so we get the first one
|
||||
|
||||
if (allowedTypes.includes(file.type)) {
|
||||
setNewUpdatedImages(file);
|
||||
setimage(file);
|
||||
|
||||
} else {
|
||||
setError("Please upload only PNG, JPEG, or JPG files.");
|
||||
}
|
||||
};
|
||||
|
||||
const handelDelete = async (public_id) => {
|
||||
const ary = public_id.split("/");
|
||||
setNewUpdatedImages(null);
|
||||
|
||||
const res = await axios.delete(
|
||||
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res) {
|
||||
setimage(null);
|
||||
setImg(true);
|
||||
}
|
||||
};
|
||||
|
||||
const addContent = async () => {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
formData.append("image", image);
|
||||
|
||||
|
||||
const response = await axios.post(
|
||||
"/api/panel/panel3/add",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (response.status == 201) {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "Panel 3 added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updateContent = () => {
|
||||
if (title === "" || content === "") {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
|
||||
if (newUpdatedImages !== null) {
|
||||
formData.append("image", newUpdatedImages);
|
||||
}
|
||||
|
||||
axios
|
||||
.patch(`/api/panel/panel3/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Updated",
|
||||
text: " Updated successfully!",
|
||||
icon: "success",
|
||||
button: "ok",
|
||||
});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
|
||||
const message = err.response?.data?.message
|
||||
? err.response?.data?.message
|
||||
: "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
if (olderContent.length === 0) {
|
||||
addContent();
|
||||
} else {
|
||||
updateContent();
|
||||
}
|
||||
// // Reload terms and conditions
|
||||
// await getPrivacyPolicy();
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setDisplayPanel(event.target.checked);
|
||||
};
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Panel 3
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={displayPanel}
|
||||
onChange={handleChange}
|
||||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
/>
|
||||
}
|
||||
label="Display Panel"
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => handleSaveClick()}
|
||||
disabled={loading}
|
||||
>
|
||||
{"Save"}
|
||||
</Button>
|
||||
<Link to="/home">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Panel 3 Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="name"
|
||||
placeholder="Enter title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="image" className="form-label">
|
||||
Panel Image
|
||||
</label>
|
||||
<Box>
|
||||
<label htmlFor="upload-Image">
|
||||
<TextField
|
||||
style={{
|
||||
display: "none",
|
||||
width: "350px",
|
||||
height: "350px",
|
||||
borderRadius: "10%",
|
||||
}}
|
||||
fullWidth
|
||||
id="upload-Image"
|
||||
type="file"
|
||||
accept=".jpg , .png ,.jpeg"
|
||||
label="file"
|
||||
multiple
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
marginLeft: "0.5rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<div>
|
||||
<strong className="fs-6 fst-italic">
|
||||
*You cannot upload more than 1 image
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<Box style={{ display: "flex" }}>
|
||||
{image && (
|
||||
<Box marginRight={"2rem"}>
|
||||
<img
|
||||
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
|
||||
alt="Panel Image"
|
||||
style={{
|
||||
width: 350,
|
||||
height: 270,
|
||||
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handelDelete(image?.public_id)}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<label>Panel Content</label>
|
||||
<ReactQuill
|
||||
theme="snow"
|
||||
value={content}
|
||||
onChange={handleContentChange}
|
||||
modules={{ toolbar: TOOLBAR_OPTIONS }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditPanel3;
|
||||
409
src/views/Home/editPanel4.js
Normal file
409
src/views/Home/editPanel4.js
Normal file
@ -0,0 +1,409 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link } from "react-router-dom";
|
||||
import ReactQuill from "react-quill";
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
import axios from "axios";
|
||||
import { isAutheticated } from "src/auth";
|
||||
const TOOLBAR_OPTIONS = [
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ font: [] }],
|
||||
[{ list: "ordered" }, { list: "bullet" }],
|
||||
["bold", "italic", "underline", "strike"],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
[{ script: "super" }, { script: "sub" }],
|
||||
["undo", "redo"],
|
||||
];
|
||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||
import {
|
||||
Box,
|
||||
TextField,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
} from "@mui/material";
|
||||
|
||||
const Editpanel4 = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [displayPanel, setDisplayPanel] = useState(false);
|
||||
const [content, setContent] = useState("");
|
||||
const [olderContent, setOlderContent] = useState("");
|
||||
const [image, setimage] = useState("");
|
||||
const [title, setTitle] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
||||
const [Img, setImg] = useState(true);
|
||||
const [id, setId] = useState(null);
|
||||
|
||||
const handleContentChange = (content, delta, source, editor) => {
|
||||
setContent(editor.getHTML());
|
||||
};
|
||||
//get Blogdata
|
||||
const getPanel = async () => {
|
||||
try {
|
||||
const res = await axios.get(`/api/panel/panel4/get`, {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
if (res?.status === 200) {
|
||||
setTitle(res?.data?.panel4[0]?.title);
|
||||
if(res?.data?.panel4[0]?.image!==undefined && res?.data?.panel4[0]?.image!==null){
|
||||
setimage(res?.data?.panel4[0]?.image);
|
||||
}
|
||||
setContent(res?.data?.panel4[0]?.content);
|
||||
setOlderContent(res?.data?.panel4[0]?.content);
|
||||
setDisplayPanel(res?.data?.panel4[0]?.displayPanel);
|
||||
setId(res?.data?.panel4[0]?._id);
|
||||
setImg(false);
|
||||
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
swal({
|
||||
title: "Error",
|
||||
text: "Unable to fetch the panel content",
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPanel();
|
||||
}, []);
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = e.target.files;
|
||||
// Reset error state
|
||||
setError("");
|
||||
|
||||
// Check if more than one image is selected
|
||||
if (files.length > 1 || newUpdatedImages !== null) {
|
||||
setError("You can only upload one image.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file types and append to selectedFiles
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||
const file = files[0]; // Only one file is selected, so we get the first one
|
||||
|
||||
if (allowedTypes.includes(file.type)) {
|
||||
setNewUpdatedImages(file);
|
||||
setimage(file);
|
||||
|
||||
} else {
|
||||
setError("Please upload only PNG, JPEG, or JPG files.");
|
||||
}
|
||||
};
|
||||
|
||||
const handelDelete = async (public_id) => {
|
||||
const ary = public_id.split("/");
|
||||
setNewUpdatedImages(null);
|
||||
|
||||
const res = await axios.delete(
|
||||
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
||||
{
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res) {
|
||||
setimage(null);
|
||||
setImg(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const addContent = async () => {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
formData.append("image", image);
|
||||
|
||||
const response = await axios.post(
|
||||
"/api/panel/panel4/add",
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (response.status == 201) {
|
||||
swal({
|
||||
title: "Congratulations!!",
|
||||
text: "Panel 4 added successfully!",
|
||||
icon: "success",
|
||||
button: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const updateContent = () => {
|
||||
if (title === "" || content === "") {
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: "Fill all mandatory fields",
|
||||
icon: "error",
|
||||
button: "Close",
|
||||
dangerMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
formData.append("content", content);
|
||||
formData.append("displayPanel", displayPanel);
|
||||
|
||||
if (newUpdatedImages !== null) {
|
||||
formData.append("image", newUpdatedImages);
|
||||
}
|
||||
|
||||
axios
|
||||
.patch(`/api/panel/panel4/update/${id}`, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
swal({
|
||||
title: "Updated",
|
||||
text: " Updated successfully!",
|
||||
icon: "success",
|
||||
button: "ok",
|
||||
});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
|
||||
const message = err.response?.data?.message
|
||||
? err.response?.data?.message
|
||||
: "Something went wrong!";
|
||||
swal({
|
||||
title: "Warning",
|
||||
text: message,
|
||||
icon: "error",
|
||||
button: "Retry",
|
||||
dangerMode: true,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveClick = async () => {
|
||||
if (!olderContent) {
|
||||
addContent();
|
||||
} else {
|
||||
updateContent();
|
||||
}
|
||||
// // Reload terms and conditions
|
||||
// await getPrivacyPolicy();
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setDisplayPanel(event.target.checked);
|
||||
};
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="
|
||||
page-title-box
|
||||
d-flex
|
||||
align-items-center
|
||||
justify-content-between
|
||||
"
|
||||
>
|
||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||
Panel 4
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "1rem" }}>
|
||||
<h4 className="mb-0"></h4>
|
||||
</div>
|
||||
|
||||
<div className="page-title-right">
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={displayPanel}
|
||||
onChange={handleChange}
|
||||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
/>
|
||||
}
|
||||
label="Display Panel"
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
marginRight: "5px",
|
||||
}}
|
||||
onClick={() => handleSaveClick()}
|
||||
disabled={loading}
|
||||
>
|
||||
{"Save"}
|
||||
</Button>
|
||||
<Link to="/home">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
style={{
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="title" className="form-label">
|
||||
Panel 4 Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="name"
|
||||
placeholder="Enter title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="image" className="form-label">
|
||||
Panel Image
|
||||
</label>
|
||||
<Box>
|
||||
<label htmlFor="upload-Image">
|
||||
<TextField
|
||||
style={{
|
||||
display: "none",
|
||||
width: "350px",
|
||||
height: "350px",
|
||||
borderRadius: "10%",
|
||||
}}
|
||||
fullWidth
|
||||
id="upload-Image"
|
||||
type="file"
|
||||
accept=".jpg , .png ,.jpeg"
|
||||
label="file"
|
||||
multiple
|
||||
variant="outlined"
|
||||
onChange={(e) => handleFileChange(e)}
|
||||
/>
|
||||
<Box
|
||||
style={{ borderRadius: "10%" }}
|
||||
sx={{
|
||||
margin: "1rem 0rem",
|
||||
cursor: "pointer",
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
border: "2px solid grey",
|
||||
// borderRadius: '50%',
|
||||
|
||||
"&:hover": {
|
||||
background: "rgba(112,112,112,0.5)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CloudUploadIcon
|
||||
style={{
|
||||
color: "grey",
|
||||
margin: "auto",
|
||||
fontSize: "5rem",
|
||||
marginLeft: "0.5rem",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
fontSize="large"
|
||||
/>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
{error && <p style={{ color: "red" }}>{error}</p>}
|
||||
<div>
|
||||
<strong className="fs-6 fst-italic">
|
||||
*You cannot upload more than 1 image
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<Box style={{ display: "flex" }}>
|
||||
{image && (
|
||||
<Box marginRight={"2rem"}>
|
||||
<img
|
||||
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
|
||||
alt="Panel Image"
|
||||
style={{
|
||||
width: 350,
|
||||
height: 270,
|
||||
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
/>
|
||||
<DeleteSharpIcon
|
||||
onClick={() => handelDelete(image?.public_id)}
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "white",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
padding: "0.2rem",
|
||||
background: "black",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||
<div className="card h-100">
|
||||
<div className="card-body px-5">
|
||||
<label>Panel Content</label>
|
||||
<ReactQuill
|
||||
theme="snow"
|
||||
value={content}
|
||||
onChange={handleContentChange}
|
||||
modules={{ toolbar: TOOLBAR_OPTIONS }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Editpanel4;
|
||||
165
src/views/Home/home.js
Normal file
165
src/views/Home/home.js
Normal file
@ -0,0 +1,165 @@
|
||||
import {
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { isAutheticated } from "src/auth";
|
||||
|
||||
export default function Home() {
|
||||
const [displayPanel1,setDisplayPanel1] = useState("Not Displayed");
|
||||
const [displayPanel2,setDisplayPanel2] = useState("Not Displayed");
|
||||
const [displayPanel3,setDisplayPanel3] = useState("Not Displayed");
|
||||
const [displayPanel4,setDisplayPanel4] = useState("Not Displayed");
|
||||
const [loading, setLoading] = useState(false);
|
||||
let token = isAutheticated();
|
||||
|
||||
async function getPanelStatus(){
|
||||
try {
|
||||
setLoading(true)
|
||||
let response1 = await axios.get('/api/panel/panel1/get', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
})
|
||||
|
||||
let response2 = await axios.get('/api/panel/panel2/get', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
});
|
||||
let response3 = await axios.get('/api/panel/panel3/get', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
});
|
||||
let response4 = await axios.get('/api/panel/panel4/get', {
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
}
|
||||
});
|
||||
if(response1 && response2 && response3 && response4){
|
||||
if(response1?.data?.panel1[0]?.displayPanel){
|
||||
setDisplayPanel1("Displayed")
|
||||
}
|
||||
if(response2?.data?.panel2[0]?.displayPanel){
|
||||
setDisplayPanel2("Displayed");
|
||||
}
|
||||
if(response3?.data?.panel3[0]?.displayPanel){
|
||||
setDisplayPanel3("Displayed");
|
||||
}
|
||||
if(response4?.data?.panel4[0]?.displayPanel){
|
||||
setDisplayPanel4("Displayed");
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
getPanelStatus()
|
||||
},[])
|
||||
|
||||
const pages = [
|
||||
{
|
||||
name: "Panel 1",
|
||||
action: "Edit",
|
||||
path: "/home/panel-1",
|
||||
status:displayPanel1
|
||||
},
|
||||
{
|
||||
name: "Panel 2",
|
||||
action: "Edit",
|
||||
path: "/home/panel-2",
|
||||
status:displayPanel2
|
||||
},
|
||||
{
|
||||
name: "Panel 3",
|
||||
action: "Edit",
|
||||
path: "/home/panel-3",
|
||||
status:displayPanel3
|
||||
},
|
||||
{
|
||||
name: "Panel 4",
|
||||
action: "Edit",
|
||||
path: "/home/panel-4",
|
||||
status:displayPanel4
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="main-home">
|
||||
<Typography variant="h6" fontWeight={"bold"}>
|
||||
Home
|
||||
</Typography>
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
|
||||
<TableCell style={{ fontWeight: "bold" }} align="right">
|
||||
Display Status
|
||||
</TableCell>
|
||||
<TableCell style={{ fontWeight: "bold" }} align="right">
|
||||
Action
|
||||
</TableCell>
|
||||
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{pages.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="right" sx={{pr:4}}>
|
||||
{loading ? "loading" : `${row.status}`}
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="right">
|
||||
{" "}
|
||||
<Link to={row.path}>
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="
|
||||
btn btn-info btn-sm
|
||||
waves-effect waves-light
|
||||
btn-table
|
||||
mt-1
|
||||
mx-1
|
||||
"
|
||||
>
|
||||
{row.action}
|
||||
</button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user