leon.hoppe/HopFrame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Added relation picker dialog

Browse Source
This commit is contained in:
Leon Hoppe
2025-01-16 14:48:06 +01:00
parent fc85425189
commit 9d9f0ef7e4
13 changed files with 371 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/HopFrame.Core/Config/PropertyConfig.cs
View File

@@ -3,8 +3,9 @@ using System.Reflection;
namespace HopFrame.Core.Config;
public class PropertyConfig(PropertyInfo info) {
public PropertyInfo Info { get; init; } = info;
public class PropertyConfig(PropertyInfo info, TableConfig table) {
public PropertyInfo Info { get; } = info;
public TableConfig Table { get; } = table;
public string Name { get; set; } = info.Name;
public bool List { get; set; } = true;
public bool Sortable { get; set; } = true;
@@ -17,6 +18,7 @@ public class PropertyConfig(PropertyInfo info) {
public bool Creatable { get; set; } = true;
public bool DisplayValue { get; set; } = true;
public bool IsRelation { get; set; }
public bool IsPrimaryKey { get; set; }
}
public class PropertyConfig<TProp>(PropertyConfig config) {

2
src/HopFrame.Core/Config/TableConfig.cs
View File

@@ -19,7 +19,7 @@ public class TableConfig {
ContextConfig = config;
foreach (var info in tableType.GetProperties()) {
var propConfig = new PropertyConfig(info);
var propConfig = new PropertyConfig(info, this);
if (info.GetCustomAttributes(true).Any(a => a is DatabaseGeneratedAttribute)) {
propConfig.Creatable = false;

52
src/HopFrame.Web/Components/Dialogs/HopFrameEditor.razor
View File

@@ -1,4 +1,5 @@
@implements IDialogContentComponent<EditorDialogData>
@rendermode InteractiveServer
@using HopFrame.Core.Config
@using HopFrame.Core.Services
@@ -11,7 +12,28 @@
if (!_currentlyEditing && !property.Creatable) continue;
<div style="margin-bottom: 20px">
@if (property.Info.PropertyType.IsNumeric()) {
@if (property.IsRelation) {
<div style="display: flex; gap: 5px; align-items: flex-end">
<div style="flex-grow: 1">
<FluentTextField
Label="@property.Name"
Value="@(GetPropertyValue<string>(property))"
Disabled="@(!property.Editable)"
ReadOnly="true"
Style="width: 100%"
ValueChanged="@(v => SetPropertyValue(property, v, InputType.Text))" />
</div>
<div style="display: flex; gap: 5px; margin-bottom: 4px">
<FluentButton OnClick="() => SetPropertyValue(property, null, InputType.Relation)">
<FluentIcon Value="@(new Icons.Regular.Size20.Dismiss())" Color="Color.Neutral" />
</FluentButton>
<FluentButton OnClick="async () => await OpenRelationalPicker(property)">
<FluentIcon Value="@(new Icons.Regular.Size20.Open())" Color="Color.Neutral" />
</FluentButton>
</div>
</div>
}
else if (property.Info.PropertyType.IsNumeric()) {
<FluentNumberField
TValue="double"
Label="@property.Name"
@@ -84,6 +106,7 @@
</FluentDialogBody>
@inject IContextExplorer Explorer
@inject IDialogService Dialogs
@code {
[Parameter]
@@ -98,14 +121,13 @@
protected override void OnInitialized() {
_currentlyEditing = Content.CurrentObject is not null;
Dialog.Instance.Parameters.Title = (_currentlyEditing ? "Edit " : "Add ") + Content.Config.TableType.Name;
Dialog.Instance.Parameters.PreventScroll = true;
Dialog.Instance.Parameters.Width = "500px";
Dialog.Instance.Parameters.PrimaryAction = "Save";
_manager = Explorer.GetTableManager(Content.Config.PropertyName);
Content.CurrentObject ??= Activator.CreateInstance(Content.Config.TableType);
}
private TValue? GetPropertyValue<TValue>(PropertyConfig config) { //TODO: handle relational types
private TValue? GetPropertyValue<TValue>(PropertyConfig config) {
if (!config.DisplayValue) return default;
if (Content.CurrentObject is null) return default;
var value = config.Info.GetValue(Content.CurrentObject);
@@ -170,18 +192,35 @@
}
else result = (TimeOnly)value;
break;
case InputType.Relation:
result = value;
break;
default:
throw new ArgumentOutOfRangeException(nameof(senderType), senderType, null);
}
}
if (config.Parser is not null) {
result = config.Parser(result!.ToString()!);
if (config.Parser is not null && result is not null) {
result = config.Parser(result.ToString()!);
}
config.Info.SetValue(Content.CurrentObject, result);
}
private async Task OpenRelationalPicker(PropertyConfig config) {
var relationTable = Explorer.GetTable(config.Info.PropertyType);
if (relationTable is null) return;
var currentValue = config.Info.GetValue(Content.CurrentObject);
var dialog = await Dialogs.ShowDialogAsync<HopFrameRelationPicker>(new RelationPickerDialogData(relationTable, currentValue), new DialogParameters());
var result = await dialog.Result;
if (result.Cancelled) return;
var data = (RelationPickerDialogData)result.Data!;
SetPropertyValue(config, data.Object, InputType.Relation);
}
private enum InputType {
Number,
@@ -189,6 +228,7 @@
Date,
Time,
Enum,
Text
Text,
Relation
}
}

26
src/HopFrame.Web/Components/Dialogs/HopFrameRelationPicker.razor Normal file
View File

@@ -0,0 +1,26 @@
@implements IDialogContentComponent<RelationPickerDialogData>
@rendermode InteractiveServer
@using HopFrame.Web.Models
@using HopFrame.Web.Components.Pages
<FluentDialogBody Style="overflow-x: auto">
<HopFrameTablePage DisplayActions="false" DisplaySelection="true" TableName="@Content.SourceTable.PropertyName" PerPage="15" DialogData="Content" />
</FluentDialogBody>
@code {
[Parameter]
public required RelationPickerDialogData Content { get; set; }
[CascadingParameter]
public required FluentDialog Dialog { get; set; }
protected override void OnInitialized() {
Dialog.Instance.Parameters.Title = $"Select {Content.SourceTable.TableType.Name}";
Dialog.Instance.Parameters.Width = "90vw";
Dialog.Instance.Parameters.Height = "90vh";
Dialog.Instance.Parameters.PrimaryAction = "Assign";
}
}

198
src/HopFrame.Web/Components/Pages/HopFrameListView.razor
View File

@@ -1,198 +0,0 @@
@page "/admin/{TableName}"
@layout HopFrameLayout
@rendermode InteractiveServer
@implements IDisposable
@using HopFrame.Core.Config
@using HopFrame.Core.Services
@using HopFrame.Web.Models
@using Microsoft.JSInterop
@using Microsoft.EntityFrameworkCore
<FluentDialogProvider />
<div style="display: flex; flex-direction: column; height: 100%">
<FluentToolbar Class="hopframe-toolbar">
<h3>@_config?.PropertyName</h3>
<FluentButton
IconStart="@(new Icons.Regular.Size16.ArrowClockwise())"
OnClick="Reload"
Loading="_loading"
Style="margin-left: 10px">
Refresh
</FluentButton>
<FluentSpacer />
<FluentSearch @oninput="OnSearch" @onchange="OnSearch" />
<FluentButton OnClick="async () => { await CreateOrEdit(null); }">Add Entry</FluentButton>
</FluentToolbar>
<FluentProgress Visible="_loading" Width="100%" />
<div style="overflow-y: auto; flex-grow: 1">
<FluentDataGrid Items="_currentlyDisplayedModels?.AsQueryable()">
@{ var dataIndex = 0; }
@foreach (var property in _config!.Properties.Where(prop => prop.List)) {
<PropertyColumn
Title="@property.Name" Property="o => _manager!.DisplayProperty(o, property.Info, _config)"
Style="min-width: max-content; min-height: 43px;"
Sortable="@property.Sortable"
/>
}
<TemplateColumn Title="Actions" Align="@Align.End" Style="min-height: 43px; min-width: max-content">
@{ var currentElement = _currentlyDisplayedModels!.ElementAtOrDefault(dataIndex); }
<FluentButton aria-label="Edit entry" OnClick="async () => { await CreateOrEdit(currentElement); }">
<FluentIcon Value="@(new Icons.Regular.Size16.Edit())"/>
</FluentButton>
<FluentButton aria-label="Delete entry" OnClick="async () => { await DeleteEntry(currentElement!); }">
<FluentIcon Value="@(new Icons.Regular.Size16.Delete())" Color="Color.Warning"/>
</FluentButton>
@{
dataIndex++;
dataIndex %= 20;
}
</TemplateColumn>
</FluentDataGrid>
@if (_totalPages > 1) {
<div class="hopframe-paginator">
<FluentButton BackgroundColor="transparent" OnClick="async () => await ChangePage(_currentPage - 1)">
<FluentIcon Value="@(new Icons.Regular.Size20.ArrowPrevious())" Color="Color.Neutral" />
</FluentButton>
<span>Page</span>
<FluentSelect TOption="int"
Items="Enumerable.Range(0, _totalPages)"
OptionValue="@(p => p.ToString())"
OptionText="@(p => (p + 1).ToString())"
ValueChanged="async s => await ChangePage(Convert.ToInt32(s))"
Width="max-content" SelectedOption="@_currentPage"/>
<span>of @_totalPages</span>
<FluentButton BackgroundColor="transparent" OnClick="async () => await ChangePage(_currentPage + 1)">
<FluentIcon Value="@(new Icons.Regular.Size20.ArrowNext())" Color="Color.Neutral" />
</FluentButton>
</div>
}
</div>
</div>
<script>
function removeBg() {
const elements = document.querySelectorAll(".col-sort-button");
const style = new CSSStyleSheet();
style.replaceSync(".control { background: none !important; }");
elements.forEach(e => e?.shadowRoot?.adoptedStyleSheets?.push(style));
}
removeBg();
</script>
@inject IContextExplorer Explorer
@inject NavigationManager Navigator
@inject IJSRuntime Js
@inject IDialogService Dialogs
@code {
[Parameter]
public required string TableName { get; set; }
private TableConfig? _config;
private ITableManager? _manager;
private IEnumerable<object>? _currentlyDisplayedModels;
private int _currentPage;
private int _totalPages;
private string? _searchTerm;
private bool _loading;
protected override void OnInitialized() {
_config ??= Explorer.GetTable(TableName);
if (_config is null) {
Navigator.NavigateTo("/admin", true);
}
}
protected override async Task OnInitializedAsync() {
_manager ??= Explorer.GetTableManager(_config!.PropertyName);
_currentlyDisplayedModels = await _manager!.LoadPage(_currentPage).ToArrayAsync();
_totalPages = await _manager.TotalPages();
}
protected override async Task OnAfterRenderAsync(bool firstRender) {
try {
await Js.InvokeVoidAsync("removeBg");
}
catch (Exception) {
// ignored
}
}
public void Dispose() {
_searchCancel.Dispose();
}
private CancellationTokenSource _searchCancel = new();
private async Task OnSearch(ChangeEventArgs eventArgs) {
await _searchCancel.CancelAsync();
_searchTerm = eventArgs.Value?.ToString();
if (_searchTerm is null) return;
_searchCancel = new();
await Task.Delay(500, _searchCancel.Token);
(var query, _totalPages) = await _manager!.Search(_searchTerm);
_currentlyDisplayedModels = query.ToArray();
}
private async Task Reload() {
_loading = true;
if (!string.IsNullOrEmpty(_searchTerm)) {
(var query, _totalPages) = await _manager!.Search(_searchTerm);
_currentlyDisplayedModels = query.ToArray();
}
else {
await OnInitializedAsync();
}
_loading = false;
}
private async Task ChangePage(int page) {
if (page < 0 || page > _totalPages - 1) return;
_currentPage = page;
await Reload();
}
private async Task DeleteEntry(object element) {
var dialog = await Dialogs.ShowConfirmationAsync("Do you really want to delete this entry?");
var result = await dialog.Result;
if (result.Cancelled) return;
await _manager!.DeleteItem(element);
await Reload();
}
private async Task CreateOrEdit(object? element) {
var panel = await Dialogs.ShowPanelAsync<HopFrameEditor>(new EditorDialogData(_config!, element), new());
var result = await panel.Result;
var data = result.Data as EditorDialogData;
if (result.Cancelled) {
if (data?.CurrentObject is not null)
await _manager!.RevertChanges(data.CurrentObject);
return;
}
if (element is null)
await _manager!.AddItem(data!.CurrentObject!);
else
await _manager!.EditItem(data!.CurrentObject!);
await Reload();
}
}

12
src/HopFrame.Web/Components/Pages/HopFrameListView.razor.css
View File

@@ -1,12 +0,0 @@
h3 {
margin: 0;
}
.hopframe-paginator {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-block: 20px;
}

232
src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor Normal file
View File

@@ -0,0 +1,232 @@
@page "/admin/{TableName}"
@layout HopFrameLayout
@rendermode InteractiveServer
@implements IDisposable
@using HopFrame.Core.Config
@using HopFrame.Core.Services
@using HopFrame.Web.Models
@using Microsoft.JSInterop
@using Microsoft.EntityFrameworkCore
<FluentDialogProvider />
<div style="display: flex; flex-direction: column; height: 100%">
<FluentToolbar Class="hopframe-toolbar">
<h3>@_config?.PropertyName</h3>
<FluentButton
IconStart="@(new Icons.Regular.Size16.ArrowClockwise())"
OnClick="Reload"
Loading="_loading"
Style="margin-left: 10px">
Refresh
</FluentButton>
<FluentSpacer />
<FluentSearch @oninput="OnSearch" @onchange="OnSearch" />
@if (!DisplaySelection) {
<FluentButton OnClick="async () => { await CreateOrEdit(null); }">Add Entry</FluentButton>
}
</FluentToolbar>
<FluentProgress Visible="_loading" Width="100%" />
<div style="display: flex; overflow-y: auto; flex-grow: 1">
@if (DisplaySelection) {
<div style="margin-top: calc(44px - (var(--stroke-width) * 1px)); border-top: calc(var(--stroke-width)* 1px) solid var(--neutral-stroke-divider-rest);">
@foreach (var model in _currentlyDisplayedModels) {
<div class="hopframe-radio">
<FluentRadioGroup TValue="int" Value="@(DialogData!.Object == model ? 1 : 0)">
<FluentRadio Value="0" Style="display: none" />
<FluentRadio Value="1" @onclick="() => DialogData!.Object = model" Style="width: 20px"/>
</FluentRadioGroup>
</div>
}
</div>
}
<div style="flex-grow: 1">
<FluentDataGrid Items="_currentlyDisplayedModels.AsQueryable()">
@foreach (var property in _config!.Properties.Where(prop => prop.List)) {
<PropertyColumn
Title="@property.Name" Property="o => _manager!.DisplayProperty(o, property.Info, _config)"
Style="min-width: max-content; height: 44px;"
Sortable="@property.Sortable"/>
}
@if (DisplayActions) {
var dataIndex = 0;
<TemplateColumn Title="Actions" Align="@Align.End" Style="min-height: 44px; min-width: max-content">
@{ var currentElement = _currentlyDisplayedModels.ElementAtOrDefault(dataIndex); }
<FluentButton aria-label="Edit entry" OnClick="async () => { await CreateOrEdit(currentElement); }">
<FluentIcon Value="@(new Icons.Regular.Size16.Edit())"/>
</FluentButton>
<FluentButton aria-label="Delete entry" OnClick="async () => { await DeleteEntry(currentElement!); }">
<FluentIcon Value="@(new Icons.Regular.Size16.Delete())" Color="Color.Warning"/>
</FluentButton>
@{
dataIndex++;
dataIndex %= 20;
}
</TemplateColumn>
}
</FluentDataGrid>
</div>
</div>
@if (_totalPages > 1) {
<div class="hopframe-paginator">
<FluentButton BackgroundColor="transparent" OnClick="async () => await ChangePage(_currentPage - 1)">
<FluentIcon Value="@(new Icons.Regular.Size20.ArrowPrevious())" Color="Color.Neutral" />
</FluentButton>
<span>Page</span>
<FluentSelect TOption="int"
Items="Enumerable.Range(0, _totalPages)"
OptionValue="@(p => p.ToString())"
OptionText="@(p => (p + 1).ToString())"
ValueChanged="async s => await ChangePage(Convert.ToInt32(s))"
Width="max-content" SelectedOption="@_currentPage"/>
<span>of @_totalPages</span>
<FluentButton BackgroundColor="transparent" OnClick="async () => await ChangePage(_currentPage + 1)">
<FluentIcon Value="@(new Icons.Regular.Size20.ArrowNext())" Color="Color.Neutral" />
</FluentButton>
</div>
}
</div>
<script>
function removeBg() {
const elements = document.querySelectorAll(".col-sort-button");
const style = new CSSStyleSheet();
style.replaceSync(".control { background: none !important; }");
elements.forEach(e => e?.shadowRoot?.adoptedStyleSheets?.push(style));
}
removeBg();
</script>
@inject IContextExplorer Explorer
@inject NavigationManager Navigator
@inject IJSRuntime Js
@inject IDialogService Dialogs
@code {
[Parameter]
public required string TableName { get; set; }
[Parameter]
public bool DisplaySelection { get; set; }
[Parameter]
public bool DisplayActions { get; set; } = true;
[Parameter]
public RelationPickerDialogData? DialogData { get; set; }
[Parameter]
public int PerPage { get; set; } = 20;
private TableConfig? _config;
private ITableManager? _manager;
private IEnumerable<object> _currentlyDisplayedModels = [];
private int _currentPage;
private int _totalPages;
private string? _searchTerm;
private bool _loading;
private int _selectedIndex = -1;
protected override void OnInitialized() {
_config ??= Explorer.GetTable(TableName);
if (_config is null) {
Navigator.NavigateTo("/admin", true);
}
}
protected override async Task OnInitializedAsync() {
_manager ??= Explorer.GetTableManager(_config!.PropertyName);
_currentlyDisplayedModels = await _manager!.LoadPage(_currentPage, PerPage).ToArrayAsync();
_totalPages = await _manager.TotalPages(PerPage);
}
protected override async Task OnAfterRenderAsync(bool firstRender) {
try {
await Js.InvokeVoidAsync("removeBg");
}
catch (Exception) {
// ignored
}
}
public void Dispose() {
_searchCancel.Dispose();
}
private CancellationTokenSource _searchCancel = new();
private async Task OnSearch(ChangeEventArgs eventArgs) {
await _searchCancel.CancelAsync();
_searchTerm = eventArgs.Value?.ToString();
if (_searchTerm is null) return;
_searchCancel = new();
await Task.Delay(500, _searchCancel.Token);
await Reload();
}
private async Task Reload() {
_loading = true;
if (!string.IsNullOrEmpty(_searchTerm)) {
(var query, _totalPages) = await _manager!.Search(_searchTerm, 0, PerPage);
_currentlyDisplayedModels = query.ToArray();
}
else {
await OnInitializedAsync();
}
_loading = false;
}
private async Task ChangePage(int page) {
if (page < 0 || page > _totalPages - 1) return;
_currentPage = page;
await Reload();
}
private async Task DeleteEntry(object element) {
var dialog = await Dialogs.ShowConfirmationAsync("Do you really want to delete this entry?");
var result = await dialog.Result;
if (result.Cancelled) return;
await _manager!.DeleteItem(element);
await Reload();
}
private async Task CreateOrEdit(object? element) {
var panel = await Dialogs.ShowPanelAsync<HopFrameEditor>(new EditorDialogData(_config!, element), new DialogParameters {
TrapFocus = false
});
var result = await panel.Result;
var data = result.Data as EditorDialogData;
if (result.Cancelled) {
if (data?.CurrentObject is not null)
await _manager!.RevertChanges(data.CurrentObject);
return;
}
if (element is null)
await _manager!.AddItem(data!.CurrentObject!);
else
await _manager!.EditItem(data!.CurrentObject!);
await Reload();
}
}

22
src/HopFrame.Web/Components/Pages/HopFrameTablePage.razor.css Normal file
View File

@@ -0,0 +1,22 @@
h3 {
margin: 0;
}
.hopframe-paginator {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 20px;
margin-bottom: 20px;
}
.hopframe-radio {
width: 30px;
height: 44px;
display: grid;
place-items: center;
border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
}

8
src/HopFrame.Web/Models/RelationPickerDialogData.cs Normal file
View File

@@ -0,0 +1,8 @@
using HopFrame.Core.Config;
namespace HopFrame.Web.Models;
public class RelationPickerDialogData(TableConfig sourceTable, object? current) {
public object? Object { get; set; } = current;
public TableConfig SourceTable { get; init; } = sourceTable;
}