From 056298aa16c8bd97adc293ecc4da76ba1f2df0d7 Mon Sep 17 00:00:00 2001 From: print-signs Date: Mon, 30 Oct 2023 16:48:36 +0530 Subject: [PATCH] desing page done --- src/_nav.js | 7 + src/routes.js | 7 + src/views/Categories/categories.js | 3 +- src/views/Design/design.js | 704 +++++++++++++++++++++++++++++ 4 files changed, 720 insertions(+), 1 deletion(-) create mode 100644 src/views/Design/design.js diff --git a/src/_nav.js b/src/_nav.js index bc0958f..c400d1d 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -1,6 +1,7 @@ import React from "react"; import CIcon from "@coreui/icons-react"; import { + cibMaterialDesign, cilAddressBook, cilAppsSettings, cilBrush, @@ -35,6 +36,12 @@ const _nav = [ icon: , to: "/users-address", }, + { + component: CNavItem, + name: "Design", + icon: , + to: "/design", + }, { component: CNavItem, name: "Categories", diff --git a/src/routes.js b/src/routes.js index e27b4ab..7807047 100644 --- a/src/routes.js +++ b/src/routes.js @@ -91,6 +91,7 @@ import UserTable from "./views/UserAddress/userTable"; import EditUserAddress from "./views/UserAddress/editUserAddress"; import AddUserAddress from "./views/UserAddress/addUserAddress"; import ViewAddress from "./views/UserAddress/viewAddress"; +import Design from "./views/Design/design"; const routes = [ { path: "/", exact: true, name: "Home" }, { @@ -178,6 +179,12 @@ const routes = [ name: "Categories", element: Categories, }, + // Design + { + path: "/design", + name: "Design", + element: Design, + }, { path: "//campaigns", name: "campaigns", diff --git a/src/views/Categories/categories.js b/src/views/Categories/categories.js index 27e59b1..6edf0a3 100644 --- a/src/views/Categories/categories.js +++ b/src/views/Categories/categories.js @@ -49,7 +49,8 @@ const Categories = () => { const handleOpen = () => setOpen(true); const handleClose = () => { setOpen(false); - // setUpdating(true) + // setUpdating(false); + setEdit(false); setCategoryName(""); setCategoryId(""); diff --git a/src/views/Design/design.js b/src/views/Design/design.js new file mode 100644 index 0000000..caaf789 --- /dev/null +++ b/src/views/Design/design.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 Design = () => { + 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 [designName, setDesignName] = useState(""); + const [designImage, setDesignImage] = useState(""); + const [error, setError] = useState(""); + const [designId, setDesignId] = useState(""); + const [design, setDesign] = useState([]); + const [itemPerPage, setItemPerPage] = useState(10); + const [page, setPage] = useState(1); + const [open, setOpen] = useState(false); + const [olderDesignName, setOlderDesignName] = useState(""); + const [olderImage, setOlderImage] = useState(""); + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + setUpdating(true); + setEdit(false); + setDesignName(""); + setDesignId(""); + setOlderImage(""); + setDesignImage(""); + }; + + const getDesigns = async () => { + try { + const response = await axios.get("/api/design/getDesigns", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (response.status === 200) { + setDesign(response?.data?.designs); + setLoading(false); + } + } catch (error) { + swal({ + title: error, + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getDesigns(); + }, [token, design]); + + const handleEditClick = (_id, designName, designImage) => { + setOpen(true); + setOlderImage(designImage); + setDesignName(designName); + setDesignId(_id); + setOlderDesignName(designName); + setEdit(true); + // setUpdating(false); + }; + const designNamesArray = []; + const setDesignNamesArray = () => { + design && + design.map((design) => { + designNamesArray.push(design?.designName?.toLowerCase()); + }); + }; + setDesignNamesArray(); + + 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; + } + + if (!designName || (!designImage && !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("designName", designName); + + formData.append("designImage", designImage); + + formData.append("olderImage", JSON.stringify(olderImage)); + + axios + .patch(`/api/design/update/${designId}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // setUpdating(true); + // setIsUpdate(false); + handleClose(); + setDesignId(""); + setDesignName(""); + setDesignImage(""); + setOlderImage(""); + 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) => { + 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/design/delete/${_id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + swal({ + title: "Congratulations!!", + text: "The design 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 handleSaveCategory = async () => { + const designExits = designNamesArray.includes(designName.toLowerCase()); + if (designExits) { + swal({ + title: "Warning", + text: "Design Already exits.", + icon: "error", + button: "Retry", + dangerMode: true, + }); + return; + } + if (!designName || !designImage) { + 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("designName", designName); + formData.append("designImage", designImage); + + axios + .post("/api/design/add", formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + }, + }) + .then((response) => { + if (response.status === 201) { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setDesignName(""); + setDesignImage(""); + setOlderImage(""); + swal({ + title: "Added", + text: "New design 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(design.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)) { + setDesignImage(files); + } + }; + const handeldeleteImage = () => { + setDesignImage(""); + }; + + return ( +
+
+
+
+
+
+
+ Design +
+ +
+ + + + + + Design Name + + handleClose()}> + + + +
+ + setDesignName( + e.target.value.charAt(0).toUpperCase() + + e.target.value.slice(1) + ) + } + /> + {designName ? ( + <> + + {25 - designName.length} characters left + + + ) : ( + <> + )} + + + + {designImage && ( + + designImage + handeldeleteImage()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + {olderImage && ( + + categoryImage + 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 && design.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + design && + design + .slice( + (`${page}` - 1) * itemPerPage, + `${page}` * itemPerPage + ) + .map((item, i) => ( + + + + + + )) + )} + +
Image Design NameAction
+
No Data Available
+
+ Loading... +
+ +
{}
+ 		+
{item.designName}
+ 		+ + +
+
+ +
+ setPage(value)} + /> +
+
+
+
+
+
+
+
+ ); +}; + +export default Design;