initial pages for group crud

src/shared/Jordnaer.Shared/Extensions/GroupDtoExtensions.cs

@@ -0,0 +1,19 @@
+namespace Jordnaer.Shared;
+
+public static class GroupDtoExtensions
+{
+    public static string DisplayLocation(this GroupDto userDto)
+    {
+        if (userDto.ZipCode is not null && userDto.City is not null)
+        {
+            return $"{userDto.ZipCode}, {userDto.City}";
+        }
+
+        if (userDto.ZipCode is not null)
+        {
+            return userDto.ZipCode.ToString()!;
+        }
+
+        return userDto.City ?? "Område ikke angivet";
+    }
+}

src/web/Client/Pages/Groups/CreateGroup.razor

@@ -0,0 +1,7 @@
+@page "/groups/create"
+
+<h3>Opret Gruppe</h3>
+
+@code {
+
+}

src/web/Client/Pages/Groups/EditGroup.razor

@@ -0,0 +1,8 @@
+@page "/groups/edit/{GroupId:guid}"
+
+<h3>Redigér Gruppe</h3>
+
+@code {
+    [Parameter]
+    public Guid? GroupId { get; set; }
+}

src/web/Client/Pages/Groups/GroupDetails.razor

@@ -0,0 +1,14 @@
+@page "/groups/{GroupId:guid}"
+
+<h3>Gruppe detaljer</h3>
+
+@code {
+    [Parameter]
+    public Guid? GroupId { get; set; }
+
+    protected async override Task OnInitializedAsync()
+    {
+        // TODO: Fetch group from API
+    }
+
+}

src/web/Client/Pages/Groups/Groups.razor

@@ -1,41 +1,77 @@
 @page "/groups"
 @using Bogus
 
-<h1>Grupper</h1>
-<MudButton>Opret gruppe</MudButton>
+<h1 class="font-cherry-bomb-one">Grupper</h1>
+
+<MudButton Href="groups/create" Variant="Variant.Filled">Opret gruppe</MudButton>
 
 @if (_groups.Count > 0)
 {
-    <ul>
+    <MudGrid Justify="Justify.Center">
         @foreach (var group in _groups)
         {
-            <MudCard>
-                <MudCardContent>
-                    <MudGrid>
-                        <MudItem xs="12" md="6">
-                            <MudTextField ReadOnly Label="Display Name" @bind-Value="@group.Name" />
-                        </MudItem>
-                        <MudItem xs="12" md="6">
-                            <MudTextField ReadOnly Label="Description" @bind-Value="@group.ShortDescription" />
-                        </MudItem>
-                        <MudItem xs="12" md="6">
-                            <MudTextField ReadOnly Label="Member Count" @bind-Value="@group.MemberCount" />
-                        </MudItem>
-                    </MudGrid>
-                </MudCardContent>
-            </MudCard>
+            <MudItem xs="12" sm="8" md="6" lg="4" xl="4">
+                <MudNavLink Class="card-link" Href="@($"/groups/{group.Id}")">
+                    <MudCard Class="pa-3 my-3" Elevation="3">
+                        <MudCardContent Class="d-flex flex-column align-center">
+                            <MudTextField Label="Navn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AlternateEmail" ReadOnly T="string" Text="@group.Name" Class="mb-5"/>
+                            <MudImage Fluid Width="200" Style="border-radius: 50%" Src="@group.ProfilePictureUrl" loading="lazy"/>
+                            <MudTextField Label="Område" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Place" ReadOnly T="string" Text="@group.DisplayLocation()"/>
+
+                            @if (group.Categories.Any())
+                            {
+                                <MudDivider Class="my-4"/>
+
+                                <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star"/>Kategorier</MudText>
+                                <MudChipSet ReadOnly Class="d-flex flex-wrap justify-center flex-grow-1">
+                                    @foreach (var category in group.Categories)
+                                    {
+                                        <MudChip Color="Color.Tertiary">@category</MudChip>
+                                    }
+                                </MudChipSet>
+                            }
+                        </MudCardContent>
+                    </MudCard>
+                </MudNavLink>
+            </MudItem>
         }
-    </ul>
+    </MudGrid>
 }
 
 @code {
     private readonly List<GroupDto> _groups = _groupFaker.Generate(20);
 
+    private static readonly List<Category> Categories = new()
+    {
+        new Category {Name = "Legeaftaler"},
+        new Category {Name = "Legegrupper"},
+        new Category {Name = "Legestuer"},
+        new Category {Name = "Hjemmepasnings-grupper"},
+        new Category {Name = "Hjemmeundervisnings-grupper"},
+        new Category {Name = "Privat Dagpleje"},
+        new Category {Name = "Mødregrupper"},
+        new Category {Name = "Fædregrupper"},
+        new Category {Name = "Forældregrupper"},
+        new Category {Name = "Sportsaktiviteter"},
+        new Category {Name = "Andet"}
+    };
+
     private static readonly Faker<GroupDto> _groupFaker = new Faker<GroupDto>()
         .RuleFor(g => g.Id, f => Guid.NewGuid())
         .RuleFor(g => g.Name, f => f.Company.CompanyName())
+        .RuleFor(g => g.ProfilePictureUrl, f => f.Image.PicsumUrl())
         .RuleFor(g => g.ShortDescription, f => f.Lorem.Sentence())
+        .RuleFor(u => u.ZipCode, f => f.Random.Int(1000, 9991))
+        .RuleFor(u => u.City, f => f.Address.City())
         .RuleFor(g => g.Description, f => f.Lorem.Paragraph())
         .RuleFor(g => g.MemberCount, f => f.Random.Int(0, 300))
-        .RuleFor(g => g.CreatedUtc, f => f.Date.Past(3));
+        .RuleFor(g => g.CreatedUtc, f => f.Date.Past(3))
+        .RuleFor(u => u.Categories,
+            f => Categories
+                .OrderBy(_ => f.Random.Int(0, Categories.Count))
+                .Take(f.Random.Int(0, 4))
+                .Select(c => c.Name)
+                .ToList());
+
+
 }