cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-07-26 10:38:55 +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,
.filterSection,
.oscSection,
.httpSection,
.companionSection {
.httpSection {
display: grid;
grid-gap: 0.5rem;
button {
align-self: end;
align-self: flex-end;
}
}
@@ -41,10 +40,13 @@
.ruleSection,
.filterSection,
.oscSection,
.httpSection,
.companionSection {
label {
.httpSection {
label, div {
// 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);
}
label {
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' } })}
size='sm'
variant='ontime'
placeholder='Event field'
>
<option selected hidden disabled value=''>
Event field
</option>
{fieldList.map(({ value, label }) => (
<option key={value} value={value}>
{label}
@@ -228,8 +230,10 @@ export default function AutomationForm(props: AutomationFormProps) {
{...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })}
size='sm'
variant='ontime'
placeholder='Operator'
>
<option selected hidden disabled value=''>
Operator
</option>
<option value='equals'>equals</option>
<option value='not_equals'>not equals</option>
<option value='contains'>contains</option>
@@ -248,16 +252,21 @@ export default function AutomationForm(props: AutomationFormProps) {
autoComplete='off'
/>
</label>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
color='#FA5656' // $red-500
onClick={() => removeFilter(index)}
isDisabled={false}
isLoading={false}
/>
<div>
<span>&nbsp;</span>
<div>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
color='#FA5656' // $red-500
onClick={() => removeFilter(index)}
isDisabled={false}
isLoading={false}
/>
</div>
</div>
</div>
))}
<div>
@@ -354,21 +363,24 @@ export default function AutomationForm(props: AutomationFormProps) {
/>
<Panel.Error>{rowErrors?.args?.message}</Panel.Error>
</label>
<Panel.InlineElements relation='inner'>
<Button size='sm' variant='ontime-ghosted' onClick={() => handleTestOSCOutput(index)}>
Test
</Button>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
onClick={() => removeOutput(index)}
color='#FA5656' // $red-500
isDisabled={false}
isLoading={false}
/>
</Panel.InlineElements>
<div>
<span>&nbsp;</span>
<Panel.InlineElements relation='inner'>
<Button size='sm' variant='ontime-ghosted-white' onClick={() => handleTestOSCOutput(index)}>
Test
</Button>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
onClick={() => removeOutput(index)}
color='#FA5656' // $red-500
isDisabled={false}
isLoading={false}
/>
</Panel.InlineElements>
</div>
</div>
</div>
);
@@ -400,21 +412,24 @@ export default function AutomationForm(props: AutomationFormProps) {
/>
<Panel.Error>{rowErrors?.url?.message}</Panel.Error>
</label>
<Panel.InlineElements relation='inner'>
<Button size='sm' variant='ontime-ghosted' onClick={() => handleTestHTTPOutput(index)}>
Test
</Button>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
onClick={() => removeOutput(index)}
color='#FA5656' // $red-500
isDisabled={false}
isLoading={false}
/>
</Panel.InlineElements>
<div>
<span>&nbsp;</span>
<Panel.InlineElements relation='inner'>
<Button size='sm' variant='ontime-ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
Test
</Button>
<IconButton
aria-label='Delete'
icon={<IoTrash />}
variant='ontime-ghosted'
size='sm'
onClick={() => removeOutput(index)}
color='#FA5656' // $red-500
isDisabled={false}
isLoading={false}
/>
</Panel.InlineElements>
</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>
<tbody>
{arrayAutomations.length === 0 && (
<Panel.TableEmpty handleClick={() => setAutomationFormData(automationPlaceholder)} />
<Panel.TableEmpty
handleClick={!automationFormData ? () => setAutomationFormData(automationPlaceholder) : undefined}
/>
)}
{arrayAutomations.map((automationId) => {
if (!Object.hasOwn(automations, automationId)) {