diff --git a/frontend/src/v5/ui/components/viewer/drawingViewer/pinsLayer/pin2D/pin2D.component.tsx b/frontend/src/v5/ui/components/viewer/drawingViewer/pinsLayer/pin2D/pin2D.component.tsx index ace3f1feb8..c86074efb3 100644 --- a/frontend/src/v5/ui/components/viewer/drawingViewer/pinsLayer/pin2D/pin2D.component.tsx +++ b/frontend/src/v5/ui/components/viewer/drawingViewer/pinsLayer/pin2D/pin2D.component.tsx @@ -22,7 +22,7 @@ import { TicketsHooksSelectors } from '@/v5/services/selectorsHooks'; import { useParams } from 'react-router'; import { ViewerParams } from '@/v5/ui/routes/routes.constants'; import { Pin } from '@/v5/ui/routes/viewer/tickets/pin'; -import { toPinIcon } from '@/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers'; +import { pinTypeToPinIcon } from '@/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers'; type Pin2DProps = IPin & { scale: number }; export const Pin2D = ({ id, isSelected, position, colour, scale, type }: Pin2DProps) => { @@ -44,7 +44,7 @@ export const Pin2D = ({ id, isSelected, position, colour, scale, type }: Pin2DPr selected={isSelected} style={{ transform: `translate(${position[0]}px, ${position[1]}px) scale(${0.333 / scale})` }} > - + ); }; diff --git a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.component.tsx b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.component.tsx index 41fef75e6d..7398e1300e 100644 --- a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.component.tsx +++ b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.component.tsx @@ -25,7 +25,7 @@ import { Viewer as ViewerService } from '@/v4/services/viewer/viewer'; import { FormHelperText, Tooltip } from '@mui/material'; import { FormInputProps } from '@controls/inputs/inputController.component'; import { CoordsAction, CoordsActionLabel, CoordsActions, CoordsInputContainer, Label, FlexRow, SelectPinButton } from './coordsProperty.styles'; -import { getPinColorPropPath, getPinColorHex, NEW_TICKET_ID, toPin, getPinId, getPinIcon } from './coordsProperty.helpers'; +import { getColorTriggerPropName, getPinColorHexForProperty, NEW_TICKET_ID, toPin, getPinId, getPinIconForProperty } from './coordsProperty.helpers'; import { TicketContext } from '../../../ticket.context'; import { formatMessage } from '@/v5/services/intl'; import { TicketsCardHooksSelectors, TicketsHooksSelectors } from '@/v5/services/selectorsHooks'; @@ -47,7 +47,7 @@ export const CoordsProperty = ({ value, label, onChange, onBlur, required, error const template = TicketsHooksSelectors.selectTemplateById(containerOrFederation, selectedTemplateId); const selectedPin = TicketsCardHooksSelectors.selectSelectedTicketPinId(); - const colourPropPath = getPinColorPropPath(name, template); + const colourPropPath = getColorTriggerPropName(name, template); useWatch({ name:colourPropPath }); const isNewTicket = !ticket?._id; @@ -56,8 +56,8 @@ export const CoordsProperty = ({ value, label, onChange, onBlur, required, error const editMode = pinToDrop === pinId; const isSelected = selectedPin === pinId; const hasPin = !!value; - const colorHex = getPinColorHex(name, template, ticket); - const pinIcon = getPinIcon(name, template); + const colorHex = getPinColorHexForProperty(name, template, ticket); + const pinIcon = getPinIconForProperty(name, template); const cancelEdit = () => { if (!editMode) return; diff --git a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers.ts b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers.ts index a4ca66acea..91cd87eb53 100644 --- a/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers.ts +++ b/frontend/src/v5/ui/routes/viewer/tickets/ticketsForm/properties/coordsProperty/coordsProperty.helpers.ts @@ -40,13 +40,13 @@ const getPinConfig = (pinPath: string, template: ITemplate): PinConfig | boolean return findByName(module.properties, path[2]); }; -export const getPinColorPropPath = (name, template): string => { - const pinConfig = getPinConfig(name, template); +export const getColorTriggerPropName = (pinPropName, template): string => { + const pinConfig = getPinConfig(pinPropName, template); const property = get(pinConfig, 'color.property'); if (!property) return ''; const module = property.module ? `${TicketBaseKeys.MODULES}.${property.module}` : TicketBaseKeys.PROPERTIES; - const propName = property.name; - return `${module}.${propName}`; + const triggerPropertyName = property.name; + return `${module}.${triggerPropertyName}`; }; const getColorFromMapping = (ticket: ITicket, pinMapping: IPinColorMapping) => { @@ -61,16 +61,16 @@ const getColorFromMapping = (ticket: ITicket, pinMapping: IPinColorMapping) => { return rgb ? rgbToHex(rgb) : defaultColorHex; }; -export const getPinColorHex = (name: string, template: ITemplate, ticket: ITicket) => { - const pinConfig = getPinConfig(name, template); +export const getPinColorHexForProperty = (propertyName: string, template: ITemplate, ticket: ITicket) => { + const pinConfig = getPinConfig(propertyName, template); if (typeof pinConfig === 'boolean') return DEFAULT_COLOR; // if default pin with no colouring set if (isArray(pinConfig?.color)) return rgbToHex(pinConfig.color); // a custom colour is set, no mapping if (isObject(pinConfig?.color)) return getColorFromMapping(ticket, pinConfig.color); // a custom colour is set with mapping return DEFAULT_COLOR; // if custom pin with no colouring set }; -export const getPinIcon = (name: string, template: ITemplate): PinIcon => { - const pinConfig = getPinConfig(name, template); +export const getPinIconForProperty = (propertyName: string, template: ITemplate): PinIcon => { + const pinConfig = getPinConfig(propertyName, template); if (isObject(pinConfig) && pinConfig.icon) return pinConfig.icon; return 'DEFAULT'; }; @@ -88,20 +88,20 @@ const pinIconToType = { 'MARKER' : 'bookmark', }; -export const toPin = (propPath: string, template: ITemplate, ticket: ITicket, isSelected:boolean = false, coordValue?: number[]): IPin => { - const colour = hexToGLColor(getPinColorHex(propPath, template, ticket)); - const icon = getPinIcon(propPath, template); - const id = getPinId(propPath, ticket); +export const toPin = (propName: string, template: ITemplate, ticket: ITicket, isSelected:boolean = false, coordValue?: number[]): IPin => { + const colour = hexToGLColor(getPinColorHexForProperty(propName, template, ticket)); + const icon = getPinIconForProperty(propName, template); + const id = getPinId(propName, ticket); return { id, - position: (coordValue || get(ticket, propPath) as number[]), + position: (coordValue || get(ticket, propName) as number[]), isSelected, type: pinIconToType[icon] as PinType, colour, }; }; -export const toPinIcon = (type: PinType) => (Object.keys(pinIconToType).find((key) => pinIconToType[key] === type) || 'DEFAULT') as PinIcon; +export const pinTypeToPinIcon = (type: PinType) => (Object.keys(pinIconToType).find((key) => pinIconToType[key] === type) || 'DEFAULT') as PinIcon; export const getTicketPins = (templates, ticket, ticketPinId) => { const pinArray = [];