diff --git a/apps/client/src/common/components/select/Select.module.scss b/apps/client/src/common/components/select/Select.module.scss index d28061eec..a2201fef5 100644 --- a/apps/client/src/common/components/select/Select.module.scss +++ b/apps/client/src/common/components/select/Select.module.scss @@ -34,6 +34,11 @@ cursor: not-allowed; } + &:focus-visible { + outline: 2px solid $blue-500; + outline-offset: 2px; + } + &.fluid { width: 100%; } diff --git a/apps/client/src/common/components/select/Select.tsx b/apps/client/src/common/components/select/Select.tsx index ce2f1b8dc..ccc65a553 100644 --- a/apps/client/src/common/components/select/Select.tsx +++ b/apps/client/src/common/components/select/Select.tsx @@ -11,6 +11,7 @@ interface SelectProps extends Omit, 'items'> { options: { value: T; label: string; + disabled?: boolean; }[]; fluid?: boolean; } @@ -28,8 +29,8 @@ export default function Select({ options, fluid, ...selectRootProps }: Select - {options.map(({ label, value }) => ( - + {options.map(({ disabled, label, value }) => ( + diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx index 5acf121dc..3104be134 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx @@ -55,6 +55,7 @@ export default function AutomationForm(props: AutomationFormProps) { setError, setFocus, setValue, + watch, formState: { errors, isSubmitting, isDirty, isValid }, } = useForm({ mode: 'onChange', @@ -106,8 +107,7 @@ export default function AutomationForm(props: AutomationFormProps) { }; const handleAddnewOntimeAction = () => { - // @ts-expect-error -- we dont want to choose an action - appendOutput({ type: 'ontime', action: undefined }); + appendOutput({ type: 'ontime', action: 'aux1-start' }); }; const handleTestOSCOutput = async (index: number) => { @@ -428,6 +428,7 @@ export default function AutomationForm(props: AutomationFormProps) { register={register} rowErrors={rowErrors} setValue={setValue} + watch={watch} >   diff --git a/apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx index d31d56b52..83aef516c 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx +++ b/apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx @@ -1,10 +1,9 @@ import { PropsWithChildren, useState } from 'react'; -import { UseFormRegister, UseFormSetValue } from 'react-hook-form'; -import { Select } from '@chakra-ui/react'; -import { AutomationDTO, OntimeAction } from 'ontime-types'; +import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'; +import { AutomationDTO, OntimeAction, OntimeActionKey, SecondarySource } from 'ontime-types'; import Input from '../../../../common/components/input/input/Input'; -import { cx } from '../../../../common/utils/styleUtils'; +import Select from '../../../../common/components/select/Select'; import * as Panel from '../../panel-utils/PanelUtils'; import style from './AutomationForm.module.scss'; @@ -20,53 +19,58 @@ interface OntimeActionFormProps { secondarySource?: { message?: string }; }; value: OntimeAction['action']; + watch: UseFormWatch; setValue: UseFormSetValue; } export default function OntimeActionForm(props: PropsWithChildren) { - const { index, register, setValue, rowErrors, value, children } = props; - const [selectedAction, setSelectedAction] = useState(value || 'aux-start'); + const { index, register, setValue, rowErrors, value, children, watch } = props; + const [selectedAction, setSelectedAction] = useState(value); - const updateSelectedAction = (value: string) => { - setSelectedAction(value as OntimeAction['action']); - setValue(`outputs.${index}.action`, value as OntimeAction['action']); + const handleSetAction = (value: OntimeActionKey) => { + setValue(`outputs.${index}.action`, value, { shouldDirty: true }); + setSelectedAction(value); }; return ( -
- +
- {selectedAction === 'aux1-set' && ( + {selectedAction.startsWith('aux') && selectedAction.endsWith('set') && (