ISSUE #5312 - keep columns size and position when changing groupby/se…

…arch query
3drepo · Feb 26, 2025 · eafbec6 · eafbec6
1 parent 41b8ba2
commit eafbec6
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 46 deletions.
diff --git a/...board/projects/tickets/ticketsTable/ticketsTableContent/ticketsTableContent.component.tsx b/...board/projects/tickets/ticketsTable/ticketsTableContent/ticketsTableContent.component.tsx
@@ -16,21 +16,65 @@
  */
 
 import { SearchContext } from '@controls/search/searchContext';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { DashboardTicketsParams } from '@/v5/ui/routes/routes.constants';
 import { EmptyPageView } from '../../../../../../components/shared/emptyPageView/emptyPageView.styles';
 import { BaseProperties, IssueProperties, SafetibaseProperties } from '@/v5/ui/routes/viewer/tickets/tickets.constants';
-import { ResizableTableContextComponent, TableColumn } from '@controls/resizableTableContext/resizableTableContext';
+import { ResizableTableContext, ResizableTableContextComponent, TableColumn } from '@controls/resizableTableContext/resizableTableContext';
 import { ProjectsHooksSelectors } from '@/v5/services/selectorsHooks';
 import { Transformers, useSearchParam } from '@/v5/ui/routes/useSearchParam';
 import { Spinner } from '@controls/spinnerLoader/spinnerLoader.styles';
 import { templateAlreadyFetched } from '@/v5/store/tickets/tickets.helpers';
 import { TicketsTableResizableContent, TicketsTableResizableContentProps } from './ticketsTableResizableContent/ticketsTableResizableContent.component';
+import { ITemplate } from '@/v5/store/tickets/tickets.types';
 
-export const TicketsTableContent = (props: TicketsTableResizableContentProps) => {
+const COLUMNS: TableColumn[] = [
+	{ name: 'id', width: 80, minWidth: 25 },
+	{ name: BaseProperties.TITLE, width: 380, minWidth: 25, stretch: true },
+	{ name: 'modelName', width: 170, minWidth: 25 },
+	{ name: `properties.${BaseProperties.CREATED_AT}`, width: 127, minWidth: 25 },
+	{ name: `properties.${IssueProperties.ASSIGNEES}`, width: 96, minWidth: 25 }, 
+	{ name: `properties.${BaseProperties.OWNER}`, width: 52, minWidth: 25 },
+	{ name: `properties.${IssueProperties.DUE_DATE}`, width: 147, minWidth: 25 },
+	{ name: `properties.${IssueProperties.PRIORITY}`, width: 90, minWidth: 25 },
+	{ name: `properties.${BaseProperties.STATUS}`, width: 150, minWidth: 52 },
+	{ name: `modules.safetibase.${SafetibaseProperties.LEVEL_OF_RISK}`, width: 137, minWidth: 25 },
+	{ name: `modules.safetibase.${SafetibaseProperties.TREATMENT_STATUS}`, width: 134, minWidth: 25 },
+];
+
+const TableContent = ({ template, ...props }: TicketsTableResizableContentProps & { template: ITemplate }) => {
 	const { filteredItems } = useContext(SearchContext);
+	const { stretchTable } = useContext(ResizableTableContext);
+
+	useEffect(() => {
+		if (templateAlreadyFetched(template)) return;
+		stretchTable();
+	}, [template]);
+
+	if (!templateAlreadyFetched(template)) {
+		return (
+			<EmptyPageView>
+				<Spinner />
+			</EmptyPageView>
+		);
+	}
+	if (!filteredItems.length) {
+		return (
+			<EmptyPageView>
+				<FormattedMessage
+					id="ticketTable.emptyView"
+					defaultMessage="We couldn't find any tickets to show. Please refine your selection."
+				/>
+			</EmptyPageView>
+		);
+	}
+
+	return <TicketsTableResizableContent {...props} />;
+};
+
+export const TicketsTableContent = (props: TicketsTableResizableContentProps) => {
 	const { template: templateId } = useParams<DashboardTicketsParams>();
 	const [modelsIds] = useSearchParam('models', Transformers.STRING_ARRAY);
 
@@ -39,20 +83,6 @@ export const TicketsTableContent = (props: TicketsTableResizableContentProps) =>
 	const hasProperties = config?.issueProperties;
 	const hasSafetibase = modules?.some((module) => module.type === 'safetibase');
 	const showModelName = modelsIds.length > 1;
-
-	const columns: TableColumn[] = [
-		{ name: 'id', width: 80, minWidth: 25 },
-		{ name: BaseProperties.TITLE, width: 380, minWidth: 25, stretch: true },
-		{ name: 'modelName', width: 170, minWidth: 25 },
-		{ name: `properties.${BaseProperties.CREATED_AT}`, width: 127, minWidth: 25 },
-		{ name: `properties.${IssueProperties.ASSIGNEES}`, width: 96, minWidth: 25 }, 
-		{ name: `properties.${BaseProperties.OWNER}`, width: 52, minWidth: 25 },
-		{ name: `properties.${IssueProperties.DUE_DATE}`, width: 147, minWidth: 25 },
-		{ name: `properties.${IssueProperties.PRIORITY}`, width: 90, minWidth: 25 },
-		{ name: `properties.${BaseProperties.STATUS}`, width: 150, minWidth: 52 },
-		{ name: `modules.safetibase.${SafetibaseProperties.LEVEL_OF_RISK}`, width: 137, minWidth: 25 },
-		{ name: `modules.safetibase.${SafetibaseProperties.TREATMENT_STATUS}`, width: 134, minWidth: 25 },
-	];
 
 	const getHiddenColumns = () => {
 		const cols = [];
@@ -75,28 +105,13 @@ export const TicketsTableContent = (props: TicketsTableResizableContentProps) =>
 		return cols;
 	};
 
-	if (!templateAlreadyFetched(template)) {
-		return (
-			<EmptyPageView>
-				<Spinner />
-			</EmptyPageView>
-		);
-	}
-
-	if (!filteredItems.length) {
-		return (
-			<EmptyPageView>
-				<FormattedMessage
-					id="ticketTable.emptyView"
-					defaultMessage="We couldn't find any tickets to show. Please refine your selection."
-				/>
-			</EmptyPageView>
-		);
-	}
-
 	return (
-		<ResizableTableContextComponent columns={columns} hiddenColumns={getHiddenColumns()} columnGap={1}>
-			<TicketsTableResizableContent {...props} />
+		<ResizableTableContextComponent
+			columns={COLUMNS}
+			hiddenColumns={getHiddenColumns()}
+			columnGap={1}
+		>
+			<TableContent {...props} template={template} />
 		</ResizableTableContextComponent>
 	);
-};
+};
diff --git a/...cketsTableContent/ticketsTableResizableContent/ticketsTableResizableContent.component.tsx b/...cketsTableContent/ticketsTableResizableContent/ticketsTableResizableContent.component.tsx
@@ -16,7 +16,7 @@
  */
 
 import { SearchContext } from '@controls/search/searchContext';
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { DashboardTicketsParams } from '@/v5/ui/routes/routes.constants';
 import _ from 'lodash';
@@ -25,7 +25,6 @@ import { CircledNumber } from '@controls/circledNumber/circledNumber.styles';
 import { TicketsTableGroup } from '../ticketsTableGroup/ticketsTableGroup.component';
 import {  groupTickets, NEW_TICKET_ID, NONE_OPTION, SetTicketValue, UNSET } from '../../ticketsTable.helper';
 import { Container, ScrollableContainer, Title } from './ticketsTableResizableContent.styles';
-import { ResizableTableContext } from '@controls/resizableTableContext/resizableTableContext';
 
 export type TicketsTableResizableContentProps = {
 	setTicketValue: SetTicketValue;
@@ -35,14 +34,9 @@ export type TicketsTableResizableContentProps = {
 export const TicketsTableResizableContent = ({ setTicketValue, groupBy, selectedTicketId }: TicketsTableResizableContentProps) => {
 	const { template } = useParams<DashboardTicketsParams>();
 	const { filteredItems } = useContext(SearchContext);
-	const { stretchTable } = useContext(ResizableTableContext);
 	const onGroupNewTicket = (groupByValue: string) => (modelId: string) => {
 		setTicketValue(modelId, NEW_TICKET_ID, (groupByValue === UNSET) ? null : groupByValue);
 	};
-
-	useEffect(() => {
-		stretchTable();
-	}, [template]);
 
 	if (groupBy === NONE_OPTION || !groupBy) {
 		return (