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

video bug

Browse Source
This commit is contained in:
Siddhesh More
2024-05-22 13:04:11 +05:30
parent a4641efe61
commit a94b897af8
5 changed files with 357 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/Pages/Usecase/Usecase.jsx Normal file
View File

@@ -0,0 +1,266 @@
import React, { useState } from "react";
import {
Box,
Text,
Tooltip,
HStack,
Input,
Select,
Menu,
MenuButton,
MenuList,
MenuItem,
Switch,
Portal,
useToast,
Image,
Avatar,
} from "@chakra-ui/react";
import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
import DataTable from "../../Components/DataTable/DataTable";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { Link as RouterLink } from "react-router-dom";
import {
useDeleteEcoBannerMutation,
useDeleteNewsMutation,
useDeleteUsecaseMutation,
useGetNewsQuery,
useGetUsecaseQuery,
useUpdateNewsStatusMutation,
useUpdateUsecaseStatusMutation,
} from "../../Services/api.service";
import { HiDotsVertical } from "react-icons/hi";
import { formatDate } from "../../Components/Functions/UTCConvertor";
import CustomAlertDialog from "../../Components/CustomAlertDialog";
import Header from "../../Components/Header";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
import TabularView from "../../Components/TabularView/TabularView";
import ToastBox from "../../Components/ToastBox";
const Usecase = () => {
// ====================================================[Hooks]===================================================================
const toast = useToast();
const [deleteAlert, setDeleteAlert] = useState(false);
const [actionId, setActionId] = useState(null);
const [deleteIsLoading, setDeleteIsLoading] = useState(false);
// ====================================================[Constants]===================================================================
const [searchTerm, setSearchTerm] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
const [displayRange, setDisplayRange] = useState({
start: TABLE_PAGINATION?.page,
end: pageSize,
});
// ====================================================[RTK Hooks]===================================================================
const useCase = useGetUsecaseQuery({ page: currentPage, size: pageSize });
const [deleteUsecase] = useDeleteUsecaseMutation();
const [updateUsecaseStatus] = useUpdateUsecaseStatusMutation();
// ====================================================[Functions]===================================================================
const handleDelete = async (id) => {
try {
// Trigger the mutation
setDeleteIsLoading(true);
await deleteUsecase(id)
.then((response) => {
// Handle the response here
console.log("Mutation response:", response?.data?.statusCode);
console.log("Mutation response:", response?.data?.message);
if (response?.data?.statusCode === 200) {
setDeleteIsLoading(false);
setDeleteAlert(false);
}
})
.catch((error) => {
console.error("Error creating community:", error);
setDeleteIsLoading(false);
setDeleteAlert(false);
});
} catch (error) {
// Handle errors
console.error("Error deleting community:", error);
}
};
const handleUpdateStatus = async (id) => {
try {
// Trigger the mutation
await updateUsecaseStatus({ id })
.then((response) => {
console.log(response?.data);
if (response?.data?.statusCode === 201) {
toast({
render: () => (
<ToastBox
status={"success"}
message={response?.data?.message}
/>
),
});
}
})
.catch((error) => {
console.log(error);
});
} catch (error) {
// Handle errors
console.error("Error updating community status:", error);
}
};
// ====================================================[Table Filter]================================================================
const filteredData = useCase?.data?.data?.rows?.filter((item) => {
// Filter by name (case insensitive)
const name = item.title;
const searchLower = searchTerm.toLowerCase();
const nameMatches = name.toLowerCase().includes(searchLower);
// Filter by status
const status = item.status;
const statusMatches =
statusFilter === "all" ||
(statusFilter === "active" && status === true) ||
(statusFilter === "inactive" && status === false);
return nameMatches && statusMatches;
});
// ====================================================[Table Setup]================================================================
const tableHeadRow = [
// "Icon",
"Title",
"Discription",
"Updated Date",
"Active",
"Created At",
];
const extractedArray = filteredData?.map((item, index) => {
return {
Title: (
<Box display={"flex"} alignItems={"center"} gap={4}>
<Avatar
w={"35px"}
h={"35px"}
rounded={"full"}
src={`https://rubix.betadelivery.com/${item?.icon}`}
/>
<Text as={"span"}>{item?.title}</Text>
</Box>
),
// Title: <RouterLink to={`view/${item.id}`}>{item?.title}</RouterLink>,
Discription: (
<Tooltip
className="rounded-2 web-text-xsmall"
width={"fit-content"}
placement="top"
hasArrow
label={item?.meta_description}
bg="blue.200"
>
<Box display={"flex"} alignItems={"center"} w={180}>
<Text as={"span"} isTruncated={true}>
{item?.meta_description}
</Text>
</Box>
</Tooltip>
),
Content: (
<Tooltip
className="rounded-2 web-text-xsmall"
width={"fit-content"}
placement="top"
hasArrow
label={item?.content}
bg="blue.200"
>
<Box display={"flex"} alignItems={"center"} w={350}>
<Text as={"span"} isTruncated={true}>
{item?.content}
</Text>
</Box>
</Tooltip>
),
"Updated Date": (
<Text as={"span"} color={"gray.600"} className=" fw-bold">
{formatDate(item?.updatedAt)}
</Text>
),
Active: (
<Switch
size={"sm"}
colorScheme="teal"
onChange={() => handleUpdateStatus(item.id)}
isChecked={item.status}
/>
),
"Created At": (
<span className="d-flex justify-content-between align-items-center">
<Text as={"span"} color={"gray.600"} className=" fw-bold">
{formatDate(item?.createdAt)}
</Text>
<Menu>
<MenuButton className="link p-1 rounded-1">
<HiDotsVertical className="rubix-text-dark fs-6" />
</MenuButton>
<Portal>
<MenuList minWidth="80px">
<RouterLink to={`edit/${item.id}`}>
<MenuItem className="web-text-medium">Edit</MenuItem>
</RouterLink>
<RouterLink to={`view/${item.id}`}>
<MenuItem className="web-text-medium">View</MenuItem>
</RouterLink>
<MenuItem
onClick={() => {
setActionId(item.id);
setDeleteAlert(true);
}}
className="web-text-medium"
>
Delete
</MenuItem>
</MenuList>
</Portal>
</Menu>
</span>
),
};
});
const updateDisplayRange = (page) => {
const start = (page - 1) * pageSize + 1;
const end = Math.min(start + pageSize - 1, useCase?.data?.data?.totalItems);
setDisplayRange({ start, end });
};
return (
<>
<TabularView
title={"Usecase"}
btnTitle={"Create videos"}
link={"/usecase/add-news"}
apiData={useCase}
tableHeadRow={tableHeadRow}
extractedArray={extractedArray}
searchTerm={searchTerm}
setSearchTerm={setSearchTerm}
statusFilter={statusFilter}
setStatusFilter={setStatusFilter}
pageSize={pageSize}
setPageSize={setPageSize}
currentPage={currentPage}
setCurrentPage={setCurrentPage}
totalPages={useCase?.data?.data?.totalPages}
/>
<CustomAlertDialog
onClose={() => setDeleteAlert(false)}
isOpen={deleteAlert}
alertHandler={() => handleDelete(actionId)}
message={"Are you sure you want to delete video?"}
isLoading={deleteIsLoading}
/>
</>
);
};
export default Usecase;

2
src/Pages/Videos/EditVideos.jsx
View File

@@ -28,6 +28,8 @@ import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import Loader01 from "../../Components/Loaders/Loader01";
import { motion } from "framer-motion";
import { TiWarning } from "react-icons/ti";
import ToastBox from "../../Components/ToastBox";
const EditVideos = () => {
const { id } = useParams();

6
src/Routes/Nav.js
View File

@@ -7,6 +7,7 @@ import { IoMdPaper } from "react-icons/io";
import { MdOutlineEvent } from "react-icons/md";
import { CgCommunity } from "react-icons/cg";
import { AiOutlineIdcard } from "react-icons/ai";
import { LuMonitorPause } from "react-icons/lu";
export const nav = [
{
@@ -53,4 +54,9 @@ export const nav = [
path: "/community",
Icon: CgCommunity,
},
{
title: "Usecase",
path: "/usecase",
Icon: LuMonitorPause,
},
];

38
src/Routes/Routes.js
View File

@@ -50,6 +50,7 @@ import EcoBanner from "../Pages/Banners/EcoBanner/EcoBanner";
import EcoBannerAdd from "../Pages/Banners/EcoBanner/EcoBannerAdd";
import EcoBannerView from "../Pages/Banners/EcoBanner/EcoBannerView";
import EcoBannerEdit from "../Pages/Banners/EcoBanner/EcoBannerEdit";
import Usecase from "../Pages/Usecase/Usecase";
export const RouteLink = [
{ path: "/", Component: UnderConstruction },
@@ -58,8 +59,8 @@ export const RouteLink = [
// =============[ Videos ]================
{ path: "/videos", Component: Videos },
{ path: "videos/add-videos", Component: AddVideos },
{ path: "videos/view/:id", Component: ViewVideos },
{ path: "videos/add-videos", Component: AddVideos },
{ path: "videos/view/:id", Component: ViewVideos },
{ path: "videos/edit/:id", Component: EditVideos },
// =============[ Whitepapers ]================
@@ -77,16 +78,21 @@ export const RouteLink = [
// =============[ Community banner ]================
{ path: "banner/banner-community", Component: BannerCommunity },
{ path: "banner/banner-community/add-banner", Component: BannerCommunityAdd },
{ path: "banner/banner-community/edit/:id",Component: BannerComunityEditPage },
{ path: "banner/banner-community/view/:id", Component: BannerComunityViewPage },
{
path: "banner/banner-community/edit/:id",
Component: BannerComunityEditPage,
},
{
path: "banner/banner-community/view/:id",
Component: BannerComunityViewPage,
},
// =============[ learn banner ]================
{ path: "banner/learn", Component: BannerLearn },
{ path: "banner/learn/add-banner", Component: BannerLearnAdd },
{ path: "banner/learn/view/:id", Component: ViewLearnBanner },
{ path: "banner/learn/edit/:id", Component: BannerLearnEdit },
{ path: "banner/learn/edit/:id", Component: BannerLearnEdit },
// =============[ eco banner ]================
{ path: "banner/eco", Component: EcoBanner },
{ path: "banner/eco/add-banner", Component: EcoBannerAdd },
@@ -97,26 +103,25 @@ export const RouteLink = [
{ path: "banner/build", Component: BannerBuild },
{ path: "banner/build/add-banner", Component: BannerBuildAdd },
{ path: "banner/build/view/:id", Component: BannerBuildView },
{ path: "banner/build/edit/:id", Component: BannerBuildEdit },
{ path: "banner/build/edit/:id", Component: BannerBuildEdit },
// =============[ news banner ]================
{ path: "banner/news", Component: BannerNews },
{ path: "banner/news/add-banner", Component: BannerNewsAdd },
{ path: "banner/news/view/:id", Component: BannerNewsView },
{ path: "banner/news/edit/:id", Component: BannerNewsEdit },
{ path: "banner/news/edit/:id", Component: BannerNewsEdit },
// =============[ ecosystem banner ]================
{ path: "banner/ecosystem", Component: UnderConstruction },
{ path: "banner/ecosystem/add-banner", Component: UnderConstruction },
{ path: "banner/ecosystem/view/:id", Component: UnderConstruction },
{ path: "banner/ecosystem/edit/:id", Component: UnderConstruction },
{ path: "banner/ecosystem/edit/:id", Component: UnderConstruction },
// =============[ home banner ]================
{ path: "banner/home", Component: HomeBanner },
{ path: "banner/home/add-banner", Component: HomeBannerAdd },
{ path: "banner/home/view/:id", Component: HomeBannerView },
{ path: "banner/home/edit/:id", Component: BannerHomeEdit },
{ path: "banner/home/edit/:id", Component: BannerHomeEdit },
// =============[ blog ]================
{ path: "/blogs-articles", Component: BlogsAndArticles },
@@ -133,6 +138,13 @@ export const RouteLink = [
// =============[ events ]================
{ path: "/events", Component: Events },
{ path: "/events/add-events", Component: AddEvents },
{ path: "/events/view/:id", Component: ViewEvents },
{ path: "/events/edit/:id", Component: EditEvents },
{ path: "/events/view/:id", Component: ViewEvents },
{ path: "/events/edit/:id", Component: EditEvents },
// =============[ useCase ]================
{ path: "/usecase", Component: Usecase },
{ path: "/usecase/add-events", Component: UnderConstruction },
{ path: "/usecase/view/:id", Component: UnderConstruction },
{ path: "/usecase/edit/:id", Component: UnderConstruction },
];

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

@@ -31,9 +31,10 @@ export const rubixApi = createApi({
"getVideos",
"getWhitePaper",
"getEcoBanner"
"getEcoBanner",
"getUseCaseById",
"getUseCase"
],
endpoints: (builder) => ({
// ===============[ Community cards endpoints ]=======================
@@ -183,13 +184,11 @@ export const rubixApi = createApi({
query: ({ id, data }) => ({
url: `/admin/build/${id}`,
method: "PUT",
body: data
body: data,
}),
invalidatesTags: ["getBuildBanner"],
}),
createBuildBanner: builder.mutation({
query: (newBanner) => ({
url: "/admin/build",
@@ -226,7 +225,7 @@ export const rubixApi = createApi({
query: ({ id, data }) => ({
url: `/admin/main-news/${id}`,
method: "PUT",
body: data
body: data,
}),
invalidatesTags: ["getNewsBanner"],
}),
@@ -359,9 +358,6 @@ export const rubixApi = createApi({
invalidatesTags: ["getEvents"],
}),
// ===============[ Home Banners endpoints ]=======================
getHomeBanner: builder.query({
query: () => "/admin/home",
@@ -391,7 +387,7 @@ export const rubixApi = createApi({
query: ({ id, data }) => ({
url: `/admin/home/change-visibility/${id}`,
method: "POST",
body:data
body: data,
}),
invalidatesTags: ["getHomeBanner"],
}),
@@ -404,7 +400,6 @@ export const rubixApi = createApi({
invalidatesTags: ["getHomeBanner"],
}),
// ===============[ Ecosystem Banners endpoints ]=======================
getEcoBanner: builder.query({
query: () => "/admin/eco",
@@ -433,7 +428,7 @@ export const rubixApi = createApi({
query: ({ id, data }) => ({
url: `/admin/eco/change-visibility/${id}`,
method: "POST",
body:data
body: data,
}),
invalidatesTags: ["getEcoBanner"],
}),
@@ -446,20 +441,12 @@ export const rubixApi = createApi({
invalidatesTags: ["getEcoBanner"],
}),
// ===============[ Videos endpoints ]=======================
getVideos: builder.query({
query: ({ page, size }) => `/admin/video?page=${page}&size=${size}`,
providesTags: ["getVideos"],
}),
createVideos: builder.mutation({
query: (video) => ({
url: "/admin/video",
@@ -473,19 +460,16 @@ export const rubixApi = createApi({
query: (id) => `/admin/video/${id}`,
providesTags: ["getVideos"],
}),
updateVideos: builder.mutation({
query: ({ id, data }) => ({
url: `/admin/video/${id}`,
method: "PUT",
body: data
body: data,
}),
invalidatesTags: ["getVideos"],
}),
updateVideosStatus: builder.mutation({
query: ({ id }) => ({
url: `/admin/video/change-visibility/${id}`,
@@ -501,7 +485,6 @@ export const rubixApi = createApi({
invalidatesTags: ["getVideos"],
}),
// ===============[ White paper endpoints ]=======================
getWhitePaper: builder.query({
query: ({ page, size }) => `/admin/whitepaper?page=${page}&size=${size}`,
@@ -521,7 +504,7 @@ export const rubixApi = createApi({
}),
invalidatesTags: ["getWhitePaper"],
}),
createWhitepaper: builder.mutation({
query: (newBanner) => ({
url: "/admin/whitepaper",
@@ -545,14 +528,46 @@ export const rubixApi = createApi({
// ===============[ Usecase endpoints ]=======================
getUsecase: builder.query({
query: () => "/admin/tech",
providesTags: ["getUseCase"],
}),
createUsecase: builder.mutation({
query: (newBanner) => ({
url: "/admin/tech",
method: "POST",
body: newBanner,
}),
invalidatesTags: ["getUseCase"],
}),
getUsecaseById: builder.query({
query: (id) => `/admin/tech/${id}`,
providesTags: ["getUseCaseById"],
}),
deleteUsecase: builder.mutation({
query: (id) => ({
url: `/admin/tech/${id}`,
method: "DELETE",
}),
invalidatesTags: ["getUseCase"],
}),
updateUsecaseStatus: builder.mutation({
query: ({ id, data }) => ({
url: `/admin/tech/change-visibility/${id}`,
method: "POST",
body: data,
}),
invalidatesTags: ["getUseCase"],
}),
updateUsecase: builder.mutation({
query: ({ id, data }) => ({
url: `/admin/tech/${id}`,
method: "PUT",
body: data, // Include the data you want to send in the request body
}),
invalidatesTags: ["getUseCase"],
}),
}),
@@ -615,8 +630,6 @@ export const {
useGetHomeBannerByIdQuery,
useUpdateHomeBannerMutation,
useGetEventsQuery,
useCreateEventsMutation,
useUpdateEventsStatusMutation,
@@ -624,7 +637,6 @@ export const {
useUpdateEventsMutation,
useGetEventsByIdQuery,
useGetVideosQuery,
useCreateVideosMutation,
useDeleteVideosMutation,
@@ -632,8 +644,6 @@ export const {
useGetVideosByIdQuery,
useUpdateVideosMutation,
useGetWhitePaperQuery,
useUpdateWhitepaperStatusMutation,
useDeleteWhitepaperMutation,
@@ -641,8 +651,6 @@ export const {
useGetWhitepaperByIdQuery,
useUpdateWhitepaperMutation,
useGetEcoBannerByIdQuery,
useGetEcoBannerQuery,
useUpdateEcoBannerMutation,
@@ -650,5 +658,14 @@ export const {
useDeleteEcoBannerMutation,
useCreateEcoBannerMutation,
useCreateUsecaseMutation,
useGetUsecaseByIdQuery,
useUpdateUsecaseMutation,
useDeleteUsecaseMutation,
useGetUsecaseQuery,
useUpdateUsecaseStatusMutation,
} = rubixApi;