From 40fc65820c9ca048f00e360facf35bc037507f6e Mon Sep 17 00:00:00 2001
From: Amadeusz Nowak <an2508374@gmail.com>
Date: Fri, 17 May 2024 00:56:26 +0200
Subject: [PATCH] (#57) update event card to differ colors depend on status

---
 .../Components/RadzenEventCard.razor          | 46 +++++++++++++++++
 .../MiniSpace.Web/Pages/Events/Events.razor   | 51 ++-----------------
 .../Pages/Events/EventsOrganize.razor         | 28 +---------
 .../Pages/Events/EventsSearch.razor           | 32 +++---------
 4 files changed, 57 insertions(+), 100 deletions(-)
 create mode 100644 MiniSpace.Web/src/MiniSpace.Web/Components/RadzenEventCard.razor

diff --git a/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenEventCard.razor b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenEventCard.razor
new file mode 100644
index 000000000..24e89a8a7
--- /dev/null
+++ b/MiniSpace.Web/src/MiniSpace.Web/Components/RadzenEventCard.razor
@@ -0,0 +1,46 @@
+@using MiniSpace.Web.DTO
+@inject NavigationManager NavigationManager
+
+<RadzenCard Class="rz-border-radius-3" Style="cursor: pointer"
+            @onclick="@(() => NavigationManager.NavigateTo($"/events/{Event.Id}"))">
+    <RadzenRow Size="12">
+        <RadzenColumn Size="12" SizeMD="6">
+            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Name</RadzenText>
+            <RadzenText TextStyle="TextStyle.Body1"><b>@(Event.Name)</b></RadzenText>
+        </RadzenColumn>
+        <RadzenColumn Size="12" SizeMD="5">
+            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Status</RadzenText>
+            @switch (Event.Status)
+            {
+                case "Published":
+                    <RadzenText TextStyle="TextStyle.Body1" Style="color: green"><b>@Event.Status</b></RadzenText>
+                    break;
+                case "Archived":
+                    <RadzenText TextStyle="TextStyle.Body1" Style="color: indianred"><b>@Event.Status</b></RadzenText>
+                    break;
+                default:
+                    <RadzenText TextStyle="TextStyle.Body1"><b>@Event.Status</b></RadzenText>
+                    break;
+            }
+        </RadzenColumn>
+    </RadzenRow>
+    <RadzenRow Size="12">
+        <RadzenColumn Size="12" SizeMD="6">
+            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Start date</RadzenText>
+            <RadzenText TextStyle="TextStyle.Body1"><b>@(Event.StartDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
+        </RadzenColumn>
+        <RadzenColumn Size="12" SizeMD="5">
+            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">End date</RadzenText>
+            <RadzenText TextStyle="TextStyle.Body1"><b>@(Event.EndDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
+        </RadzenColumn>
+    </RadzenRow>
+    <hr style="border: none; background-color: rgba(0,0,0,.2); height: 1px; margin: 1rem 0;"/>
+</RadzenCard>
+
+@code
+{
+    [Parameter]
+    public EventDto Event { get; set; }
+    
+    private const string dateFormat = "dd/MM/yyyy HH:mm";
+}
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/Events.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/Events.razor
index c728a2e12..92b594267 100644
--- a/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/Events.razor
+++ b/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/Events.razor
@@ -2,6 +2,7 @@
 @using MiniSpace.Web.Areas.Students
 @using MiniSpace.Web.DTO
 @using MiniSpace.Web.Areas.Events
+@using MiniSpace.Web.Components
 @using MiniSpace.Web.Pages.Events.Dialogs
 @using Radzen
 @using DialogOptions = Radzen.DialogOptions
@@ -30,30 +31,7 @@
                     }
                     <RadzenDataList AllowPaging="false" Data="@signedUpEvents" TItem="EventDto">
                         <Template Context="ev">
-                            <RadzenCard Class="rz-border-radius-3" Style="cursor: pointer"
-                                        @onclick="@(() => NavigationManager.NavigateTo($"/events/{ev.Id}"))">
-                                <RadzenRow Size="12">
-                                    <RadzenColumn Size="12" SizeMD="6">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Name</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Name)</b></RadzenText>
-                                    </RadzenColumn>
-                                    <RadzenColumn Size="12" SizeMD="5">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Status</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Status)</b></RadzenText>
-                                    </RadzenColumn>
-                                </RadzenRow>
-                                <RadzenRow Size="12">
-                                    <RadzenColumn Size="12" SizeMD="6">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Start date</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.StartDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
-                                    </RadzenColumn>
-                                    <RadzenColumn Size="12" SizeMD="5">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">End date</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.EndDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
-                                    </RadzenColumn>
-                                </RadzenRow>
-                                <hr style="border: none; background-color: rgba(0,0,0,.2); height: 1px; margin: 1rem 0;"/>
-                            </RadzenCard>
+                            <RadzenEventCard Event="ev" />
                         </Template>
                     </RadzenDataList>
                 </RadzenTabsItem>
@@ -65,30 +43,7 @@
                     }
                     <RadzenDataList AllowPaging="false" Data="@interestedEvents" TItem="EventDto">
                         <Template Context="ev">
-                            <RadzenCard Class="rz-border-radius-3" Style="cursor: pointer"
-                                        @onclick="@(() => NavigationManager.NavigateTo($"/events/{ev.Id}"))">
-                                <RadzenRow Size="12">
-                                    <RadzenColumn Size="12" SizeMD="6">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Name</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Name)</b></RadzenText>
-                                    </RadzenColumn>
-                                    <RadzenColumn Size="12" SizeMD="5">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Status</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Status)</b></RadzenText>
-                                    </RadzenColumn>
-                                </RadzenRow>
-                                <RadzenRow Size="12">
-                                    <RadzenColumn Size="12" SizeMD="6">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Start date</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.StartDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
-                                    </RadzenColumn>
-                                    <RadzenColumn Size="12" SizeMD="5">
-                                        <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Capacity</RadzenText>
-                                        <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.SignedUpStudents)/@(ev.Capacity)</b></RadzenText>
-                                    </RadzenColumn>
-                                </RadzenRow>
-                                <hr style="border: none; background-color: rgba(0,0,0,.2); height: 1px; margin: 1rem 0;" />
-                            </RadzenCard>
+                            <RadzenEventCard Event="ev" />
                         </Template>
                     </RadzenDataList>
                 </RadzenTabsItem>
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsOrganize.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsOrganize.razor
index 39a79e17f..31390f846 100644
--- a/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsOrganize.razor
+++ b/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsOrganize.razor
@@ -1,6 +1,7 @@
 @page "/events/organize"
 @using MiniSpace.Web.Areas.Events
 @using MiniSpace.Web.Areas.Students
+@using MiniSpace.Web.Components
 @using MiniSpace.Web.DTO
 @using MiniSpace.Web.DTO.Wrappers
 @using MiniSpace.Web.Models.Events
@@ -48,30 +49,7 @@
 
 <RadzenDataList AllowPaging="false" Data="@events" TItem="EventDto">
     <Template Context="ev">
-        <RadzenCard Class="rz-border-radius-3" Style="cursor: pointer"
-                    @onclick="@(() => NavigationManager.NavigateTo($"/events/{ev.Id}"))">
-            <RadzenRow Size="12">
-                <RadzenColumn Size="12" SizeMD="6">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Name</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Name)</b></RadzenText>
-                </RadzenColumn>
-                <RadzenColumn Size="12" SizeMD="5">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Status</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Status)</b></RadzenText>
-                </RadzenColumn>
-            </RadzenRow>
-            <RadzenRow Size="12">
-                <RadzenColumn Size="12" SizeMD="6">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Start date</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.StartDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
-                </RadzenColumn>
-                <RadzenColumn Size="12" SizeMD="5">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Capacity</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.SignedUpStudents)/@(ev.Capacity)</b></RadzenText>
-                </RadzenColumn>
-            </RadzenRow>
-            <hr style="border: none; background-color: rgba(0,0,0,.2); height: 1px; margin: 1rem 0;"/>
-        </RadzenCard>
+        <RadzenEventCard Event="ev" />
     </Template>
 </RadzenDataList>
 
@@ -85,8 +63,6 @@
 }
 
 @code {
-    private const string dateFormat = "dd/MM/yyyy HH:mm";
-    
     private SearchOrganizerEventsModel searchOrganizerEventsModel = new()
     {
         Name = "",
diff --git a/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsSearch.razor b/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsSearch.razor
index d928ce3b2..fdf011728 100644
--- a/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsSearch.razor
+++ b/MiniSpace.Web/src/MiniSpace.Web/Pages/Events/EventsSearch.razor
@@ -2,6 +2,7 @@
 @using MiniSpace.Web.Areas.Identity
 @using MiniSpace.Web.Areas.Events
 @using MiniSpace.Web.Areas.Students
+@using MiniSpace.Web.Components
 @using MiniSpace.Web.DTO
 @using MiniSpace.Web.DTO.Wrappers
 @using MiniSpace.Web.Models.Events
@@ -35,44 +36,23 @@
 @if (pageInitialized && totalElements != 0)
 {
     <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End">
-        <MudPagination Count="@totalPages" SelectedChanged="@SelectedPageChanged" Selected="@searchEventsModel.Pageable.Page"
+        <MudPagination Count="@totalPages" SelectedChanged="@SelectedPageChanged"
+                       Selected="@searchEventsModel.Pageable.Page"
                        Rectangular="true" ShowFirstButton="true" ShowLastButton="true"/>
     </RadzenStack>   
 }
 
 <RadzenDataList AllowPaging="false" Data="@events" TItem="EventDto">
     <Template Context="ev">
-        <RadzenCard Class="rz-border-radius-3" Style="cursor: pointer"
-                    @onclick="@(() => NavigationManager.NavigateTo($"/events/{ev.Id}"))">
-            <RadzenRow Size="12">
-                <RadzenColumn Size="12" SizeMD="6">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Name</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Name)</b></RadzenText>
-                </RadzenColumn>
-                <RadzenColumn Size="12" SizeMD="6">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-1 rz-my-0">Status</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.Status)</b></RadzenText>
-                </RadzenColumn>
-            </RadzenRow>
-            <RadzenRow Size="12">
-                <RadzenColumn Size="12" SizeMD="6">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Start date</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.StartDate.ToLocalTime().ToString(dateFormat))</b></RadzenText>
-                </RadzenColumn>
-                <RadzenColumn Size="12" SizeMD="6">
-                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex rz-mt-3 rz-mb-0">Capacity</RadzenText>
-                    <RadzenText TextStyle="TextStyle.Body1"><b>@(ev.SignedUpStudents)/@(ev.Capacity)</b></RadzenText>
-                </RadzenColumn>
-            </RadzenRow>
-            <hr style="border: none; background-color: rgba(0,0,0,.2); height: 1px; margin: 1rem 0;"/>
-        </RadzenCard>
+        <RadzenEventCard Event="ev" />
     </Template>
 </RadzenDataList>
 
 @if (pageInitialized && totalElements != 0)
 {
     <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End">
-        <MudPagination Count="@totalPages" SelectedChanged="@SelectedPageChanged" Selected="@searchEventsModel.Pageable.Page"
+        <MudPagination Count="@totalPages" SelectedChanged="@SelectedPageChanged"
+                       Selected="@searchEventsModel.Pageable.Page"
                        Rectangular="true" ShowFirstButton="true" ShowLastButton="true"/>
     </RadzenStack>   
 }