Skip to content

Improve Edit Page with Modern UI and Touch-Friendly Elements #27

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

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Improve Edit Page with Modern UI and Touch-Friendly Elements #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8bda650
Add Token Permissions
MatthewSteeples May 26, 2025
3df003c
Improve Edit page UI with modern design and touch-friendly elements
Copilot May 20, 2025
05a2daf
Finalize Edit page UI improvements with enhanced styling
Copilot May 20, 2025
4f414ae
Fix build issues in Edit page UI
Copilot May 26, 2025
342de08
Update button styling to match destructive and finishing actions
Copilot May 26, 2025
63aff11
Merge branch 'main' into copilot/fix-26
MatthewSteeples May 26, 2025
40564e0
Fix button styling for Save and Delete buttons
Copilot May 26, 2025
dbe68c8
Fix button styling with inline styles for Save and Delete buttons
Copilot May 26, 2025
5e959d8
Fix button styling using CSS variables for FluentUI buttons
Copilot May 27, 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
281 changes: 167 additions & 114 deletions Client/Pages/Edit.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,125 +8,170 @@

@inject Blazored.LocalStorage.ILocalStorageService localStorage

<EditForm Model="Item" OnValidSubmit="Save">
<DataAnnotationsValidator />
<ValidationSummary />

<FluentLabel>
Name:
<InputText @bind-Value="Item.Name" />
</FluentLabel>

<FluentLabel>
Default Stock Usage:
<InputNumber @bind-Value="Item.DefaultStockUsage" />
</FluentLabel>

@if (Item.PastOccurrences.Any())
{
<h2>Past Occurrences:</h2>

<table>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Stock Used</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var occurrence in Item.PastOccurrences.OrderByDescending(a => a.ActualTimestamp).Take(showHistoryCount))
<div class="form-container">
<FluentCard>
<EditForm Model="Item" OnValidSubmit="Save">
<DataAnnotationsValidator />
<ValidationSummary />

<div class="form-group">
<FluentLabel For="name" class="input-group">
<div>Name:</div>
<FluentTextField Id="name" @bind-Value="Item.Name" Placeholder="Enter item name" />
</FluentLabel>
</div>

<div class="form-group">
<FluentLabel For="stockUsage" class="input-group">
<div>Default Stock Usage:</div>
<FluentNumberField Id="stockUsage" @bind-Value="Item.DefaultStockUsage" Placeholder="Enter default amount" />
</FluentLabel>
</div>

@if (Item.PastOccurrences.Any())
{
<div class="section">
<h2 class="section-title">Past Occurrences</h2>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Stock Used</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var occurrence in Item.PastOccurrences.OrderByDescending(a => a.ActualTimestamp).Take(showHistoryCount))
{
<tr>
<td>
<FluentDatePicker Value="@occurrence.ActualTimestamp.ToLocalTime()" ValueChanged="@(e => UpdateDateTime(e, (dt) => occurrence.ActualTimestamp = dt))" />
</td>
<td>
<FluentTimePicker Value="@occurrence.ActualTimestamp.ToLocalTime()" ValueChanged="@(e => UpdateDateTime(e, (dt) => occurrence.ActualTimestamp = dt))" />
</td>
<td>
<FluentNumberField @bind-Value="occurrence.StockUsed" />
</td>
<td>
<div class="action-button">
<FluentIcon Value="@(new Size24.Delete())" OnClick="() => Item.PastOccurrences.Remove(occurrence)" />
</div>
</td>
</tr>
}
</tbody>
</table>
</div>

<div class="button-group">
<FluentButton Appearance="Appearance.Accent" @onclick="() => showHistoryCount += 5">Show More</FluentButton>
</div>
</div>
}

<div class="section">
<h2 class="section-title">Limits</h2>
<p>
What kind of limits do you want to set on this item.
<FluentIcon Id="limitTooltip" Icon="Size24.Info" />
</p>

<FluentTooltip Anchor="limitTooltip">
<strong>For example</strong>
<p>if you are tracking Paracetamol then you want to add 2 limits:</p>
<ul>
<li>1 every 4 hours</li>
<li>4 every 24 hours</li>
</ul>
</FluentTooltip>

<div class="targets-container">
@foreach (var target in Item.Targets)
{
<div class="target-item">
<TargetEditor Target="target" />
<div class="action-button">
<FluentIcon Value="@(new Size24.Delete())" OnClick="() => Item.Targets.Remove(target)" />
</div>
</div>
}
</div>

<div class="button-group">
<FluentButton Appearance="Appearance.Accent" @onclick="() => Item.Targets.Add(new Target())">
<FluentIcon Value="@(new Size24.Add())" Slot="start" />
Add Target
</FluentButton>
</div>
</div>

<div class="section">
<h2 class="section-title">Stock Acquisitions</h2>

@if (Item.StockAcquisitions.Any())
{
<tr>
<td>
<FluentDatePicker Value="@occurrence.ActualTimestamp.ToLocalTime()" ValueChanged="@(e => occurrence.ActualTimestamp = e.GetValueOrDefault().ToUniversalTime())" />
</td>
<td>
<FluentTimePicker Value="@occurrence.ActualTimestamp.ToLocalTime()" ValueChanged="@(e => occurrence.ActualTimestamp = e.GetValueOrDefault().ToUniversalTime())" />
</td>
<td>
<InputNumber @bind-Value="occurrence.StockUsed" />
</td>
<td>
<FluentIcon Value="@(new Size24.Delete())" OnClick="() => Item.PastOccurrences.Remove(occurrence)" />
</td>
</tr>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Date Acquired</th>
<th>Quantity</th>
<th>Note</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var acquisition in Item.StockAcquisitions)
{
<tr>
<td>
<FluentDatePicker Value="@acquisition.DateAcquired.ToLocalTime()" ValueChanged="@(e => UpdateDateTime(e, (dt) => acquisition.DateAcquired = dt))" />
</td>
<td>
<FluentNumberField @bind-Value="acquisition.Quantity" />
</td>
<td>
<FluentTextField @bind-Value="acquisition.Note" />
</td>
<td>
<div class="action-button">
<FluentIcon Value="@(new Size24.Delete())" OnClick="() => Item.StockAcquisitions.Remove(acquisition)" />
</div>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</tbody>
</table>

<button type="button" class="btn btn-primary" @onclick="() => showHistoryCount += 5">Show More</button>
}

<h2>Limits: </h2>
<p>What kind of limits do you want to set on this item. <FluentIcon Id="limitTooltip" Icon="Size24.Info" /> </p>

<FluentTooltip Anchor="limitTooltip">
<strong>For example</strong>
<p>if you are tracking Paracetamol then you want to add 2 limits:</p>
<ul>
<li>1 every 4 hours</li>
<li>4 every 24 hours</li>
</ul>
</FluentTooltip>

@foreach (var target in Item.Targets)
{
<p>
<TargetEditor Target="target" />
<FluentIcon Value="@(new Size24.Delete())" OnClick="() => Item.Targets.Remove(target)" />
</p>
}

<button type="button" class="btn btn-primary" @onclick="() => Item.Targets.Add(new Target())">Add Target</button>

<h2>Stock Acquisitions:</h2>
@if (Item.StockAcquisitions.Any())
{
<table>
<thead>
<tr>
<th>Date Acquired</th>
<th>Quantity</th>
<th>Note</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var acquisition in Item.StockAcquisitions)
else
{
<tr>
<td>
<FluentDatePicker Value="@acquisition.DateAcquired.ToLocalTime()" ValueChanged="@(e => acquisition.DateAcquired = e.GetValueOrDefault().ToUniversalTime())" />
</td>
<td>
<InputNumber @bind-Value="acquisition.Quantity" />
</td>
<td>
<InputText @bind-Value="acquisition.Note" />
</td>
<td>
<FluentIcon Value="@(new Size24.Delete())" OnClick="() => Item.StockAcquisitions.Remove(acquisition)" />
</td>
</tr>
<p>Items are not being tracked</p>
}
</tbody>
</table>
}
else
{
<p>Items are not being tracked</p>
}

<button type="button" class="btn btn-primary" @onclick="() => Item.StockAcquisitions.Add(new StockAcquisition { DateAcquired = DateTime.UtcNow })">Add Stock Acquisition</button>

<p class="mt-5">
<button type="submit" class="btn btn-success">Save</button>
<button type="button" @onclick="Cancel" class="btn btn-secondary">Cancel</button>
<button type="button" @onclick="Delete" class="btn btn-danger">Delete</button>
</p>
</EditForm>
<div class="button-group">
<FluentButton Appearance="Appearance.Accent" @onclick="() => Item.StockAcquisitions.Add(new StockAcquisition { DateAcquired = DateTime.UtcNow })">
<FluentIcon Value="@(new Size24.Add())" Slot="start" />
Add Stock Acquisition
</FluentButton>
</div>
</div>

<div class="button-group">
<div class="save-button-container">
<FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Save</FluentButton>
</div>
<FluentButton @onclick="Cancel" Appearance="Appearance.Neutral">Cancel</FluentButton>
<div class="delete-button-container">
<FluentButton @onclick="Delete" Appearance="Appearance.Accent">Delete</FluentButton>
</div>
</div>
</EditForm>
</FluentCard>
</div>

@code {
[Parameter]
Expand All @@ -137,6 +182,14 @@

private int showHistoryCount = 5;

private void UpdateDateTime(DateTime? value, Action<DateTime> updateAction)
{
if (value.HasValue)
{
updateAction(value.Value.ToUniversalTime());
}
}

protected override async Task OnInitializedAsync()
{
var loadedItem = await localStorage.GetItemAsync<TrackedItem>(nameof(TrackedItem) + Id);
Expand Down
Loading