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;
 };