From a64543ea21b4729735425478ad2d46d79cfa8acc Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 23 Jan 2025 09:28:29 +0530 Subject: [PATCH] feat: use the views table for the workspace table view Signed-off-by: Amit Amrutiya --- src/custom/Workspaces/AssignmentModal.tsx | 2 +- src/custom/Workspaces/WorkspaceViewsTable.tsx | 312 ++++++++++++++++++ 2 files changed, 313 insertions(+), 1 deletion(-) create mode 100644 src/custom/Workspaces/WorkspaceViewsTable.tsx diff --git a/src/custom/Workspaces/AssignmentModal.tsx b/src/custom/Workspaces/AssignmentModal.tsx index 0274426b..61d20fbe 100644 --- a/src/custom/Workspaces/AssignmentModal.tsx +++ b/src/custom/Workspaces/AssignmentModal.tsx @@ -130,7 +130,7 @@ const AssignmentModal: React.FC = ({ Cancel - + Save diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx new file mode 100644 index 00000000..2335dcf0 --- /dev/null +++ b/src/custom/Workspaces/WorkspaceViewsTable.tsx @@ -0,0 +1,312 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables'; +import React, { useState } from 'react'; +import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base'; +import { DeleteIcon, EnvironmentIcon } from '../../icons'; +import { CHARCOAL, SistentThemeProvider } from '../../theme'; +import { NameDiv } from '../CatalogDesignTable/style'; +import { RESOURCE_TYPES } from '../CatalogDetail/types'; +import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl'; +import { CustomTooltip } from '../CustomTooltip'; +import { ConditionalTooltip } from '../Helpers/CondtionalTooltip'; +import { useWindowDimensions } from '../Helpers/Dimension'; +import { + ColView, + updateVisibleColumns +} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column'; +import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable'; +import SearchBar from '../SearchBar'; +import { TooltipIcon } from '../TooltipIconButton'; +import AssignmentModal from './AssignmentModal'; +import EditButton from './EditButton'; +import useViewAssignment from './hooks/useViewsAssignment'; +import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles'; + +interface ViewsTableProps { + workspaceId: string; + workspaceName: string; + useGetViewsOfWorkspaceQuery: any; + useUnassignViewFromWorkspaceMutation: any; + useAssignViewToWorkspaceMutation: any; + isRemoveAllowed: boolean; + isAssignAllowed: boolean; + handleShowDetails: (viewId: string, viewName: string, filterType: string) => void; +} + +const colViews: ColView[] = [ + ['id', 'na'], + ['name', 'xs'], + ['description', 'm'], + ['organization_id', 'l'], + ['created_at', 'xl'], + ['updated_at', 'xl'], + ['visibility', 'l'], + ['actions', 'xs'] +]; + +export const ResizableDescriptionCell = ({ value }: { value: string }) => ( +
+ + + + {value} + + + +
+); + +const WorkspaceViewsTable: React.FC = ({ + workspaceId, + workspaceName, + isRemoveAllowed, + useGetViewsOfWorkspaceQuery, + useUnassignViewFromWorkspaceMutation, + useAssignViewToWorkspaceMutation, + isAssignAllowed, + handleShowDetails +}) => { + const [expanded, setExpanded] = useState(true); + const handleAccordionChange = () => { + setExpanded(!expanded); + }; + const [search, setSearch] = useState(''); + const [isSearchExpanded, setIsSearchExpanded] = useState(false); + const [page, setPage] = useState(0); + const [pageSize, setPageSize] = useState(10); + const [sortOrder, setSortOrder] = useState('updated_at desc'); + const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery({ + workspaceId, + page: page, + pageSize: pageSize, + search: search, + order: sortOrder + }); + const { width } = useWindowDimensions(); + const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation(); + const columns: MUIDataTableColumn[] = [ + { + name: 'id', + label: 'ID', + options: { + filter: false, + customBodyRender: (value) => + } + }, + { + name: 'name', + label: 'Name', + options: { + filter: false, + sort: true, + searchable: true, + customBodyRender: (value, tableMeta) => { + const viewId = tableMeta.tableData[tableMeta.rowIndex]?.id ?? ''; + const viewName = tableMeta.tableData[tableMeta.rowIndex]?.name ?? ''; + return ( + handleShowDetails(viewId, viewName, RESOURCE_TYPES.VIEW)}> + {value} + + ); + } + } + }, + { + name: 'created_at', + label: 'Created At', + options: { + filter: false, + sort: true, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'updated_at', + label: 'Updated At', + options: { + filter: false, + sort: true, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'visibility', + label: 'Visibility', + options: { + filter: false, + sort: false, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'actions', + label: 'Actions', + options: { + filter: false, + sort: false, + searchable: false, + customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => ( + + { + isRemoveAllowed && + unassignviewFromWorkspace({ + workspaceId, + viewId: tableMeta.rowData[0] + }); + }} + iconType="delete" + > + + + + ) + } + } + ]; + + const viewAssignment = useViewAssignment({ + workspaceId, + useGetViewsOfWorkspaceQuery, + useUnassignViewFromWorkspaceMutation, + useAssignViewToWorkspaceMutation + }); + + const [columnVisibility, setColumnVisibility] = useState>(() => { + const showCols = updateVisibleColumns(colViews, width); + const initialVisibility: Record = {}; + columns.forEach((col) => { + initialVisibility[col.name] = showCols[col.name]; + }); + return initialVisibility; + }); + + const options = { + filter: false, + responsive: 'standard', + selectableRows: 'none', + count: viewsOfWorkspace?.total_count, + rowsPerPage: pageSize, + page, + elevation: 0, + sortOrder: { + name: sortOrder.split(' ')[0], + direction: sortOrder.split(' ')[1] + }, + onTableChange: (action: string, tableState: any) => { + const sortInfo = tableState.announceText ? tableState.announceText.split(' : ') : []; + let order = ''; + if (tableState.activeColumn) { + order = `${columns[tableState.activeColumn].name} desc`; + } + switch (action) { + case 'changePage': + setPage(tableState.page); + break; + case 'changeRowsPerPage': + setPageSize(tableState.rowsPerPage); + break; + case 'sort': + if (sortInfo.length == 2) { + if (sortInfo[1] === 'ascending') { + order = `${columns[tableState.activeColumn].name} asc`; + } else { + order = `${columns[tableState.activeColumn].name} desc`; + } + } + if (order !== sortOrder) { + setSortOrder(order); + } + break; + } + } + }; + const [tableCols, updateCols] = useState(columns); + + return ( + + + } + sx={{ + backgroundColor: 'background.paper' + }} + > + + + Assigned Views + + + { + setSearch(value); + }} + onClear={() => { + setSearch(''); + }} + expanded={isSearchExpanded} + setExpanded={setIsSearchExpanded} + placeholder="Search workspaces..." + /> + + + + + + + + + + + } + name="Views" + assignableData={viewAssignment.data} + handleAssignedData={viewAssignment.handleAssignData} + originalAssignedData={viewAssignment.workspaceData} + emptyStateIcon={} + handleAssignablePage={viewAssignment.handleAssignablePage} + handleAssignedPage={viewAssignment.handleAssignedPage} + originalLeftCount={viewAssignment.data?.length || 0} + originalRightCount={viewsOfWorkspace?.total_count || 0} + onAssign={viewAssignment.handleAssign} + disableTransfer={viewAssignment.disableTransferButton} + helpText={`Assign Views to ${workspaceName}`} + isAssignAllowed={isAssignAllowed} + isRemoveAllowed={isRemoveAllowed} + /> + + ); +}; + +export default WorkspaceViewsTable;