Skip to content

Commit

Permalink
(#433) wasm: edd skeleton placeholder for event item
Browse files Browse the repository at this point in the history
  • Loading branch information
@SaintAngeLs
SaintAngeLs committed Oct 13, 2024
1 parent 504c8c6 commit 3ddc9f2
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 99 deletions.
204 changes: 111 additions & 93 deletions MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Events/Components/EventItem.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@

private string organizerName;
private string organizerImageUrl;
private bool isLoading = true; // Track loading state
protected override async Task OnInitializedAsync()
{
await LoadOrganizerDetails();
isLoading = false; // Stop loading once details are loaded
}

private async Task LoadOrganizerDetails()
Expand Down Expand Up @@ -64,97 +66,116 @@
}
}

<MudCard Class="mud-card-hover" Style="height: 100%; border-radius: 15px;">
<MudCardHeader>
<!-- Organizer Avatar -->
<CardHeaderAvatar>
<MudAvatar Image="@organizerImageUrl" Color="Color.Secondary"></MudAvatar>
</CardHeaderAvatar>

<!-- Organizer Name -->
<CardHeaderContent>
<MudText Typo="Typo.body1">@organizerName</MudText>
<MudText Typo="Typo.body2">@GetOrganizerDescription()</MudText>
</CardHeaderContent>

<CardHeaderActions>
<MudMenu Icon="@Icons.Material.Filled.MoreVert" AriaLabel="Open event menu" Color="Color.Default">
<MudMenuItem OnClick="@(() => ShareEvent("facebook"))">
<MudIcon Icon="@Icons.Custom.Brands.Facebook" /> Share on Facebook
</MudMenuItem>
<MudMenuItem OnClick="@(() => ShareEvent("twitter"))">
<MudIcon Icon="@Icons.Custom.Brands.Twitter" /> Share on Twitter
</MudMenuItem>
<MudMenuItem OnClick="@(() => ShareEvent("whatsapp"))">
<MudIcon Icon="@Icons.Custom.Brands.WhatsApp" /> Share on WhatsApp
</MudMenuItem>
<MudMenuItem OnClick="@(() => ShareEvent("linkedin"))">
<MudIcon Icon="@Icons.Custom.Brands.LinkedIn" /> Share on LinkedIn
</MudMenuItem>
<MudMenuItem OnClick="InviteToEvent">
<MudIcon Icon="@Icons.Material.Filled.PersonAdd" /> Invite
</MudMenuItem>
<MudMenuItem OnClick="OpenReportDialog">
<MudIcon Icon="@Icons.Material.Filled.Report" /> Report
</MudMenuItem>
</MudMenu>
</CardHeaderActions>
</MudCardHeader>

<MudCardMedia Image="@GetBannerUrl(Event)" Alt="@Event.Name" Style="height: 180px;" />

<MudCardContent>
<MudText Typo="Typo.h6">@Event.Name</MudText>
<MudText Typo="Typo.body2" Color="Color.Secondary">@Event.Category</MudText>
<MudText Typo="Typo.body2">Starts: @Event.StartDate.ToString("MMMM dd, yyyy")</MudText>
<MudText Typo="Typo.body2">Ends: @Event.EndDate.ToString("MMMM dd, yyyy")</MudText>
<MudText Typo="Typo.body2">
<MudIcon Icon="@Icons.Material.Rounded.ThumbUp" Style="font-size: 1rem;" /> Interested: @Event.InterestedStudents
</MudText>
<MudText Typo="Typo.body2">
<MudIcon Icon="@Icons.Material.Filled.HowToReg" Style="font-size: 1rem;" /> Signed Up: @Event.SignedUpStudents
</MudText>
</MudCardContent>

<MudCardActions>
<MudButton Variant="Variant.Text" Color="Color.Primary" OnClick="ViewEvent">
<MudIcon Icon="@Icons.Material.Filled.KeyboardDoubleArrowRight" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">View Details</MudText>
</MudButton>
</MudCardActions>

<!-- Sign Up and Show Interest Actions -->
<MudCardActions>
@if (Event.IsSignedUp)
{
<MudButton Variant="Variant.Outlined" Color="Color.Warning" Disabled="true">
<MudIcon Icon="@Icons.Material.Filled.CheckCircleOutline" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Signed Up</MudText>
</MudButton>
}
else
{
<MudButton Variant="Variant.Outlined" Color="Color.Success" OnClick="SignUpToEvent">
<MudIcon Icon="@Icons.Material.Filled.HowToReg" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Sign Up</MudText>
</MudButton>
}

@if (Event.IsInterested)
{
<MudButton Variant="Variant.Outlined" Color="Color.Warning" Disabled="true">
<MudIcon Icon="@Icons.Material.Filled.ThumbUpAlt" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Interested</MudText>
</MudButton>
}
else
{
<MudButton Variant="Variant.Outlined" Color="Color.Info" OnClick="ShowInterestInEvent">
<MudIcon Icon="@Icons.Material.Rounded.ThumbUp" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Show Interest</MudText>
<!-- Event Item Card with Skeletons -->
<MudCard Class="mud-card-hover" Style="height: 100%; border-radius: 15px; position:relative;">
@if (isLoading)
{
<!-- Show Skeletons when loading -->
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="180px" />
<MudCardContent>
<MudSkeleton Width="30%" Height="42px;" />
<MudSkeleton Width="80%" />
<MudSkeleton Width="100%" />
</MudCardContent>
<MudCardActions>
<MudSkeleton Width="64px" Height="40px" />
<MudSkeleton Width="105px" Height="40px" />
</MudCardActions>
}
else
{
<!-- Show actual event details once loading is complete -->
<MudCardHeader>
<!-- Organizer Avatar -->
<CardHeaderAvatar>
<MudAvatar Image="@organizerImageUrl" Color="Color.Secondary"></MudAvatar>
</CardHeaderAvatar>

<!-- Organizer Name -->
<CardHeaderContent>
<MudText Typo="Typo.body1">@organizerName</MudText>
<MudText Typo="Typo.body2">@GetOrganizerDescription()</MudText>
</CardHeaderContent>

<CardHeaderActions>
<MudMenu Icon="@Icons.Material.Filled.MoreVert" AriaLabel="Open event menu" Color="Color.Default">
<MudMenuItem OnClick="@(() => ShareEvent("facebook"))">
<MudIcon Icon="@Icons.Custom.Brands.Facebook" /> Share on Facebook
</MudMenuItem>
<MudMenuItem OnClick="@(() => ShareEvent("twitter"))">
<MudIcon Icon="@Icons.Custom.Brands.Twitter" /> Share on Twitter
</MudMenuItem>
<MudMenuItem OnClick="@(() => ShareEvent("whatsapp"))">
<MudIcon Icon="@Icons.Custom.Brands.WhatsApp" /> Share on WhatsApp
</MudMenuItem>
<MudMenuItem OnClick="@(() => ShareEvent("linkedin"))">
<MudIcon Icon="@Icons.Custom.Brands.LinkedIn" /> Share on LinkedIn
</MudMenuItem>
<MudMenuItem OnClick="InviteToEvent">
<MudIcon Icon="@Icons.Material.Filled.PersonAdd" /> Invite
</MudMenuItem>
<MudMenuItem OnClick="OpenReportDialog">
<MudIcon Icon="@Icons.Material.Filled.Report" /> Report
</MudMenuItem>
</MudMenu>
</CardHeaderActions>
</MudCardHeader>

<MudCardMedia Image="@GetBannerUrl(Event)" Alt="@Event.Name" Style="height: 180px;" />

<MudCardContent>
<MudText Typo="Typo.h6">@Event.Name</MudText>
<MudText Typo="Typo.body2" Color="Color.Secondary">@Event.Category</MudText>
<MudText Typo="Typo.body2">Starts: @Event.StartDate.ToString("MMMM dd, yyyy")</MudText>
<MudText Typo="Typo.body2">Ends: @Event.EndDate.ToString("MMMM dd, yyyy")</MudText>
<MudText Typo="Typo.body2">
<MudIcon Icon="@Icons.Material.Rounded.ThumbUp" Style="font-size: 1rem;" /> Interested: @Event.InterestedStudents
</MudText>
<MudText Typo="Typo.body2">
<MudIcon Icon="@Icons.Material.Filled.HowToReg" Style="font-size: 1rem;" /> Signed Up: @Event.SignedUpStudents
</MudText>
</MudCardContent>

<MudCardActions>
<MudButton Variant="Variant.Text" Color="Color.Primary" OnClick="ViewEvent">
<MudIcon Icon="@Icons.Material.Filled.KeyboardDoubleArrowRight" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">View Details</MudText>
</MudButton>
}
</MudCardActions>
</MudCardActions>

<!-- Sign Up and Show Interest Actions -->
<MudCardActions>
@if (Event.IsSignedUp)
{
<MudButton Variant="Variant.Outlined" Color="Color.Warning" Disabled="true">
<MudIcon Icon="@Icons.Material.Filled.CheckCircleOutline" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Signed Up</MudText>
</MudButton>
}
else
{
<MudButton Variant="Variant.Outlined" Color="Color.Success" OnClick="SignUpToEvent">
<MudIcon Icon="@Icons.Material.Filled.HowToReg" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Sign Up</MudText>
</MudButton>
}

@if (Event.IsInterested)
{
<MudButton Variant="Variant.Outlined" Color="Color.Warning" Disabled="true">
<MudIcon Icon="@Icons.Material.Filled.ThumbUpAlt" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Interested</MudText>
</MudButton>
}
else
{
<MudButton Variant="Variant.Outlined" Color="Color.Info" OnClick="ShowInterestInEvent">
<MudIcon Icon="@Icons.Material.Rounded.ThumbUp" Style="font-size: 1rem;" />
<MudText Typo="Typo.h6">Show Interest</MudText>
</MudButton>
}
</MudCardActions>
}
</MudCard>

@code {
Expand All @@ -165,7 +186,6 @@
: "/images/default_media_file_image.png";
}


private string GetOrganizerDescription()
{
return Event.Organizer.OrganizerType == OrganizerType.Organization
Expand Down Expand Up @@ -193,8 +213,6 @@
}
}



private void InviteToEvent()
{
// Logic to invite others to the event
Expand Down
43 changes: 37 additions & 6 deletions MiniSpace.Web/src/Astravent.Web.Wasm/Pages/Events/EventsSearch.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@inject IIdentityService IdentityService
@using Astravent.Web.Wasm.DTO.Events
@using Astravent.Web.Wasm.Pages.Events.Components

@using MudBlazor

<AuthWrapper>
<MudContainer MaxWidth="MaxWidth.Large" Class="mt-4">
Expand All @@ -21,7 +21,35 @@
OnSearch="PerformSearch" />

<!-- Event List -->
<EventList Events="events" OnViewEvent="ViewEvent" OnSignUpToEvent="SignUpToEvent" OnShowInterestInEvent="ShowInterestInEvent" />
@if (isLoading)
{
<MudGrid Spacing="3">
@for (int i = 0; i < 6; i++) // Placeholder skeletons while loading
{
<MudItem xs="12" sm="6" md="4">
<MudCard Class="my-2" Style="position:relative;">
<MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="200px" />
<MudCardContent>
<MudSkeleton Width="30%" Height="42px;" />
<MudSkeleton Width="80%" />
<MudSkeleton Width="100%" />
</MudCardContent>
<MudCardActions>
<MudSkeleton Width="64px" Height="40px" Class="ml-2" />
<MudSkeleton Width="105px" Height="40px" Class="ml-3" />
</MudCardActions>
<MudOverlay Visible="true" DarkBackground="true" Absolute="true">
<MudProgressCircular Color="Color.Secondary" Indeterminate="true" />
</MudOverlay>
</MudCard>
</MudItem>
}
</MudGrid>
}
else
{
<EventList Events="events" OnViewEvent="ViewEvent" OnSignUpToEvent="SignUpToEvent" OnShowInterestInEvent="ShowInterestInEvent" />
}

<!-- Pagination -->
<Pagination TotalItems="@totalItems" CurrentPage="@currentPage" PageSize="@pageSize"
Expand All @@ -44,6 +72,7 @@
private DateTime? endDate;
private readonly int[] pageSizeOptions = { 6, 9, 12 };
private bool _isAuthenticated;
private bool isLoading = false; // Loading indicator flag
protected override async Task OnInitializedAsync()
{
Expand All @@ -61,12 +90,11 @@

private async Task LoadEvents()
{
isLoading = true; // Start loading
try
{
// Check if filters are applied
if (string.IsNullOrWhiteSpace(searchQuery) && selectedCategory == null && !minPrice.HasValue && !maxPrice.HasValue && !startDate.HasValue && !endDate.HasValue)
{
// No filters applied, load all events paginated
var paginatedResult = await EventsService.GetPaginatedEventsAsync(currentPage, pageSize);
if (paginatedResult != null)
{
Expand All @@ -82,7 +110,6 @@
}
else
{
// Filters applied, use search command
var command = new SearchEvents
{
Name = searchQuery,
Expand Down Expand Up @@ -114,6 +141,10 @@
{
Snackbar.Add($"An error occurred: {ex.Message}", Severity.Error);
}
finally
{
isLoading = false; // Stop loading
}
}

private async Task PerformSearch()
Expand Down Expand Up @@ -152,7 +183,7 @@

await EventsService.SignUpToEventAsync(command);
Snackbar.Add("Successfully signed up for the event.", Severity.Success);
await LoadEvents(); // Refresh events to reflect the updated status
await LoadEvents();
}
catch (Exception ex)
{
Expand Down

0 comments on commit 3ddc9f2

Please sign in to comment.