Untitled
unknown
plain_text
2 months ago
9.7 kB
2
Indexable
// Imports import { FC, useEffect, useState } from "react" import { useLazyQuery, useMutation, useQuery } from "@apollo/client" import CloseIcon from "@mui/icons-material/Close" import PaIcon from "@mui/icons-material/ReplyOutlined" import { Button } from "@mui/material" import { Box } from "@mui/system" import { GridColDef } from "@mui/x-data-grid-pro" import { gql } from "../../../__generated__" import { CategoryTypesEnum, RequestStatus, SubmitType, } from "../../../__generated__/graphql" import { useAlert } from "../../atoms/alertContext" import { ApproveModalProvider } from "../../atoms/approveModalContext" import ReusableDataGrid from "../../molecules/reusableDataGrid" import { ReusableNavigationBar } from "../../molecules/reusableNavigationBar" import AddCategoryModal from "../../organisms/addCategoryModal" import EditCategoryModal from "../../organisms/editCategoryModal" // GraphQl Query const approvedCategoryQuery = gql(/* GraphQL */ ` query approvedCategoryQuery($statusId: RequestStatus!, $groupType: String!) { groups(statusId: $statusId, groupType: $groupType) { id name type versionId statusId isDeleted description createdDate createdById updatedDate updatedById groupCountries { id versionId countryId country { id name } } status { name description } } } `) const fetchGroupRevisionById = gql(/* GraphQL */ ` query fetchGroupRevisionById( $statusId: RequestStatus! $groupType: String! $groupId: Int ) { groups(statusId: $statusId, groupType: $groupType, groupId: $groupId) { id name type versionId statusId isDeleted description createdDate createdById updatedDate updatedById groupCountries { id versionId countryId country { id name } } status { name description } } } `) const generateCategoryQuery = gql(/* GraphQL */ ` query groupRevision( $groupType: String! $revisionStatusIds: [RequestStatus!]! $currentRecord: Int ) { groupRevision( groupType: $groupType revisionStatusIds: $revisionStatusIds currentRecord: $currentRecord ) { id groupId groupName groupType actionType statusId isDeleted createdDate createdById updatedDate updatedById groupCountries { id versionId countryId country { id name } } status { name description } } } `) //mutation for Approve const approve_CategoryMutation = gql(/* GraphQL */ ` mutation approve_CategoryMutation($input: [ApproveCategoryOrTopicInput!]!) { approveCategoryOrTopic(input: $input) { success message } } `) //mutation for Reject const reject_CategoryMutation = gql(/* GraphQL */ ` mutation reject_CategoryMutation($input: [RejectCategoryOrTopicInput!]!) { rejectCategoryOrTopic(input: $input) { success message } } `) //mutation for Restore const restore_CategoryOrTopicMutation = gql(/* GraphQL */ ` mutation restore_CategoryOrTopicMutation( $input: [DeleteOrRestoreCategoryOrTopicInput!]! ) { deleteOrRestoreCategoryOrTopic(input: $input) { groupId success message } } `) //mutation for Delete const delete_CategoryOrTopicMutation = gql(/* GraphQL */ ` mutation delete_CategoryOrTopicMutation( $input: [DeleteOrRestoreCategoryOrTopicInput!]! ) { deleteOrRestoreCategoryOrTopic(input: $input) { groupId success message } } `) // InterFace to avoid type any export interface Category { id: string name: string type: string versionId: number statusId: number isDeleted: number description: string createdDate: string createdById: number updatedDate: string updatedById: number status?: { name: string description: string } groupCountries: { id: number versionId: number countryId: number country: { id: number name: string } }[] } interface GridCategory extends Category { id: string } interface selectedCategoryRow extends Category { id: string groupId?: number countryId?: number type: string } // export type CategoriesTab = "approved" | "underReview" | "rejected" export const CategoriesPage: FC = () => { const [isModalOpen, setIsModalOpen] = useState(false) // State for Edit Assign Modal const [isAddModalOpen, setIsAddModalOpen] = useState(false) // State for Add AssignTopicCat Modal const [editSelectedRow, setEditSelectedRow] = useState<Category | null>(null) //State to hande Edit button data // const [activeBar, setActiveBar] = useState(1) // 1 for Bar1, 2 for Bar2, 3 for Bar3 const [activeBar, setActiveBar] = useState<CategoriesTab>("approved") const { showAlert } = useAlert() const [gridData, setGridData] = useState<any[]>([]) //Approve, Reject, Restore Mutation Execution const [approveCategory] = useMutation(approve_CategoryMutation) const [rejectCategory] = useMutation(reject_CategoryMutation) const [restoreCategory] = useMutation(restore_CategoryOrTopicMutation) const [deleteCategory] = useMutation(delete_CategoryOrTopicMutation) //Query Execution const { data: bar1Data, refetch: refetchBar1 } = useQuery( approvedCategoryQuery, { variables: { statusId: RequestStatus.Approved, groupType: CategoryTypesEnum.Category, }, skip: activeBar !== "approved", fetchPolicy: "network-only", // Ensure fresh data }, ) const { data: bar2Data, refetch: refetchBar2 } = useQuery( generateCategoryQuery, { variables: { groupType: CategoryTypesEnum.Category, revisionStatusIds: [ RequestStatus.PendingChange, RequestStatus.PendingNew, ], currentRecord: 1, }, skip: activeBar !== "underReview", fetchPolicy: "network-only", // Ensure fresh data }, ) const { data: bar3Data, refetch: refetchBar3 } = useQuery( generateCategoryQuery, { variables: { groupType: CategoryTypesEnum.Category, revisionStatusIds: [ RequestStatus.RejectChange, RequestStatus.RejectNew, ], currentRecord: 0, }, skip: activeBar !== "rejected", fetchPolicy: "network-only", // Ensure fresh data }, ) const [fetchGroupRevision] = useLazyQuery(fetchGroupRevisionById) useEffect(() => { let newData: GridCategory[] = [] switch (activeBar) { case "approved": newData = bar1Data?.groups.map((item: any) => ({ id: item.id, name: item.name, type: item.type, versionId: item.versionId, description: item.description, statusId: item.statusId, createdDate: item.createdDate, createdById: item.createdById, updatedDate: item.updatedDate, updatedById: item.updatedById, groupCountries: item.groupCountries, isDeleted: item.isDeleted, })) || [] break case "underReview": newData = bar2Data?.groupRevision.map((item: any) => ({ versionId: item.id, id: item.groupId, name: item.groupName, type: item.groupType, statusId: item.statusId, description: item.description, createdDate: item.createdDate, createdById: item.createdById, updatedDate: item.updatedDate, updatedById: item.updatedById, groupCountries: item.groupCountries, isDeleted: item.isDeleted, recordType: item.status?.name === "Pending New" ? "New" : "Change", })) || [] break case "rejected": newData = bar3Data?.groupRevision.map((item: any) => ({ versionId: item.id, id: item.groupId, name: item.groupName, type: item.groupType, statusId: item.statusId, description: item.description, createdDate: item.createdDate, createdById: item.createdById, updatedDate: item.updatedDate, updatedById: item.updatedById, groupCountries: item.groupCountries, isDeleted: item.isDeleted, recordType: item.status?.name === "Reject New" ? "New" : "Change", })) || [] break default: newData = [] } setGridData(newData) }, [activeBar, bar1Data, bar2Data, bar3Data]) //handle bar click const handleBarClick = (tab: CategoriesTab) => { setActiveBar(tab) setGridData([]) } //handle Edit click const handleEditClick = (rowData: Category) => { setEditSelectedRow(rowData) setIsModalOpen(true) // Open the modal } const handlePaIconClick = async (row: Category) => { const { data } = await fetchGroupRevision({ variables: { groupId: Number(row.id), statusId: RequestStatus.Approved, groupType: CategoryTypesEnum.Category, }, })
Editor is loading...
Leave a Comment