troogs/fs-onboarding
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance InteractionRow and ProspectContainer: refactor layout to use grid, improve styling, and add interaction handling
All checks were successful
Build And Push Dev Docker Image / docker (push) Successful in 1m30s
Details

Browse Source
This commit is contained in:
troogs
2026-04-21 22:24:58 +02:00
parent 7660e8ce81
commit 4330b53824
4 changed files with 79 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
FoodsharingSiegen.Server/Controls/InteractionRow.razor
View File

@@ -5,52 +5,63 @@
@inherits FsBase
@{
var colorClass = "";
if(Done) colorClass = "interaction--color-done";
var rowClass = "";
if (Done) rowClass += " done";
if (NotNeeded) rowClass += " notneeded";
if (Alert) rowClass += " fs-alert";
}
<tr class="@rowClass" style="border-top: 5px solid transparent;">
<th class="text-center align-top pr-2">
<i class="@IconClass"></i>
</th>
<th class="pr-2 align-top" style="white-space: nowrap;">@Type.Translate(AppSettings):</th>
<td class="align-top d-flex flex-column">
@if(!AllowInteraction || Prospect is {Complete: true })
{
<Button Size="Size.Small" Disabled="true">
<i class="@ButtonIconClass"></i>
</Button>
}
else
{
@if(Interactions.Count == 0 || Multiple)
{
if (Multiple) ButtonIconClass = "fa-solid fa-plus";
<Button Size="Size.Small" Clicked="@(async () => { if (AddClick != null) await AddClick(Type); })"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
} else {
<Button Size="Size.Small" Clicked="@(async () => { await RemoveFirstAsync(Type); })"><i class="fa-solid fa-times" style="color: rgb(153, 0, 0);"></i></Button>
}
}
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
<div class="@colorClass" style="display: inline-block;"><i class="@IconClass"></i> @Type.Translate(AppSettings)</div>
@if(Interactions.Count > 0)
{
foreach (var interaction in Interactions)
{
<div style="padding-bottom: .5rem;">
<div style="white-space: nowrap;">
<span title="@interaction.User.Memo">@interaction.User.Name</span> (@interaction.Date.ToShortDateString())
@if ((Prospect is not { Complete: true } || interaction.Type == InteractionType.Complete) && AllowInteraction)
{
<span>&nbsp;<a href=""><i class="fa-solid fa-square-xmark" @onclick="async () => { if (RemoveClick != null) await RemoveClick.Invoke(interaction.Id); }" @onclick:preventDefault></i></a></span>
<span title="@Interactions.First().User.Memo"> (@Interactions.First().User.Name</span> <span>@Interactions.First().Date.ToShortDateString())</span>
}
</div>
<div>
@FeedbackBuilder(interaction)
</div>
@if(Multiple && Interactions.Count > 0)
{
@foreach (var interaction in Interactions)
{
<div class="d-flex justify-content-end">
@if ((Prospect is not { Complete: true } || interaction.Type == InteractionType.Complete) && AllowInteraction)
{
<a style="display: inline-block;"" href=""><i class="fa-solid fa-square-xmark" @onclick="async () => { if (RemoveClick != null) await RemoveClick.Invoke(interaction.Id); }" @onclick:preventDefault></i></a>
} else {
<span>&bull;</span>
}
</div>
<div>
<div>
<span title="@interaction.User.Memo">@interaction.User.Name (@interaction.Date.ToShortDateString())</span>
@if (!string.IsNullOrWhiteSpace(interaction.FeedbackInfo))
{
<span>(<i>@interaction.FeedbackInfo</i>)</span>
}
</div>
@FeedbackBuilder(interaction)
</div>
}
}
@if (Prospect is not {Complete: true } && (Interactions.Count == 0 || Multiple) && AllowInteraction)
{
if (Multiple) ButtonIconClass = "fa-solid fa-plus";
<div class="m-auto">
<Button Size="Size.Small" Clicked="@(async () => { if (AddClick != null) await AddClick(Type); })"><i class="@ButtonIconClass" style="color: #64ae24;"></i></Button>
</div>
}
</td>
</tr>

9
FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs
View File

@@ -94,6 +94,15 @@ namespace FoodsharingSiegen.Server.Controls
#endregion
private async Task RemoveFirstAsync(InteractionType type)
{
if (Prospect != null && RemoveClick != null)
{
var interaction = Interactions.FirstOrDefault(x => x.Type == type);
if (interaction != null) await RemoveClick(interaction.Id);
}
}
private MarkupString FeedbackBuilder(Interaction interaction)
{
var infoList = new List<string>();

21
FoodsharingSiegen.Server/Controls/ProspectContainer.razor
View File

@@ -51,8 +51,7 @@
</Alert>
}
<table class="flex-column" style="width: 100%;">
<div class="interaction-grid mb-3">
<InteractionRow
Prospect="Prospect"
Type="InteractionType.Welcome"
@@ -63,12 +62,6 @@
IconClass="fa-solid fa-handshake-simple">
</InteractionRow>
<tr>
<td colspan="3">
<hr style="margin: 10px 0;">
</td>
</tr>
@if (!AppSettings.DisableStepIn)
{
<InteractionRow
@@ -94,12 +87,6 @@
IconClass="fa-solid fa-basket-shopping">
</InteractionRow>
<tr>
<td colspan="3">
<hr style="margin: 10px 0;">
</td>
</tr>
<InteractionRow
Prospect="Prospect"
Type="InteractionType.ReleasedForVerification"
@@ -145,13 +132,13 @@
IconClass="fa-solid fa-user-check">
</InteractionRow>
}
</table>
</div>
<div class="flex-grow-1"></div>
@if(Prospect?.Images?.Count > 0)
{<div class="text-center mt-3">
{
<div class="text-center mt-3">
<Badge Color="Color.Info" Style="margin-bottom: 0.5rem; cursor: pointer;" @onclick="OpenVerificationDialogAsync"><i class="fa-solid fa-address-card"></i>-Prüfung möglich</Badge></div>
}

15
FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss
View File

@@ -55,3 +55,18 @@ i.link {
color: #000;
}
}
.interaction-grid {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: .5rem;
::deep .interaction {
&--color {
&-done{
color: #64ae24;
}
}
}
}