Skip to content

Commit

Permalink
#383 - Refactor common settings dialog component.
Browse files Browse the repository at this point in the history
  • Loading branch information
maraf committed Jun 5, 2022
1 parent 2c07167 commit eea05a7
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 66 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<Modal @ref="Editor" TitleIcon="@Model.Icon" Title="@Title">
<ChildContent>
@ChildContent
</ChildContent>
<Buttons>
<button class="btn btn-primary" @onclick="(async () => { await Model.SetAsync(); Editor.Hide(); })">Set</button>
</Buttons>
</Modal>
40 changes: 40 additions & 0 deletions src/Money.Blazor.Host/Components/Settings/PropertyDialog.razor.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
using Microsoft.AspNetCore.Components;
using Money.Commands;
using Money.Components;
using Money.Components.Bootstrap;
using Money.Events;
using Money.Models;
using Money.Models.Queries;
using Money.Models.Sorting;
using Money.Pages.Users;
using Neptuo;
using Neptuo.Commands;
using Neptuo.Events;
using Neptuo.Events.Handlers;
using Neptuo.Queries;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Money.Components.Settings
{
public partial class PropertyDialog
{
[Parameter]
public string Title { get; set; }

[Parameter]
public PropertyViewModel Model { get; set; }

[Parameter]
public RenderFragment ChildContent { get; set; }

protected Modal Editor { get; set; }

public void Show() => Editor.Show();
}
}
106 changes: 44 additions & 62 deletions src/Money.Blazor.Host/Pages/Users/Settings.razor
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@using Money.Models.Sorting
@using Money.Components.Settings
@page "/user/settings"
@attribute [Authorize]

Expand All @@ -23,71 +24,52 @@
}
</div>

<Modal @ref="PriceDecimalsEditor" TitleIcon="@PriceDecimals.Icon" Title="Set price decimals">
<ChildContent>
<div class="form-group">
<input type="text" class="form-control" @bind="PriceDecimals.CurrentValue" data-autofocus />
</div>
</ChildContent>
<Buttons>
<button class="btn btn-primary" @onclick="(async () => { await PriceDecimals.SetAsync(); PriceDecimalsEditor.Hide(); })">Set</button>
</Buttons>
</Modal>
<PropertyDialog @ref="PriceDecimalsEditor" Model="@PriceDecimals" Title="Set price decimals">
<div class="form-group">
<input type="text" class="form-control" @bind="PriceDecimals.CurrentValue" data-autofocus />
</div>
</PropertyDialog>

<Modal @ref="DateFormatEditor" TitleIcon="@DateFormat.Icon" Title="Set date format">
<ChildContent>
<div class="form-group">
<input type="text" class="form-control" @bind="DateFormat.CurrentValue" data-autofocus />
</div>
</ChildContent>
<Buttons>
<button class="btn btn-primary" @onclick="(async () => { await DateFormat.SetAsync(); DateFormatEditor.Hide(); })">Set</button>
</Buttons>
</Modal>

<Modal @ref="MobileMenuEditor" TitleIcon="@MobileMenu.Icon" Title="Modify mobile menu">
<ChildContent>
@if (MobileMenu.AvailableModels != null && MobileMenu.SelectedIdentifiers != null)
<PropertyDialog @ref="DateFormatEditor" Model="@DateFormat" Title="Set date format">
<div class="form-group">
<input type="text" class="form-control" @bind="DateFormat.CurrentValue" data-autofocus />
</div>
</PropertyDialog>

<PropertyDialog @ref="MobileMenuEditor" Model="@MobileMenu" Title="Modify mobile menu">
@if (MobileMenu.AvailableModels != null && MobileMenu.SelectedIdentifiers != null)
{
foreach (var model in MobileMenu.AvailableModels)
{
foreach (var model in MobileMenu.AvailableModels)
{
var isContained = MobileMenu.SelectedIdentifiers.Contains(model.Identifier);
Action handler = isContained ? () => MobileMenu.SelectedIdentifiers.Remove(model.Identifier) : () => MobileMenu.SelectedIdentifiers.Add(model.Identifier);
var isContained = MobileMenu.SelectedIdentifiers.Contains(model.Identifier);
Action handler = isContained ? () => MobileMenu.SelectedIdentifiers.Remove(model.Identifier) : () => MobileMenu.SelectedIdentifiers.Add(model.Identifier);

<div @key="model.Identifier" class="alert @(isContained ? "alert-primary" : "alert-light") cursor-pointer" @onclick="handler">
<Icon Identifier="@model.Icon" />
@model.Text
</div>
}
<div @key="model.Identifier" class="alert @(isContained ? "alert-primary" : "alert-light") cursor-pointer" @onclick="handler">
<Icon Identifier="@model.Icon" />
@model.Text
</div>
}
</ChildContent>
<Buttons>
<button class="btn btn-primary" @onclick="(async () => { await MobileMenu.SetAsync(); MobileMenuEditor.Hide(); })">Set</button>
</Buttons>
</Modal>
}
</PropertyDialog>

<Modal @ref="SummarySortEditor" TitleIcon="@SummarySort.Icon" Title="Set summary sort">
<ChildContent>
<div class="form-group">
<label for="summary-sort-property">Field:</label>
<select class="form-control" id="summary-sort-property" @bind="SummarySort.Property">
@foreach (var item in SummarySort.Properties)
{
<option value="@item.Value">@item.Name</option>
}
</select>
</div>
<div class="form-group">
<label for="summary-sort-order">Direction:</label>
<select class="form-control" id="summary-sort-order" @bind="SummarySort.Direction">
@foreach (var item in SummarySort.Directions)
{
<option value="@item.Value">@item.Name</option>
}
</select>
</div>
</ChildContent>
<Buttons>
<button class="btn btn-primary" @onclick="(async () => { await SummarySort.SetAsync(); SummarySortEditor.Hide(); })">Set</button>
</Buttons>
</Modal>
<PropertyDialog @ref="SummarySortEditor" Model="@SummarySort" Title="Set summary sort">
<div class="form-group">
<label for="summary-sort-property">Field:</label>
<select class="form-control" id="summary-sort-property" @bind="SummarySort.Property">
@foreach (var item in SummarySort.Properties)
{
<option value="@item.Value">@item.Name</option>
}
</select>
</div>
<div class="form-group">
<label for="summary-sort-order">Direction:</label>
<select class="form-control" id="summary-sort-order" @bind="SummarySort.Direction">
@foreach (var item in SummarySort.Directions)
{
<option value="@item.Value">@item.Name</option>
}
</select>
</div>
</PropertyDialog>
9 changes: 5 additions & 4 deletions src/Money.Blazor.Host/Pages/Users/Settings.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
using Money.Commands;
using Money.Components;
using Money.Components.Bootstrap;
using Money.Components.Settings;
using Money.Events;
using Money.Models;
using Money.Models.Queries;
Expand Down Expand Up @@ -34,16 +35,16 @@ public partial class Settings : System.IDisposable,
protected IEventHandlerCollection EventHandlers { get; set; }

protected PropertyViewModel PriceDecimals { get; set; }
protected Modal PriceDecimalsEditor { get; set; }
protected PropertyDialog PriceDecimalsEditor { get; set; }

protected PropertyViewModel DateFormat { get; set; }
protected Modal DateFormatEditor { get; set; }
protected PropertyDialog DateFormatEditor { get; set; }

protected MobileMenuPropertyViewModel MobileMenu { get; set; }
protected Modal MobileMenuEditor { get; set; }
protected PropertyDialog MobileMenuEditor { get; set; }

protected SortPropertyViewModel<SummarySortType> SummarySort { get; set; }
protected Modal SummarySortEditor { get; set; }
protected PropertyDialog SummarySortEditor { get; set; }

protected List<UserPropertyModel> Models { get; set; }
protected List<PropertyViewModel> ViewModels { get; } = new List<PropertyViewModel>();
Expand Down

0 comments on commit eea05a7

Please sign in to comment.