From 98ce2faaf9e29a798540e45d7f646a15917cb72b Mon Sep 17 00:00:00 2001 From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com> Date: Thu, 25 Jul 2024 21:02:05 +0530 Subject: [PATCH] artifacts table --- src/Components/DataTable/DataTable.jsx | 1 + src/Contexts/GlobalStateProvider.jsx | 30 ++- .../CreateIO/ArtifactsEditImage.jsx | 123 +++++++++ .../CreateIO/ArtifactsEditVideo.jsx | 123 +++++++++ .../IO_Management/CreateIO/IOArtifacts.jsx | 255 ++++++++++++++---- src/Pages/IO_Management/IOArtifactsAdd.jsx | 6 +- src/Pages/IO_Management/IOArtifactsVideo.jsx | 123 +++++++++ .../ViewIO/HeaderModal/UpdateIOStatus.jsx | 101 ++++--- 8 files changed, 665 insertions(+), 97 deletions(-) create mode 100644 src/Pages/IO_Management/CreateIO/ArtifactsEditImage.jsx create mode 100644 src/Pages/IO_Management/CreateIO/ArtifactsEditVideo.jsx create mode 100644 src/Pages/IO_Management/IOArtifactsVideo.jsx diff --git a/src/Components/DataTable/DataTable.jsx b/src/Components/DataTable/DataTable.jsx index e6286c2..3fc03d0 100644 --- a/src/Components/DataTable/DataTable.jsx +++ b/src/Components/DataTable/DataTable.jsx @@ -22,6 +22,7 @@ const DataTable = ({ setData, isLoading, tableHeadRow, + tableHeadRowTwo, emptyMessage, centered, setMouseEntered, diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index 0f2610d..ae41ec6 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -310,33 +310,53 @@ const GlobalStateProvider = ({ children }) => { const [iOArtifacts, setIOArtifacts] = useState([ { id: 1, - type: "JPG", fileName: "Banner image", document: "Banner.jpg", status: true, }, { id: 2, - type: "JPG", fileName: "Banner image", document: "Banner.jpg", status: true, }, { id: 3, - type: "JPG", fileName: "Banner image", document: "Banner.jpg", status: true, }, { id: 4, - type: "JPG", fileName: "Banner image", document: "Banner.jpg", status: true, }, ]); + + const [iOArtifactsTwo, setIOArtifactsTwo] = useState([ + { + id: 1, + videoFileName: "Property preview", + status: true, + }, + { + id: 2, + videoFileName: "Property preview", + status: true, + }, + { + id: 3, + videoFileName: "Property preview", + status: true, + }, + { + id: 4, + videoFileName: "Property preview", + status: true, + }, + ]); + const [investmentType, setInvestmentType] = useState([ { id: 1, @@ -1641,6 +1661,8 @@ const GlobalStateProvider = ({ children }) => { setKeyMerits, iOArtifacts, setIOArtifacts, + iOArtifactsTwo, + setIOArtifactsTwo, investors, setInvestors,IODetails, setIODetails, navDetails, diff --git a/src/Pages/IO_Management/CreateIO/ArtifactsEditImage.jsx b/src/Pages/IO_Management/CreateIO/ArtifactsEditImage.jsx new file mode 100644 index 0000000..c6e7cf7 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/ArtifactsEditImage.jsx @@ -0,0 +1,123 @@ +import { + Box, + Button, + Drawer, + DrawerBody, + DrawerCloseButton, + DrawerContent, + DrawerFooter, + DrawerHeader, + DrawerOverlay, + FormControl, + FormLabel, + Input, + } from "@chakra-ui/react"; + import * as yup from "yup"; + import React, { useState } from "react"; + import { useForm } from "react-hook-form"; + import { yupResolver } from "@hookform/resolvers/yup"; +import CustomAlertDialog from "../../../Components/CustomAlertDialog"; + + export const investmentDoct = yup.object().shape({ + type: yup.string().required("Sponser name is required"), + document: yup.string().required("Sponser name is required"), + fileName: yup.string().required("Mobile no is required"), + }); + + const ArtifactsEditImage = ({ isOpen, onClose, secondField }) => { + const [file, setFile] = useState(""); + const [fileName, setFileName] = useState(""); + const [alert, setAlert] = useState(false); + + const { + control, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(investmentDoct), + }); + + const onSubmit = (data) => { + setIOArtifactsTwo((prevIOArtifactsTwo) => [ + { + ...data, + status: true, + id: uuidv4(), + createdAt: new Date().toISOString(), + }, + ...prevIOArtifactsTwo, + ]); + setAlert(false); + onClose(); + }; + + return ( + <> + + + + + IO Artifacts + + + + File Name + setFileName(e.target.value)} + fontSize={"sm"} + type="text" + size={"sm"} + /> + + + DOCUMENT + setFile(e.target.value)} + fontSize={"sm"} + type="file" + className="form-control" + size={"sm"} + /> + + + + + + + + + setAlert(false)} + alertHandler={handleSubmit(onSubmit)} + message={"Are you sure you want to add this document?"} + /> + + ); + }; + + export default ArtifactsEditImage; + \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/ArtifactsEditVideo.jsx b/src/Pages/IO_Management/CreateIO/ArtifactsEditVideo.jsx new file mode 100644 index 0000000..e5b5f90 --- /dev/null +++ b/src/Pages/IO_Management/CreateIO/ArtifactsEditVideo.jsx @@ -0,0 +1,123 @@ +import { + Box, + Button, + Drawer, + DrawerBody, + DrawerCloseButton, + DrawerContent, + DrawerFooter, + DrawerHeader, + DrawerOverlay, + FormControl, + FormLabel, + Input, + } from "@chakra-ui/react"; + import * as yup from "yup"; + import React, { useState } from "react"; + import { useForm } from "react-hook-form"; + import { yupResolver } from "@hookform/resolvers/yup"; +import CustomAlertDialog from "../../../Components/CustomAlertDialog"; + + export const investmentDoct = yup.object().shape({ + type: yup.string().required("Sponser name is required"), + document: yup.string().required("Sponser name is required"), + fileName: yup.string().required("Mobile no is required"), + }); + + const ArtifactsEditVideo = ({ isOpen, onClose, fourField }) => { + const [file, setFile] = useState(""); + const [fileName, setFileName] = useState(""); + const [alert, setAlert] = useState(false); + + const { + control, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(investmentDoct), + }); + + const onSubmit = (data) => { + setIOArtifactsTwo((prevIOArtifactsTwo) => [ + { + ...data, + status: true, + id: uuidv4(), + createdAt: new Date().toISOString(), + }, + ...prevIOArtifactsTwo, + ]); + setAlert(false); + onClose(); + }; + + return ( + <> + + + + + IO Artifacts + + + + File Name + setFileName(e.target.value)} + fontSize={"sm"} + type="text" + size={"sm"} + /> + + + VIDEO STREAMING URL + setFile(e.target.value)} + fontSize={"sm"} + type="file" + className="form-control" + size={"sm"} + /> + + + + + + + + + setAlert(false)} + alertHandler={handleSubmit(onSubmit)} + message={"Are you sure you want to add this document?"} + /> + + ); + }; + + export default ArtifactsEditVideo; + \ No newline at end of file diff --git a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx index dfe72eb..fcfa5ab 100644 --- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx +++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx @@ -1,8 +1,10 @@ import { + Badge, Box, Button, HStack, Input, + Link, Text, Tooltip, useDisclosure, @@ -12,27 +14,45 @@ import DataTable from "../../../Components/DataTable/DataTable"; import CustomAlertDialog from "../../../Components/CustomAlertDialog"; import GlobalStateContext from "../../../Contexts/GlobalStateContext"; import { debounce } from "../../Master/Sponser/AddSponser"; -import { formatDate } from "../../../Components/Functions/UTCConvertor"; -import { - AddIcon, - DeleteIcon, - DownloadIcon, - EditIcon, - ViewIcon, -} from "@chakra-ui/icons"; +import { AddIcon, DeleteIcon, EditIcon, ExternalLinkIcon, ViewIcon } from "@chakra-ui/icons"; import IOArtifactsAdd from "../IOArtifactsAdd"; +import IOArtifactsVideo from "../IOArtifactsVideo"; +import ArtifactsEditImage from "./ArtifactsEditImage"; +import ArtifactsEditVideo from "./ArtifactsEditVideo"; -const IOArtifacts = ({enableNextTab, index}) => { +const IOArtifacts = ({ enableNextTab, index }) => { const { iOArtifacts, setIOArtifacts, slideFromRight } = useContext(GlobalStateContext); + const { iOArtifactsTwo, setIOArtifactsTwo } = useContext(GlobalStateContext); const firstField = useRef(); + const secondField = useRef(); + const threeField = useRef(); + const fourField = useRef(); const [searchTerm, setSearchTerm] = useState(""); + const [searchTermTwo, setSearchTermTwo] = useState(""); const [isLoading, setIsLoading] = useState(true); const [deleteAlert, setDeleteAlert] = useState(false); const [actionId, setActionId] = useState(false); const [mouseEntered, setMouseEntered] = useState(false); const [mouseEnteredId, setMouseEnteredId] = useState(""); const { isOpen, onOpen, onClose } = useDisclosure(); + const { + isOpen: isOpenVideo, + onOpen: onOpenVideo, + onClose: onCloseVideo, + } = useDisclosure(); + + const { + isOpen: isOpenEditImage, + onOpen: onOpenEditImage, + onClose: onCloseEditImage, + } = useDisclosure(); + + const { + isOpen: isOpenEditVideo, + onOpen: onOpenEditVideo, + onClose: onCloseEditVideo, + } = useDisclosure(); useEffect(() => { // Simulate loading @@ -44,14 +64,6 @@ const IOArtifacts = ({enableNextTab, index}) => { return () => clearTimeout(timer); }, []); - const tableHeadRow = [ - "Sr.no", - "Type", - "File Name", - "Document", - "Action" - ]; - const handleUpdateStatus = debounce((id) => { setIOArtifacts((prevIOArtifacts) => prevIOArtifacts.map((iOArtifacts) => @@ -60,14 +72,20 @@ const IOArtifacts = ({enableNextTab, index}) => { : iOArtifacts ) ); + setIOArtifactsTwo((prevIOArtifactsTwo) => + prevIOArtifactsTwo.map((iOArtifactsTwo) => + iOArtifactsTwo.id === id + ? { ...iOArtifactsTwo, status: !iOArtifactsTwo.status } + : iOArtifactsTwo + ) + ); toast({ render: () => , }); }, 300); const filteredData = iOArtifacts?.filter((item) => { - // Filter by name (case insensitive) - const name = item.type; + const name = item.fileName; const searchLower = searchTerm.toLowerCase(); const nameMatches = name.toLowerCase().includes(searchLower); @@ -87,6 +105,8 @@ const IOArtifacts = ({enableNextTab, index}) => { setIsLoading(true); }; + const tableHeadRow = ["Sr.no", "File Name", "Document", "Action"]; + const extractedArray = filteredData?.map((item, index) => ({ "Sr.no": ( { {index + 1} ), - Type: ( - - {item.type} - - ), "File Name": ( @@ -117,7 +126,7 @@ const IOArtifacts = ({enableNextTab, index}) => { ), - "Document": ( + Document: ( { placement="top" > + + + + + + ), + })); + + const filteredDataTwo = iOArtifactsTwo?.filter((item) => { + const name = item.videoFileName; + const searchLower = searchTermTwo.toLowerCase(); + const nameMatches = name.toLowerCase().includes(searchLower); + + return nameMatches; + }); + + const tableHeadRowTwo = [ + "Sr.no", + "File Name", + "Video streaming uRL", + "Action", + ]; + + const extractedArrayTwo = filteredDataTwo?.map((item, index) => ({ + "Sr.no": ( + + {index + 1} + + ), + "File Name": ( + + + {item.videoFileName} + + + ), + "Video streaming uRL": ( + + + + View + + + + ), + Action: ( + + + + + + @@ -231,15 +354,43 @@ const IOArtifacts = ({enableNextTab, index}) => { isLoading={isLoading} viewActionId={actionId} setViewActionId={setActionId} - // totalPages={10} - setMouseEnteredId={setMouseEnteredId} setMouseEntered={setMouseEntered} /> - - + + + Manage IO videos + + + + + + + {/* - + */} setDeleteAlert(false)} isOpen={deleteAlert} @@ -247,6 +398,16 @@ const IOArtifacts = ({enableNextTab, index}) => { alertHandler={handleDelete} isLoading={isLoading} /> + + ); }; diff --git a/src/Pages/IO_Management/IOArtifactsAdd.jsx b/src/Pages/IO_Management/IOArtifactsAdd.jsx index 1f32600..58b4a8e 100644 --- a/src/Pages/IO_Management/IOArtifactsAdd.jsx +++ b/src/Pages/IO_Management/IOArtifactsAdd.jsx @@ -31,7 +31,7 @@ import { const [file, setFile] = useState(""); const [fileName, setFileName] = useState(""); const [alert, setAlert] = useState(false); - + const { control, handleSubmit, @@ -101,7 +101,7 @@ import { + + + + + setAlert(false)} + alertHandler={handleSubmit(onSubmit)} + message={"Are you sure you want to add this document?"} + /> + + ); + }; + + export default IOArtifactsVideo; + \ No newline at end of file diff --git a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx index 46afc69..8da7b5d 100644 --- a/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx +++ b/src/Pages/IO_Management/ViewIO/HeaderModal/UpdateIOStatus.jsx @@ -1,9 +1,13 @@ +import { ChevronDownIcon } from "@chakra-ui/icons"; +import React, { useState } from "react"; import { - Box, + Badge, Button, - FormControl, FormLabel, - Input, + Menu, + MenuButton, + MenuItem, + MenuList, Modal, ModalBody, ModalCloseButton, @@ -11,52 +15,65 @@ import { ModalFooter, ModalHeader, ModalOverlay, - Text, - Textarea, } from "@chakra-ui/react"; const UpdateIOStatus = ({ isOpen, onClose }) => { + const [selectedItem, setSelectedItem] = useState("Open"); + + const handleMenuItemClick = (item) => { + setSelectedItem(item); + }; + + console.log(selectedItem); + return ( - Update IO Status + Update IO Status Transaction - - - Date - - + Status + + + } fontSize={"sm"} - type="date" - focusBorderColor="forestGreen.300" - /> - - - - Amount - - - - - - Comments - -