wip: update for types

bbc · Sep 30, 2024 · f8331e7 · f8331e7
1 parent 619f8d0
commit f8331e7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git a/meteor/client/ui/SegmentTimeline/SegmentContextMenu.tsx b/meteor/client/ui/SegmentTimeline/SegmentContextMenu.tsx
@@ -90,7 +90,6 @@ export const SegmentContextMenu = withTranslation()(
 										segment.rundownId,
 										segment.name,
 										segment.userEditOperations,
-										segment.userEditStates,
 										{
 											segmentExternalId: segment?.externalId,
 											partExternalId: undefined,
@@ -171,7 +170,6 @@ export const SegmentContextMenu = withTranslation()(
 									part.instance.rundownId,
 									part.instance.part.title,
 									part.instance.part.userEditOperations,
-									part.instance.part.userEditStates,
 									{
 										segmentExternalId: segment?.externalId,
 										partExternalId: part.instance.part.externalId,

diff --git a/meteor/client/ui/SegmentTimeline/SegmentTimeline.tsx b/meteor/client/ui/SegmentTimeline/SegmentTimeline.tsx
@@ -34,7 +34,7 @@ import { wrapPartToTemporaryInstance } from '../../../lib/collections/PartInstan
 import { SegmentTimelineSmallPartFlag } from './SmallParts/SegmentTimelineSmallPartFlag'
 import { UIStateStorage } from '../../lib/UIStateStorage'
 import { getPartInstanceTimingId, RundownTimingContext } from '../../lib/rundownTiming'
-import { IOutputLayer, ISourceLayer, NoteSeverity } from '@sofie-automation/blueprints-integration'
+import { IOutputLayer, ISourceLayer, NoteSeverity, UserEditingType } from '@sofie-automation/blueprints-integration'
 import { SegmentTimelineZoomButtons } from './SegmentTimelineZoomButtons'
 import { SegmentViewMode } from '../SegmentContainer/SegmentViewModes'
 import { SwitchViewModeButton } from '../SegmentContainer/SwitchViewModeButton'
@@ -52,6 +52,7 @@ import {
 import { SegmentTimeAnchorTime } from '../RundownView/RundownTiming/SegmentTimeAnchorTime'
 import { logger } from '../../../lib/logging'
 import * as RundownResolver from '../../lib/RundownResolver'
+import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 
 interface IProps {
 	id: string
@@ -1102,20 +1103,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 							))}
 						</div>
 					)}
-					<div className="segment-timeline__title__user-edit-states">
-						{this.props.segment.userEditStates &&
-							Object.keys(this.props.segment.userEditStates).map((key) =>
-								this.props.segment.userEditStates?.[key] ? (
-									<div
-										key={key}
-										className="segment-timeline__title__user-edit-state"
-										dangerouslySetInnerHTML={{
-											__html: this.props.segment.userEdits?.filter((i) => i.id === key)[0]?.svgIcon ?? '',
-										}}
-									></div>
-								) : null
-							)}
-					</div>
+					<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
 				</ContextMenuTrigger>
 				<div className="segment-timeline__duration" tabIndex={0}>
 					{this.props.playlist &&
@@ -1248,3 +1236,27 @@ export const SegmentTimeline = withTranslation()(
 		}
 	})(SegmentTimelineClass)
 )
+
+interface HeaderEditStatesProps {
+	userEditOperations: DBSegment['userEditOperations']
+}
+function HeaderEditStates({ userEditOperations }: HeaderEditStatesProps) {
+	return (
+		<div className="segment-timeline__title__user-edit-states">
+			{userEditOperations &&
+				userEditOperations.map((operation) => {
+					if (operation.type === UserEditingType.FORM || !operation.svgIcon || !operation.isActive) return null
+
+					return (
+						<div
+							key={operation.id}
+							className="segment-timeline__title__user-edit-state"
+							dangerouslySetInnerHTML={{
+								__html: operation.svgIcon,
+							}}
+						></div>
+					)
+				})}
+		</div>
+	)
+}
diff --git a/meteor/client/ui/UserEditOperations/RenderUserEditOperations.tsx b/meteor/client/ui/UserEditOperations/RenderUserEditOperations.tsx
@@ -15,46 +15,43 @@ export function RenderUserEditOperations(
 	isFormEditable: boolean,
 	rundownId: RundownId,
 	targetName: string,
-	userEdits: CoreUserEditingDefinition[] | undefined,
-	userEditStates: Record<string, boolean> | undefined,
+	userEditOperations: CoreUserEditingDefinition[] | undefined,
 	operationTarget: UserOperationTarget
 ): React.JSX.Element {
 	const t = i18nTranslator
-	if (!userEdits || userEdits.length === 0) return <React.Fragment />
+	if (!userEditOperations || userEditOperations.length === 0) return <React.Fragment />
 	return (
 		<React.Fragment>
 			<hr />
-			{userEdits.map((userEdit, i) => {
-				switch (userEdit.type) {
+			{userEditOperations.map((userEditOperation, i) => {
+				switch (userEditOperation.type) {
 					case UserEditingType.ACTION:
-						return translateMessage(userEdit.label, i18nTranslator) !== '' ? (
+						return translateMessage(userEditOperation.label, i18nTranslator) !== '' ? (
 							<MenuItem
-								key={`${userEdit.id}_${i}`}
+								key={`${userEditOperation.id}_${i}`}
 								onClick={(e) => {
 									doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
 										MeteorCall.userAction.executeUserChangeOperation(e, ts, rundownId, operationTarget, {
-											id: userEdit.id,
+											id: userEditOperation.id,
 										})
 									)
 								}}
 							>
 								{
 									// ToDo: use CSS to Style state instead of asterix
-									userEditStates && userEditStates[userEdit.id] ? (
-										<span className="action-protected">{userEditStates[userEdit.id].valueOf() ? '• ' : ''}</span>
-									) : null
+									userEditOperation.isActive ? <span className="action-protected">{'• '}</span> : null
 								}
-								<span>{translateMessage(userEdit.label, i18nTranslator)}</span>
+								<span>{translateMessage(userEditOperation.label, i18nTranslator)}</span>
 							</MenuItem>
 						) : null
 					case UserEditingType.FORM:
 						return (
 							<MenuItem
 								disabled={!isFormEditable}
-								key={`${userEdit.id}_${i}`}
+								key={`${userEditOperation.id}_${i}`}
 								onClick={(e) => {
-									const schema = JSONBlobParse(userEdit.schema)
-									const values = clone(userEdit.currentValues)
+									const schema = JSONBlobParse(userEditOperation.schema)
+									const values = clone(userEditOperation.currentValues)
 
 									// TODO:
 									doModalDialog({
@@ -63,7 +60,7 @@ export function RenderUserEditOperations(
 											<SchemaFormInPlace
 												schema={schema}
 												object={values}
-												translationNamespaces={userEdit.translationNamespaces}
+												translationNamespaces={userEditOperation.translationNamespaces}
 											/>
 										),
 										// acceptText: 'OK',
@@ -73,18 +70,18 @@ export function RenderUserEditOperations(
 											doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
 												MeteorCall.userAction.executeUserChangeOperation(e, ts, rundownId, operationTarget, {
 													...values,
-													id: userEdit.id,
+													id: userEditOperation.id,
 												})
 											)
 										},
 									})
 								}}
 							>
-								<span>{translateMessage(userEdit.label, i18nTranslator)}</span>
+								<span>{translateMessage(userEditOperation.label, i18nTranslator)}</span>
 							</MenuItem>
 						)
 					default:
-						assertNever(userEdit)
+						assertNever(userEditOperation)
 						return null
 				}
 			})}