Skip to content

Commit d5b42fe

Browse files
FelixCCWorkFelixCCWork
committed
Added simple validation message in MudBlazor style. Finished StatusList.
1 parent 184cd1f commit d5b42fe

File tree

7 files changed

+174
-116
lines changed

7 files changed

+174
-116
lines changed

‎src/DotNetElements.AppFramework.MudBlazorExtensions/Components/InlineEditTextField.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
[Parameter, EditorRequired]
4949
public string? Value { get; set; }
5050

51-
[Parameter, EditorRequired]
51+
[Parameter]
5252
public EventCallback<string?> ValueChanged { get; set; }
5353

5454
[Parameter]

‎src/DotNetElements.AppFramework.MudBlazorExtensions/Components/MudDialogEx.cs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
public sealed class MudDialogEx : MudDialog
44
{
5-
protected const string DefaultTitleClass = "pa-4";
6-
protected const string DefaultContentClass = "pa-4 ma-0";
7-
protected const string DefaultContentStyle = "border-top: 1px solid var(--mud-palette-lines-default); border-top-left-radius: 0; border-top-right-radius: 0;";
8-
protected const string DefaultActionsClass = "px-4 pb-4";
5+
public const string DefaultTitleClass = "pa-4";
6+
public const string DefaultContentClass = "pa-4 ma-0";
7+
public const string DefaultContentStyle = "border-top: 1px solid var(--mud-palette-lines-default); border-top-left-radius: 0; border-top-right-radius: 0;";
8+
public const string DefaultActionsClass = "px-4 pb-4";
99

1010
public MudDialogEx()
1111
{

‎src/DotNetElements.AppFramework.MudBlazorExtensions/Components/MudEditFormDialog.razor

Lines changed: 92 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -4,118 +4,125 @@
44
@typeparam TReturnValue
55

66
<MudDialogEx>
7-
<DialogContent>
8-
@if (Value is not null && editContext is not null)
9-
{
10-
<EditForm EditContext="@editContext">
11-
<DataAnnotationsValidator />
12-
@FormContent(Value)
13-
</EditForm>
14-
}
15-
else if (hasError)
16-
{
17-
<MudAlert Severity="Severity.Error">@(errorMessage ?? "Unknown error")</MudAlert>
18-
}
19-
else
20-
{
21-
<MudProgressLinear Indeterminate="true" Color="Color.Primary" />
22-
}
23-
</DialogContent>
24-
<DialogActions>
25-
<MudButton OnClick="OnCancelAsync_Internal" Variant="Variant.Outlined">@CancelButtonText</MudButton>
26-
@if (Value is not null && editContext is not null && SubmitButtonShown)
27-
{
28-
<MudButton Color="Color.Primary" OnClick="OnSubmitAsync_Internal" Variant="Variant.Filled" Class="ml-4">@SubmitButtonText</MudButton>
29-
}
30-
</DialogActions>
7+
<DialogContent>
8+
@if (Value is not null && editContext is not null)
9+
{
10+
<EditForm EditContext="@editContext">
11+
<DataAnnotationsValidator />
12+
@FormContent(Value)
13+
</EditForm>
14+
}
15+
else if (hasError)
16+
{
17+
<MudAlert Severity="Severity.Error">@(errorMessage ?? "Unknown error")</MudAlert>
18+
}
19+
else
20+
{
21+
<MudProgressLinear Indeterminate="true" Color="Color.Primary" />
22+
}
23+
</DialogContent>
24+
<DialogActions>
25+
@if (CustomDialogActions is not null)
26+
{
27+
@CustomDialogActions
28+
}
29+
<MudButton OnClick="OnCancelAsync_Internal" Variant="Variant.Outlined" Class="ml-4">@CancelButtonText</MudButton>
30+
@if (Value is not null && editContext is not null)
31+
{
32+
<MudButton Color="Color.Primary" OnClick="OnSubmitAsync_Internal" Variant="Variant.Filled" Disabled="@SubmitButtonDisabled" Class="ml-4">@SubmitButtonText</MudButton>
33+
}
34+
</DialogActions>
3135
</MudDialogEx>
3236

3337
@code
3438
{
35-
[CascadingParameter]
36-
IMudDialogInstance DialogInstance { get; set; } = default!;
39+
[CascadingParameter]
40+
IMudDialogInstance DialogInstance { get; set; } = default!;
3741

38-
[Parameter, EditorRequired]
39-
public TValue? Value { get; set; }
42+
[Parameter, EditorRequired]
43+
public TValue? Value { get; set; }
4044

41-
[Parameter, EditorRequired]
42-
public RenderFragment<TValue> FormContent { get; set; } = default!;
45+
[Parameter, EditorRequired]
46+
public RenderFragment<TValue> FormContent { get; set; } = default!;
4347

44-
[Parameter]
45-
public EventCallback<EditFormLoadArgs> OnLoad { get; set; }
48+
[Parameter]
49+
public RenderFragment? CustomDialogActions { get; set; }
4650

47-
[Parameter]
48-
public EventCallback<EditFormSubmitArgs<TValue, TReturnValue>> OnSubmit { get; set; }
51+
[Parameter]
52+
public EventCallback<EditFormLoadArgs> OnLoad { get; set; }
4953

50-
[Parameter]
51-
public EventCallback OnCancel { get; set; }
54+
[Parameter]
55+
public EventCallback<EditFormSubmitArgs<TValue, TReturnValue>> OnSubmit { get; set; }
5256

53-
[Parameter]
54-
public bool SubmitButtonShown { get; set; } = true;
57+
[Parameter]
58+
public EventCallback OnCancel { get; set; }
5559

56-
[Parameter]
57-
public string SubmitButtonText { get; set; } = "Submit";
60+
[Parameter]
61+
public bool SubmitButtonDisabled { get; set; }
5862

59-
[Parameter]
60-
public string CancelButtonText { get; set; } = "Cancel";
63+
[Parameter]
64+
public string SubmitButtonText { get; set; } = "Submit";
6165

62-
private EditContext? editContext;
66+
[Parameter]
67+
public string CancelButtonText { get; set; } = "Cancel";
6368

64-
private bool hasError;
65-
private string? errorMessage;
69+
private EditContext? editContext;
6670

67-
public bool Validate()
68-
{
69-
ArgumentNullException.ThrowIfNull(editContext);
71+
private bool hasError;
72+
private string? errorMessage;
7073

71-
return editContext.Validate();
72-
}
74+
public bool Validate()
75+
{
76+
ArgumentNullException.ThrowIfNull(editContext);
7377

74-
protected override async Task OnInitializedAsync()
75-
{
76-
if (!OnLoad.HasDelegate)
77-
return;
78+
return editContext.Validate();
79+
}
7880

79-
EditFormLoadArgs args = new();
80-
await OnLoad.InvokeAsync(args);
81+
protected override async Task OnInitializedAsync()
82+
{
83+
if (!OnLoad.HasDelegate)
84+
return;
8185

82-
if (!args.HasError)
83-
return;
86+
EditFormLoadArgs args = new();
87+
await OnLoad.InvokeAsync(args);
8488

85-
hasError = true;
86-
errorMessage = args.ErrorMessage;
87-
}
89+
if (!args.HasError)
90+
return;
8891

89-
// todo check how this behaves when a parameter is updated!!!
90-
protected override void OnParametersSet()
91-
{
92-
if (Value is null)
93-
return;
92+
hasError = true;
93+
errorMessage = args.ErrorMessage;
94+
}
9495

95-
editContext = new EditContext(Value);
96-
}
96+
// todo check how this behaves when a parameter is updated!!!
97+
protected override void OnParametersSet()
98+
{
99+
if (Value is null)
100+
return;
97101

98-
private async Task OnSubmitAsync_Internal()
99-
{
100-
ArgumentNullException.ThrowIfNull(Value);
101-
ArgumentNullException.ThrowIfNull(editContext);
102+
editContext = new EditContext(Value);
103+
}
102104

103-
EditFormSubmitArgs<TValue, TReturnValue> args = new(Value, editContext);
105+
private async Task OnSubmitAsync_Internal()
106+
{
107+
ArgumentNullException.ThrowIfNull(Value);
108+
ArgumentNullException.ThrowIfNull(editContext);
104109

105-
if (OnSubmit.HasDelegate)
106-
await OnSubmit.InvokeAsync(args);
110+
EditFormSubmitArgs<TValue, TReturnValue> args = new(Value, editContext);
107111

108-
if (args.Cancel)
109-
return;
112+
if (OnSubmit.HasDelegate)
113+
await OnSubmit.InvokeAsync(args);
110114

111-
DialogInstance.Close(DialogResult.Ok(args.ReturnValue));
112-
}
115+
if (args.Cancel)
116+
return;
113117

114-
private async Task OnCancelAsync_Internal()
115-
{
116-
if (OnCancel.HasDelegate)
117-
await OnCancel.InvokeAsync();
118+
DialogInstance.Close(DialogResult.Ok(args.ReturnValue));
119+
}
118120

119-
DialogInstance.Cancel();
120-
}
121+
private async Task OnCancelAsync_Internal()
122+
{
123+
if (OnCancel.HasDelegate)
124+
await OnCancel.InvokeAsync();
125+
126+
DialogInstance.Cancel();
127+
}
121128
}

‎src/DotNetElements.AppFramework.MudBlazorExtensions/Components/SimpleValidationMessage.razor

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@inherits MudComponentBase
2+
3+
@if (ShowError)
4+
{
5+
<div class="@GetClass()" style="@($"color: var(--mud-palette-error); {Style}")" @attributes="UserAttributes">
6+
<span>@ErrorMessage</span>
7+
</div>
8+
}
9+
10+
@code
11+
{
12+
[Parameter]
13+
public string? ErrorMessage { get; set; }
14+
15+
[Parameter]
16+
public bool ShowError { get; set; }
17+
18+
[Parameter]
19+
public Size Size { get; set; }
20+
21+
private string GetClass()
22+
{
23+
string classNames = Size switch
24+
{
25+
Size.Small => "mud-input-helper-text ",
26+
Size.Medium => "mud-typography-body2 ",
27+
Size.Large => "mud-typography-body1 ",
28+
_ => throw new NotImplementedException(nameof(Size))
29+
};
30+
31+
classNames += Class;
32+
33+
return classNames;
34+
}
35+
}

‎src/DotNetElements.AppFramework.MudBlazorExtensions/Components/StatusList.razor

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
11
@using DotNetElements.AppFramework.MudBlazorExtensions.Util
22

3-
<MudTreeView T="StatusListItem" ReadOnly="true">
4-
@foreach (StatusListItem item in Items)
5-
{
6-
<StatusListItemPresenter Item="item" />
7-
}
8-
</MudTreeView>
3+
@inherits MudComponentBase
4+
5+
<MudPaper Outlined="true" Class="@Class" Style="@Style" UserAttributes="@UserAttributes">
6+
<MudText Class="px-4 py-2" Style="border-bottom: 1px solid var(--mud-palette-lines-inputs);">@Title</MudText>
7+
8+
@if (ShowItems && Items is not null)
9+
{
10+
<MudTreeView T="StatusListItem" ReadOnly="true" Class="py-4" Style="@($"overflow-y: auto; max-height: {ContentMaxHeight};")">
11+
@foreach (StatusListItem item in Items)
12+
{
13+
<StatusListItemPresenter Item="item" />
14+
}
15+
</MudTreeView>
16+
}
17+
else
18+
{
19+
<MudText Class="pa-4">@ItemsHiddenLabel</MudText>
20+
}
21+
</MudPaper>
922

1023
@code
1124
{
12-
public List<StatusListItem> Items { get; set; } =
13-
[
14-
new StatusListItem("Item 1", StatusListStatus.Pending),
15-
new StatusListItem("Item 2", StatusListStatus.Success),
16-
new StatusListItem("Item 3", StatusListStatus.Warning, externalLink: "/staticForms/formDetails?formDraftId=92b6e86e-1920-48fd-4b04-08ddabf9e157"),
17-
new StatusListItem("Item 4",
18-
StatusListStatus.Error,
19-
"One of the items is invalid",
20-
externalLink: "/staticForms/formDetails?formDraftId=92b6e86e-1920-48fd-4b04-08ddabf9e157",
21-
children:
22-
[
23-
new StatusListItem("Child Item 1", StatusListStatus.Success),
24-
new StatusListItem("Child Item 2", StatusListStatus.Success),
25-
new StatusListItem("Child Item 3", StatusListStatus.Error, "Items is invalid")
26-
])
27-
];
25+
[Parameter]
26+
public string? Title { get; set; } = "Status";
27+
28+
[Parameter]
29+
public string? ItemsHiddenLabel { get; set; } = "No Records found";
30+
31+
[Parameter]
32+
public bool ShowItems { get; set; }
33+
34+
[Parameter]
35+
public string? ContentMaxHeight { get; set; } = "60vh";
36+
37+
[Parameter]
38+
public List<StatusListItem>? Items { get; set; }
2839
}

‎src/DotNetElements.AppFramework.MudBlazorExtensions/Components/StatusListItemPresenter.razor

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{
55
<MudTreeViewItem T="StatusListItem" Icon="@Item.GetIcon()" IconColor="@Item.GetColor()" Class="@(Indent ? "ml-4" : "")">
66
<BodyContent Context="childContext">
7-
<MudStack Row="true" AlignItems="AlignItems.Center">
7+
<MudStack Row="true" AlignItems="AlignItems.Center" Style="width: 100%; border-bottom: 1px solid var(--mud-palette-lines-inputs); margin-right: 12px;">
88
<MudStack Spacing="0" Class="ml-1">
99
<MudText>@Item.Label</MudText>
1010
@if (Item.Message is not null)
@@ -15,7 +15,7 @@
1515
<MudSpacer />
1616
@if (Item.ShouldShowExternalLink())
1717
{
18-
<MudIconButton Icon="@Icons.Material.Outlined.OpenInNew" Color="Color.Info" Size="Size.Small" Href="@Item.ExternalLink" Target="_blank" />
18+
<MudIconButton Icon="@Icons.Material.Outlined.OpenInNew" Color="Color.Info" Size="Size.Small" Href="@Item.ExternalLink" Target="_blank" Class="align-self-end" />
1919
}
2020
</MudStack>
2121
</BodyContent>
@@ -31,7 +31,7 @@ else
3131
{
3232
<MudTreeViewItem T="StatusListItem" Icon="@Item.GetIcon()" IconColor="@Item.GetColor()" Class="@(Indent ? "ml-4" : "")">
3333
<BodyContent Context="childContext">
34-
<MudStack Row="true" AlignItems="AlignItems.Center">
34+
<MudStack Row="true" AlignItems="AlignItems.Center" Style="width: 100%; border-bottom: 1px solid var(--mud-palette-lines-inputs); margin-right: 12px;">
3535
<MudStack Spacing="0" Class="ml-1">
3636
<MudText>@Item.Label</MudText>
3737
@if (Item.Message is not null)
@@ -42,7 +42,7 @@ else
4242
<MudSpacer />
4343
@if (Item.ShouldShowExternalLink())
4444
{
45-
<MudIconButton Icon="@Icons.Material.Outlined.OpenInNew" Color="Color.Info" Size="Size.Small" Href="@Item.ExternalLink" Target="_blank" />
45+
<MudIconButton Icon="@Icons.Material.Outlined.OpenInNew" Color="Color.Info" Size="Size.Small" Href="@Item.ExternalLink" Target="_blank" Class="align-self-end" />
4646
}
4747
</MudStack>
4848
</BodyContent>

‎src/DotNetElements.AppFramework.MudBlazorExtensions/DotNetElements.AppFramework.MudBlazorExtensions.csproj

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
<ImplicitUsings>enable</ImplicitUsings>
77
</PropertyGroup>
88

9+
<PropertyGroup>
10+
<!-- [HACK] seems to fix some hot reload failures. Normaly not needed -->
11+
<RazorLangVersion>latest</RazorLangVersion>
12+
</PropertyGroup>
13+
914
<ItemGroup>
1015
<SupportedPlatform Include="browser" />
1116
</ItemGroup>

0 commit comments

Comments
 (0)