Testimonials Section Updated
This commit is contained in:
Sibunnayak
parent
ee638fb666
commit
a88dae7cb2
@ -114,6 +114,7 @@ import SupportRequest from "./views/CustomerSupport/SupportRequest";
|
|||||||
import SupportReply from "./views/CustomerSupport/SupportReply";
|
import SupportReply from "./views/CustomerSupport/SupportReply";
|
||||||
import SupportRequestClosed from "./views/CustomerSupport/SupportRequestClosed";
|
import SupportRequestClosed from "./views/CustomerSupport/SupportRequestClosed";
|
||||||
import CloseRequestView from "./views/CustomerSupport/CloseRequestView";
|
import CloseRequestView from "./views/CustomerSupport/CloseRequestView";
|
||||||
|
import EditTestimonial from "./views/Testimonials/EditTestimonial";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: "/", exact: true, name: "Home" },
|
{ path: "/", exact: true, name: "Home" },
|
||||||
@ -294,8 +295,27 @@ const routes = [
|
|||||||
|
|
||||||
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
|
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
|
||||||
//Complaints
|
//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",
|
path: "/banner",
|
||||||
name: "Banners",
|
name: "Banners",
|
||||||
@ -316,11 +336,6 @@ const routes = [
|
|||||||
name: "ShopImage",
|
name: "ShopImage",
|
||||||
element: ShopImage,
|
element: ShopImage,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/testimonial/view/:id",
|
|
||||||
name: "ViewTestimonial",
|
|
||||||
element: ViewTestimonial,
|
|
||||||
},
|
|
||||||
//informations
|
//informations
|
||||||
{ path: "/informations", name: "Informations", element: Informations },
|
{ path: "/informations", name: "Informations", element: Informations },
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,270 +1,265 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Button from "@material-ui/core/Button";
|
||||||
import React, { useEffect, useState } from 'react'
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import Button from '@material-ui/core/Button'
|
import swal from "sweetalert";
|
||||||
import { Link, useNavigate } from 'react-router-dom'
|
import axios from "axios";
|
||||||
import swal from 'sweetalert'
|
import { isAutheticated } from "src/auth";
|
||||||
import axios from 'axios'
|
|
||||||
import { isAutheticated } from 'src/auth'
|
|
||||||
// import { WebsiteURL } from '../WebsiteURL'
|
// import { WebsiteURL } from '../WebsiteURL'
|
||||||
|
|
||||||
const AddTestimonial = () => {
|
const AddTestimonial = () => {
|
||||||
const token = isAutheticated()
|
const token = isAutheticated();
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
const [data, setData] = useState({
|
const [data, setData] = useState({
|
||||||
|
name: "",
|
||||||
|
testimonial: "",
|
||||||
|
company: "",
|
||||||
|
image: "",
|
||||||
|
imageURL: "",
|
||||||
|
});
|
||||||
|
|
||||||
name: '',
|
const [loading, setLoading] = useState(false);
|
||||||
testimonial: '',
|
|
||||||
company: '',
|
|
||||||
image: '',
|
|
||||||
imageURL: '',
|
|
||||||
|
|
||||||
})
|
const handleChange = (e) => {
|
||||||
|
if (e.target.id === "image") {
|
||||||
|
if (
|
||||||
const [loading, setLoading] = useState(false)
|
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],
|
||||||
const handleChange = (e) => {
|
}));
|
||||||
|
return;
|
||||||
if (e.target.id === 'image') {
|
} else {
|
||||||
if (
|
swal({
|
||||||
e.target.files[0]?.type === 'image/jpeg' ||
|
title: "Warning",
|
||||||
e.target.files[0]?.type === 'image/png' ||
|
text: "Upload jpg, jpeg, png only.",
|
||||||
e.target.files[0]?.type === 'image/jpg'
|
icon: "error",
|
||||||
) {
|
button: "Close",
|
||||||
setData((prev) => ({
|
dangerMode: true,
|
||||||
...prev,
|
});
|
||||||
imageURL: URL.createObjectURL(e.target.files[0]),
|
setData((prev) => ({
|
||||||
image: e.target.files[0],
|
...prev,
|
||||||
}))
|
imageURL: "",
|
||||||
return
|
image: "",
|
||||||
} else {
|
}));
|
||||||
swal({
|
e.target.value = null;
|
||||||
title: 'Warning',
|
return;
|
||||||
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 }))
|
|
||||||
}
|
}
|
||||||
|
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (
|
||||||
const handleSubmit = () => {
|
data.name.trim() === "" ||
|
||||||
if (
|
data.company.trim() === "" ||
|
||||||
data.name.trim() === '' ||
|
data.image === "" ||
|
||||||
data.company.trim() === '' ||
|
data.testimonial.trim() === ""
|
||||||
data.image === '' ||
|
) {
|
||||||
|
swal({
|
||||||
data.testimonial.trim() === ''
|
title: "Warning",
|
||||||
|
text: "Fill all mandatory fields",
|
||||||
) {
|
icon: "error",
|
||||||
swal({
|
button: "Close",
|
||||||
title: 'Warning',
|
dangerMode: true,
|
||||||
text: 'Fill all mandatory fields',
|
});
|
||||||
icon: 'error',
|
return;
|
||||||
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,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
setLoading(true);
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.set("name", data.name);
|
||||||
|
formData.set("company", data.company);
|
||||||
|
formData.set("image", data.image);
|
||||||
|
|
||||||
return (
|
formData.set("testimonial", data.testimonial);
|
||||||
<div className="container">
|
|
||||||
<div className="row">
|
axios
|
||||||
<div className="col-12">
|
.post(`/api/testimonial/new/`, formData, {
|
||||||
<div
|
headers: {
|
||||||
className="
|
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,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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">
|
||||||
Testimonial
|
Testimonial
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
<h4 className="mb-0"></h4>
|
<h4 className="mb-0"></h4>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="page-title-right">
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
|
||||||
style={{
|
|
||||||
fontWeight: 'bold',
|
|
||||||
marginBottom: '1rem',
|
|
||||||
textTransform: 'capitalize',
|
|
||||||
marginRight: '5px',
|
|
||||||
}}
|
|
||||||
onClick={() => handleSubmit()}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? 'Loading' : 'Save'}
|
|
||||||
</Button>
|
|
||||||
<Link to="/testimonials">
|
|
||||||
<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-12 col-md-12 col-sm-12 my-1">
|
|
||||||
<div className="card h-100">
|
|
||||||
<div className="card-body px-5">
|
|
||||||
|
|
||||||
|
<div className="page-title-right">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={{
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginBottom: "1rem",
|
||||||
|
textTransform: "capitalize",
|
||||||
|
marginRight: "5px",
|
||||||
|
}}
|
||||||
|
onClick={() => handleSubmit()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? "Loading" : "Save"}
|
||||||
|
</Button>
|
||||||
|
<Link to="/testimonials">
|
||||||
|
<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-12 col-md-12 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">
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="name"
|
||||||
|
value={data.name}
|
||||||
|
maxLength={25}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.name ? (
|
||||||
|
<>
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{25 - data.name.length} characters left
|
||||||
|
</small>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}{" "}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Company (Optional) *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="company"
|
||||||
|
value={data.company}
|
||||||
|
maxLength={30}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.company ? (
|
||||||
|
<>
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{30 - data.company.length} characters left
|
||||||
|
</small>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}{" "}
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Testimonial *
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="testimonial"
|
||||||
|
rows="10"
|
||||||
|
cols="80"
|
||||||
|
value={data.testimonial}
|
||||||
|
placeholder="your Testimonial..."
|
||||||
|
maxLength="500"
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
></textarea>
|
||||||
|
|
||||||
|
{data.testimonial ? (
|
||||||
<div className="mb-3">
|
<>
|
||||||
<label htmlFor="title" className="form-label">
|
<small className="charLeft mt-4 fst-italic">
|
||||||
Name *
|
{500 - data.testimonial.length} characters left
|
||||||
</label>
|
</small>
|
||||||
<input
|
</>
|
||||||
type="text"
|
) : (
|
||||||
className="form-control"
|
<></>
|
||||||
id="name"
|
)}
|
||||||
value={data.name}
|
</div>
|
||||||
maxLength={25}
|
<div className="mb-3">
|
||||||
onChange={(e) => handleChange(e)}
|
<label htmlFor="image" className="form-label">
|
||||||
/>
|
Photo*
|
||||||
{data.name ? <><small className="charLeft mt-4 fst-italic">
|
</label>
|
||||||
{25 - data.name.length} characters left
|
<input
|
||||||
</small></> : <></>
|
type="file"
|
||||||
|
className="form-control"
|
||||||
} </div>
|
id="image"
|
||||||
|
accept="image/*"
|
||||||
|
multiple
|
||||||
<div className="mb-3">
|
onChange={(e) => handleChange(e)}
|
||||||
<label htmlFor="title" className="form-label">
|
/>
|
||||||
Company (Optional) *
|
<p className="pt-1 pl-2 text-secondary">
|
||||||
</label>
|
Upload jpg, jpeg and png only*
|
||||||
<input
|
</p>
|
||||||
type="text"
|
</div>
|
||||||
className="form-control"
|
<div
|
||||||
id="company"
|
className="mb-3"
|
||||||
value={data.company}
|
style={{ height: "200px", maxWdth: "100%" }}
|
||||||
maxLength={30}
|
>
|
||||||
onChange={(e) => handleChange(e)}
|
<img
|
||||||
/>
|
src={data.imageURL}
|
||||||
{data.company ? <><small className="charLeft mt-4 fst-italic">
|
alt="Uploaded Image will be shown here"
|
||||||
{30 - data.company.length} characters left
|
style={{ maxHeight: "200px", maxWidth: "100%" }}
|
||||||
</small></> : <></>
|
/>
|
||||||
|
</div>
|
||||||
} </div>
|
{/* <div className="mb-3">
|
||||||
<div className="mb-3">
|
|
||||||
<label htmlFor="title" className="form-label">
|
|
||||||
Testimonial *
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
id="testimonial"
|
|
||||||
rows="10"
|
|
||||||
cols="80"
|
|
||||||
value={data.testimonial}
|
|
||||||
placeholder='your Testimonial...'
|
|
||||||
maxLength="500"
|
|
||||||
onChange={(e) => handleChange(e)}
|
|
||||||
>
|
|
||||||
</textarea>
|
|
||||||
|
|
||||||
{data.testimonial ? <><small className="charLeft mt-4 fst-italic">
|
|
||||||
{500 - data.testimonial.length} characters left
|
|
||||||
</small></> : <></>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div className="mb-3">
|
|
||||||
<label htmlFor="image" className="form-label">
|
|
||||||
Photo (optional)*
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
className="form-control"
|
|
||||||
id="image"
|
|
||||||
accept="image/*"
|
|
||||||
multiple
|
|
||||||
onChange={(e) => handleChange(e)}
|
|
||||||
/>
|
|
||||||
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
|
|
||||||
</div>
|
|
||||||
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
|
|
||||||
<img
|
|
||||||
src={data.imageURL}
|
|
||||||
alt="Uploaded Image will be shown here"
|
|
||||||
style={{ maxHeight: '200px', maxWidth: '100%' }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
{/* <div className="mb-3">
|
|
||||||
<label htmlFor="title" className="form-label">
|
<label htmlFor="title" className="form-label">
|
||||||
Description *
|
Description *
|
||||||
</label>
|
</label>
|
||||||
@ -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.
|
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
|
||||||
</textarea>
|
</textarea>
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default AddTestimonial
|
export default AddTestimonial;
|
||||||
|
|||||||
415
src/views/Testimonials/EditTestimonial.js
Normal file
415
src/views/Testimonials/EditTestimonial.js
Normal file
@ -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 (
|
||||||
|
<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">
|
||||||
|
Edit Testimonial
|
||||||
|
</div>
|
||||||
|
<div style={{ display: "flex", gap: "1rem" }}>
|
||||||
|
<h4 className="mb-0"></h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="page-title-right">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={{
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginBottom: "1rem",
|
||||||
|
textTransform: "capitalize",
|
||||||
|
marginRight: "5px",
|
||||||
|
}}
|
||||||
|
onClick={() => handleSubmit()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? "Loading" : "Edit"}
|
||||||
|
</Button>
|
||||||
|
<Link to="/testimonials">
|
||||||
|
<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">
|
||||||
|
Name*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
maxLength={25}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
/>
|
||||||
|
{name ? (
|
||||||
|
<>
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{25 - name.length} characters left
|
||||||
|
</small>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}{" "}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Company
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="Company"
|
||||||
|
value={company}
|
||||||
|
maxLength="100"
|
||||||
|
onChange={(e) => setcompany(e.target.value)}
|
||||||
|
/>
|
||||||
|
{company ? (
|
||||||
|
<>
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{30 - company.length} characters left
|
||||||
|
</small>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{/* ************************* */}
|
||||||
|
<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" }}>
|
||||||
|
{Img === false ? (
|
||||||
|
<Box marginRight={"2rem"}>
|
||||||
|
<img
|
||||||
|
src={image.url}
|
||||||
|
alt="profileImage"
|
||||||
|
style={{
|
||||||
|
width: 70,
|
||||||
|
height: 70,
|
||||||
|
|
||||||
|
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}
|
||||||
|
{newUpdatedImages !== null && Img && (
|
||||||
|
<Box marginRight={"2rem"}>
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
newUpdatedImages
|
||||||
|
? URL.createObjectURL(newUpdatedImages)
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
// src={newUpdatedImages?.url}
|
||||||
|
alt="profileImage"
|
||||||
|
style={{
|
||||||
|
width: 70,
|
||||||
|
height: 70,
|
||||||
|
|
||||||
|
marginBottom: "1rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<DeleteSharpIcon
|
||||||
|
onClick={() => handellocalDelete()}
|
||||||
|
fontSize="small"
|
||||||
|
sx={{
|
||||||
|
color: "white",
|
||||||
|
position: "absolute",
|
||||||
|
cursor: "pointer",
|
||||||
|
padding: "0.2rem",
|
||||||
|
background: "black",
|
||||||
|
borderRadius: "50%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* </IconButton> */}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</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">
|
||||||
|
<div className="mb-3 me-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Testimonial*
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
className="form-control"
|
||||||
|
id="testimonial"
|
||||||
|
value={testimonial}
|
||||||
|
maxLength={200}
|
||||||
|
style={{ minHeight: "120px", resize: "vertical" }} // Adjust the height and resize behavior here
|
||||||
|
onChange={(e) => settestimonial(e.target.value)}
|
||||||
|
/>
|
||||||
|
{testimonial ? (
|
||||||
|
<small className="charLeft mt-4 fst-italic">
|
||||||
|
{200 - testimonial.length} characters left
|
||||||
|
</small>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditTestimonial;
|
||||||
@ -61,7 +61,7 @@ const Testimonials = () => {
|
|||||||
}).then((value) => {
|
}).then((value) => {
|
||||||
if (value === true) {
|
if (value === true) {
|
||||||
axios
|
axios
|
||||||
.delete(`/api/item/delete/${id}`, {
|
.delete(`/api/testimonial/delete/${id}`, {
|
||||||
headers: {
|
headers: {
|
||||||
"Access-Control-Allow-Origin": "*",
|
"Access-Control-Allow-Origin": "*",
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
@ -222,6 +222,48 @@ const Testimonials = () => {
|
|||||||
View
|
View
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link to={`/testimonial/edit/${item._id}`}>
|
||||||
|
<button
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
marginRight: "1rem",
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
className="
|
||||||
|
btn btn-info btn-sm
|
||||||
|
waves-effect waves-light
|
||||||
|
btn-table
|
||||||
|
mt-1
|
||||||
|
mx-1
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to={"#"}
|
||||||
|
style={{
|
||||||
|
marginRight: "1rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
style={{ color: "white" }}
|
||||||
|
type="button"
|
||||||
|
className="
|
||||||
|
btn btn-danger btn-sm
|
||||||
|
waves-effect waves-light
|
||||||
|
btn-table
|
||||||
|
mt-1
|
||||||
|
mx-1
|
||||||
|
|
||||||
|
"
|
||||||
|
onClick={() => {
|
||||||
|
handleDelete(item._id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user