diff --git a/.env b/.env index d33aa08..43ccba0 100644 --- a/.env +++ b/.env @@ -1,3 +1,4 @@ PORT = 3000 CHOKIDAR_USEPOLLING = true -XI_API_KEY="e327fdf320043677a512f1b0dade8403" \ No newline at end of file +XI_API_KEY="e327fdf320043677a512f1b0dade8403" +REACT_APP_BASE_URL=http://localhost:8000 \ No newline at end of file diff --git a/src/_nav.js b/src/_nav.js index c400d1d..be65ba6 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -11,6 +11,7 @@ import { cilCommand, cilCompress, cilContact, + cilImage, cilLanguage, cilLoopCircular, cilMedicalCross, @@ -102,6 +103,12 @@ const _nav = [ name: "Website Related", icon: , items: [ + { + component: CNavItem, + name: "Banner", + icon: , + to: "/banner", + }, { component: CNavItem, name: "Testimonials", diff --git a/src/routes.js b/src/routes.js index 7807047..a8d14f6 100644 --- a/src/routes.js +++ b/src/routes.js @@ -92,6 +92,7 @@ import EditUserAddress from "./views/UserAddress/editUserAddress"; import AddUserAddress from "./views/UserAddress/addUserAddress"; import ViewAddress from "./views/UserAddress/viewAddress"; import Design from "./views/Design/design"; +import Banners from "./views/Banner/banner"; const routes = [ { path: "/", exact: true, name: "Home" }, { @@ -247,6 +248,11 @@ const routes = [ //Complaints { path: "/testimonials", name: "Testimonials", element: Testimonials }, { path: "/testimonial/new", name: "AddTestimonial", element: AddTestimonial }, + { + path: "/banner", + name: "Banners", + element: Banners, + }, { path: "/testimonial/view/:id", name: "ViewTestimonial", diff --git a/src/views/Banner/banner.js b/src/views/Banner/banner.js new file mode 100644 index 0000000..c97491a --- /dev/null +++ b/src/views/Banner/banner.js @@ -0,0 +1,704 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import { isAutheticated } from "src/auth"; +import { + Button, + Box, + IconButton, + Modal, + Pagination, + TextField, + Typography, +} from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; +import { ClipLoader } from "react-spinners"; +import swal from "sweetalert"; +import CloudUploadIcon from "@mui/icons-material/CloudUpload"; +import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; + +const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 400, + bgcolor: "background.paper", + borderRadius: "0.5rem", + boxShadow: 24, + width: "500px", +}; + +const Banners = () => { + const token = isAutheticated(); + const [loading, setLoading] = useState(true); + const [updating, setUpdating] = useState(true); // for loading state + // const [isUpdate, setIsUpdate] = useState(false); // for edit state + const [saveLoding, setSaveLoading] = useState(true); + const [edit, setEdit] = useState(false); + const [bannerName, setBannerName] = useState(""); + const [bannerImage, setBannerImage] = useState(""); + const [error, setError] = useState(""); + const [bannerId, setBannerId] = useState(""); + const [banner, setBanner] = useState([]); + const [itemPerPage, setItemPerPage] = useState(10); + const [page, setPage] = useState(1); + const [open, setOpen] = useState(false); + const [olderBannerName, setOlderBaannerName] = useState(""); + const [olderImage, setOlderImage] = useState(""); + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + // setUpdating(false); + setEdit(false); + + setBannerName(""); + setBannerId(""); + setOlderImage(""); + setBannerImage(""); + }; + + const getBanner = async () => { + try { + const response = await axios.get("/api/banner/getBanners", { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + + if (response.status === 200) { + setBanner(response?.data?.banners); + setLoading(false); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getBanner(); + }, [token, banner]); + + const handleEditClick = (_id, bannerName, bannerImage) => { + setOpen(true); + setOlderImage(bannerImage); + setBannerName(bannerName); + setBannerId(_id); + setOlderBaannerName(bannerName); + setEdit(true); + // setUpdating(false); + }; + const bannerNamesArray = []; + const setBannerNamesArray = () => { + banner && + banner.map((banner) => { + bannerNamesArray.push(banner.bannerName.toLowerCase()); + }); + }; + setBannerNamesArray(); + + const handleUpdate = () => { + const filteredArrayNames = bannerNamesArray.filter( + (item) => item !== olderBannerName.toLowerCase() + ); + console.log(filteredArrayNames, "filter"); + const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase()); + if (bannerExits) { + swal({ + title: "Warning", + text: "Banner already exists ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + + if (!bannerName || (!bannerImage && !olderImage)) { + swal({ + title: "Warning", + text: "Please fill all the required fields!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setUpdating(false); + const formData = new FormData(); + formData.append("bannerName", bannerName); + + formData.append("bannerImage", bannerImage); + + formData.append("olderImage", JSON.stringify(olderImage)); + + axios + .patch(`/api/banner/update/${bannerId}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // setUpdating(true); + // setIsUpdate(false); + handleClose(); + setBannerId(""); + setBannerName(""); + setBannerImage(""); + setOlderImage(""); + setUpdating(true); + setEdit(false); + swal({ + title: "Congratulations!!", + text: "The banner was updated successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after updating + }) + .catch((err) => { + swal({ + title: "Sorry, please try again", + text: err, + icon: "error", + button: "Retry", + dangerMode: true, + }); + setUpdating(true); + }); + }; + + const handleDelete = (_id) => { + swal({ + title: "Are you sure?", + icon: "error", + buttons: { + Yes: { text: "Yes", value: true }, + Cancel: { text: "Cancel", value: "cancel" }, + }, + }).then((value) => { + if (value === true) { + axios + .delete(`/api/banner/delete/${_id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + swal({ + title: "Congratulations!!", + text: "The banner was deleted successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after deleting + }) + .catch((err) => { + swal({ + title: "", + text: "Something went wrong!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + } + }); + }; + + const handleSaveBanner = async () => { + const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase()); + if (bannerExits) { + swal({ + title: "Warning", + text: "Banner Already exits.", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + if (!bannerName || !bannerImage) { + swal({ + title: "Warning", + text: "Please fill all the required fields!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + setSaveLoading(false); + setLoading(true); + const formData = new FormData(); + formData.append("bannerName", bannerName); + formData.append("bannerImage", bannerImage); + + axios + .post("/api/banner/add", formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + }, + }) + .then((response) => { + if (response.status === 201) { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setBannerName(""); + setBannerImage(""); + setOlderImage(""); + swal({ + title: "Added", + text: "New Banner added successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after adding + } + }) + .catch((error) => { + setSaveLoading(true); + swal({ + title: error, + text: "something went wrong", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + const getPageCount = () => { + return Math.max(1, Math.ceil(banner.length / itemPerPage)); + }; + + const handleFileChange = (e) => { + const files = e.target.files[0]; + + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + if (allowedTypes.includes(files.type)) { + setBannerImage(files); + } + }; + const handeldeleteImage = () => { + setBannerImage(""); + }; + return ( +
+
+
+
+
+
+
+ Banners +
+ +
+ + + + + + Banner Name + + handleClose()}> + + + +
+ + setBannerName( + e.target.value.charAt(0).toUpperCase() + + e.target.value.slice(1) + ) + } + /> + {bannerName ? ( + <> + + {25 - bannerName.length} characters left + + + ) : ( + <> + )} + + + + {bannerImage && ( + + bannerImage + handeldeleteImage()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + {olderImage && ( + + bannerImage + setOlderImage("")} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + + + {error &&

{error}

} +

+ Upload jpg, jpeg and png only* +

+ + + {!edit && ( + + )} + {edit && ( + + )} + + + + +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+ + + + + + + + + + + + {!loading && banner.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + banner && + banner + .slice( + (`${page}` - 1) * itemPerPage, + `${page}` * itemPerPage + ) + .map((item, i) => ( + + + + + + )) + )} + +
Image Banner NameAction
+
No Data Available
+
+ Loading... +
+ +
{}
+ 		+
{item.bannerName}
+ 		+ + +
+
+ +
+ setPage(value)} + /> +
+
+
+
+
+
+
+
+ ); +}; + +export default Banners; diff --git a/src/views/Design/design.js b/src/views/Design/design.js index 1d7f52a..cf69718 100644 --- a/src/views/Design/design.js +++ b/src/views/Design/design.js @@ -83,13 +83,13 @@ const Design = () => { if (file && file.name.endsWith(".json")) { // Validate the file type - const reader = new FileReader(); - reader.onload = async (event) => { - const jsonData = event.target.result; - // You can now send the `jsonData` to the backend for insertion - setJsonSelectedFile(jsonData); - }; - reader.readAsText(file); + // const reader = new FileReader(); + // reader.onload = async (event) => { + // const jsonData = event.target.result; + // // You can now send the `jsonData` to the backend for insertion + // setJsonSelectedFile(jsonData); + // }; + // reader.readAsText(file); setJsonSelectedFile(file); } else { // Reset the selected file if it's not a valid JSON file @@ -158,81 +158,87 @@ const Design = () => { }; setDesignNamesArray(); - const handleUpdate = () => { - const filteredArrayNames = designNamesArray.filter( - (item) => item !== olderDesignName.toLowerCase() - ); + // const handleUpdate = () => { + // const filteredArrayNames = designNamesArray.filter( + // (item) => item !== olderDesignName.toLowerCase() + // ); - const designExits = filteredArrayNames.includes(designName.toLowerCase()); - if (designExits) { - swal({ - title: "Warning", - text: "Design already exists ", - icon: "error", - button: "Retry", - dangerMode: true, - }); - return; - } + // const designExits = filteredArrayNames.includes(designName.toLowerCase()); + // if (designExits) { + // swal({ + // title: "Warning", + // text: "Design already exists ", + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // return; + // } - if (!designName || (!designImage && !olderImage) || !jsonSelectedFile) { - swal({ - title: "Warning", - text: "Please fill all the required fields!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - return; - } - setUpdating(false); - const formData = new FormData(); - formData.append("designName", designName); - formData.append("categoryName", categoryName); - formData.append("designImage", designImage); + // if (!designName || (!designImage && !olderImage) || !jsonSelectedFile) { + // swal({ + // title: "Warning", + // text: "Please fill all the required fields!", + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // return; + // } + // setUpdating(false); + // const formData = new FormData(); + // formData.append("designName", designName); + // formData.append("categoryName", categoryName); + // formData.append("designImage", designImage); - formData.append("olderImage", JSON.stringify(olderImage)); - formData.append("designImageJson", jsonSelectedFile); + // formData.append("olderImage", JSON.stringify(olderImage)); + // formData.append("designImageJson", jsonSelectedFile); - axios - .patch(`/api/design/update/${designId}`, formData, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - // setUpdating(true); - // setIsUpdate(false); - handleClose(); - setDesignId(""); - setDesignName(""); - setDesignImage(""); - setOlderImage(""); - setCategoryName(""); - setJsonSelectedFile(null); - setUpdating(true); - setEdit(false); - swal({ - title: "Congratulations!!", - text: "The Design was updated successfully!", - icon: "success", - button: "OK", - }); - // getCategories(); // Refresh the category list after updating - }) - .catch((err) => { - swal({ - title: "Sorry, please try again", - text: err, - icon: "error", - button: "Retry", - dangerMode: true, - }); - setUpdating(true); - }); - }; + // axios + // .patch(`/api/design/update/${designId}`, formData, { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + // }) + // .then((res) => { + // // setUpdating(true); + // // setIsUpdate(false); + // handleClose(); + // setDesignId(""); + // setDesignName(""); + // setDesignImage(""); + // setOlderImage(""); + // setCategoryName(""); + // setJsonSelectedFile(null); + // setUpdating(true); + // setEdit(false); + // swal({ + // title: "Congratulations!!", + // text: "The Design was updated successfully!", + // icon: "success", + // button: "OK", + // }); + // // getCategories(); // Refresh the category list after updating + // }) + // .catch((err) => { + // swal({ + // title: "Sorry, please try again", + // text: err, + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // setUpdating(true); + // }); + // }; - const handleDelete = (_id) => { + const handleDelete = ( + _id, + designImageFilename, + designImagePath, + designImageJsonFilename, + designImageJsonPath + ) => { swal({ title: "Are you sure?", icon: "error", @@ -244,6 +250,12 @@ const Design = () => { if (value === true) { axios .delete(`/api/design/delete/${_id}`, { + data: { + designImageFilename, + designImagePath, + designImageJsonFilename, + designImageJsonPath, + }, headers: { Authorization: `Bearer ${token}`, }, @@ -255,6 +267,7 @@ const Design = () => { icon: "success", button: "OK", }); + getDesigns(); // getCategories(); // Refresh the category list after deleting }) .catch((err) => { @@ -305,9 +318,11 @@ const Design = () => { headers: { Authorization: `Bearer ${token}`, "Content-Type": "multipart/formdata", + "Access-Control-Allow-Origin": "*", }, }) .then((response) => { + console.log(response); if (response.status === 201) { setOpen(false); setLoading(false); @@ -323,24 +338,43 @@ const Design = () => { icon: "success", button: "OK", }); + getDesigns(); // getCategories(); // Refresh the category list after adding } }) .catch((error) => { setSaveLoading(true); - swal({ - title: error, - text: "something went wrong", - icon: "error", - button: "Retry", - dangerMode: true, - }); + if (error == "Error: Network Error") { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setDesignName(""); + setDesignImage(""); + setOlderImage(""); + setJsonSelectedFile(null); + setCategoryName(""); + swal({ + title: "Added", + text: "New design added successfully!", + icon: "success", + button: "OK", + }); + getDesigns(); + } else { + swal({ + title: error, + text: "something went wrong", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } }); }; const getPageCount = () => { return Math.max(1, Math.ceil(design.length / itemPerPage)); }; - + console.log(process.env.REACT_APP_BASE_URL); const handleFileChange = (e) => { const files = e.target.files[0]; @@ -399,59 +433,64 @@ const Design = () => { aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" > - - - - Design Name - - handleClose()}> - - - -
- - setDesignName( - e.target.value.charAt(0).toUpperCase() + - e.target.value.slice(1) - ) - } - /> - {designName ? ( - <> - - {25 - designName.length} characters left - - - ) : ( - <> - )} -
- - {/* { ))} */} - - - -
- - -