Skip to content

Add Radzen components #238

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

Open
klincovmilica wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add Radzen components #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3a80f29
Import Radzen
klincovmilica Oct 23, 2025
4203651
Add Radzen components to delete pages
klincovmilica Oct 23, 2025
f9d1e25
Add Radzen components to edit pages
klincovmilica Oct 23, 2025
eacebe0
Add Radzen components to Details pages
klincovmilica Oct 23, 2025
cfbb50b
Update Delete page
klincovmilica Oct 23, 2025
e3a0456
Add Radzen components to Create pages
klincovmilica Oct 23, 2025
40cddc1
Add Radzen components to List pages
klincovmilica Oct 23, 2025
c0991de
Update version
klincovmilica Oct 23, 2025
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 Directory.Packages.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
<PackageVersion Include="NimblePros.Metronome" Version="0.4.1" />
<PackageVersion Include="NSubstitute" Version="5.3.0" />
<PackageVersion Include="NSubstitute.Analyzers.CSharp" Version="1.0.17" />
<PackageVersion Include="Radzen.Blazor" Version="8.1.4" />
<PackageVersion Include="System.Diagnostics.Debug" Version="4.3.0" />
<PackageVersion Include="System.Diagnostics.Tracing" Version="4.3.0" />
<PackageVersion Include="System.IO.FileSystem" Version="4.3.0" />
Expand Down
1 change: 1 addition & 0 deletions src/BlazorAdmin/BlazorAdmin.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<PackageReference Include="Microsoft.Extensions.Identity.Core" />
<PackageReference Include="Microsoft.Extensions.Identity.Stores" />
<PackageReference Include="Microsoft.Extensions.Logging.Configuration" />
<PackageReference Include="Radzen.Blazor" />
<PackageReference Include="System.Net.Http.Json" />
</ItemGroup>

Expand Down
213 changes: 84 additions & 129 deletions src/BlazorAdmin/Pages/CatalogItemPage/Create.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,117 @@
@inject ILogger<Create> Logger
@inject IJSRuntime JSRuntime
@inject ICatalogItemService CatalogItemService
@inject DialogService DialogService

@inherits BlazorAdmin.Helpers.BlazorComponent

@namespace BlazorAdmin.Pages.CatalogItemPage

<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay">
<div class="modal-dialog" role="document">
<div class="modal-content">
<EditForm Model="_item" OnValidSubmit="@CreateClick">
<DataAnnotationsValidator />
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
@if (_item == null)
{
<Spinner></Spinner>
}
else
{
<div class="container">
<div class="row">
@if (HasPicture)
{
<img class="col-md-6 esh-picture" src="@LoadPicture">
}
<div class="col-md-@(HasPicture?"6":"12")">
<div class="form-group">
<label class="control-label col-md-6">Name</label>
<div class="col-md-12">
<InputText class="form-control" @bind-Value="_item.Name" />
<ValidationMessage For="(() => _item.Name)" />
</div>
</div>
<RadzenDialog Visible="@_showDialog" Width="700px" CloseDialog="@Close">
<ChildContent>
<DialogTitle>
Create
</DialogTitle>

<DialogContent>
@if (_item == null)
{
<RadzenProgressBar Mode="ProgressBarMode.Indeterminate"></RadzenProgressBar>
}
else
{
<div class="container mt-2">
<div class="row">
@if (HasPicture)
{
<img class="col-md-6 esh-picture" src="@LoadPicture" />
}
<div class="col-md-@(HasPicture ? "6" : "12")">
<div class="form-group">
<label>Name</label>
<InputText class="form-control" @bind-Value="_item.Name" />
<ValidationMessage For="(() => _item.Name)" />
</div>

<div class="form-group">
<label class="control-label col-md-6">Description</label>
<div class="col-md-12">
<InputText class="form-control" @bind-Value="_item.Description" />
<ValidationMessage For="(() => _item.Description)" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-6">Brand</label>
<div class="col-md-12">
<InputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
@foreach (var brand in Brands)
{
<option value="@brand.Id">@brand.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogBrandId)" />
</div>
</div>
<div class="form-group">
<label>Description</label>
<InputText class="form-control" @bind-Value="_item.Description" />
<ValidationMessage For="(() => _item.Description)" />
</div>

<div class="form-group">
<label class="control-label col-md-6">Type</label>
<div class="col-md-12">
<InputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
@foreach (var type in Types)
{
<option value="@type.Id">@type.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogTypeId)" />
</div>
</div>
<div class="form-group">
<label>Brand</label>
<InputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
@foreach (var brand in Brands)
{
<option value="@brand.Id">@brand.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogBrandId)" />
</div>

<div class="form-group">
<label class="control-label col-md-6">Price</label>
<div class="col-md-12">
<InputNumber @bind-Value="_item.Price" class="form-control" />
<ValidationMessage For="(() => _item.Price)" />
</div>
</div>
</div>
<div class="form-group">
<label>Type</label>
<InputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
@foreach (var type in Types)
{
<option value="@type.Id">@type.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogTypeId)" />
</div>

<div class="form-group">
<label>Price</label>
<InputNumber @bind-Value="_item.Price" class="form-control" />
<ValidationMessage For="(() => _item.Price)" />
</div>
</div>
}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Cancel</button>
<button type="submit" class="btn btn-primary">
Create
</button>
</div>
</EditForm>
</div>
</div>
</div>

}
</DialogContent>


@if (_showCreateModal)
{
<div class="modal-backdrop fade show"></div>
}
<DialogActions>
<RadzenButton Text="Cancel" ButtonStyle="ButtonStyle.Secondary" Click="@Close" />
<RadzenButton Text="Create" ButtonStyle="ButtonStyle.Primary" Click="@CreateClick" />
</DialogActions>
</ChildContent>
</RadzenDialog>

@code {
[Parameter] public IEnumerable<CatalogBrand> Brands { get; set; }
[Parameter] public IEnumerable<CatalogType> Types { get; set; }
[Parameter] public EventCallback<string> OnSaveClick { get; set; }

[Parameter]
public IEnumerable<CatalogBrand> Brands { get; set; }
[Parameter]
public IEnumerable<CatalogType> Types { get; set; }

[Parameter]
public EventCallback<string> OnSaveClick { get; set; }

private string LoadPicture => string.IsNullOrEmpty(_item.PictureBase64) ? string.Empty : $"data:image/png;base64, {_item.PictureBase64}";
private bool HasPicture => !string.IsNullOrEmpty(_item.PictureBase64);
private string _badFileMessage = string.Empty;
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showCreateModal = false;
private CreateCatalogItemRequest _item = new CreateCatalogItemRequest();

private async Task CreateClick()
{
var result = await CatalogItemService.Create(_item);
if (result != null)
{
await OnSaveClick.InvokeAsync(null);
await Close();
}
}
private bool HasPicture => !string.IsNullOrEmpty(_item?.PictureBase64);
private string LoadPicture => string.IsNullOrEmpty(_item.PictureBase64) ? string.Empty : $"data:image/png;base64, {_item.PictureBase64}";
private bool _showDialog = false;

public async Task Open()
{

Logger.LogInformation("Now loading... /Catalog/Create");

await new Css(JSRuntime).HideBodyOverflow();

_item = new CreateCatalogItemRequest
{
CatalogTypeId = Types.First().Id,
CatalogBrandId = Brands.First().Id
};

_modalDisplay = "block;";
_modalClass = "Show";
_showCreateModal = true;

StateHasChanged();
_showDialog = true;
}

private async Task Close()
{
await new Css(JSRuntime).ShowBodyOverflow();
_modalDisplay = "none";
_modalClass = "";
_showCreateModal = false;
_showDialog = false;
}

private async Task CreateClick()
{
var result = await CatalogItemService.Create(_item);
if (result != null)
{
await OnSaveClick.InvokeAsync(null);
await Close();
}
}
}
}
Loading