Enhance InteractionRow and ProspectContainer: refactor layout to use grid, improve styling, and add interaction handling

FoodsharingSiegen.Server/Controls/InteractionRow.razor

@@ -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;">
+@if(!AllowInteraction || Prospect is {Complete: true })
-    <th class="text-center align-top pr-2">
+{
-        <i class="@IconClass"></i>
+    <Button Size="Size.Small" Disabled="true">
-    </th>
+        <i class="@ButtonIconClass"></i>
-    <th class="pr-2 align-top" style="white-space: nowrap;">@Type.Translate(AppSettings):</th>
+    </Button>
-    <td class="align-top d-flex flex-column">
+} 
-        @if (Interactions.Count > 0)
+else
+{
+    @if(Interactions.Count == 0 || Multiple)
     {
-            foreach (var interaction in Interactions)
+        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>
-                <div style="padding-bottom: .5rem;">
+    } else {
-                    <div style="white-space: nowrap;">
+        <Button Size="Size.Small" Clicked="@(async () => { await RemoveFirstAsync(Type); })"><i class="fa-solid fa-times" style="color: rgb(153, 0, 0);"></i></Button>
-                        <span title="@interaction.User.Memo">@interaction.User.Name</span> (@interaction.Date.ToShortDateString())
+    }
+}
 
+<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)
+    {
+        <span title="@Interactions.First().User.Memo"> (@Interactions.First().User.Name</span> <span>@Interactions.First().Date.ToShortDateString())</span>
+    }
+</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)
             {
-                            <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>
+                <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>
-                        @FeedbackBuilder(interaction)
-                    </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>

FoodsharingSiegen.Server/Controls/InteractionRow.razor.cs

@@ -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>();

FoodsharingSiegen.Server/Controls/ProspectContainer.razor

@@ -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>
         }
-
+    </div>
-    </table>
     
     <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>
     }      
 

FoodsharingSiegen.Server/Controls/ProspectContainer.razor.scss

@@ -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;
+            }
+        }
+    }
+}