Siddhesh.More/rubix-admin-panel
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix-admin-panel.git synced 2026-04-28 16:15:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
Siddhesh More
2024-05-17 17:25:57 +05:30
parent 4897b69d97
commit b87e02497d
12 changed files with 462 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Components/Functions/FileNameAlter.jsx
View File

@@ -1,5 +1,4 @@
const extractFilename = (filePath) => {
console.log(filePath);
// Use the split method to break the path into parts based on '/'
const parts = filePath.split('/');
// Return the last part, which is the filename

19
src/Pages/Banners/HomeBanner/HomeBannerEdit.jsx
View File

@@ -1,9 +1,22 @@
import React from 'react'
import BannerEdit from '../../../Components/Banner/BannerEdit'
import { Box, Image, Text } from '@chakra-ui/react'
import { OPACITY_ON_LOAD } from '../../../Layout/animations'
import noInternet from "../assets/../../../assets/Error.svg"
const HomeBannerEdit = () => {
return (
<BannerEdit title={"HOme"}/>
<Box
w={'100vw'}
h={'100vh'}
display={'flex'}
justifyContent={'center'}
alignItems={'statr'}
flexDirection={'column'}
ms={"30vw"}
gap={5}
>
<Image src={noInternet} w={300} />
<Text color={'blue.800'} as={'span'} className='fw-bold'>Under Construction</Text>
</Box>
)
}

2
src/Pages/BlogsAndArticles/AddBlogsAndArticles.jsx
View File

@@ -55,6 +55,8 @@ const AddBlogsAndArticles = () => {
resolver: yupResolver(addBlogSchema),
});
console.log(errors);
const onSubmit = async (data) => {
console.log(data);
const formData = new FormData();

9
src/Pages/Community/ComunityEditPage.jsx
View File

@@ -31,6 +31,7 @@ import Loader01 from "../../Components/Loaders/Loader01";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import fallbackImage from "../../assets/fallBackImage.png";
import Header from "../../Components/Header";
import ToastBox from "../../Components/ToastBox";
const ComunityEditPage = () => {
const { id } = useParams();
@@ -93,11 +94,11 @@ const ComunityEditPage = () => {
if (response?.data?.statusCode === 200) {
setIsLoadingEdit(false);
toast({
title: response?.data?.message,
status: "success",
duration: 1000,
isClosable: true,
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
),
});
navigate("/community");
// setDeleteAlert(false);

4
src/Pages/News/AddNews.jsx
View File

@@ -200,7 +200,7 @@ const AddNews = () => {
className="web-text-medium"
size="sm"
/>
{errors.name && (
{errors.title && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.title.message}
</span>
@@ -379,7 +379,7 @@ const AddNews = () => {
</form>
</Box>
</Box>
);
};

10
src/Pages/News/EditNews.jsx
View File

@@ -30,6 +30,7 @@ import Loader01 from "../../Components/Loaders/Loader01";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import { TiWarning } from "react-icons/ti";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import ToastBox from "../../Components/ToastBox";
const EditNews = () => {
const { id } = useParams();
@@ -71,7 +72,6 @@ const EditNews = () => {
}
}, [data, setValue]);
console.log(errors);
const onSubmit = async (data) => {
setIsLoadingEdit(true);
@@ -93,11 +93,11 @@ const EditNews = () => {
if (response?.data?.statusCode === 200) {
setIsLoadingEdit(false);
toast({
title: response?.data?.message,
status: "success",
duration: 1000,
isClosable: true,
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
),
});
navigate("/news");
// setDeleteAlert(false);

16
src/Pages/Videos.jsx → src/Pages/Videos/Videos.jsx
View File

@@ -14,22 +14,22 @@ import {
Tooltip,
useToast,
} from "@chakra-ui/react";
import { TABLE_PAGINATION } from "../Constants/Paginations";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
import {
useDeleteVideosMutation,
useGetVideosQuery,
useUpdateVideosStatusMutation,
} from "../Services/api.service";
} from "../../Services/api.service";
import { useState } from "react";
import Header from "../Components/Header";
import Header from "../../Components/Header";
import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
import DataTable from "../Components/DataTable/DataTable";
import TabularView from "../Components/TabularView/TabularView";
import DataTable from "../../Components/DataTable/DataTable";
import TabularView from "../../Components/TabularView/TabularView";
import { HiDotsVertical } from "react-icons/hi";
import { Link } from "react-router-dom";
import { formatDate } from "../Components/Functions/UTCConvertor";
import CustomAlertDialog from "../Components/CustomAlertDialog";
import ToastBox from "../Components/ToastBox";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import ToastBox from "../../Components/ToastBox";
const Videos = () => {
const toast = useToast();

357
src/Pages/Whitepapers/EditWhitepaper.jsx
View File

@@ -1,9 +1,354 @@
import React from 'react'
import React, { useEffect, useState } from "react";
import Header from "../../Components/Header";
import {
Box,
Button,
Divider,
FormControl,
FormHelperText,
FormLabel,
Heading,
Image,
Input,
Stack,
Text,
useToast,
} from "@chakra-ui/react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import fallbackImage from "../../assets/ultp-fallback-img.webp";
import { useNavigate, useParams } from "react-router-dom";
import {
useGetNewsByIdQuery,
useGetWhitepaperByIdQuery,
useUpdateWhitepaperMutation,
} from "../../Services/api.service";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { TiWarning } from "react-icons/ti";
import { addWhitePapers } from "../../Validations/Validations";
import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
import { AttachmentIcon } from "@chakra-ui/icons";
import extractFilename from "../../Components/Functions/FileNameAlter";
import Loader01 from "../../Components/Loaders/Loader01";
import { motion } from "framer-motion";
import ToastBox from "../../Components/ToastBox";
const EditWhitepaper = () => {
return (
<div>EditWhitepaper</div>
)
}
const { id } = useParams();
const toast = useToast();
const navigate = useNavigate();
const { data, error, isLoading } = useGetWhitepaperByIdQuery(id);
const [isLoadingEdit, setIsLoadingEdit] = useState(false);
const [selectedImage, setSelectedImage] = useState(fallbackImage);
const [largeImageData, setLargeImageData] = useState(null);
const [updateWhitepaper] = useUpdateWhitepaperMutation();
export default EditWhitepaper
const {
register,
handleSubmit,
reset,
formState: { errors },
setValue,
} = useForm({
resolver: yupResolver(addWhitePapers),
defaultValues: {
title: "",
image: null,
document: null,
},
});
useEffect(() => {
if (data?.data?.data) {
setSelectedImage(
`https://rubix.betadelivery.com/${data?.data?.data?.bannerImage}`
);
setValue("title", data?.data?.data?.title);
setValue("image", data?.data?.data?.image);
setValue("bannerImage", data?.data?.data?.bannerImage);
}
}, [data, setValue]);
const handleImageChange = (e) => {
const file = e.target.files[0];
setLargeImageData(file);
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setSelectedImage(reader.result);
};
reader.readAsDataURL(file);
}
};
const onSubmit = async (data) => {
setIsLoadingEdit(true);
const form = new FormData();
form.append("title", data?.title);
if (data.document[0]) {
form.append("document", data.document[0]);
}
if (data?.image === data?.data?.image) {
form.append("image");
}
await updateWhitepaper({ id: id, data: form })
.then((response) => {
if (response?.data?.statusCode === 201) {
setIsLoadingEdit(false);
toast({
render: () => (
<ToastBox status={"success"} message={response?.data?.message} />
),
});
navigate("/whitepaper");
// setDeleteAlert(false);
}
})
.catch((error) => {
console.error("Error creating community:", error);
setIsLoadingEdit(false);
// setDeleteIsLoading(false);
// setDeleteAlert(false);
});
reset();
};
if (isLoading) {
return <FullscreenLoaders />;
}
return (
<Box
{...OPACITY_ON_LOAD}
overflowY={"scroll"}
paddingBottom={50}
height={"100vh"}
>
<Header title={"Whitepaper"} />
<Box display={"flex"}>
<Box className="col-5 d-flex flex-column gap-2 pt-4">
<span className="web-text-large fw-bold rubix-text-dark">
Members Info
</span>
<span className="web-text-medium text-secondary">
Select the platform for which you need to create this campaign.
</span>
<Divider />
<span className="web-text-large fw-bold rubix-text-dark">
Display profile
</span>
<span className="web-text-medium text-secondary ">
Below is the profile that will be displayed on the community page.
</span>
<Box
boxSize="sm"
className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
>
<Image
shadow={"md"}
rounded={8}
w={"100%"}
h={240}
src={selectedImage}
alt="Selected Image"
/>
{selectedImage === fallbackImage || largeImageData === null ? (
""
) : (
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
<span className="web-text-small">
{largeImageData && largeImageData?.name}
</span>
<span className="web-text-small text-secondary fst-italic">
{largeImageData &&
(largeImageData?.size / (1024 * 1024)).toFixed(2)}{" "}
mb
</span>
</Box>
)}
<Button
onClick={() => setSelectedImage(fallbackImage)}
backgroundColor="red.400"
color={"whitesmoke"}
transition={"0.5s"}
_hover={{
backgroundColor: "red.500",
}}
size="xs"
>
Remove
</Button>
</Box>
<Divider />
</Box>
<form
onSubmit={handleSubmit(onSubmit)}
className="col-7 pt-4 mb-3 overflow-auto p-4"
>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Title
</FormLabel>
<Input
{...register("title")}
placeholder="Title"
className="web-text-medium"
size="sm"
/>
{errors.title && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.title.message}
</span>
)}
</FormControl>
<FormControl isRequired className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Document
</FormLabel>
<input
type="file"
{...register("document")}
className="web-text-medium form-control rounded-1"
size="sm"
/>
{errors.document && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " />{" "}
{errors.document.message}
</span>
)}
<Text
color="teal"
className="web-text-medium d-flex mt-2 align-items-center gap-2"
>
{extractFilename(data?.data?.data?.document)}
<Box className="link pointer" as="span" rounded={"md"} p={1}>
<AttachmentIcon />
</Box>
</Text>
</FormControl>
<FormControl className="mb-3">
<FormLabel className="web-text-large fw-bold rubix-text-dark">
Display profile
</FormLabel>
{/* <ImageDropBox /> */}
<Box
borderColor="gray.300"
borderStyle="dashed"
borderWidth="2px"
rounded="md"
shadow="sm"
role="group"
transition="all 150ms ease-in-out"
_hover={{
shadow: "md",
}}
as={motion.div}
initial="rest"
animate="rest"
whileHover="hover"
height={"105px"}
className="pointer"
>
<Box position="relative" height="100%" width="100%">
<Box
position="absolute"
top="0"
left="0"
height="100%"
width="100%"
display="flex"
flexDirection="column"
>
<Stack
height="100%"
width="100%"
display="flex"
alignItems="center"
justify="center"
>
<span
className="d-flex flex-column align-items-center pointer"
spacing="1"
>
<Heading
fontSize="lg"
color="gray.700"
fontWeight="bold"
cursor={"pointer"}
>
Drop images here
</Heading>
<span
fontWeight="light"
className="web-text-large text-secondary text-center pointer"
>
or click to upload
</span>
</span>
</Stack>
</Box>
<Input
{...register("image")}
type="file"
height="100%"
width="100%"
position="absolute"
top="0"
left="0"
opacity="0"
aria-hidden="true"
accept="image/*"
onChange={handleImageChange}
onDrop={handleImageChange}
// onDragEnter={startAnimation}
// onDragLeave={stopAnimation}
/>
</Box>
</Box>
{errors.image && (
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
<TiWarning className="fw-bold fs-5 " /> {errors.image.message}
</span>
)}
<FormHelperText className="web-text-small">
Maximum limit of image should be 1mb to protect website from slow
loading.
</FormHelperText>
</FormControl>
<Box className=" d-flex justify-content-end ">
<Button
isLoading={isLoadingEdit}
spinner={<Loader01 />}
color={"whitesmoke"}
backgroundColor={"purple.700"}
_hover={{
backgroundColor: "purple.800",
}}
type="submit"
size="sm"
rounded={"sm"}
>
Save edit
</Button>
</Box>
<Divider />
</form>
</Box>
</Box>
);
};
export default EditWhitepaper;

2
src/Pages/Whitepapers/Whitepapers.jsx
View File

@@ -63,6 +63,8 @@ const Whitepapers = () => {
return nameMatches && statusMatches;
});
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
"Banner image",

8
src/Routes/Routes.js
View File

@@ -6,7 +6,7 @@ import ComunityEditPage from "../Pages/Community/ComunityEditPage";
import ComunityViewPage from "../Pages/Community/ComunityViewPage";
import Events from "../Pages/Events/Events";
import Home from "../Pages/Banners/Banner";
import Videos from "../Pages/Videos";
import Videos from "../Pages/Videos/Videos";
import Whitepapers from "../Pages/Whitepapers/Whitepapers";
import BannerCommunity from "../Pages/Banners/BannerCommunity/BannerCommunity";
import BannerComunityEditPage from "../Pages/Banners/BannerCommunity/BannerCommunityEdit";
@@ -47,16 +47,11 @@ export const RouteLink = [
{ path: "/videos", Component: Videos },
{ path: "/help-and-support", Component: HelpAndSupport },
{ path: "/whitepaper", Component: Whitepapers },
{ path: "whitepaper/add-whitepaper", Component: AddWhitepapers },
{ path: "whitepaper/view/:id", Component: ViewWhitePaper },
{ path: "whitepaper/edit/:id", Component: EditWhitepaper },
{ path: "/community", Component: Community },
{ path: "community/view/:id", Component: ComunityViewPage },
{ path: "community/edit/:id", Component: ComunityEditPage },
@@ -93,7 +88,6 @@ export const RouteLink = [
{ path: "banner/news/view/:id", Component: BannerNewsView },
{ path: "banner/news/edit/:id", Component: BannerNewsEdit },
// =============[ home banner ]================
{ path: "banner/home", Component: HomeBanner },
{ path: "banner/home/add-banner", Component: HomeBannerAdd },

13
src/Services/api.service.js
View File

@@ -327,6 +327,9 @@ export const rubixApi = createApi({
invalidatesTags: ["getEvents"],
}),
// ===============[ Home Banners endpoints ]=======================
getHomeBanner: builder.query({
query: () => "/admin/home",
@@ -416,6 +419,15 @@ export const rubixApi = createApi({
query: (id) => `/admin/whitepaper/${id}`,
providesTags: ["getWhitePaper"],
}),
updateWhitepaper: builder.mutation({
query: ({ id, data }) => ({
url: `/admin/whitepaper/${id}`,
method: "PUT",
body: data, // Include the data you want to send in the request body
}),
invalidatesTags: ["getWhitePaper"],
}),
@@ -498,4 +510,5 @@ export const {
useDeleteWhitepaperMutation,
useCreateWhitepaperMutation,
useGetWhitepaperByIdQuery,
useUpdateWhitepaperMutation,
} = rubixApi;

114
src/Validations/Validations.js
View File

@@ -112,26 +112,26 @@ export const addNews = Yup.object().shape({
}
}
)
.test("file_formate", "Image file has unsupported format.", (files) => {
// // console.log(files[0].type)
// .test("file_formate", "Image file has unsupported format.", (files) => {
// // // console.log(files[0].type)
const SUPPORTED_FORMATS = [
"image/jpeg",
"image/png",
"image/gif",
"image/tiff",
"image/svg+xml",
];
try {
if (files.length !== 0) {
setPreviewImage(URL.createObjectURL(files[0]));
return files && SUPPORTED_FORMATS.includes(files[0].type);
}
return true;
} catch (error) {
return false;
}
})
// const SUPPORTED_FORMATS = [
// "image/jpeg",
// "image/png",
// "image/gif",
// "image/tiff",
// "image/svg+xml",
// ];
// try {
// if (files.length !== 0) {
// setPreviewImage(URL.createObjectURL(files[0]));
// return files && SUPPORTED_FORMATS.includes(files[0].type);
// }
// return true;
// } catch (error) {
// return false;
// }
// })
.optional(),
});
@@ -161,26 +161,26 @@ export const editNews = Yup.object().shape({
}
}
)
.test("file_formate", "Image file has unsupported format.", (files) => {
// // console.log(files[0].type)
// .test("file_formate", "Image file has unsupported format.", (files) => {
// // // console.log(files[0].type)
const SUPPORTED_FORMATS = [
"image/jpeg",
"image/png",
"image/gif",
"image/tiff",
"image/svg+xml",
];
try {
if (files.length !== 0) {
setPreviewImage(URL.createObjectURL(files[0]));
return files && SUPPORTED_FORMATS.includes(files[0].type);
}
return true;
} catch (error) {
return false;
}
})
// const SUPPORTED_FORMATS = [
// "image/jpeg",
// "image/png",
// "image/gif",
// "image/tiff",
// "image/svg+xml",
// ];
// try {
// if (files.length !== 0) {
// setPreviewImage(URL.createObjectURL(files[0]));
// return files && SUPPORTED_FORMATS.includes(files[0].type);
// }
// return true;
// } catch (error) {
// return false;
// }
// })
.optional(),
});
@@ -213,26 +213,26 @@ export const addEvents = Yup.object().shape({
}
}
)
.test("file_formate", "Image file has unsupported format.", (files) => {
// // console.log(files[0].type)
// .test("file_formate", "Image file has unsupported format.", (files) => {
// // // console.log(files[0].type)
const SUPPORTED_FORMATS = [
"image/jpeg",
"image/png",
"image/gif",
"image/tiff",
"image/svg+xml",
];
try {
if (files.length !== 0) {
setPreviewImage(URL.createObjectURL(files[0]));
return files && SUPPORTED_FORMATS.includes(files[0].type);
}
return true;
} catch (error) {
return false;
}
})
// const SUPPORTED_FORMATS = [
// "image/jpeg",
// "image/png",
// "image/gif",
// "image/tiff",
// "image/svg+xml",
// ];
// try {
// if (files.length !== 0) {
// setPreviewImage(URL.createObjectURL(files[0]));
// return files && SUPPORTED_FORMATS.includes(files[0].type);
// }
// return true;
// } catch (error) {
// return false;
// }
// })
.optional(),
});