Merge pull request #104 from NielsPilgaard/user-profile

User profile

src/web/Client/Features/Profile/ChildProfileCard.razor

@@ -0,0 +1,26 @@
+<MudCard Elevation="3">
+    <MudCardContent>
+        <MudImage Src="@Child.PictureUrl" />
+        <MudTextField Label="Navn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AccountCircle" ReadOnly T="string" Text="@($"{Child.FirstName} {Child.LastName}")" />
+        @if (Child.DateOfBirth is not null)
+        {
+            <MudTextFieldExtended Label="Alder" ReadOnly T="string">
+                <AdornmentStart>
+                  <MudIcon Color="Color.Default" Icon="@Icons.Material.Filled.Cake" Class="mr-2" />
+                  <MudText Color="Color.Default">@Child.GetAge() år</MudText>
+                </AdornmentStart>
+                <AdornmentEnd>
+                    <MudText Color="Color.Default">@Child.DateOfBirth.Value.ToString("d")</MudText>
+                </AdornmentEnd>
+            </MudTextFieldExtended>
+        }
+        <MudTextField Label="Køn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" ReadOnly T="string" Text="@Child.Gender.GetDisplayName()" />
+        <MudText Typo="Typo.body1" Class="mt-3">@Child.Description</MudText>
+    </MudCardContent>
+</MudCard>
+
+@code
+{
+    [Parameter]
+    public required ChildProfileDto Child { get; set; }
+}

src/web/Client/Features/Profile/UserProfileCard.razor

@@ -0,0 +1,30 @@
+<MudCard Elevation="3">
+    <MudCardContent>
+        <MudImage ObjectPosition="ObjectPosition.Left" ObjectFit="ObjectFit.Fill" Style="border-radius: 50%" Src="@Profile.ProfilePictureUrl" />
+        <MudTextField Label="Brugernavn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AlternateEmail" ReadOnly T="string" Text="@UserName" />
+        <MudTextField Label="Område" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Place" ReadOnly T="string" Text="@Profile.DisplayLocation()" />
+        <MudTextField Label="Navn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AccountCircle" ReadOnly T="string" Text="@($"{Profile.FirstName} {Profile.LastName}")" />
+        @if (Profile.DateOfBirth is not null)
+        {
+            <MudTextFieldExtended Label="Alder" ReadOnly T="string">
+                <AdornmentStart>
+                  <MudIcon Color="Color.Default" Icon="@Icons.Material.Filled.Cake" Class="mr-2" />
+                  <MudText Color="Color.Default">@Profile.GetAge() år</MudText>
+                </AdornmentStart>
+                <AdornmentEnd>
+                    <MudText Color="Color.Default">@Profile.DateOfBirth.Value.ToString("d")</MudText>
+                </AdornmentEnd>
+            </MudTextFieldExtended>
+        }
+        <MudText Class="mt-3" Typo="Typo.body1">@Profile.Description</MudText>
+    </MudCardContent>
+</MudCard>
+
+@code
+{
+    [Parameter]
+    public required string UserName { get; set; }
+
+    [Parameter]
+    public required ProfileDto Profile { get; set; }
+}

src/web/Client/Features/UserSearch/UserSearchResultComponent.razor

@@ -10,59 +10,39 @@
         @foreach (var user in SearchResult.Users)
         {
             <MudItem xs="12" sm="8" md="6" lg="4" xl="4">
-                <MudNavLink OnClick="()=>SaveScrollPosition(user)">
+                <MudNavLink  Class="card-link" OnClick="()=>SaveScrollPosition(user)">
                     <MudCard Class="pa-3 my-3" Elevation="3">
                         <MudCardContent>
-                            <MudGrid>
-                                <MudItem xs="12" Class="d-flex justify-center">
-                                    <MudImage Fluid Width="200" Style="border-radius: 50%" Src="@user.ProfilePictureUrl" />
-                                </MudItem>
+                            <MudImage Fluid Width="200" Style="border-radius: 50%" Src="@user.ProfilePictureUrl" />
+                            <MudTextField Label="Brugernavn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AlternateEmail" ReadOnly T="string" Text="@user.UserName" />
+                            <MudTextField Label="Område" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Place" ReadOnly T="string" Text="@user.DisplayLocation()" />
+                            <MudTextField Label="Navn" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AccountCircle" ReadOnly T="string" Text="@($"{user.FirstName} {user.LastName}")" />
 
-                                <MudItem xs="12">
-                                    <MudTextField Adornment="Adornment.Start" AdornmentText="@("@")" T="string" Text="@user.UserName" ReadOnly />
-                                </MudItem>
+                            @if (user.Children.Any())
+                            {
+                                <MudText Class="my-4" Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
+                                <MudChipSet ReadOnly Class="d-flex flex-wrap justify-start flex-grow-1 gap-3">
+                                    @foreach (var child in user.Children.OrderBy(c => c.DateOfBirth))
+                                    {
+                                        <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="GetAgeString(child)">
+                                            <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
+                                        </MudBadge>
+                                    }
+                                </MudChipSet>
+                            }
 
-                                <MudItem xs="12">
-                                    <MudTextField AdornmentIcon="@Icons.Material.Filled.Place" Adornment="Adornment.Start" T="string" Text="@user.DisplayLocation()" ReadOnly />
-                                </MudItem>
-                                <MudItem xs="12">
-                                    <MudTextField Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" T="string" Text="@($"{user.FirstName} {user.LastName}".TrimEnd())" ReadOnly />
-                                </MudItem>
+                            @if (user.LookingFor.Any())
+                            {
+                                <MudDivider />
 
-                                @if (user.Children.Any())
-                                {
-                                    <MudItem xs="12">
-                                        <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
-                                    </MudItem>
-                                    <MudItem xs="12">
-                                        <MudChipSet ReadOnly Class="d-flex flex-wrap justify-start flex-grow-1 gap-3">
-                                            @foreach (var child in user.Children.OrderBy(c => c.DateOfBirth))
-                                            {
-                                                <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="GetAgeString(child)">
-                                                    <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
-                                                </MudBadge>
-                                            }
-                                        </MudChipSet>
-                                    </MudItem>
-                                }
-
-                                @if (user.LookingFor.Any())
-                                {
-                                  <MudDivider />
-
-                                    <MudItem xs="12">
-                                        <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
-                                    </MudItem>
-                                    <MudItem xs="12">
-                                        <MudChipSet ReadOnly Class="d-flex flex-wrap justify-start flex-grow-1">
-                                            @foreach (var lookingFor in user.LookingFor)
-                                            {
-                                                <MudChip Color="Color.Tertiary">@lookingFor</MudChip>
-                                            }
-                                        </MudChipSet>
-                                    </MudItem>
-                                }
-                            </MudGrid>
+                                <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
+                                <MudChipSet ReadOnly Class="d-flex flex-wrap justify-start flex-grow-1">
+                                    @foreach (var lookingFor in user.LookingFor)
+                                    {
+                                        <MudChip Color="Color.Tertiary">@lookingFor</MudChip>
+                                    }
+                                </MudChipSet>
+                            }
                         </MudCardContent>
                     </MudCard>
                 </MudNavLink>

src/web/Client/Pages/Profile/Profile.razor

@@ -16,50 +16,32 @@
     {
         return;
     }
-    <MudPaper Elevation="3" Class="pa-4">
+    <MudPaper Elevation="1" Class="pa-4">
         <MudGrid>
-            <MudItem xs="12" Class="d-flex justify-start">
-                <MudImage ObjectPosition="ObjectPosition.Left" ObjectFit="ObjectFit.Fill" Style="border-radius: 50%" Src="@_profile.ProfilePictureUrl" />
-            </MudItem>
-
             <MudItem xs="12">
-                <MudTextField Adornment="Adornment.Start" AdornmentText="@("@")" T="string" Text="@UserName" ReadOnly />
-            </MudItem>
-
-            <MudItem xs="12">
-                <MudTextField AdornmentIcon="@Icons.Material.Filled.Place" Adornment="Adornment.Start" T="string" Text="@_profile.DisplayLocation()" ReadOnly />
-            </MudItem>
-            <MudItem xs="12">
-                <MudTextField Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Person" T="string" Text="@($"{_profile.FirstName} {_profile.LastName}")" ReadOnly />
-            </MudItem>
-            <MudItem xs="12">
-                <MudText Typo="Typo.body1">
-                    @_profile.Description
-                </MudText>
+                <UserProfileCard Profile="_profile" UserName="UserName" />
             </MudItem>
 
             @if (_profile.ChildProfiles.Any())
             {
-                <MudItem xs="12">
-                    <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.ChildCare" />Børn</MudText>
-                </MudItem>
-                <MudItem xs="12" Class="d-flex justify-start">
-                    <MudChipSet ReadOnly>
-                    @foreach (var child in _profile.ChildProfiles)
-                        {
-                            <MudBadge Color="Color.Success" Overlap Origin="Origin.TopCenter" Content="child.GetAge()">
-                                <MudChip Color="Color.Primary">@child.FirstName @child.LastName</MudChip>
-                            </MudBadge>
-                        }
-                    </MudChipSet>
-                </MudItem>
+                <MudDivider Class="my-5" />
+                <MudText Typo="Typo.h5" Class="d-sm-none mt-3">
+                    <MudIcon Class="mx-2" Icon="@Icons.Material.Filled.ChildCare" />Børn
+                </MudText>
+
+                foreach (var child in _profile.ChildProfiles)
+                {
+                    <MudItem xs="12" sm="6" md="4" lg="3">
+                        <ChildProfileCard Child="child" />
+                    </MudItem>
+                }
             }
 
             @if (_profile.LookingFor.Any())
             {
-              <MudDivider />
-              <MudItem xs="12">
-                    <MudText Typo="Typo.h6"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
+                <MudDivider Class="my-5" />
+                <MudItem xs="12">
+                    <MudText Typo="Typo.h5"><MudIcon Class="mr-2" Icon="@Icons.Material.Filled.Star" />Interesseret i</MudText>
                 </MudItem>
                 <MudItem xs="12" Class="d-flex justify-start">
                     <MudChipSet ReadOnly>

src/web/Client/wwwroot/css/app.css

@@ -109,3 +109,6 @@ h1:focus {
 .mud-card:hover {
   transform: scale(1.02);
 }
+.card-link .mud-nav-link:hover:not(.mud-nav-link-disabled) {
+  background-color: unset !important;
+}

src/web/Client/wwwroot/js/scroll.js

@@ -1,6 +1,8 @@
 window.scrollFunctions = {
   saveScrollPosition: function () {
-    sessionStorage.setItem('scrollPosition', window.scrollY);
+    if (window.scrollY > 0) {
+      sessionStorage.setItem('scrollPosition', window.scrollY);
+    }
   },
   loadScrollPosition: function () {
     setTimeout(function () {

src/web/Server/Database/DatabaseInitialyzer.cs

@@ -39,7 +39,7 @@ public static async Task InsertFakeUsersAsync(
             .RuleFor(cp => cp.LastName, f => f.Name.LastName())
             .RuleFor(cp => cp.Gender, f => f.PickRandom<Gender>())
             .RuleFor(cp => cp.DateOfBirth, f => f.Date.Between(DateTime.UtcNow.AddYears(-14), DateTime.UtcNow))
-            .RuleFor(cp => cp.Description, f => f.Lorem.Sentence())
+            .RuleFor(cp => cp.Description, f => f.Lorem.Paragraphs(f.Random.Int(1, 5)))
             .RuleFor(cp => cp.PictureUrl, f => f.Internet.Avatar());
 
         var userFaker = new Faker<UserProfile>("nb_NO")
@@ -51,7 +51,7 @@ public static async Task InsertFakeUsersAsync(
             .RuleFor(u => u.Address, f => f.Address.StreetAddress())
             .RuleFor(u => u.ZipCode, f => f.Random.Int(1000, 9991))
             .RuleFor(u => u.City, f => f.Address.City())
-            .RuleFor(u => u.Description, f => f.Lorem.Sentence())
+            .RuleFor(u => u.Description, f => f.Lorem.Paragraphs(f.Random.Int(1, 5)))
             .RuleFor(u => u.LookingFor,
                 f => lookingFor
                     .OrderBy(_ => f.Random.Int(0, lookingFor.Count))

src/web/Shared/Profile/ChildProfileDto.cs

@@ -0,0 +1,18 @@
+namespace Jordnaer.Shared;
+
+public class ChildProfileDto
+{
+    public required string FirstName { get; set; }
+
+    public string? LastName { get; set; }
+
+    public Gender Gender { get; set; }
+
+    public DateTime? DateOfBirth { get; set; }
+
+    public string? Description { get; set; }
+
+    public string PictureUrl { get; set; } = ProfileConstants.Default_Profile_Picture;
+
+    public int? GetAge() => DateOfBirth.GetAge();
+}

src/web/Shared/Profile/DTO/ProfileDto.cs

@@ -18,9 +18,7 @@ public class ProfileDto
 
     public List<LookingFor> LookingFor { get; set; } = new();
 
-    public List<ChildProfile> ChildProfiles { get; set; } = new();
-
-    public List<UserProfile> Contacts { get; set; } = new();
+    public List<ChildProfileDto> ChildProfiles { get; set; } = new();
 
     public DateTime? DateOfBirth { get; set; }
 

src/web/Shared/Profile/Extensions/ChildProfileExtensions.cs

@@ -2,7 +2,6 @@ namespace Jordnaer.Shared;
 
 public static class ChildProfileExtensions
 {
-
     public static void LoadValuesFrom(this ChildProfile mapInto, ChildProfile mapFrom)
     {
         mapInto.CreatedUtc = mapFrom.CreatedUtc;
@@ -14,4 +13,15 @@ public static void LoadValuesFrom(this ChildProfile mapInto, ChildProfile mapFro
         mapInto.PictureUrl = mapFrom.PictureUrl;
         mapInto.Id = mapFrom.Id;
     }
+
+    public static ChildProfileDto ToChildProfileDto(this ChildProfile childProfile) =>
+        new()
+        {
+            FirstName = childProfile.FirstName,
+            LastName = childProfile.LastName,
+            Gender = childProfile.Gender,
+            PictureUrl = childProfile.PictureUrl,
+            DateOfBirth = childProfile.DateOfBirth,
+            Description = childProfile.Description
+        };
 }

src/web/Shared/Profile/Extensions/UserProfileExtensions.cs

@@ -22,21 +22,22 @@ public static UserProfile Map(this UserProfile dto)
             CreatedUtc = dto.CreatedUtc
         };
 
-    public static ProfileDto ToProfileDto(this UserProfile dto)
+    public static ProfileDto ToProfileDto(this UserProfile userProfile)
         => new()
         {
-            FirstName = dto.FirstName,
-            LastName = dto.LastName,
-            Address = dto.Address,
-            ChildProfiles = dto.ChildProfiles,
-            City = dto.City,
-            DateOfBirth = dto.DateOfBirth,
-            Description = dto.Description,
-            LookingFor = dto.LookingFor,
-            PhoneNumber = dto.PhoneNumber,
-            ZipCode = dto.ZipCode,
-            ProfilePictureUrl = dto.ProfilePictureUrl,
-            Contacts = dto.Contacts,
-            CreatedUtc = dto.CreatedUtc
+            FirstName = userProfile.FirstName,
+            LastName = userProfile.LastName,
+            Address = userProfile.Address,
+            ChildProfiles = userProfile.ChildProfiles
+                .Select(childProfile => childProfile.ToChildProfileDto())
+                .ToList(),
+            City = userProfile.City,
+            DateOfBirth = userProfile.DateOfBirth,
+            Description = userProfile.Description,
+            LookingFor = userProfile.LookingFor,
+            PhoneNumber = userProfile.PhoneNumber,
+            ZipCode = userProfile.ZipCode,
+            ProfilePictureUrl = userProfile.ProfilePictureUrl,
+            CreatedUtc = userProfile.CreatedUtc
         };
 }