refactor: op cannot subscribe to image fields

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 (
-                <MenuItemOption value={value} key={value}>
+                <MenuItemOption value={value} key={value} style={{ borderRight: `8px solid ${colour}` }}>
                   {label}
                 </MenuItemOption>
               );

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 {

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<string, MultiselectOption>;
 type MultiOptionsField = {
   type: 'multi-option';
-  values: Record<string, { value: string; label: string; colour: string }>;
+  values: MultiselectOptions;
   defaultValue?: string;
 };
 

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');

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 = makeCustomFieldSelectOptions(customFields);
-  const customFieldSelect = Object.entries(customFields).reduce<
-    Record<string, { value: string; label: string; colour: string }>
-  >((acc, [key, field]) => {
-    acc[key] = { value: key, label: field.label, colour: field.colour };
-    return acc;
-  }, {});
 
   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,
-        },
       ],
     },
   ];