refactor: fixes to custom field

This commit is contained in:
Carlos Valente
2025-07-11 16:49:41 +02:00
parent 4d419c0877
commit d8c1c38123
20 changed files with 103 additions and 108 deletions
@@ -7,8 +7,8 @@ import { getURLSearchParamsFromObj, makeOptionsFromCustomFields } from '../viewP
describe('makeOptionsFromCustomFields()', () => {
const testCustomFields: CustomFields = {
field1: { label: 'Field 1', colour: 'red', type: 'string' },
field2: { label: 'Field 2', colour: 'blue', type: 'string' },
field1: { label: 'Field 1', colour: 'red', type: 'text' },
field2: { label: 'Field 2', colour: 'blue', type: 'text' },
};
it('creates an array of options to use in a select', () => {
@@ -16,7 +16,7 @@ interface CustomFieldEntryProps {
colour: string;
label: string;
fieldKey: string;
type: 'string' | 'image';
type: CustomField['type'];
onEdit: (key: CustomFieldKey, patch: CustomField) => Promise<void>;
onDelete: (key: CustomFieldKey) => Promise<void>;
}
@@ -42,7 +42,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
watch,
formState: { errors, isSubmitting, isValid, isDirty },
} = useForm<CustomFieldFormData>({
defaultValues: { type: 'string', label: initialLabel || '', colour: initialColour || '' },
defaultValues: { type: 'text', label: initialLabel || '', colour: initialColour || '' },
resetOptions: {
keepDirtyValues: true,
},
@@ -96,7 +96,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
value={watch('type')}
items={[
{ value: 'string', label: 'Text' },
{ value: 'text', label: 'Text' },
{ value: 'image', label: 'Image' },
]}
/>
@@ -30,7 +30,7 @@ export default function EntryEditorCustomFields({
const { backgroundColor, color } = getAccessibleColour(customFields[fieldKey].colour);
const labelText = customFields[fieldKey].label;
if (customFields[fieldKey].type === 'string') {
if (customFields[fieldKey].type === 'text') {
return (
<EventTextArea
key={key}
@@ -183,7 +183,7 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
id: key,
header: customFields[key].label,
meta: { colour: customFields[key].colour, type: customFields[key].type },
cell: customFields[key].type === 'string' ? MakeCustomField : LazyImage,
cell: customFields[key].type === 'text' ? MakeCustomField : LazyImage,
size: 250,
minSize: 75,
}));
@@ -14,17 +14,17 @@ describe('parseCustomFields()', () => {
const errorEmitter = vi.fn();
// @ts-expect-error -- data is external, we check bad types
const customFields = {
1: { label: 'test', type: 'string', colour: 'red' }, // ok
2: { label: 'test', type: 'string' }, // duplicate label
3: { label: '', type: 'string' }, // missing colour
4: { type: 'string', colour: '' }, // missing label
1: { label: 'test', type: 'text', colour: 'red' }, // ok
2: { label: 'test', type: 'text' }, // duplicate label
3: { label: '', type: 'text' }, // missing colour
4: { type: 'text', colour: '' }, // missing label
} as CustomFields;
const result = parseCustomFields({ customFields }, errorEmitter);
expect(result).toMatchObject({
test: {
label: 'test',
type: 'string',
type: 'text',
colour: 'red',
},
});
@@ -39,9 +39,9 @@ describe('sanitiseCustomFields()', () => {
it('returns an object of valid entries', () => {
const customFields: CustomFields = {
test: { label: 'test', type: 'string', colour: 'red' },
test2: { label: 'test2', type: 'string', colour: 'green' },
Test3: { label: 'Test3', type: 'string', colour: '' },
test: { label: 'test', type: 'text', colour: 'red' },
test2: { label: 'test2', type: 'text', colour: 'green' },
Test3: { label: 'Test3', type: 'text', colour: '' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual(customFields);
@@ -51,18 +51,18 @@ describe('sanitiseCustomFields()', () => {
const testTypes = sanitiseCustomFields({
test1: { label: 'test1', type: 'another', colour: 'red' },
test2: { label: 'test2', type: 'image', colour: 'red' },
test3: { label: 'test3', type: 'string', colour: 'red' },
test3: { label: 'test3', type: 'text', colour: 'red' },
});
expect(testTypes).toMatchObject({
test2: { label: 'test2', type: 'image', colour: 'red' },
test3: { label: 'test3', type: 'string', colour: 'red' },
test3: { label: 'test3', type: 'text', colour: 'red' },
});
});
it('colour must be a string', () => {
const customFields: CustomFields = {
// @ts-expect-error intentional bad data
test: { label: 'test', type: 'string', colour: 5 },
test: { label: 'test', type: 'text', colour: 5 },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual({});
@@ -70,7 +70,7 @@ describe('sanitiseCustomFields()', () => {
it('label can not be empty', () => {
const customFields: CustomFields = {
'': { label: '', type: 'string', colour: 'red' },
'': { label: '', type: 'text', colour: 'red' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual({});
@@ -79,10 +79,10 @@ describe('sanitiseCustomFields()', () => {
it('remove extra stuff', () => {
const customFields: CustomFields = {
// @ts-expect-error intentional bad data
test: { label: 'test', type: 'string', colour: 'red', extra: 'should be removed' },
test: { label: 'test', type: 'text', colour: 'red', extra: 'should be removed' },
};
const expectedCustomFields: CustomFields = {
test: { label: 'test', type: 'string', colour: 'red' },
test: { label: 'test', type: 'text', colour: 'red' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual(expectedCustomFields);
@@ -90,10 +90,10 @@ describe('sanitiseCustomFields()', () => {
it('enforce name cohesion', () => {
const customFields: CustomFields = {
test: { label: 'NewName', type: 'string', colour: 'red' },
test: { label: 'NewName', type: 'text', colour: 'red' },
};
const expectedCustomFields: CustomFields = {
NewName: { label: 'NewName', type: 'string', colour: 'red' },
NewName: { label: 'NewName', type: 'text', colour: 'red' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual(expectedCustomFields);
@@ -101,10 +101,10 @@ describe('sanitiseCustomFields()', () => {
it('labels with space', () => {
const customFields: CustomFields = {
Test_with_Space: { label: 'Test with Space', type: 'string', colour: 'red' },
Test_with_Space: { label: 'Test with Space', type: 'text', colour: 'red' },
};
const expectedCustomFields: CustomFields = {
Test_with_Space: { label: 'Test with Space', type: 'string', colour: 'red' },
Test_with_Space: { label: 'Test with Space', type: 'text', colour: 'red' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual(expectedCustomFields);
@@ -112,15 +112,15 @@ describe('sanitiseCustomFields()', () => {
it('filters invalid entries', () => {
const customFields: CustomFields = {
test: { label: 'test', type: 'string', colour: 'red' },
test2: { label: 'test2', type: 'string', colour: 'green' },
bad: { label: '', type: 'string', colour: '' },
Test3: { label: 'Test3', type: 'string', colour: '' },
test: { label: 'test', type: 'text', colour: 'red' },
test2: { label: 'test2', type: 'text', colour: 'green' },
bad: { label: '', type: 'text', colour: '' },
Test3: { label: 'Test3', type: 'text', colour: '' },
};
const expectedCustomFields: CustomFields = {
test: { label: 'test', type: 'string', colour: 'red' },
test2: { label: 'test2', type: 'string', colour: 'green' },
Test3: { label: 'Test3', type: 'string', colour: '' },
test: { label: 'test', type: 'text', colour: 'red' },
test2: { label: 'test2', type: 'text', colour: 'green' },
Test3: { label: 'Test3', type: 'text', colour: '' },
};
const sanitationResult = sanitiseCustomFields(customFields);
expect(sanitationResult).toStrictEqual(expectedCustomFields);
@@ -56,7 +56,7 @@ export function sanitiseCustomFields(data: object): CustomFields {
'colour' in data &&
typeof data.colour === 'string' &&
'type' in data &&
(data.type === 'string' || data.type === 'image')
(data.type === 'text' || data.type === 'image')
);
}
@@ -11,7 +11,7 @@ export const validateCustomField = [
.custom((value) => {
return isAlphanumericWithSpace(value);
}),
body('type').isIn(['string', 'image']),
body('type').isIn(['text', 'image']),
body('colour').isString().trim(),
requestValidationFunction,
@@ -26,7 +26,7 @@ export const validateEditCustomField = [
.custom((value) => {
return isAlphanumericWithSpace(value);
}),
body('type').isIn(['string', 'image']),
body('type').isIn(['text', 'image']),
body('colour').isString().trim(),
requestValidationFunction,
@@ -18,30 +18,30 @@ describe('parseExcel()', () => {
};
const existingCustomFields: CustomFields = {
user0: { type: 'string', colour: 'red', label: 'user0' },
user1: { type: 'string', colour: 'green', label: 'user1' },
user2: { type: 'string', colour: 'blue', label: 'user2' },
user0: { type: 'text', colour: 'red', label: 'user0' },
user1: { type: 'text', colour: 'green', label: 'user1' },
user2: { type: 'text', colour: 'blue', label: 'user2' },
};
const parsedData = parseExcel(dataFromExcelTemplate, existingCustomFields, 'testSheet', importMap);
expect(parsedData.customFields).toStrictEqual({
user0: {
type: 'string',
type: 'text',
colour: 'red',
label: 'user0',
},
user1: {
type: 'string',
type: 'text',
colour: 'green',
label: 'user1',
},
user2: {
type: 'string',
type: 'text',
colour: 'blue',
label: 'user2',
},
user3: {
type: 'string',
type: 'text',
colour: '',
label: 'user3',
},
@@ -97,12 +97,12 @@ describe('parseExcel()', () => {
const parsedData = parseExcel(dataFromExcelTemplate, {}, 'testSheet', importMap);
expect(parsedData.customFields).toStrictEqual({
niu1: {
type: 'string',
type: 'text',
colour: '',
label: 'niu1',
},
niu2: {
type: 'string',
type: 'text',
colour: '',
label: 'niu2',
},
@@ -448,17 +448,17 @@ describe('getCustomFieldData()', () => {
const result = getCustomFieldData(importMap, {});
expect(result.mergedCustomFields).toStrictEqual({
lighting: {
type: 'string',
type: 'text',
colour: '',
label: 'lighting',
},
sound: {
type: 'string',
type: 'text',
colour: '',
label: 'sound',
},
video: {
type: 'string',
type: 'text',
colour: '',
label: 'video',
},
@@ -499,30 +499,30 @@ describe('getCustomFieldData()', () => {
} as ImportMap;
const existingCustomFields: CustomFields = {
lighting: { label: 'lighting', type: 'string', colour: 'red' },
sound: { label: 'sound', type: 'string', colour: 'green' },
ontime_key: { label: 'ontime key', type: 'string', colour: 'blue' },
lighting: { label: 'lighting', type: 'text', colour: 'red' },
sound: { label: 'sound', type: 'text', colour: 'green' },
ontime_key: { label: 'ontime key', type: 'text', colour: 'blue' },
};
const result = getCustomFieldData(importMap, existingCustomFields);
expect(result.mergedCustomFields).toStrictEqual({
lighting: {
type: 'string',
type: 'text',
colour: 'red',
label: 'lighting',
},
sound: {
type: 'string',
type: 'text',
colour: 'green',
label: 'sound',
},
video: {
type: 'string',
type: 'text',
colour: '',
label: 'video',
},
ontime_key: {
type: 'string',
type: 'text',
colour: 'blue',
label: 'ontime key',
},
@@ -550,17 +550,17 @@ describe('getCustomFieldData()', () => {
const result = getCustomFieldData(importMap, {});
expect(result.mergedCustomFields).toStrictEqual({
Lighting: {
type: 'string',
type: 'text',
colour: '',
label: 'Lighting',
},
Sound: {
type: 'string',
type: 'text',
colour: '',
label: 'Sound',
},
video: {
type: 'string',
type: 'text',
colour: '',
label: 'video',
},
@@ -330,7 +330,7 @@ export function getCustomFieldData(
// 1. add the custom field to the merged custom fields
mergedCustomFields[keyInCustomFields] = {
type: 'string', // we currently only support string custom fields
type: 'text', // we currently only support text custom fields
colour: maybeExistingColour,
label: ontimeLabel,
};
@@ -49,7 +49,7 @@ export function makeRundown(patch: Partial<Rundown>): Rundown {
export function makeCustomField(patch: Partial<CustomField>): CustomField {
return {
type: 'string',
type: 'text',
colour: '#000000',
label: 'Custom Field',
...patch,
@@ -62,7 +62,7 @@ describe('createTransaction', () => {
rundown.title = 'Another Title';
customFields['newField'] = {
label: 'New Field',
type: 'string',
type: 'text',
colour: 'blue',
};
@@ -524,12 +524,12 @@ describe('processRundown()', () => {
const customProperties: CustomFields = {
lighting: {
label: 'lighting',
type: 'string',
type: 'text',
colour: 'red',
},
sound: {
label: 'sound',
type: 'string',
type: 'text',
colour: 'red',
},
};
@@ -197,12 +197,12 @@ describe('parseRundown()', () => {
const customFields: CustomFields = {
lighting: {
type: 'string',
type: 'text',
colour: 'red',
label: 'lighting',
},
sound: {
type: 'string',
type: 'text',
colour: 'red',
label: 'sound',
},
@@ -229,7 +229,7 @@ describe('parseRundown()', () => {
const customFields: CustomFields = {
lighting: {
type: 'string',
type: 'text',
colour: 'red',
label: 'lighting',
},
@@ -308,12 +308,12 @@ describe('handleCustomField()', () => {
it('creates a map of where custom fields are used', () => {
const customFields = {
lighting: {
type: 'string',
type: 'text',
colour: 'red',
label: 'lighting',
},
sound: {
type: 'string',
type: 'text',
colour: 'red',
label: 'sound',
},
+15 -25
View File
@@ -121,38 +121,28 @@ export function createTransaction(options: TransactionOptions): Transaction {
await getDataProvider().setRundown(cachedRundown.id, cachedRundown);
});
// increment the revision number
// update fields which are agnostic of whether the rundown is processed
cachedRundown.revision = cachedRundown.revision + 1;
cachedRundown.title = rundown.title;
/**
* Some mutations do not require processing the rundown
* We simply increment the revision and return the rundown
*/
if (!shouldProcess) {
cachedRundown.title = rundown.title;
// if we dont need to process, we just reassign the commit data to the cache
cachedRundown.entries = rundown.entries;
cachedRundown.order = rundown.order;
cachedRundown.flatOrder = rundown.flatOrder;
return {
rundown: cachedRundown,
rundownMetadata, // metadata doesnt change as long as we dont process the rundown
customFields: projectCustomFields,
revision: cachedRundown.revision,
};
} else {
const processedData = processRundown(rundown, projectCustomFields);
// update the cache values
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
const { previousEvent, latestEvent, previousEntry, entries, order, assignedCustomFields, ...metadata } =
processedData;
cachedRundown.entries = entries;
cachedRundown.order = order;
cachedRundown.flatOrder = metadata.flatEntryOrder;
customFieldsMetadata.assigned = assignedCustomFields;
rundownMetadata = metadata;
}
const processedData = processRundown(rundown, projectCustomFields);
// update the cache values
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- we are not interested in the iteration data
const { previousEvent, latestEvent, previousEntry, entries, order, assignedCustomFields, ...metadata } =
processedData;
cachedRundown.title = rundown.title;
cachedRundown.entries = entries;
cachedRundown.order = order;
cachedRundown.flatOrder = metadata.flatEntryOrder;
customFieldsMetadata.assigned = assignedCustomFields;
rundownMetadata = metadata;
}
// if the customFields are mutable we persist the changes
@@ -464,9 +464,14 @@ export async function editCustomField(key: CustomFieldKey, newField: Partial<Cus
const { oldKey, newKey } = customFieldMutation.edit(customFields, key, existingField, newField);
// if key has changed we remove the old reference
if (oldKey !== newKey && oldKey in customFieldsMetadata.assigned) {
customFieldMutation.renameUsages(rundown, customFieldsMetadata.assigned, oldKey, newKey);
// if key has changed
if (oldKey !== newKey) {
// 1. delete the old key
customFieldMutation.remove(customFields, oldKey);
if (oldKey in customFieldsMetadata.assigned) {
// 2. reassign references
customFieldMutation.renameUsages(rundown, customFieldsMetadata.assigned, oldKey, newKey);
}
}
// the custom fields have been removed and there is no processing to be done
@@ -101,21 +101,21 @@ describe('safeMerge', () => {
it('merges customFields into existing object', () => {
const existing = {
customFields: {
lighting: { type: 'string', label: 'lighting' },
sound: { type: 'string', label: 'sound' },
lighting: { type: 'text', label: 'lighting' },
sound: { type: 'text', label: 'sound' },
},
};
const newData = {
customFields: {
switcher: { type: 'string', label: 'switcher' },
vfx: { type: 'string', label: 'vfx' },
switcher: { type: 'text', label: 'switcher' },
vfx: { type: 'text', label: 'vfx' },
},
};
const expected = {
switcher: { type: 'string', label: 'switcher' },
vfx: { type: 'string', label: 'vfx' },
switcher: { type: 'text', label: 'switcher' },
vfx: { type: 'text', label: 'vfx' },
};
//@ts-expect-error -- testing partial merge
+2 -2
View File
@@ -528,12 +528,12 @@ export const demoDb: DatabaseModel = {
customFields: {
Song: {
label: 'Song',
type: 'string',
type: 'text',
colour: '#339E4E',
},
Artist: {
label: 'Artist',
type: 'string',
type: 'text',
colour: '#3E75E8',
},
},
+2 -2
View File
@@ -477,12 +477,12 @@
"customFields": {
"song": {
"label": "Song",
"type": "string",
"type": "text",
"colour": "#339E4E"
},
"artist": {
"label": "Artist",
"type": "string",
"type": "text",
"colour": "#3E75E8"
}
},
+2 -2
View File
@@ -494,12 +494,12 @@
"customFields": {
"Song": {
"label": "Song",
"type": "string",
"type": "text",
"colour": "#339E4E"
},
"Artist": {
"label": "Artist",
"type": "string",
"type": "text",
"colour": "#3E75E8"
}
},
@@ -1,7 +1,7 @@
export type CustomFieldKey = string;
export type CustomField = {
type: 'string' | 'image';
type: 'text' | 'image';
colour: string;
label: string;
};