diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.tsx b/apps/client/src/common/components/view-params-editor/ParamInput.tsx index 358dbe515..d178c3f61 100644 --- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx +++ b/apps/client/src/common/components/view-params-editor/ParamInput.tsx @@ -126,9 +126,9 @@ function MultiOption(props: EditFormMultiOptionProps) { onChange={(value) => setParamState(Array.isArray(value) ? value : [value])} > {Object.values(paramField.values).map((option) => { - const { value, label } = option; + const { value, label, colour } = option; return ( - + {label} ); diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts index 3f5f48ab4..2484ac713 100644 --- a/apps/client/src/common/components/view-params-editor/constants.ts +++ b/apps/client/src/common/components/view-params-editor/constants.ts @@ -1,6 +1,6 @@ import { CustomFields } from 'ontime-types'; -import type { ParamField } from './types'; +import type { MultiselectOptions, ParamField } from './types'; export const makeOptionsFromCustomFields = ( customFields: CustomFields, @@ -18,6 +18,17 @@ export const makeOptionsFromCustomFields = ( return options; }; +export function makeCustomFieldSelectOptions(customFields: CustomFields, filterImageType = true): MultiselectOptions { + const options: MultiselectOptions = {}; + for (const [key, value] of Object.entries(customFields)) { + if (filterImageType && value.type === 'image') { + continue; + } + options[key] = { value: key, label: value.label, colour: value.colour }; + } + return options; +} + export const getTimeOption = (timeFormat: string): ParamField => { const placeholder = `${timeFormat} (default)`; return { diff --git a/apps/client/src/common/components/view-params-editor/types.ts b/apps/client/src/common/components/view-params-editor/types.ts index 4e7853350..51d8a2ad1 100644 --- a/apps/client/src/common/components/view-params-editor/types.ts +++ b/apps/client/src/common/components/view-params-editor/types.ts @@ -12,9 +12,11 @@ type OptionsField = { defaultValue?: string; }; +export type MultiselectOption = { value: string; label: string; colour: string }; +export type MultiselectOptions = Record; type MultiOptionsField = { type: 'multi-option'; - values: Record; + values: MultiselectOptions; defaultValue?: string; }; diff --git a/apps/client/src/features/operator/Operator.tsx b/apps/client/src/features/operator/Operator.tsx index 57d9278fb..6a1c4613b 100644 --- a/apps/client/src/features/operator/Operator.tsx +++ b/apps/client/src/features/operator/Operator.tsx @@ -116,7 +116,7 @@ export default function Operator() { // subscriptions is a MultiSelect and may have multiple values const subscriptions = searchParams.getAll('subscribe').filter((value) => Object.hasOwn(customFields, value)); - const canEdit = shouldEdit && subscriptions; + const canEdit = shouldEdit && subscriptions.length; const main = searchParams.get('main') as keyof TitleFields | null; const secondary = searchParams.get('secondary'); diff --git a/apps/client/src/features/operator/operator.options.tsx b/apps/client/src/features/operator/operator.options.tsx index f60ff377f..9dcbc252a 100644 --- a/apps/client/src/features/operator/operator.options.tsx +++ b/apps/client/src/features/operator/operator.options.tsx @@ -2,6 +2,7 @@ import { CustomFields } from 'ontime-types'; import { getTimeOption, + makeCustomFieldSelectOptions, makeOptionsFromCustomFields, OptionTitle, } from '../../common/components/view-params-editor/constants'; @@ -9,13 +10,7 @@ import { ViewOption } from '../../common/components/view-params-editor/types'; export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => { const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' }); - - const customFieldSelect = Object.entries(customFields).reduce< - Record - >((acc, [key, field]) => { - acc[key] = { value: key, label: field.label, colour: field.colour }; - return acc; - }, {}); + const customFieldSelect = makeCustomFieldSelectOptions(customFields); return [ { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] }, @@ -46,6 +41,13 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin type: 'multi-option', values: customFieldSelect, }, + { + id: 'shouldEdit', + title: 'Edit custom field', + description: 'Allows editing an highlighted custom field by long pressing', + type: 'boolean', + defaultValue: false, + }, ], }, { @@ -59,13 +61,6 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin type: 'boolean', defaultValue: false, }, - { - id: 'shouldEdit', - title: 'Edit custom field', - description: 'Allows editing an events selected custom field by long pressing.', - type: 'boolean', - defaultValue: false, - }, ], }, ];