refactor: apply param structure

apps/client/src/common/components/view-params-editor/constants.ts

@@ -38,3 +38,14 @@ export const showLeadingZeros: ParamField = {
   type: 'boolean',
   defaultValue: false,
 };
+
+export enum OptionTitle {
+  ClockOptions = 'Clock Options',
+  TimerOptions = 'Timer Options',
+  DataSources = 'Data sources',
+  ElementVisibility = 'Element visibility',
+  BehaviourOptions = 'View behaviour',
+  StyleOverride = 'View style override',
+  Animation = 'View animation',
+  Schedule = 'Schedule options',
+}

apps/client/src/common/components/view-params-editor/types.ts

@@ -1,3 +1,5 @@
+import { OptionTitle } from './constants';
+
 type BaseField = {
   id: string;
   title: string;
@@ -26,7 +28,7 @@ export type ParamField = BaseField &
   (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);
 
 export type ViewOption = {
-  title: string;
+  title: OptionTitle;
   options: ParamField[];
   collapsible?: boolean;
 };

apps/client/src/features/operator/operator.options.tsx

@@ -1,6 +1,10 @@
 import { CustomFields } from 'ontime-types';
 
-import { getTimeOption, makeOptionsFromCustomFields } from '../../common/components/view-params-editor/constants';
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
@@ -14,10 +18,11 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
   }, {});
 
   return [
-    { section: 'Clock Options' },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
-
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
         {
           id: 'main',
           title: 'Main data field',
@@ -41,7 +46,12 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           type: 'multi-option',
           values: customFieldSelect,
         },
-    { section: 'Element visibility' },
+      ],
+    },
+    {
+      title: OptionTitle.ElementVisibility,
+      collapsible: true,
+      options: [
         {
           id: 'hidepast',
           title: 'Hide Past Events',
@@ -56,5 +66,7 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           type: 'boolean',
           defaultValue: false,
         },
+      ],
+    },
   ];
 };

apps/client/src/features/viewers/backstage/backstage.options.ts

@@ -1,15 +1,21 @@
 import { CustomFields } from 'ontime-types';
 
-import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
 
   return [
-    { section: 'Clock Options' },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
         {
           id: 'secondary-src',
           title: 'Event secondary text',
@@ -18,7 +24,13 @@ export const getBackstageOptions = (timeFormat: string, customFields: CustomFiel
           values: secondaryOptions,
           defaultValue: '',
         },
-    { section: 'Schedule options' },
+      ],
+    },
+
+    {
+      title: OptionTitle.Schedule,
+      collapsible: true,
+      options: [
         {
           id: 'eventsPerPage',
           title: 'Events per page',
@@ -40,5 +52,7 @@ export const getBackstageOptions = (timeFormat: string, customFields: CustomFiel
           type: 'boolean',
           defaultValue: false,
         },
+      ],
+    },
   ];
 };

apps/client/src/features/viewers/clock/clock.options.ts

@@ -1,10 +1,12 @@
-import { getTimeOption } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getClockOptions = (timeFormat: string): ViewOption[] => [
-  { section: 'Clock Options' },
-  getTimeOption(timeFormat),
-  { section: 'View style override' },
+  { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+  {
+    title: OptionTitle.ClockOptions,
+    collapsible: true,
+    options: [
       {
         id: 'key',
         title: 'Key Colour',
@@ -70,4 +72,6 @@ export const getClockOptions = (timeFormat: string): ViewOption[] => [
         type: 'number',
         placeholder: '0 (default)',
       },
+    ],
+  },
 ];

apps/client/src/features/viewers/countdown/countdown.options.ts

@@ -1,7 +1,7 @@
-import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
-import { ViewOption } from '../../../common/components/view-params-editor/types';
+import { getTimeOption, hideTimerSeconds, OptionTitle } from '../../../common/components/view-params-editor/constants';
+import { ParamField, ViewOption } from '../../../common/components/view-params-editor/types';
 
-const makePersistedField = (id: string, value: string): ViewOption => {
+const makePersistedField = (id: string, value: string): ParamField => {
   return {
     id,
     title: 'Used to keep the selection on submit',
@@ -13,11 +13,12 @@ const makePersistedField = (id: string, value: string): ViewOption => {
 
 type Persisted = { id: string; value: string };
 export const getCountdownOptions = (timeFormat: string, persisted?: Persisted): ViewOption[] => [
-  { section: 'Clock Options' },
-  getTimeOption(timeFormat),
-  { section: 'Timer Options' },
-  hideTimerSeconds,
-  { section: 'View behaviour' },
+  { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+  { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds] },
+  {
+    title: OptionTitle.BehaviourOptions,
+    collapsible: true,
+    options: [
       {
         id: 'showProjected',
         title: 'Show projected time',
@@ -26,4 +27,6 @@ export const getCountdownOptions = (timeFormat: string, persisted?: Persisted):
         defaultValue: false,
       },
       ...(persisted ? [makePersistedField(persisted.id, persisted.value)] : []),
+    ],
+  },
 ];

apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts

@@ -1,6 +1,6 @@
 import { CustomFields } from 'ontime-types';
 
-import { makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import { makeOptionsFromCustomFields, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] => {
@@ -16,7 +16,10 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
   });
 
   return [
-    { section: 'Data sources' },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
         {
           id: 'top-src',
           title: 'Top Text',
@@ -33,7 +36,13 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
           values: bottomSourceOptions,
           defaultValue: 'none',
         },
-    { section: 'View animation' },
+      ],
+    },
+
+    {
+      title: OptionTitle.Animation,
+      collapsible: true,
+      options: [
         {
           id: 'transition',
           title: 'Transition',
@@ -48,7 +57,13 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
           type: 'number',
           placeholder: '3 (default)',
         },
-    { section: 'View style override' },
+      ],
+    },
+
+    {
+      title: OptionTitle.StyleOverride,
+      collapsible: true,
+      options: [
         {
           id: 'top-size',
           title: 'Top Text Size',
@@ -113,5 +128,7 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
           type: 'colour',
           defaultValue: 'FF0000',
         },
+      ],
+    },
   ];
 };

apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts

@@ -1,11 +1,16 @@
-import { hideTimerSeconds, showLeadingZeros } from '../../../common/components/view-params-editor/constants';
+import {
+  hideTimerSeconds,
+  OptionTitle,
+  showLeadingZeros,
+} from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
-  { section: 'Timer Options' },
-  hideTimerSeconds,
-  showLeadingZeros,
-  { section: 'Element visibility' },
+  { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds, showLeadingZeros] },
+  {
+    title: OptionTitle.ElementVisibility,
+    collapsible: true,
+    options: [
       {
         id: 'hideovertime',
         title: 'Hide Overtime',
@@ -20,7 +25,12 @@ export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
         type: 'boolean',
         defaultValue: false,
       },
-  { section: 'View style override' },
+    ],
+  },
+  {
+    title: OptionTitle.StyleOverride,
+    collapsible: true,
+    options: [
       {
         id: 'key',
         title: 'Key Colour',
@@ -86,4 +96,6 @@ export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
         type: 'number',
         placeholder: '0 (default)',
       },
+    ],
+  },
 ];

apps/client/src/features/viewers/public/public.options.ts

@@ -1,15 +1,21 @@
 import { CustomFields } from 'ontime-types';
 
-import { getTimeOption, makeOptionsFromCustomFields } from '../../../common/components/view-params-editor/constants';
+import {
+  getTimeOption,
+  makeOptionsFromCustomFields,
+  OptionTitle,
+} from '../../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ViewOption[] => {
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
 
   return [
-    { section: 'Clock Options' },
-    getTimeOption(timeFormat),
-    { section: 'Data sources' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
         {
           id: 'secondary-src',
           title: 'Event secondary text',
@@ -18,7 +24,12 @@ export const getPublicOptions = (timeFormat: string, customFields: CustomFields)
           values: secondaryOptions,
           defaultValue: '',
         },
-    { section: 'Schedule options' },
+      ],
+    },
+    {
+      title: OptionTitle.Schedule,
+      collapsible: true,
+      options: [
         {
           id: 'eventsPerPage',
           title: 'Events per page',
@@ -40,5 +51,7 @@ export const getPublicOptions = (timeFormat: string, customFields: CustomFields)
           type: 'boolean',
           defaultValue: false,
         },
+      ],
+    },
   ];
 };

apps/client/src/features/viewers/studio/studioClock.options.ts

@@ -1,12 +1,13 @@
-import { getTimeOption, hideTimerSeconds } from '../../../common/components/view-params-editor/constants';
+import { getTimeOption, hideTimerSeconds, OptionTitle } from '../../../common/components/view-params-editor/constants';
 import type { ViewOption } from '../../../common/components/view-params-editor/types';
 
 export const getStudioClockOptions = (timeFormat: string): ViewOption[] => [
-  { section: 'Clock Options' },
-  getTimeOption(timeFormat),
-  { section: 'Timer Options' },
-  hideTimerSeconds,
-  { section: 'Element visibility' },
+  { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+  { title: OptionTitle.TimerOptions, collapsible: true, options: [hideTimerSeconds] },
+  {
+    title: OptionTitle.ElementVisibility,
+    collapsible: true,
+    options: [
       {
         id: 'hideRight',
         title: 'Hide right section',
@@ -14,4 +15,6 @@ export const getStudioClockOptions = (timeFormat: string): ViewOption[] => [
         type: 'boolean',
         defaultValue: false,
       },
+    ],
+  },
 ];

apps/client/src/views/cuesheet/cuesheet.options.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 import { isStringBoolean } from '../../features/viewers/common/viewUtils';
 
@@ -9,7 +10,10 @@ import { isStringBoolean } from '../../features/viewers/common/viewUtils';
  * we save the user preferences in the local storage
  */
 export const cuesheetOptions: ViewOption[] = [
-  { section: 'Table options' },
+  {
+    title: OptionTitle.ElementVisibility,
+    collapsible: true,
+    options: [
       {
         id: 'showActionMenu',
         title: 'Show action menu',
@@ -45,7 +49,12 @@ export const cuesheetOptions: ViewOption[] = [
         type: 'boolean',
         defaultValue: false,
       },
-  { section: 'Delay flow' },
+    ],
+  },
+  {
+    title: OptionTitle.BehaviourOptions,
+    collapsible: true,
+    options: [
       {
         id: 'showDelayedTimes',
         title: 'Show delayed times',
@@ -60,6 +69,8 @@ export const cuesheetOptions: ViewOption[] = [
         type: 'boolean',
         defaultValue: false,
       },
+    ],
+  },
 ];
 
 type CuesheetOptions = {

apps/client/src/views/project-info/projectInfo.options.ts

@@ -1,7 +1,11 @@
+import { OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const projectInfoOptions: ViewOption[] = [
-  { section: 'Data visibility' },
+  {
+    title: OptionTitle.BehaviourOptions,
+    collapsible: true,
+    options: [
       {
         id: 'showBackstage',
         title: 'Show backstage Data',
@@ -16,4 +20,6 @@ export const projectInfoOptions: ViewOption[] = [
         type: 'boolean',
         defaultValue: false,
       },
+    ],
+  },
 ];

apps/client/src/views/timeline/timeline.options.ts

@@ -1,9 +1,13 @@
-import { getTimeOption } from '../../common/components/view-params-editor/constants';
+import { getTimeOption, OptionTitle } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
 
 export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
   return [
-    getTimeOption(timeFormat),
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.ElementVisibility,
+      collapsible: true,
+      options: [
         {
           id: 'hidePast',
           title: 'Hide Past Events',
@@ -18,5 +22,7 @@ export const getTimelineOptions = (timeFormat: string): ViewOption[] => {
           type: 'boolean',
           defaultValue: false,
         },
+      ],
+    },
   ];
 };

apps/client/src/views/timer/timer.options.ts

@@ -7,6 +7,7 @@ import {
   getTimeOption,
   hideTimerSeconds,
   makeOptionsFromCustomFields,
+  OptionTitle,
   showLeadingZeros,
 } from '../../common/components/view-params-editor/constants';
 import { ViewOption } from '../../common/components/view-params-editor/types';
@@ -25,9 +26,11 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
   const secondaryOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
 
   return [
-    { section: 'Clock Options' },
-    getTimeOption(timeFormat),
-    { section: 'Timer Options' },
+    { title: OptionTitle.ClockOptions, collapsible: true, options: [getTimeOption(timeFormat)] },
+    {
+      title: OptionTitle.TimerOptions,
+      collapsible: true,
+      options: [
         hideTimerSeconds,
         showLeadingZeros,
         {
@@ -38,7 +41,12 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           values: timerDisplayOptions,
           defaultValue: 'no-overrides',
         },
-    { section: 'Data sources' },
+      ],
+    },
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
         {
           id: 'main',
           title: 'Main text',
@@ -55,7 +63,13 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           values: secondaryOptions,
           defaultValue: '',
         },
-    { section: 'Element visibility' },
+      ],
+    },
+
+    {
+      title: OptionTitle.ElementVisibility,
+      collapsible: true,
+      options: [
         {
           id: 'hideClock',
           title: 'Hide Time Now',
@@ -91,6 +105,8 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           type: 'boolean',
           defaultValue: false,
         },
+      ],
+    },
   ];
 };