Merge pull request #5492 from 3drepo/ISSUE_5486

ISSUE #5486 - Incorrect pin colour until you click into the new ticket

Author: carmenfan

frontend/src/v5/ui/routes/viewer/tickets/ticketDetailsCard/ticketsDetailsCard.component.tsx

@@ -142,6 +142,7 @@ export const TicketDetailsCard = () => {
 		setDetailViewAndProps(TicketDetailsView.Form);
 		TicketsActionsDispatchers.fetchTicket(teamspace, project, containerOrFederation, ticket._id, isFederation, revision);
 		setTicketId(ticket._id);
+		TicketsCardActionsDispatchers.setSelectedTemplate(ticket.type);
 	}, [ticket?._id]);
 
 	useEffect(() => {

frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.component.tsx

@@ -32,7 +32,7 @@ import { TicketsCardHooksSelectors, TicketsHooksSelectors } from '@/v5/services/
 import { TicketsCardActionsDispatchers } from '@/v5/services/actionsDispatchers';
 import { PaddedCrossIcon } from '@controls/chip/chip.styles';
 import { ITicket } from '@/v5/store/tickets/tickets.types';
-import { isEqual } from 'lodash';
+import { get, isEqual, set } from 'lodash';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { DrawingViewerService } from '@components/viewer/drawingViewer/drawingViewer.service';
 import { Pin } from '../../../pin';
@@ -43,20 +43,22 @@ export const CoordsProperty = ({ value, label, onChange, onBlur, required, error
 	const prevValue = useRef(undefined);
 	const { getValues } = useFormContext();
 	const ticket = getValues() as ITicket;
-	const selectedTemplateId = TicketsCardHooksSelectors.selectSelectedTemplateId() ?? ticket?.type;
+	const selectedTemplateId = ticket?.type ?? TicketsCardHooksSelectors.selectSelectedTemplateId();
 	const template = TicketsHooksSelectors.selectTemplateById(containerOrFederation, selectedTemplateId);
 	const selectedPin = TicketsCardHooksSelectors.selectSelectedTicketPinId();
 
-	const colourPropPath = getColorTriggerPropName(name, template);
-	useWatch({ name:colourPropPath });
+	const colorTriggerPropPath = getColorTriggerPropName(name, template);
+	const colorTriggerPropValue = useWatch({ name: colorTriggerPropPath }) ?? get(ticket, colorTriggerPropPath);
 
 	const isNewTicket = !ticket?._id;
 	const ticketId = !isNewTicket ? ticket._id : NEW_TICKET_ID;
+	const minimumPinTicket = set({ _id: ticketId }, colorTriggerPropPath, colorTriggerPropValue) as ITicket;
+	
 	const pinId = getPinId(name, ticket);
 	const editMode = pinToDrop === pinId;
 	const isSelected = selectedPin === pinId;
 	const hasPin = !!value;
-	const colorHex = getPinColorHexForProperty(name, template, ticket);
+	const colorHex = getPinColorHexForProperty(name, template, minimumPinTicket);
 	const pinIcon = getPinIconForProperty(name, template);
 
 	const cancelEdit = () => {
@@ -105,7 +107,7 @@ export const CoordsProperty = ({ value, label, onChange, onBlur, required, error
 		}
 
 		if (hasPin) {
-			ViewerService.showPin(toPin(name, template, ticket, false, value));
+			ViewerService.showPin(toPin(name, template, minimumPinTicket, false, value));
 		}
 
 		if (isSelected) ViewerService.setSelectionPin({ id: pinId, isSelected });

frontend/src/v5/ui/routes/viewer/tickets/ticketsList/ticketsList.component.tsx

@@ -17,10 +17,8 @@
 import { useEffect } from 'react';
 import { TicketsCardHooksSelectors } from '@/v5/services/selectorsHooks';
 import { TicketsCardActionsDispatchers } from '@/v5/services/actionsDispatchers';
-import { VIEWER_EVENTS } from '@/v4/constants/viewer';
 import { EmptyListMessage } from '@controls/dashedContainer/emptyListMessage/emptyListMessage.styles';
 import { FormattedMessage } from 'react-intl';
-import { Viewer as ViewerService } from '@/v4/services/viewer/viewer';
 import { TicketItem } from './ticketItem/ticketItem.component';
 import { List } from './ticketsList.styles';
 
@@ -30,10 +28,6 @@ export const TicketsList = () => {
 
 	useEffect(() => {
 		TicketsCardActionsDispatchers.setSelectedTicketPin(selectedTicket?._id);
-
-		const unselectTicket = () => TicketsCardActionsDispatchers.setSelectedTicket(null);
-		ViewerService.on(VIEWER_EVENTS.BACKGROUND_SELECTED, unselectTicket);
-		return () => ViewerService.off(VIEWER_EVENTS.BACKGROUND_SELECTED, unselectTicket);
 	}, []);
 
 	return (