diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx index 5f05d172..211457ee 100644 --- a/src/custom/Modal/index.tsx +++ b/src/custom/Modal/index.tsx @@ -51,6 +51,7 @@ const StyledDialog = styled(Dialog)` && { .MuiDialog-paper { border-radius: 0.5rem; + max-height: 62vh; } } `; diff --git a/src/custom/TransferModal/TransferList/TransferList.tsx b/src/custom/TransferModal/TransferList/TransferList.tsx index 40098fee..3999ecb0 100644 --- a/src/custom/TransferModal/TransferList/TransferList.tsx +++ b/src/custom/TransferModal/TransferList/TransferList.tsx @@ -29,7 +29,7 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme } export interface TransferListProps { - name: string; + name?: string; assignableData: ListItemType[]; assignedData: (data: ListItemType[]) => void; originalAssignedData: ListItemType[]; diff --git a/src/custom/Workspaces/AssignmentModal.tsx b/src/custom/Workspaces/AssignmentModal.tsx index 4fc4d865..d44bfcad 100644 --- a/src/custom/Workspaces/AssignmentModal.tsx +++ b/src/custom/Workspaces/AssignmentModal.tsx @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import { Divider } from '../../base'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { TransferList } from '../TransferModal/TransferList'; import { ModalActionDiv } from './styles'; @@ -22,6 +23,21 @@ interface AssignmentModalProps { isAssignAllowed: boolean; isRemoveAllowed: boolean; helpText: string; + showViews?: boolean; + nameViews?: string; + assignableViewsData?: any[]; + handleAssignedViewsData?: (data: any) => void; + originalAssignedViewsData?: any[]; + + emptyStateViewsIcon?: JSX.Element; + handleAssignableViewsPage?: () => void; + handleAssignedViewsPage?: () => void; + originalLeftViewsCount?: number; + originalRightViewsCount?: number; + onAssignViews?: () => void; + disableTransferViews?: boolean; + isAssignAllowedViews?: boolean; + isRemoveAllowedViews?: boolean; } const AssignmentModal: React.FC = ({ @@ -42,7 +58,21 @@ const AssignmentModal: React.FC = ({ disableTransfer, isAssignAllowed, isRemoveAllowed, - helpText + helpText, + showViews, + nameViews, + assignableViewsData, + handleAssignedViewsData, + originalAssignedViewsData, + emptyStateViewsIcon, + handleAssignableViewsPage, + handleAssignedViewsPage, + originalLeftViewsCount, + originalRightViewsCount, + // onAssignViews, + disableTransferViews + // isAssignAllowedViews, + // isRemoveAllowedViews }) => { return ( = ({ rightPermission={isRemoveAllowed} transferComponentType={''} /> + + {showViews && ( + {})} + originalAssignedData={originalAssignedViewsData || []} + emptyStateIconLeft={emptyStateViewsIcon || <>} + emtyStateMessageLeft={`No views available`} + emptyStateIconRight={emptyStateViewsIcon || <>} + emtyStateMessageRight={`No views assigned`} + assignablePage={handleAssignableViewsPage || (() => {})} + assignedPage={handleAssignedViewsPage || (() => {})} + originalLeftCount={originalLeftViewsCount ?? 0} + originalRightCount={originalRightViewsCount ?? 0} + leftPermission={true} + rightPermission={true} + transferComponentType={''} + /> + )} Cancel - + Save diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index d0d1f3e2..f2bed92f 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -20,6 +20,7 @@ import SearchBar from '../SearchBar'; import AssignmentModal from './AssignmentModal'; import EditButton from './EditButton'; import useDesignAssignment from './hooks/useDesignAssignment'; +import useViewAssignment from './hooks/useViewsAssignment'; import { TableHeader, TableRightActionHeader } from './styles'; export interface DesignTableProps { @@ -57,6 +58,10 @@ export interface DesignTableProps { isAssignAllowed: boolean; isRemoveAllowed: boolean; setDesignSearch: (value: string) => void; + showViews: boolean; + useGetWorkspaceViewsQuery: any; + useAssignviewToWorkspaceMutation: any; + useUnassignviewFromWorkspaceMutation: any; } export interface PublishModalState { @@ -95,7 +100,11 @@ const DesignTable: React.FC = ({ isAssignAllowed, isRemoveAllowed, useGetWorkspaceDesignsQuery, - setDesignSearch + useGetWorkspaceViewsQuery, + setDesignSearch, + showViews, + useAssignviewToWorkspaceMutation, + useUnassignviewFromWorkspaceMutation }) => { const [publishModal, setPublishModal] = useState({ open: false, @@ -179,6 +188,13 @@ const DesignTable: React.FC = ({ useGetDesignsOfWorkspaceQuery: useGetWorkspaceDesignsQuery }); + const viewsAssignment = useViewAssignment({ + workspaceId, + useAssignviewToWorkspaceMutation, + useUnassignviewFromWorkspaceMutation, + useGetviewsOfWorkspaceQuery: useGetWorkspaceViewsQuery + }); + const tableHeaderContent = ( @@ -256,11 +272,25 @@ const DesignTable: React.FC = ({ handleAssignedPage={designAssignment.handleAssignedPage} originalLeftCount={designAssignment.data?.length} originalRightCount={designAssignment.assignedItems?.length} - onAssign={designAssignment.handleAssign} + onAssign={designAssignment.handleAssign || viewsAssignment.handleAssign} disableTransfer={designAssignment.disableTransferButton} helpText={`Assign Designs to ${workspaceName}`} isAssignAllowed={isAssignAllowed} isRemoveAllowed={isRemoveAllowed} + showViews={showViews} + nameViews="Views" + assignableViewsData={viewsAssignment.data} + handleAssignedViewsData={viewsAssignment.handleAssignData} + originalAssignedViewsData={viewsAssignment.workspaceData} + emptyStateViewsIcon={} + handleAssignableViewsPage={viewsAssignment.handleAssignablePage} + handleAssignedViewsPage={viewsAssignment.handleAssignedPage} + originalLeftViewsCount={viewsAssignment.data?.length} + originalRightViewsCount={viewsAssignment.assignedItems?.length} + onAssignViews={viewsAssignment.handleAssign} + disableTransferViews={viewsAssignment.disableTransferButton} + // isAssignAllowedViews={isAssignAllowed} + // isRemoveAllowedViews={isRemoveAllowed} /> => { + const [viewsPage, setviewsPage] = useState(0); + const [viewsData, setviewsData] = useState([]); + const viewsPageSize = 25; + const [viewsOfWorkspacePage, setviewsOfWorkspacePage] = useState(0); + const [workspaceviewsData, setWorkspaceviewsData] = useState([]); + const [assignviewModal, setAssignviewModal] = useState(false); + const [skipviews, setSkipviews] = useState(true); + const [disableTransferButton, setDisableTransferButton] = useState(true); + const [assignedviews, setAssignedviews] = useState([]); + + const { data: views } = useGetviewsOfWorkspaceQuery( + withDefaultPageArgs({ + workspaceId, + page: viewsPage, + pagesize: viewsPageSize, + filter: '{"assigned":false}' + }), + { + skip: skipviews + } + ); + + const { data: viewsOfWorkspace } = useGetviewsOfWorkspaceQuery( + withDefaultPageArgs({ + workspaceId, + page: viewsOfWorkspacePage, + pagesize: viewsPageSize + }), + { + skip: skipviews + } + ); + + const [assignviewToWorkspace] = useAssignviewToWorkspaceMutation(); + const [unassignviewFromWorkspace] = useUnassignviewFromWorkspaceMutation(); + + useEffect(() => { + const viewsDataRtk = views?.views ? views.views : []; + setviewsData((prevData) => [...prevData, ...viewsDataRtk]); + }, [views]); + + useEffect(() => { + const viewsOfWorkspaceDataRtk = viewsOfWorkspace?.views ? viewsOfWorkspace.views : []; + setWorkspaceviewsData((prevData) => [...prevData, ...viewsOfWorkspaceDataRtk]); + }, [viewsOfWorkspace]); + + const handleAssignviewModal = (e?: React.MouseEvent): void => { + e?.stopPropagation(); + setAssignviewModal(true); + setSkipviews(false); + }; + + const handleAssignviewModalClose = (e?: React.MouseEvent): void => { + e?.stopPropagation(); + setAssignviewModal(false); + setSkipviews(true); + }; + + const handleAssignablePageview = (): void => { + const pagesCount = Math.ceil(Number(views?.total_count) / viewsPageSize); + if (viewsPage < pagesCount - 1) { + setviewsPage((prevviewsPage) => prevviewsPage + 1); + } + }; + + const handleAssignedPageview = (): void => { + const pagesCount = Math.ceil(Number(viewsOfWorkspace?.total_count) / viewsPageSize); + if (viewsOfWorkspacePage < pagesCount - 1) { + setviewsOfWorkspacePage((prevPage) => prevPage + 1); + } + }; + + const getAddedAndRemovedviews = (allAssignedviews: Pattern[]): AddedAndRemovedViews => { + const originalviewsIds = workspaceviewsData.map((view) => view.id); + const updatedviewsIds = allAssignedviews.map((view) => view.id); + + const addedviewsIds = updatedviewsIds.filter((id) => !originalviewsIds.includes(id)); + const removedviewsIds = originalviewsIds.filter((id) => !updatedviewsIds.includes(id)); + + return { addedviewsIds, removedviewsIds }; + }; + + const handleAssignviews = async (): Promise => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(assignedviews); + + addedviewsIds.map((id) => + assignviewToWorkspace({ + workspaceId, + viewId: id + }).unwrap() + ); + + removedviewsIds.map((id) => + unassignviewFromWorkspace({ + workspaceId, + viewId: id + }).unwrap() + ); + + setviewsData([]); + setWorkspaceviewsData([]); + setviewsPage(0); + setviewsOfWorkspacePage(0); + handleAssignviewModalClose(); + }; + + const handleAssignviewsData = (updatedAssignedData: Pattern[]): void => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(updatedAssignedData); + setDisableTransferButton(!(addedviewsIds.length > 0 || removedviewsIds.length > 0)); + setAssignedviews(updatedAssignedData); + }; + + return { + data: viewsData, + workspaceData: workspaceviewsData, + assignModal: assignviewModal, + handleAssignModal: handleAssignviewModal, + handleAssignModalClose: handleAssignviewModalClose, + handleAssignablePage: handleAssignablePageview, + handleAssignedPage: handleAssignedPageview, + handleAssign: handleAssignviews, + handleAssignData: handleAssignviewsData, + disableTransferButton, + assignedItems: assignedviews + }; +}; + +export default useViewAssignment; diff --git a/src/custom/Workspaces/index.ts b/src/custom/Workspaces/index.ts index 6a0dfa9d..e37c5d82 100644 --- a/src/custom/Workspaces/index.ts +++ b/src/custom/Workspaces/index.ts @@ -5,6 +5,7 @@ import WorkspaceTeamsTable from './WorkspaceTeamsTable'; import useDesignAssignment from './hooks/useDesignAssignment'; import useEnvironmentAssignment from './hooks/useEnvironmentAssignment'; import useTeamAssignment from './hooks/useTeamAssignment'; +import useViewAssignment from './hooks/useViewsAssignment'; export { AssignmentModal, @@ -13,5 +14,6 @@ export { WorkspaceTeamsTable, useDesignAssignment, useEnvironmentAssignment, - useTeamAssignment + useTeamAssignment, + useViewAssignment };