Custom fields views (#789)

* style: show field colour in editor

* feat: custom fields in cuesheet

* feat: custom fields in operator

* refactor: update CSV export

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

@@ -1,4 +1,4 @@
-import { UserFields } from 'ontime-types';
+import { CustomFields } from 'ontime-types';
 
 import { ParamField } from './types';
 
@@ -404,7 +404,11 @@ export const getStudioClockOptions = (timeFormat: string): ParamField[] => [
   hideTimerSeconds,
 ];
 
-export const getOperatorOptions = (userFields: UserFields, timeFormat: string): ParamField[] => {
+export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ParamField[] => {
+  const customFieldSelect = Object.keys(customFields).reduce((acc, key) => {
+    return { ...acc, [key]: key };
+  }, {});
+
   return [
     getTimeOption(timeFormat),
     {
@@ -439,25 +443,14 @@ export const getOperatorOptions = (userFields: UserFields, timeFormat: string):
     {
       id: 'subscribe',
       title: 'Highlight Field',
-      description: 'Choose a field to highlight',
+      description: 'Choose a custom field to highlight',
       type: 'option',
-      values: {
-        user0: userFields.user0 || 'user0',
-        user1: userFields.user1 || 'user1',
-        user2: userFields.user2 || 'user2',
-        user3: userFields.user3 || 'user3',
-        user4: userFields.user4 || 'user4',
-        user5: userFields.user5 || 'user5',
-        user6: userFields.user6 || 'user6',
-        user7: userFields.user7 || 'user7',
-        user8: userFields.user8 || 'user8',
-        user9: userFields.user9 || 'user9',
-      },
+      values: customFieldSelect,
     },
     {
       id: 'shouldEdit',
-      title: 'Edit user field',
-      description: 'Allows editing an events user field by long pressing on it. Needs a selected highlighted field',
+      title: 'Edit custom field',
+      description: 'Allows editing an events selected custom field by long pressing.',
       type: 'boolean',
       defaultValue: false,
     },

apps/client/src/common/hooks/useEventAction.ts

@@ -150,6 +150,13 @@ export const useEventAction = () => {
     [_updateEventMutation],
   );
 
+  const updateCustomField = useCallback(
+    async (eventId: string, field: string, value: string) => {
+      updateEvent({ id: eventId, custom: { [field]: { value } } });
+    },
+    [updateEvent],
+  );
+
   type TimeField = 'timeStart' | 'timeEnd' | 'duration';
   /**
    * Updates time of existing event
@@ -553,5 +560,6 @@ export const useEventAction = () => {
     swapEvents,
     updateEvent,
     updateTimer,
+    updateCustomField,
   };
 };

apps/client/src/common/utils/fileDownload.ts

@@ -11,6 +11,13 @@ type BlobOptions = {
   type: string;
 };
 
+/**
+ * Gets DB from backend and prepares a file to be downloaded
+ * @param url
+ * @param fileOptions
+ * @param blobOptions
+ * @returns
+ */
 export default async function fileDownload(url: string, fileOptions: FileOptions, blobOptions: BlobOptions) {
   const response = await axios({
     url: `${url}/db`,
@@ -20,7 +27,7 @@ export default async function fileDownload(url: string, fileOptions: FileOptions
   const headerLine = response.headers['Content-Disposition'];
   let { name: fileName } = fileOptions;
   const { type: fileType } = fileOptions;
-  const { project, rundown, userFields } = response.data;
+  const { project, rundown, customFields } = response.data;
 
   // try and get the filename from the response
   if (headerLine != null) {
@@ -37,7 +44,7 @@ export default async function fileDownload(url: string, fileOptions: FileOptions
   }
 
   if (fileType === 'csv') {
-    const sheetData = makeTable(project, rundown, userFields);
+    const sheetData = makeTable(project, rundown, customFields);
     fileContent = makeCSV(sheetData);
     fileName += '.csv';
   }