cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-21 06:59:09 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: improve form ux

Browse Source
This commit is contained in:
Carlos Valente
2025-01-22 21:08:40 +01:00
committed by Carlos Valente
parent c333117347
commit 39e012452b
3 changed files with 68 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
+8 -6
View File
@@ -27,13 +27,12 @@
.titleSection, .titleSection,
.filterSection, .filterSection,
.oscSection, .oscSection,
.httpSection, .httpSection {
.companionSection {
display: grid; display: grid;
grid-gap: 0.5rem; grid-gap: 0.5rem;
button { button {
align-self: end; align-self: flex-end;
} }
} }
@@ -41,10 +40,13 @@
.ruleSection, .ruleSection,
.filterSection, .filterSection,
.oscSection, .oscSection,
.httpSection, .httpSection {
.companionSection { label, div {
label { // we use the div as non-interactive placeholder for button cells
// it needs to match the size of the label element
font-size: calc(1rem - 3px); font-size: calc(1rem - 3px);
}
label {
color: $label-gray; color: $label-gray;
} }
} }
apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
+57 -42
View File
@@ -212,8 +212,10 @@ export default function AutomationForm(props: AutomationFormProps) {
{...register(`filters.${index}.field`, { required: { value: true, message: 'Required field' } })} {...register(`filters.${index}.field`, { required: { value: true, message: 'Required field' } })}
size='sm' size='sm'
variant='ontime' variant='ontime'
placeholder='Event field'
> >
<option selected hidden disabled value=''>
Event field
</option>
{fieldList.map(({ value, label }) => ( {fieldList.map(({ value, label }) => (
<option key={value} value={value}> <option key={value} value={value}>
{label} {label}
@@ -228,8 +230,10 @@ export default function AutomationForm(props: AutomationFormProps) {
{...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })} {...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })}
size='sm' size='sm'
variant='ontime' variant='ontime'
placeholder='Operator'
> >
<option selected hidden disabled value=''>
Operator
</option>
<option value='equals'>equals</option> <option value='equals'>equals</option>
<option value='not_equals'>not equals</option> <option value='not_equals'>not equals</option>
<option value='contains'>contains</option> <option value='contains'>contains</option>
@@ -248,16 +252,21 @@ export default function AutomationForm(props: AutomationFormProps) {
autoComplete='off' autoComplete='off'
/> />
</label> </label>
<IconButton <div>
aria-label='Delete' <span>&nbsp;</span>
icon={<IoTrash />} <div>
variant='ontime-ghosted' <IconButton
size='sm' aria-label='Delete'
color='#FA5656' // $red-500 icon={<IoTrash />}
onClick={() => removeFilter(index)} variant='ontime-ghosted'
isDisabled={false} size='sm'
isLoading={false} color='#FA5656' // $red-500
/> onClick={() => removeFilter(index)}
isDisabled={false}
isLoading={false}
/>
</div>
</div>
</div> </div>
))} ))}
<div> <div>
@@ -354,21 +363,24 @@ export default function AutomationForm(props: AutomationFormProps) {
/> />
<Panel.Error>{rowErrors?.args?.message}</Panel.Error> <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
</label> </label>
<Panel.InlineElements relation='inner'> <div>
<Button size='sm' variant='ontime-ghosted' onClick={() => handleTestOSCOutput(index)}> <span>&nbsp;</span>
Test <Panel.InlineElements relation='inner'>
</Button> <Button size='sm' variant='ontime-ghosted-white' onClick={() => handleTestOSCOutput(index)}>
<IconButton Test
aria-label='Delete' </Button>
icon={<IoTrash />} <IconButton
variant='ontime-ghosted' aria-label='Delete'
size='sm' icon={<IoTrash />}
onClick={() => removeOutput(index)} variant='ontime-ghosted'
color='#FA5656' // $red-500 size='sm'
isDisabled={false} onClick={() => removeOutput(index)}
isLoading={false} color='#FA5656' // $red-500
/> isDisabled={false}
</Panel.InlineElements> isLoading={false}
/>
</Panel.InlineElements>
</div>
</div> </div>
</div> </div>
); );
@@ -400,21 +412,24 @@ export default function AutomationForm(props: AutomationFormProps) {
/> />
<Panel.Error>{rowErrors?.url?.message}</Panel.Error> <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
</label> </label>
<Panel.InlineElements relation='inner'> <div>
<Button size='sm' variant='ontime-ghosted' onClick={() => handleTestHTTPOutput(index)}> <span>&nbsp;</span>
Test <Panel.InlineElements relation='inner'>
</Button> <Button size='sm' variant='ontime-ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
<IconButton Test
aria-label='Delete' </Button>
icon={<IoTrash />} <IconButton
variant='ontime-ghosted' aria-label='Delete'
size='sm' icon={<IoTrash />}
onClick={() => removeOutput(index)} variant='ontime-ghosted'
color='#FA5656' // $red-500 size='sm'
isDisabled={false} onClick={() => removeOutput(index)}
isLoading={false} color='#FA5656' // $red-500
/> isDisabled={false}
</Panel.InlineElements> isLoading={false}
/>
</Panel.InlineElements>
</div>
</div> </div>
</div> </div>
); );
apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx
+3 -1
View File
@@ -77,7 +77,9 @@ export default function AutomationsList(props: AutomationsListProps) {
</thead> </thead>
<tbody> <tbody>
{arrayAutomations.length === 0 && ( {arrayAutomations.length === 0 && (
<Panel.TableEmpty handleClick={() => setAutomationFormData(automationPlaceholder)} /> <Panel.TableEmpty
handleClick={!automationFormData ? () => setAutomationFormData(automationPlaceholder) : undefined}
/>
)} )}
{arrayAutomations.map((automationId) => { {arrayAutomations.map((automationId) => {
if (!Object.hasOwn(automations, automationId)) { if (!Object.hasOwn(automations, automationId)) {