From c686393166ca205cfb41550a84f78371497e7808 Mon Sep 17 00:00:00 2001 From: pawan-dot <71133473+pawan-dot@users.noreply.github.com> Date: Thu, 13 Jun 2024 17:32:04 +0530 Subject: [PATCH] currency functionality added --- src/_nav.js | 8 + src/routes.js | 7 + src/views/configuration/Currency.js | 703 ++++++++++++++++++++++++++++ 3 files changed, 718 insertions(+) create mode 100644 src/views/configuration/Currency.js diff --git a/src/_nav.js b/src/_nav.js index 99eb936..21c9b4b 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -26,6 +26,7 @@ import { cilFeaturedPlaylist, cilLocationPin, cilSettings, + cilMoney, } from "@coreui/icons"; import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react"; @@ -270,6 +271,13 @@ const _nav = [ to: "/socialmedia", group: "Settings", }, + { + component: CNavItem, + name: "Currency", + icon: , + to: "/currency", + group: "Settings", + }, { component: CNavItem, name: "Application Name", diff --git a/src/routes.js b/src/routes.js index abbff4c..4d7ccb6 100644 --- a/src/routes.js +++ b/src/routes.js @@ -148,6 +148,7 @@ import Employee from "./views/EmployeeAccess/Employee"; import AddEmployee from "./views/EmployeeAccess/addEmployee"; import EditEmployee from "./views/EmployeeAccess/editEmployee"; import ExportToExcel from "./views/exportExcel"; +import Currency from "./views/configuration/Currency"; const routes = [ // { path: "/", exact: true, name: "Home", navName: "" }, //dashboard @@ -463,6 +464,12 @@ const routes = [ navName: "Website Related", }, + { + path: "/currency", + name: "Currency", + element: Currency, + navName: "Settings", + }, { path: "/testimonial/new", name: "AddTestimonial", diff --git a/src/views/configuration/Currency.js b/src/views/configuration/Currency.js new file mode 100644 index 0000000..dd948e2 --- /dev/null +++ b/src/views/configuration/Currency.js @@ -0,0 +1,703 @@ +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 Currency = () => { + 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 [CurrencyName, setCurrencyName] = useState(""); + const [CurrencySymbol, setCurrencySymbol] = useState(""); + const [error, setError] = useState(""); + const [CurrencyId, setCurrencyId] = useState(""); + const [Currency, setCurrency] = useState([]); + const [itemPerPage, setItemPerPage] = useState(10); + const [page, setPage] = useState(1); + const [open, setOpen] = useState(false); + const [olderCurrencyName, setOlderBaannerName] = useState(""); + const [olderImage, setOlderImage] = useState(""); + + const [success, setSucess] = useState(false); + + const handleOpen = () => setOpen(true); + const handleClose = () => { + setOpen(false); + // setUpdating(false); + setEdit(false); + + setCurrencyName(""); + setCurrencyId(""); + setOlderImage(""); + setCurrencySymbol(""); + }; + + const getCurrency = async () => { + try { + const response = await axios.get("/api/currency/getall", { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + + if (response.status === 200) { + setCurrency(response?.data?.currency); + setLoading(false); + } + } catch (error) { + swal({ + title: "", + text: " please login to access the resource ", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; + + useEffect(() => { + getCurrency(); + }, [success]); + // }, [token, Currency]); + + const handleEditClick = (_id, CurrencyName, CurrencySymbol) => { + setOpen(true); + setCurrencyName(CurrencyName); + setCurrencyId(_id); + setCurrencySymbol(CurrencySymbol); + + setEdit(true); + // setUpdating(false); + }; + + const handleUpdate = () => { + if (!CurrencyName || !CurrencySymbol) { + 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("CurrencyName", CurrencyName); + formData.append("CurrencySymbol", CurrencySymbol); + axios + .patch(`/api/currency/${CurrencyId}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // setUpdating(true); + // setIsUpdate(false); + handleClose(); + setCurrencyId(""); + setCurrencyName(""); + setCurrencySymbol(""); + setUpdating(true); + setEdit(false); + swal({ + title: "Congratulations!!", + text: "The Currency was updated successfully!", + icon: "success", + button: "OK", + }); + // getCategories(); // Refresh the category list after updating + setSucess((prev) => !prev); + }) + .catch((err) => { + swal({ + title: "Sorry, please try again", + text: err, + icon: "error", + button: "Retry", + dangerMode: true, + }); + setUpdating(true); + setSucess((prev) => !prev); + }); + }; + + 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/currency/${_id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + swal({ + title: "Congratulations!!", + text: "The Currency is deleted successfully!", + icon: "success", + button: "OK", + }); + setSucess((prev) => !prev); + + // getCategories(); // Refresh the category list after deleting + }) + .catch((err) => { + swal({ + title: "Error", + text: "Something went wrong!", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + } + }); + }; + + const handleSaveCurrency = async () => { + // const CurrencyExits = CurrencyNamesArray.includes( + // CurrencyName.toLowerCase() + // ); + // if (CurrencyExits) { + // swal({ + // title: "Warning", + // text: "Currency Already exits.", + // icon: "warning", + // button: "Retry", + // dangerMode: true, + // }); + // return; + // } + if (!CurrencyName || !CurrencySymbol) { + 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("CurrencyName", CurrencyName); + formData.append("CurrencySymbol", CurrencySymbol); + + axios + .post("/api/currency/new", formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/formdata", + }, + }) + .then((response) => { + console.log(response); + if (response.status === 201) { + setOpen(false); + setLoading(false); + setSaveLoading(true); + setCurrencyName(""); + setCurrencySymbol(""); + setOlderImage(""); + swal({ + title: "Added", + text: "New Currency added successfully!", + icon: "success", + button: "OK", + }); + setSucess((prev) => !prev); + + // getCategories(); // Refresh the category list after adding + } + }) + .catch((error) => { + setSaveLoading(true); + swal({ + title: "Error", + text: error?.response?.data?.message + ? error?.response?.data?.message + : "something went wrong", + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; + const getPageCount = () => { + return Math.max(1, Math.ceil(Currency.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)) { + // setCurrencySymbol(files); + // } + // }; + // const handeldeleteImage = () => { + // setCurrencySymbol(""); + // }; + return ( +
+
+
+
+
+
+
+ Currency +
+ +
+ + + + + + Currency + + handleClose()}> + + + +
+ + + setCurrencyName(e.target.value.toUpperCase()) + } + /> + {/* {CurrencyName ? ( + <> + + {25 - CurrencyName.length} characters left + + + ) : ( + <> + )} */} + + setCurrencySymbol(e.target.value)} + /> + + {/* + + {CurrencyImage && ( + + CurrencyImage + handeldeleteImage()} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + + )} + {olderImage && ( + + CurrencyImage + 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 && Currency.length === 0 && ( + + + + )} + {loading ? ( + + + + ) : ( + Currency && + Currency.slice( + (`${page}` - 1) * itemPerPage, + `${page}` * itemPerPage + ).map((item, i) => ( + + {/* */} + + + + + )) + )} + +
Image Currency NameSymbolAction
+
No Data Available
+
+ Loading... +
+ +
{}
+ 		+
{item?.CurrencyName}
+ 		+
{item?.CurrencySymbol}
+ 		+ + +
+
+ +
+ setPage(value)} + /> +
+
+
+
+
+
+
+
+ ); +}; + +export default Currency;