xTr1m/RpgRoller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor management UX and move workspace status to toasts

Browse Source
This commit is contained in:
Frank Tovar
2026-02-26 12:38:19 +01:00
parent 017fc37b1d
commit 15c046bcac
7 changed files with 214 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
RpgRoller/Components/Pages/HomeControls/CampaignManagementPanel.razor
View File

@@ -1,6 +1,8 @@
<main class="management-screen">
<section class="card">
<h2>Campaign Selector</h2>
<div class="section-head">
<h2>Campaign</h2>
</div>
@if (Campaigns.Count == 0)
{
<p class="empty">No campaigns yet.</p>
@@ -11,47 +13,11 @@
<select id="campaign-select" @onchange="CampaignSelectionChanged">
@foreach (var campaign in Campaigns)
{
<option value="@campaign.Id"
selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)
</option>
<option value="@campaign.Id" selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)</option>
}
</select>
}
<p class="muted">Current campaign in this tab: <strong>@(SelectedCampaignName ?? "None selected")</strong></p>
</section>
<section class="card">
<h2>Create Campaign</h2>
@if (!string.IsNullOrWhiteSpace(CampaignState.ErrorMessage))
{
<p class="form-error">@CampaignState.ErrorMessage</p>
}
<form class="form-grid" @onsubmit="SubmitCreateCampaignAsync" @onsubmit:preventDefault>
<label for="campaign-name">Campaign name</label>
<input id="campaign-name" @bind="CampaignState.Model.Name" @bind:event="oninput"/>
@if (CampaignState.Errors.TryGetValue("name", out var campaignNameError))
{
<p class="field-error">@campaignNameError</p>
}
<label for="campaign-ruleset">Ruleset</label>
<select id="campaign-ruleset" @bind="CampaignState.Model.RulesetId">
<option value="">Select ruleset</option>
@foreach (var ruleset in Rulesets)
{
<option value="@ruleset.Id">@ruleset.Name</option>
}
</select>
@if (CampaignState.Errors.TryGetValue("rulesetId", out var campaignRulesetError))
{
<p class="field-error">@campaignRulesetError</p>
}
<button type="submit"
disabled="@(IsMutating || IsCreatingCampaign)">@(IsCreatingCampaign ? "Creating..." : "Create Campaign")</button>
</form>
</section>
<section class="card">
<h2>Campaign Details</h2>
@if (SelectedCampaign is null)
{
<p class="empty">No campaign selected.</p>
@@ -60,44 +26,102 @@
{
<p>Name: <strong>@SelectedCampaign.Name</strong></p>
<p>Ruleset: <strong>@SelectedCampaign.RulesetId</strong></p>
<p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span
class="muted">(@SelectedCampaign.Gm.Username)</span></p>
<p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span class="muted">(@SelectedCampaign.Gm.Username)</span></p>
<p>Characters visible: <strong>@SelectedCampaign.Characters.Count</strong></p>
}
<button type="button"
class="add-row-button"
disabled="@(IsMutating || IsCreatingCampaign)"
@onclick="OpenCreateCampaignModal">
<span class="add-row-icon" aria-hidden="true">+</span>
<span>Add campaign</span>
</button>
</section>
<section class="card">
<div class="section-head">
<h2>Character Management</h2>
<button type="button" disabled="@(IsMutating || IsCreatingCampaign || SelectedCampaign is null)"
@onclick="CreateCharacterRequested">Create Character
</button>
</div>
@if (SelectedCampaign is null)
{
<p class="empty">Select a campaign first.</p>
}
else if (SelectedCampaign.Characters.Count == 0)
{
<p class="empty">No characters in this campaign yet.</p>
}
else
{
<ul class="management-list">
@foreach (var character in SelectedCampaign.Characters)
{
<li>
<div><strong>@character.Name</strong>
<p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p></div>
<div class="inline-actions">
@if (SelectedCampaign.Characters.Count == 0)
{
<p class="empty">No characters in this campaign yet.</p>
}
else
{
<ul class="management-list">
@foreach (var character in SelectedCampaign.Characters)
{
<li>
<div>
<strong>@character.Name</strong>
<p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p>
</div>
<button type="button"
class="chip-button"
title="Edit character"
disabled="@(IsMutating || IsCreatingCampaign || !CanEditCharacter(character))"
@onclick="() => EditCharacterRequested.InvokeAsync(character)">Edit
@onclick="() => EditCharacterRequested.InvokeAsync(character)">
<span aria-hidden="true">✎</span>
<span class="sr-only">Edit @character.Name</span>
</button>
</div>
</li>
}
</ul>
</li>
}
</ul>
}
<button type="button"
class="add-row-button"
disabled="@(IsMutating || IsCreatingCampaign)"
@onclick="CreateCharacterRequested">
<span class="add-row-icon" aria-hidden="true">+</span>
<span>Add character</span>
</button>
}
</section>
</main>
@if (ShowCreateCampaignModal)
{
<div class="modal-overlay" role="presentation">
<section class="modal-card" role="dialog" aria-modal="true" aria-label="Create Campaign">
<h2>Create Campaign</h2>
@if (!string.IsNullOrWhiteSpace(CampaignState.ErrorMessage))
{
<p class="form-error">@CampaignState.ErrorMessage</p>
}
<form class="form-grid" @onsubmit="SubmitCreateCampaignAsync" @onsubmit:preventDefault>
<label for="campaign-name">Campaign name</label>
<input id="campaign-name" @bind="CampaignState.Model.Name" @bind:event="oninput"/>
@if (CampaignState.Errors.TryGetValue("name", out var campaignNameError))
{
<p class="field-error">@campaignNameError</p>
}
<label for="campaign-ruleset">Ruleset</label>
<select id="campaign-ruleset" @bind="CampaignState.Model.RulesetId">
<option value="">Select ruleset</option>
@foreach (var ruleset in Rulesets)
{
<option value="@ruleset.Id">@ruleset.Name</option>
}
</select>
@if (CampaignState.Errors.TryGetValue("rulesetId", out var campaignRulesetError))
{
<p class="field-error">@campaignRulesetError</p>
}
<div class="inline-actions">
<button type="submit" disabled="@(IsMutating || IsCreatingCampaign)">@(IsCreatingCampaign ? "Creating..." : "Create Campaign")</button>
<button type="button" class="ghost" disabled="@(IsMutating || IsCreatingCampaign)" @onclick="CloseCreateCampaignModal">Cancel</button>
</div>
</form>
</section>
</div>
}