logo and home
This commit is contained in:
pawan-dot
parent
c686393166
commit
8a1d5dc9dc
14
src/_nav.js
14
src/_nav.js
@ -307,13 +307,13 @@ const _nav = [
|
|||||||
to: "/copyright/message",
|
to: "/copyright/message",
|
||||||
group: "Settings",
|
group: "Settings",
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// component: CNavItem,
|
component: CNavItem,
|
||||||
// name: "Home",
|
name: "Home",
|
||||||
// icon: <CIcon icon={cilFeaturedPlaylist} customClassName="nav-icon" />,
|
icon: <CIcon icon={cilFeaturedPlaylist} customClassName="nav-icon" />,
|
||||||
// to: "/home",
|
to: "/home",
|
||||||
// group: "Website Settings",
|
group: "Settings",
|
||||||
// },
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|||||||
@ -45,7 +45,7 @@ export default function editRefundPolicy() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const addTermsandConditions = async () => {
|
const addTermsandConditions = async () => {
|
||||||
const response = await axios.patch(
|
const response = await axios.post(
|
||||||
"/api/content/refund-policy",
|
"/api/content/refund-policy",
|
||||||
{ content },
|
{ content },
|
||||||
{
|
{
|
||||||
|
|||||||
@ -6,398 +6,389 @@ import "react-quill/dist/quill.snow.css";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { isAutheticated } from "src/auth";
|
import { isAutheticated } from "src/auth";
|
||||||
const TOOLBAR_OPTIONS = [
|
const TOOLBAR_OPTIONS = [
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||||
[{ font: [] }],
|
[{ font: [] }],
|
||||||
[{ list: "ordered" }, { list: "bullet" }],
|
[{ list: "ordered" }, { list: "bullet" }],
|
||||||
["bold", "italic", "underline", "strike"],
|
["bold", "italic", "underline", "strike"],
|
||||||
[{ color: [] }, { background: [] }],
|
[{ color: [] }, { background: [] }],
|
||||||
[{ align: [] }],
|
[{ align: [] }],
|
||||||
[{ script: "super" }, { script: "sub" }],
|
[{ script: "super" }, { script: "sub" }],
|
||||||
["undo", "redo"],
|
["undo", "redo"],
|
||||||
];
|
];
|
||||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||||
import {
|
import { Box, TextField, Checkbox, FormControlLabel } from "@mui/material";
|
||||||
Box,
|
|
||||||
TextField,
|
|
||||||
Checkbox,
|
|
||||||
FormControlLabel
|
|
||||||
} from "@mui/material";
|
|
||||||
|
|
||||||
const EditPanel1 = () => {
|
const EditPanel1 = () => {
|
||||||
const token = isAutheticated();
|
const token = isAutheticated();
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [displayPanel, setDisplayPanel] = useState(false);
|
const [displayPanel, setDisplayPanel] = useState(false);
|
||||||
const [content, setContent] = useState("");
|
const [content, setContent] = useState("");
|
||||||
const [olderContent, setOlderContent] = useState("");
|
const [olderContent, setOlderContent] = useState("");
|
||||||
const [image, setimage] = useState(null);
|
const [image, setimage] = useState(null);
|
||||||
const [title, setTitle] = useState("");
|
const [title, setTitle] = useState("");
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
||||||
const [Img, setImg] = useState(true);
|
const [Img, setImg] = useState(true);
|
||||||
const [id, setId] = useState(null);
|
const [id, setId] = useState(null);
|
||||||
|
|
||||||
const handleContentChange = (content, delta, source, editor) => {
|
const handleContentChange = (content, delta, source, editor) => {
|
||||||
setContent(editor.getHTML());
|
setContent(editor.getHTML());
|
||||||
};
|
};
|
||||||
//get Blogdata
|
//get Blogdata
|
||||||
const getPanel = async () => {
|
const getPanel = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`/api/panel/panel1/get`, {
|
const res = await axios.get(`/api/panel/panel1/get`, {
|
||||||
headers: {
|
headers: {
|
||||||
"Access-Control-Allow-Origin": "*",
|
"Access-Control-Allow-Origin": "*",
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
setTitle(res?.data?.panel1[0]?.title);
|
setTitle(res?.data?.panel1[0]?.title);
|
||||||
setimage(res?.data?.panel1[0]?.image);
|
setimage(res?.data?.panel1[0]?.image);
|
||||||
setContent(res?.data?.panel1[0]?.content);
|
setContent(res?.data?.panel1[0]?.content);
|
||||||
setOlderContent(res?.data?.panel1[0]?.content);
|
setOlderContent(res?.data?.panel1[0]?.content);
|
||||||
setDisplayPanel(res?.data?.panel1[0]?.displayPanel);
|
setDisplayPanel(res?.data?.panel1[0]?.displayPanel);
|
||||||
setId(res?.data?.panel1[0]?._id);
|
setId(res?.data?.panel1[0]?._id);
|
||||||
setImg(false);
|
setImg(false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
swal({
|
swal({
|
||||||
title: "Error",
|
title: "Error",
|
||||||
text: "Unable to fetch the panel content",
|
text: "Unable to fetch the panel content",
|
||||||
icon: "error",
|
icon: "error",
|
||||||
button: "Retry",
|
button: "Retry",
|
||||||
dangerMode: true,
|
dangerMode: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getPanel();
|
getPanel();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleFileChange = (e) => {
|
const handleFileChange = (e) => {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
// Reset error state
|
// Reset error state
|
||||||
setError("");
|
setError("");
|
||||||
|
|
||||||
// Check if more than one image is selected
|
// Check if more than one image is selected
|
||||||
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
|
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
|
||||||
setError("You can only upload one image.");
|
setError("You can only upload one image.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check file types and append to selectedFiles
|
// Check file types and append to selectedFiles
|
||||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||||
const file = files[0]; // Only one file is selected, so we get the first one
|
const file = files[0]; // Only one file is selected, so we get the first one
|
||||||
|
|
||||||
if (allowedTypes.includes(file.type)) {
|
if (allowedTypes.includes(file.type)) {
|
||||||
setNewUpdatedImages(file);
|
setNewUpdatedImages(file);
|
||||||
setimage(file);
|
setimage(file);
|
||||||
|
} else {
|
||||||
|
setError("Please upload only PNG, JPEG, or JPG files.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
} else {
|
const handelDelete = async (public_id) => {
|
||||||
setError("Please upload only PNG, JPEG, or JPG files.");
|
console.log(public_id);
|
||||||
}
|
const ary = public_id?.split("/");
|
||||||
};
|
setNewUpdatedImages(null);
|
||||||
|
|
||||||
const handelDelete = async (public_id) => {
|
const res = await axios.delete(
|
||||||
const ary = public_id.split("/");
|
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
||||||
setNewUpdatedImages(null);
|
{
|
||||||
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (res) {
|
||||||
|
setimage(null);
|
||||||
|
setImg(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const res = await axios.delete(
|
const addContent = async () => {
|
||||||
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
const formData = new FormData();
|
||||||
{
|
formData.append("title", title);
|
||||||
headers: {
|
formData.append("content", content);
|
||||||
"Access-Control-Allow-Origin": "*",
|
formData.append("displayPanel", displayPanel);
|
||||||
Authorization: `Bearer ${token}`,
|
formData.append("image", image);
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (res) {
|
|
||||||
setimage(null);
|
|
||||||
setImg(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const addContent = async () => {
|
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 formData = new FormData();
|
const updateContent = () => {
|
||||||
formData.append("title", title);
|
if (title === "" || content === "") {
|
||||||
formData.append("content", content);
|
swal({
|
||||||
formData.append("displayPanel", displayPanel);
|
title: "Warning",
|
||||||
formData.append("image", image);
|
text: "Fill all mandatory fields",
|
||||||
|
icon: "error",
|
||||||
|
button: "Close",
|
||||||
|
dangerMode: true,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
const response = await axios.post(
|
const formData = new FormData();
|
||||||
"/api/panel/panel1/add",
|
formData.append("title", title);
|
||||||
formData,
|
formData.append("content", content);
|
||||||
{
|
formData.append("displayPanel", displayPanel);
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (response.status == 201) {
|
|
||||||
swal({
|
|
||||||
title: "Congratulations!!",
|
|
||||||
text: "Panel 1 added successfully!",
|
|
||||||
icon: "success",
|
|
||||||
button: "OK",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateContent = () => {
|
if (newUpdatedImages !== null) {
|
||||||
if (title === "" || content === "") {
|
formData.append("image", newUpdatedImages);
|
||||||
swal({
|
}
|
||||||
title: "Warning",
|
|
||||||
text: "Fill all mandatory fields",
|
|
||||||
icon: "error",
|
|
||||||
button: "Close",
|
|
||||||
dangerMode: true,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
|
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 formData = new FormData();
|
const message = err.response?.data?.message
|
||||||
formData.append("title", title);
|
? err.response?.data?.message
|
||||||
formData.append("content", content);
|
: "Something went wrong!";
|
||||||
formData.append("displayPanel", displayPanel);
|
swal({
|
||||||
|
title: "Warning",
|
||||||
|
text: message,
|
||||||
|
icon: "error",
|
||||||
|
button: "Retry",
|
||||||
|
dangerMode: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
if (newUpdatedImages !== null) {
|
const handleSaveClick = async () => {
|
||||||
formData.append("image", newUpdatedImages);
|
if (olderContent.length === 0) {
|
||||||
}
|
addContent();
|
||||||
|
} else {
|
||||||
|
updateContent();
|
||||||
|
}
|
||||||
|
// // Reload terms and conditions
|
||||||
|
// await getPrivacyPolicy();
|
||||||
|
};
|
||||||
|
|
||||||
axios
|
const handleChange = (event) => {
|
||||||
.patch(`/api/panel/panel1/update/${id}`, formData, {
|
setDisplayPanel(event.target.checked);
|
||||||
headers: {
|
};
|
||||||
Authorization: `Bearer ${token}`,
|
return (
|
||||||
"Content-Type": "multipart/form-data",
|
<div className="container">
|
||||||
"Access-Control-Allow-Origin": "*",
|
<div className="row">
|
||||||
},
|
<div className="col-12">
|
||||||
})
|
<div
|
||||||
.then((res) => {
|
className="
|
||||||
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
|
page-title-box
|
||||||
d-flex
|
d-flex
|
||||||
align-items-center
|
align-items-center
|
||||||
justify-content-between
|
justify-content-between
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||||
Panel 1
|
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>
|
||||||
<div className="row">
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
<h4 className="mb-0"></h4>
|
||||||
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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 ||
|
||||||
|
(newUpdatedImages &&
|
||||||
|
URL.createObjectURL(newUpdatedImages)) ||
|
||||||
|
null
|
||||||
|
}
|
||||||
|
alt="Panel Image"
|
||||||
|
style={{
|
||||||
|
width: 350,
|
||||||
|
height: 270,
|
||||||
|
|
||||||
|
marginBottom: "1rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{console.log("image", image)}
|
||||||
|
|
||||||
|
{ image?.public_id&&<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;
|
export default EditPanel1;
|
||||||
|
|||||||
@ -101,7 +101,7 @@ const EditPanel2 = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handelDelete = async (public_id) => {
|
const handelDelete = async (public_id) => {
|
||||||
const ary = public_id.split("/");
|
const ary = public_id?.split("/");
|
||||||
setNewUpdatedImages(null);
|
setNewUpdatedImages(null);
|
||||||
|
|
||||||
const res = await axios.delete(
|
const res = await axios.delete(
|
||||||
@ -368,7 +368,7 @@ const EditPanel2 = () => {
|
|||||||
marginBottom: "1rem",
|
marginBottom: "1rem",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<DeleteSharpIcon
|
{ image?.public_id&& <DeleteSharpIcon
|
||||||
onClick={() => handelDelete(image?.public_id)}
|
onClick={() => handelDelete(image?.public_id)}
|
||||||
fontSize="small"
|
fontSize="small"
|
||||||
sx={{
|
sx={{
|
||||||
@ -379,7 +379,7 @@ const EditPanel2 = () => {
|
|||||||
background: "black",
|
background: "black",
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
}}
|
}}
|
||||||
/>
|
/>}
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@ -101,7 +101,7 @@ const EditPanel3 = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handelDelete = async (public_id) => {
|
const handelDelete = async (public_id) => {
|
||||||
const ary = public_id.split("/");
|
const ary = public_id?.split("/");
|
||||||
setNewUpdatedImages(null);
|
setNewUpdatedImages(null);
|
||||||
|
|
||||||
const res = await axios.delete(
|
const res = await axios.delete(
|
||||||
@ -366,7 +366,7 @@ const EditPanel3 = () => {
|
|||||||
marginBottom: "1rem",
|
marginBottom: "1rem",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<DeleteSharpIcon
|
{ image?.public_id&&<DeleteSharpIcon
|
||||||
onClick={() => handelDelete(image?.public_id)}
|
onClick={() => handelDelete(image?.public_id)}
|
||||||
fontSize="small"
|
fontSize="small"
|
||||||
sx={{
|
sx={{
|
||||||
@ -377,7 +377,7 @@ const EditPanel3 = () => {
|
|||||||
background: "black",
|
background: "black",
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
}}
|
}}
|
||||||
/>
|
/>}
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@ -6,404 +6,397 @@ import "react-quill/dist/quill.snow.css";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { isAutheticated } from "src/auth";
|
import { isAutheticated } from "src/auth";
|
||||||
const TOOLBAR_OPTIONS = [
|
const TOOLBAR_OPTIONS = [
|
||||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||||
[{ font: [] }],
|
[{ font: [] }],
|
||||||
[{ list: "ordered" }, { list: "bullet" }],
|
[{ list: "ordered" }, { list: "bullet" }],
|
||||||
["bold", "italic", "underline", "strike"],
|
["bold", "italic", "underline", "strike"],
|
||||||
[{ color: [] }, { background: [] }],
|
[{ color: [] }, { background: [] }],
|
||||||
[{ align: [] }],
|
[{ align: [] }],
|
||||||
[{ script: "super" }, { script: "sub" }],
|
[{ script: "super" }, { script: "sub" }],
|
||||||
["undo", "redo"],
|
["undo", "redo"],
|
||||||
];
|
];
|
||||||
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||||
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||||
import {
|
import { Box, TextField, Checkbox, FormControlLabel } from "@mui/material";
|
||||||
Box,
|
|
||||||
TextField,
|
|
||||||
Checkbox,
|
|
||||||
FormControlLabel
|
|
||||||
} from "@mui/material";
|
|
||||||
|
|
||||||
const Editpanel4 = () => {
|
const Editpanel4 = () => {
|
||||||
const token = isAutheticated();
|
const token = isAutheticated();
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [displayPanel, setDisplayPanel] = useState(false);
|
const [displayPanel, setDisplayPanel] = useState(false);
|
||||||
const [content, setContent] = useState("");
|
const [content, setContent] = useState("");
|
||||||
const [olderContent, setOlderContent] = useState("");
|
const [olderContent, setOlderContent] = useState("");
|
||||||
const [image, setimage] = useState("");
|
const [image, setimage] = useState("");
|
||||||
const [title, setTitle] = useState("");
|
const [title, setTitle] = useState("");
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
|
||||||
const [Img, setImg] = useState(true);
|
const [Img, setImg] = useState(true);
|
||||||
const [id, setId] = useState(null);
|
const [id, setId] = useState(null);
|
||||||
|
|
||||||
const handleContentChange = (content, delta, source, editor) => {
|
const handleContentChange = (content, delta, source, editor) => {
|
||||||
setContent(editor.getHTML());
|
setContent(editor.getHTML());
|
||||||
};
|
};
|
||||||
//get Blogdata
|
//get Blogdata
|
||||||
const getPanel = async () => {
|
const getPanel = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await axios.get(`/api/panel/panel4/get`, {
|
const res = await axios.get(`/api/panel/panel4/get`, {
|
||||||
headers: {
|
headers: {
|
||||||
"Access-Control-Allow-Origin": "*",
|
"Access-Control-Allow-Origin": "*",
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (res?.status === 200) {
|
if (res?.status === 200) {
|
||||||
setTitle(res?.data?.panel4[0]?.title);
|
setTitle(res?.data?.panel4[0]?.title);
|
||||||
if(res?.data?.panel4[0]?.image!==undefined && res?.data?.panel4[0]?.image!==null){
|
if (
|
||||||
setimage(res?.data?.panel4[0]?.image);
|
res?.data?.panel4[0]?.image !== undefined &&
|
||||||
}
|
res?.data?.panel4[0]?.image !== null
|
||||||
setContent(res?.data?.panel4[0]?.content);
|
) {
|
||||||
setOlderContent(res?.data?.panel4[0]?.content);
|
setimage(res?.data?.panel4[0]?.image);
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
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(() => {
|
useEffect(() => {
|
||||||
getPanel();
|
getPanel();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleFileChange = (e) => {
|
const handleFileChange = (e) => {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
// Reset error state
|
// Reset error state
|
||||||
setError("");
|
setError("");
|
||||||
|
|
||||||
// Check if more than one image is selected
|
// Check if more than one image is selected
|
||||||
if (files.length > 1 || newUpdatedImages !== null) {
|
if (files.length > 1 || newUpdatedImages !== null) {
|
||||||
setError("You can only upload one image.");
|
setError("You can only upload one image.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check file types and append to selectedFiles
|
// Check file types and append to selectedFiles
|
||||||
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
|
||||||
const file = files[0]; // Only one file is selected, so we get the first one
|
const file = files[0]; // Only one file is selected, so we get the first one
|
||||||
|
|
||||||
if (allowedTypes.includes(file.type)) {
|
if (allowedTypes.includes(file.type)) {
|
||||||
setNewUpdatedImages(file);
|
setNewUpdatedImages(file);
|
||||||
setimage(file);
|
setimage(file);
|
||||||
|
} else {
|
||||||
|
setError("Please upload only PNG, JPEG, or JPG files.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
} else {
|
const handelDelete = async (public_id) => {
|
||||||
setError("Please upload only PNG, JPEG, or JPG files.");
|
const ary = public_id?.split("/");
|
||||||
}
|
setNewUpdatedImages(null);
|
||||||
};
|
|
||||||
|
|
||||||
const handelDelete = async (public_id) => {
|
const res = await axios.delete(
|
||||||
const ary = public_id.split("/");
|
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
||||||
setNewUpdatedImages(null);
|
{
|
||||||
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
if (res) {
|
||||||
|
setimage(null);
|
||||||
|
setImg(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const res = await axios.delete(
|
const addContent = async () => {
|
||||||
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
|
const formData = new FormData();
|
||||||
{
|
formData.append("title", title);
|
||||||
headers: {
|
formData.append("content", content);
|
||||||
"Access-Control-Allow-Origin": "*",
|
formData.append("displayPanel", displayPanel);
|
||||||
Authorization: `Bearer ${token}`,
|
formData.append("image", image);
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (res) {
|
|
||||||
setimage(null);
|
|
||||||
setImg(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const addContent = async () => {
|
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 formData = new FormData();
|
const updateContent = () => {
|
||||||
formData.append("title", title);
|
if (title === "" || content === "") {
|
||||||
formData.append("content", content);
|
swal({
|
||||||
formData.append("displayPanel", displayPanel);
|
title: "Warning",
|
||||||
formData.append("image", image);
|
text: "Fill all mandatory fields",
|
||||||
|
icon: "error",
|
||||||
|
button: "Close",
|
||||||
|
dangerMode: true,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
const response = await axios.post(
|
const formData = new FormData();
|
||||||
"/api/panel/panel4/add",
|
formData.append("title", title);
|
||||||
formData,
|
formData.append("content", content);
|
||||||
{
|
formData.append("displayPanel", displayPanel);
|
||||||
headers: {
|
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (response.status == 201) {
|
|
||||||
swal({
|
|
||||||
title: "Congratulations!!",
|
|
||||||
text: "Panel 4 added successfully!",
|
|
||||||
icon: "success",
|
|
||||||
button: "OK",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateContent = () => {
|
if (newUpdatedImages !== null) {
|
||||||
if (title === "" || content === "") {
|
formData.append("image", newUpdatedImages);
|
||||||
swal({
|
}
|
||||||
title: "Warning",
|
|
||||||
text: "Fill all mandatory fields",
|
|
||||||
icon: "error",
|
|
||||||
button: "Close",
|
|
||||||
dangerMode: true,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
|
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 formData = new FormData();
|
const message = err.response?.data?.message
|
||||||
formData.append("title", title);
|
? err.response?.data?.message
|
||||||
formData.append("content", content);
|
: "Something went wrong!";
|
||||||
formData.append("displayPanel", displayPanel);
|
swal({
|
||||||
|
title: "Warning",
|
||||||
|
text: message,
|
||||||
|
icon: "error",
|
||||||
|
button: "Retry",
|
||||||
|
dangerMode: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
if (newUpdatedImages !== null) {
|
const handleSaveClick = async () => {
|
||||||
formData.append("image", newUpdatedImages);
|
if (!olderContent) {
|
||||||
}
|
addContent();
|
||||||
|
} else {
|
||||||
|
updateContent();
|
||||||
|
}
|
||||||
|
// // Reload terms and conditions
|
||||||
|
// await getPrivacyPolicy();
|
||||||
|
};
|
||||||
|
|
||||||
axios
|
const handleChange = (event) => {
|
||||||
.patch(`/api/panel/panel4/update/${id}`, formData, {
|
setDisplayPanel(event.target.checked);
|
||||||
headers: {
|
};
|
||||||
Authorization: `Bearer ${token}`,
|
return (
|
||||||
"Content-Type": "multipart/form-data",
|
<div className="container">
|
||||||
"Access-Control-Allow-Origin": "*",
|
<div className="row">
|
||||||
},
|
<div className="col-12">
|
||||||
})
|
<div
|
||||||
.then((res) => {
|
className="
|
||||||
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
|
page-title-box
|
||||||
d-flex
|
d-flex
|
||||||
align-items-center
|
align-items-center
|
||||||
justify-content-between
|
justify-content-between
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div style={{ fontSize: "22px" }} className="fw-bold">
|
<div style={{ fontSize: "22px" }} className="fw-bold">
|
||||||
Panel 4
|
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>
|
||||||
<div className="row">
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
<h4 className="mb-0"></h4>
|
||||||
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{image?.public_id && (
|
||||||
|
<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;
|
export default Editpanel4;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user