Skip to content

UI fixes #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alxnik merged 6 commits into from
Mar 9, 2026
Merged

UI fixes #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6fb9077
Update README.md
alxnik Mar 8, 2026
963f1a1
Merge branch 'main' into develop
alxnik Mar 8, 2026
700d90f
Cleaning up rule dialog
Mar 8, 2026
6045f91
Further cleanup of rule conditions
Mar 8, 2026
0c21362
Alignment of buttons
Mar 8, 2026
4664c07
More UI cleanup
Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Tilework
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=tileworkdev_tilework&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=tileworkdev_tilework)

## About

Expand Down
142 changes: 90 additions & 52 deletions tilework.ui/Components/Dialogs/RuleDialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,58 +15,96 @@
</TitleContent>
<DialogContent>
<MudForm @ref="form">
@foreach (var condition in Rule.Conditions)
{
<ConditionForm Condition="condition"
OnDelete="@(() => RemoveCondition(condition))" />
}

<MudStack AlignItems="AlignItems.Start" Row>
<MudMenu Disabled="@(!CanAddCondition)" AnchorOrigin="Origin.BottomCenter" Class="mb-4">
<ActivatorContent>
<MudTooltip Disabled="@(AllowedConditionTypes.Any())" Text="This protocol does not support rule conditions.">
<MudButton Disabled="@(!CanAddCondition)" Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add">
Add condition
</MudButton>
</MudTooltip>
</ActivatorContent>
<ChildContent>
@foreach (var type in AvailableConditionTypes)
{
<MudMenuItem OnClick="@(() => AddCondition(type))">@type.GetDescription()</MudMenuItem>
}
</ChildContent>
</MudMenu>
</MudStack>
<MudNumericField T="int" @bind-Value="Rule.Priority" Label="Priority" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" Class="mb-4" />

<MudSelect T="RuleActionType" @bind-Value="Rule.Action.Type" Label="Action" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true" Class="mb-4">
@foreach (var type in AllowedActionTypes)
{
<MudSelectItem T="RuleActionType" Value="@type">@type.GetDescription()</MudSelectItem>
}
</MudSelect>

@if (Rule.Action?.Type == RuleActionType.Forward)
{
<MudSelect T="Guid?" @bind-Value="SelectedTargetGroup" Label="Target group" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true">
@foreach (var group in TargetGroups)
{
<MudSelectItem T="Guid?" Value="@group.Id">@group.Name</MudSelectItem>
}
</MudSelect>
}
else if (Rule.Action?.Type == RuleActionType.Redirect)
{
<MudTextField T="string" @bind-Value="Rule.Action.RedirectUrl" Label="Redirect URL" Variant="Variant.Outlined" Required="true" Class="mb-4" />
<MudNumericField T="int?" @bind-Value="Rule.Action.RedirectStatusCode" Label="Redirect status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" />
}
else if (Rule.Action?.Type == RuleActionType.FixedResponse)
{
<MudNumericField T="int?" @bind-Value="Rule.Action.FixedResponseStatusCode" Label="Response status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" Class="mb-4" />
<MudTextField T="string" @bind-Value="Rule.Action.FixedResponseContentType" Label="Content type" Variant="Variant.Outlined" Class="mb-4" />
<MudTextField T="string" @bind-Value="Rule.Action.FixedResponseBody" Label="Response body" Variant="Variant.Outlined" Lines="3" />
}
<MudGrid Spacing="3">
<MudItem xs="12">
<MudCard Outlined="true">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.subtitle1"><strong>Details</strong></MudText>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<MudNumericField T="int" @bind-Value="Rule.Priority" Label="Priority" Variant="Variant.Outlined"
HideSpinButtons="true" Required="true" Class="mb-4" />
</MudCardContent>
</MudCard>
</MudItem>

<MudItem xs="12">
<MudCard Outlined="true">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.subtitle1"><strong>Conditions</strong></MudText>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
@foreach (var condition in Rule.Conditions)
{
<ConditionForm Condition="condition"
OnDelete="@(() => RemoveCondition(condition))" />
<MudDivider/>
}

<MudStack AlignItems="AlignItems.Start" Row>
<MudMenu Disabled="@(!CanAddCondition)" AnchorOrigin="Origin.BottomCenter" Class="mt-4">
<ActivatorContent>
<MudTooltip Disabled="@(AllowedConditionTypes.Any())" Text="This protocol does not support rule conditions.">
<MudButton Disabled="@(!CanAddCondition)" Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add">
Add condition
</MudButton>
</MudTooltip>
</ActivatorContent>
<ChildContent>
@foreach (var type in AvailableConditionTypes)
{
<MudMenuItem OnClick="@(() => AddCondition(type))">@type.GetDescription()</MudMenuItem>
}
</ChildContent>
</MudMenu>
</MudStack>
</MudCardContent>
</MudCard>
</MudItem>

<MudItem xs="12">
<MudCard Outlined="true">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.subtitle1"><strong>Action</strong></MudText>
</CardHeaderContent>
</MudCardHeader>
<MudCardContent>
<MudSelect T="RuleActionType" @bind-Value="Rule.Action.Type" Label="Action" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true" Class="mb-4">
@foreach (var type in AllowedActionTypes)
{
<MudSelectItem T="RuleActionType" Value="@type">@type.GetDescription()</MudSelectItem>
}
</MudSelect>

@if (Rule.Action?.Type == RuleActionType.Forward)
{
<MudSelect T="Guid?" @bind-Value="SelectedTargetGroup" Label="Target group" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter" Required="true">
@foreach (var group in TargetGroups)
{
<MudSelectItem T="Guid?" Value="@group.Id">@group.Name</MudSelectItem>
}
</MudSelect>
}
else if (Rule.Action?.Type == RuleActionType.Redirect)
{
<MudTextField T="string" @bind-Value="Rule.Action.RedirectUrl" Label="Redirect URL" Variant="Variant.Outlined" Required="true" Class="mb-4" />
<MudNumericField T="int?" @bind-Value="Rule.Action.RedirectStatusCode" Label="Redirect status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" />
}
else if (Rule.Action?.Type == RuleActionType.FixedResponse)
{
<MudNumericField T="int?" @bind-Value="Rule.Action.FixedResponseStatusCode" Label="Response status code" Variant="Variant.Outlined" HideSpinButtons="true" Required="true" Class="mb-4" />
<MudTextField T="string" @bind-Value="Rule.Action.FixedResponseContentType" Label="Content type" Variant="Variant.Outlined" Class="mb-4" />
<MudTextField T="string" @bind-Value="Rule.Action.FixedResponseBody" Label="Response body" Variant="Variant.Outlined" Lines="3" />
}
</MudCardContent>
</MudCard>
</MudItem>
</MudGrid>
</MudForm>
</DialogContent>
<DialogActions>
Expand Down
48 changes: 28 additions & 20 deletions tilework.ui/Components/Forms/ConditionForm.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,36 @@

@namespace Tilework.Ui.Components.Forms

<MudPaper Class="mb-4 p-4" Outlined="true">
<MudStack Spacing="1" Class="ma-1" StretchItems="StretchItems.Start" Row>
<MudText Typo="Typo.subtitle2">@Condition.Type.GetDescription()</MudText>
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Variant="Variant.Text" Size="Size.Small" OnClick="OnDelete" />
</MudStack>
<MudDivider/>
<MudStack Spacing="1" Class="ma-2">
@for (var i = 0; i < Condition.Values.Count; i++)
{
var index = i;
<MudStack StretchItems="StretchItems.Start" Row>
<MudTextField @bind-Value="Condition.Values[index]" Label="Value" Variant="Variant.Outlined" Required="true" Margin="Margin.Dense" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Variant="Variant.Text" Size="Size.Small" OnClick="@(() => RemoveValue(index))" />
</MudStack>
}
<MudStack AlignItems="AlignItems.Start" Row>
<MudButton Size="Size.Small" Variant="Variant.Text" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="AddValue">
Add OR condition value
</MudButton>
<style>
.condition-prefix {
display:inline-block;
width:2ch;
text-align:center;
}
</style>

<MudStack Spacing="1" Class="ma-2" StretchItems="StretchItems.Start" Row>
<MudText Typo="Typo.subtitle2"><strong>@Condition.Type.GetDescription()</strong></MudText>
<MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Variant="Variant.Text" Size="Size.Small" OnClick="OnDelete"/>
</MudStack>

<MudStack Spacing="1" Class="ma-2">
@for (var i = 0; i < Condition.Values.Count; i++)
{
var index = i;
<MudStack AlignItems="AlignItems.Center" StretchItems="StretchItems.Middle" Row>
<MudText Typo="Typo.subtitle2" Class="condition-prefix"><strong>@(index == 0 ? "=" : "or")</strong></MudText>
<MudTextField @bind-Value="Condition.Values[index]" Variant="Variant.Outlined" Required="true" Margin="Margin.Dense" />
<MudIconButton Icon="@Icons.Material.Filled.DeleteOutline" Variant="Variant.Text" Size="Size.Small" OnClick="@(() => RemoveValue(index))" />
</MudStack>
}
<MudStack AlignItems="AlignItems.Start" Row>
<MudText Typo="Typo.subtitle2" Class="condition-prefix"></MudText>
<MudButton Size="Size.Small" Variant="Variant.Text" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="AddValue">
Add
</MudButton>
</MudStack>
</MudPaper>
</MudStack>

@code {
[Parameter] public Condition Condition { get; set; }
Expand Down