diff --git a/src/routes.js b/src/routes.js index c518abd..5162500 100644 --- a/src/routes.js +++ b/src/routes.js @@ -114,6 +114,7 @@ import SupportRequest from "./views/CustomerSupport/SupportRequest"; import SupportReply from "./views/CustomerSupport/SupportReply"; import SupportRequestClosed from "./views/CustomerSupport/SupportRequestClosed"; import CloseRequestView from "./views/CustomerSupport/CloseRequestView"; +import EditTestimonial from "./views/Testimonials/EditTestimonial"; const routes = [ { path: "/", exact: true, name: "Home" }, @@ -294,8 +295,27 @@ const routes = [ // { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint }, //Complaints - { path: "/testimonials", name: "Testimonials", element: Testimonials }, - { path: "/testimonial/new", name: "AddTestimonial", element: AddTestimonial }, + { + path: "/testimonials", + name: "Testimonials", + element: Testimonials + }, + + { + path: "/testimonial/new", + name: "AddTestimonial", + element: AddTestimonial + }, + { + path: "/testimonial/view/:id", + name: "ViewTestimonial", + element: ViewTestimonial, + }, + { + path: "/testimonial/edit/:id", + name: "EditTestimonial", + element: EditTestimonial + }, { path: "/banner", name: "Banners", @@ -316,11 +336,6 @@ const routes = [ name: "ShopImage", element: ShopImage, }, - { - path: "/testimonial/view/:id", - name: "ViewTestimonial", - element: ViewTestimonial, - }, //informations { path: "/informations", name: "Informations", element: Informations }, { diff --git a/src/views/Testimonials/AddTestimonial.js b/src/views/Testimonials/AddTestimonial.js index d3119b5..1443fa4 100644 --- a/src/views/Testimonials/AddTestimonial.js +++ b/src/views/Testimonials/AddTestimonial.js @@ -1,270 +1,265 @@ - - -import React, { useEffect, useState } from 'react' -import Button from '@material-ui/core/Button' -import { Link, useNavigate } from 'react-router-dom' -import swal from 'sweetalert' -import axios from 'axios' -import { isAutheticated } from 'src/auth' +import React, { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link, useNavigate } from "react-router-dom"; +import swal from "sweetalert"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; // import { WebsiteURL } from '../WebsiteURL' const AddTestimonial = () => { - const token = isAutheticated() - const navigate = useNavigate() - const [data, setData] = useState({ + const token = isAutheticated(); + const navigate = useNavigate(); + const [data, setData] = useState({ + name: "", + testimonial: "", + company: "", + image: "", + imageURL: "", + }); - name: '', - testimonial: '', - company: '', - image: '', - imageURL: '', + const [loading, setLoading] = useState(false); - }) - - - const [loading, setLoading] = useState(false) - - - - - - - - const handleChange = (e) => { - - if (e.target.id === 'image') { - if ( - e.target.files[0]?.type === 'image/jpeg' || - e.target.files[0]?.type === 'image/png' || - e.target.files[0]?.type === 'image/jpg' - ) { - setData((prev) => ({ - ...prev, - imageURL: URL.createObjectURL(e.target.files[0]), - image: e.target.files[0], - })) - return - } else { - swal({ - title: 'Warning', - text: 'Upload jpg, jpeg, png only.', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - setData((prev) => ({ - ...prev, - imageURL: '', - image: '', - })) - e.target.value = null - return - } - } - setData((prev) => ({ ...prev, [e.target.id]: e.target.value })) + const handleChange = (e) => { + if (e.target.id === "image") { + if ( + e.target.files[0]?.type === "image/jpeg" || + e.target.files[0]?.type === "image/png" || + e.target.files[0]?.type === "image/jpg" + ) { + setData((prev) => ({ + ...prev, + imageURL: URL.createObjectURL(e.target.files[0]), + image: e.target.files[0], + })); + return; + } else { + swal({ + title: "Warning", + text: "Upload jpg, jpeg, png only.", + icon: "error", + button: "Close", + dangerMode: true, + }); + setData((prev) => ({ + ...prev, + imageURL: "", + image: "", + })); + e.target.value = null; + return; + } } + setData((prev) => ({ ...prev, [e.target.id]: e.target.value })); + }; - - - const handleSubmit = () => { - if ( - data.name.trim() === '' || - data.company.trim() === '' || - data.image === '' || - - data.testimonial.trim() === '' - - ) { - swal({ - title: 'Warning', - text: 'Fill all mandatory fields', - icon: 'error', - button: 'Close', - dangerMode: true, - }) - return - } - setLoading(true) - const formData = new FormData() - formData.set('name', data.name) - formData.set('company', data.company) - formData.set('image', data.image) - - formData.set('testimonial', data.testimonial) - - - - axios - .post(`/api/testimonial/new/`, formData, { - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': 'multipart/formdata', - 'Access-Control-Allow-Origin': '*', - }, - }) - .then((res) => { - swal({ - title: 'Added', - text: 'Testimonial added successfully!', - icon: 'success', - button: 'ok', - }) - setLoading(false) - navigate('/testimonials', { replace: true }) - }) - .catch((err) => { - setLoading(false) - const message = err.response?.data?.message || 'Something went wrong!' - swal({ - title: 'Warning', - text: message, - icon: 'error', - button: 'Retry', - dangerMode: true, - }) - }) + const handleSubmit = () => { + if ( + data.name.trim() === "" || + data.company.trim() === "" || + data.image === "" || + data.testimonial.trim() === "" + ) { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; } + setLoading(true); + const formData = new FormData(); + formData.set("name", data.name); + formData.set("company", data.company); + formData.set("image", data.image); - return ( -
-
-
-
{ + swal({ + title: "Added", + text: "Testimonial added successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + navigate("/testimonials", { replace: true }); + }) + .catch((err) => { + setLoading(false); + const message = err.response?.data?.message || "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + return ( +
+
+
+
-
- Testimonial -
-
-

-
- -
- - - - -
-
-
+ > +
+ Testimonial +
+
+

-
-
-
-
+
+ + + + +
+
+
+
+
+
+
+
+
+ + handleChange(e)} + /> + {data.name ? ( + <> + + {25 - data.name.length} characters left + + + ) : ( + <> + )}{" "} +
+
+ + handleChange(e)} + /> + {data.company ? ( + <> + + {30 - data.company.length} characters left + + + ) : ( + <> + )}{" "} +
+
+ + - -
- - handleChange(e)} - /> - {data.name ? <> - {25 - data.name.length} characters left - : <> - - }
- - -
- - handleChange(e)} - /> - {data.company ? <> - {30 - data.company.length} characters left - : <> - - }
-
- - - - {data.testimonial ? <> - {500 - data.testimonial.length} characters left - : <> - } -
-
- - handleChange(e)} - /> -

Upload jpg, jpeg and png only*

-
-
- Uploaded Image will be shown here - -
- {/*
+ {data.testimonial ? ( + <> + + {500 - data.testimonial.length} characters left + + + ) : ( + <> + )} +
+
+ + handleChange(e)} + /> +

+ Upload jpg, jpeg and png only* +

+
+
+ Uploaded Image will be shown here +
+ {/*
@@ -273,13 +268,12 @@ const AddTestimonial = () => { At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
*/} -
-
-
-
+
- ) -} +
+
+ ); +}; -export default AddTestimonial +export default AddTestimonial; diff --git a/src/views/Testimonials/EditTestimonial.js b/src/views/Testimonials/EditTestimonial.js new file mode 100644 index 0000000..de323b1 --- /dev/null +++ b/src/views/Testimonials/EditTestimonial.js @@ -0,0 +1,415 @@ +import React, { useEffect, useState } from "react"; +import Button from "@material-ui/core/Button"; +import { Link, useNavigate, useParams } from "react-router-dom"; +import swal from "sweetalert"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; + +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +import { + Box, + FormControl, + IconButton, + MenuItem, + Select, + TextField, +} from "@mui/material"; +// import { WebsiteURL } from '../WebsiteURL' + +const EditTestimonial = () => { + const id = useParams()?.id; + + const token = isAutheticated(); + const navigate = useNavigate(); + + const [loading, setLoading] = useState(false); + const [name, setName] = useState(""); + const [company, setcompany] = useState(""); + const [image, setimage] = useState(null); + const [testimonial, settestimonial] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + + //get testimonialdata + const gettestimonial = async () => { + axios + .get(`/api/testimonial/getOne/${id}`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // console.log(res?.data?.testimonial); + setName(res?.data?.testimonial?.name); + setcompany(res?.data?.testimonial?.company); + settestimonial(res?.data?.testimonial?.testimonial); + setimage(res?.data?.testimonial?.image); + setImg(false); + }) + .catch((err) => { + swal({ + title: error, + text: " Can not fetch the product ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + + useEffect(() => { + gettestimonial(); + }, []); + + const handleSubmit = () => { + if (name === "" || testimonial === "" || (image === null && newUpdatedImages === null)) { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); + const formData = new FormData(); + formData.append("name", name); + + formData.append("testimonial", testimonial); + formData.append("company", company); + + // formData.append("image", JSON.stringify(newUpdatedImages)); + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + + axios + .patch(`/api/testimonial/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: "Testimonial Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + navigate("/testimonials", { replace: true }); + }) + .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 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); + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; + + const handelDelete = async (public_id) => { + const ary = public_id.split("/"); + + const res = await axios.delete( + `/api/testimonial/deleteImage/GetSygnal/Testimonial/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; + const handellocalDelete = () => { + setNewUpdatedImages(null); + }; + return ( +
+
+
+
+
+ Edit Testimonial +
+
+

+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ + setName(e.target.value)} + /> + {name ? ( + <> + + {25 - name.length} characters left + + + ) : ( + <> + )}{" "} +
+ +
+ + setcompany(e.target.value)} + /> + {company ? ( + <> + + {30 - company.length} characters left + + + ) : ( + <> + )} +
+ {/* ************************* */} + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + {Img === false ? ( + + profileImage + handelDelete(image.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + ) : null} + {newUpdatedImages !== null && Img && ( + + profileImage + handellocalDelete()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + {/* */} + + )} + +
+
+
+
+
+
+
+ +