275 lines
12 KiB
Plaintext
275 lines
12 KiB
Plaintext
@page "/profile/personal-information"
|
|
@using System.ComponentModel.DataAnnotations
|
|
@using MudBlazor
|
|
@using Indotalent.Features.Profile.PersonalInformation
|
|
@using Indotalent.Features.Profile.PersonalInformation.Cqrs
|
|
@using Indotalent.ConfigBackEnd.Interfaces
|
|
@inject ISnackbar Snackbar
|
|
@inject PersonalInformationService PersonalInformationService
|
|
@inject ICurrentUserService CurrentUserService
|
|
|
|
<MudPaper Elevation="0" Square="true" Class="pa-6 mb-3 d-flex align-center justify-space-between">
|
|
<div>
|
|
<MudText Typo="Typo.h5" Style="font-weight: 900; color: #1a1a1a;">Personal Information</MudText>
|
|
<MudText Typo="Typo.body2" Style="color: #64748b;">Manage your personal details, contact information, and how others see you.</MudText>
|
|
</div>
|
|
|
|
<div class="d-flex align-center gap-2">
|
|
<MudIcon Icon="@Icons.Material.Filled.Home" Size="Size.Small" Color="Color.Default" />
|
|
<MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
|
|
<MudText Typo="Typo.caption" Style="color: #94a3b8;">Profile</MudText>
|
|
<MudText Typo="Typo.caption" Style="color: #94a3b8;">/</MudText>
|
|
<MudText Typo="Typo.caption" Style="font-weight: 600; color: #1a1a1a;">Personal Information</MudText>
|
|
</div>
|
|
</MudPaper>
|
|
|
|
<MudPaper Elevation="0" Outlined="true" Class="pa-8" Style="border-radius: 0px; background-color: #ffffff;">
|
|
<MudStack Spacing="8">
|
|
<MudGrid>
|
|
<MudItem xs="12" md="4">
|
|
<MudText Typo="Typo.h6" Class="fw-bold">Basic Profile</MudText>
|
|
<MudText Typo="Typo.body2">Your public identity and bio.</MudText>
|
|
</MudItem>
|
|
<MudItem xs="12" md="8">
|
|
<MudStack Spacing="4">
|
|
<MudGrid Spacing="2">
|
|
<MudItem xs="12" sm="6">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">First Name</MudText>
|
|
<MudTextField @bind-Value="user.FirstName" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
|
|
</MudItem>
|
|
<MudItem xs="12" sm="6">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Last Name</MudText>
|
|
<MudTextField @bind-Value="user.LastName" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Short Bio</MudText>
|
|
<MudTextField @bind-Value="user.Bio" Variant="Variant.Outlined" Lines="3" FullWidth="true" Margin="Margin.Dense" Placeholder="Tell us a little about yourself..." />
|
|
</div>
|
|
|
|
<MudGrid Spacing="2">
|
|
<MudItem xs="12" sm="6">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Job Title / Position</MudText>
|
|
<MudTextField @bind-Value="user.JobTitle" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
|
|
</MudItem>
|
|
<MudItem xs="12" sm="6">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Date of Birth</MudText>
|
|
<MudDatePicker @bind-Date="user.DateOfBirth" Variant="Variant.Outlined" Margin="Margin.Dense" Editable="true" />
|
|
</MudItem>
|
|
</MudGrid>
|
|
</MudStack>
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<MudDivider />
|
|
|
|
<MudGrid>
|
|
<MudItem xs="12" md="4">
|
|
<MudText Typo="Typo.h6" Class="fw-bold">Contact & Location</MudText>
|
|
<MudText Typo="Typo.body2">How we can reach you and where you're based.</MudText>
|
|
</MudItem>
|
|
<MudItem xs="12" md="8">
|
|
<MudStack Spacing="4">
|
|
<MudGrid Spacing="2">
|
|
<MudItem xs="12" sm="6">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Email Address</MudText>
|
|
<MudTextField @bind-Value="user.Contact.Email" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Email" Disabled="true" />
|
|
</MudItem>
|
|
<MudItem xs="12" sm="6">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Phone Number</MudText>
|
|
<MudTextField @bind-Value="user.Contact.Phone" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Phone" />
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Residential Address</MudText>
|
|
<MudTextField @bind-Value="user.Contact.Address" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Placeholder="Street name, Building, Apartment No." />
|
|
</div>
|
|
|
|
<MudGrid Spacing="2">
|
|
<MudItem xs="12" sm="4">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">City</MudText>
|
|
<MudTextField @bind-Value="user.Contact.City" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
|
|
</MudItem>
|
|
<MudItem xs="12" sm="4">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Country</MudText>
|
|
<MudTextField @bind-Value="user.Contact.Country" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
|
|
</MudItem>
|
|
<MudItem xs="12" sm="4">
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Postal Code</MudText>
|
|
<MudTextField @bind-Value="user.Contact.PostalCode" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" />
|
|
</MudItem>
|
|
</MudGrid>
|
|
</MudStack>
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<MudDivider />
|
|
|
|
<MudGrid>
|
|
<MudItem xs="12" md="4">
|
|
<MudText Typo="Typo.h6" Class="fw-bold">Social Profiles</MudText>
|
|
<MudText Typo="Typo.body2">Your professional and social networking links.</MudText>
|
|
</MudItem>
|
|
<MudItem xs="12" md="8">
|
|
<MudStack Spacing="4">
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">LinkedIn Profile</MudText>
|
|
<MudTextField @bind-Value="user.Socials.LinkedIn" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.LinkedIn" Placeholder="https://linkedin.com/in/username" />
|
|
</div>
|
|
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">GitHub / Portfolio</MudText>
|
|
<MudTextField @bind-Value="user.Socials.GitHub" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.GitHub" Placeholder="https://github.com/username" />
|
|
</div>
|
|
|
|
<div>
|
|
<MudText Typo="Typo.subtitle2" Class="mb-2">Instagram</MudText>
|
|
<MudTextField @bind-Value="user.Socials.Instagram" Variant="Variant.Outlined" FullWidth="true" Margin="Margin.Dense" Adornment="Adornment.Start" AdornmentIcon="@Icons.Custom.Brands.Instagram" Placeholder="@("@username")" />
|
|
</div>
|
|
</MudStack>
|
|
</MudItem>
|
|
</MudGrid>
|
|
|
|
<div class="d-flex justify-end align-center gap-4 mt-4">
|
|
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveProfile" Disabled="@_isProcessing">
|
|
@if (_isProcessing)
|
|
{
|
|
<MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
|
|
<MudText Class="ms-2">Saving...</MudText>
|
|
}
|
|
else
|
|
{
|
|
<MudText>Save Changes</MudText>
|
|
}
|
|
</MudButton>
|
|
</div>
|
|
</MudStack>
|
|
</MudPaper>
|
|
|
|
@code {
|
|
private bool _isProcessing = false;
|
|
private UserProfileModel user = new();
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
await LoadProfile();
|
|
}
|
|
|
|
private async Task LoadProfile()
|
|
{
|
|
var userId = CurrentUserService.UserId;
|
|
if (string.IsNullOrEmpty(userId)) return;
|
|
|
|
_isProcessing = true;
|
|
|
|
var response = await PersonalInformationService.GetPersonalInformationByIdAsync(userId);
|
|
|
|
if (response != null && response.IsSuccess && response.Value != null)
|
|
{
|
|
var profile = response.Value;
|
|
|
|
user = new UserProfileModel
|
|
{
|
|
FirstName = profile.FirstName ?? string.Empty,
|
|
LastName = profile.LastName ?? string.Empty,
|
|
Bio = profile.ShortBio ?? string.Empty,
|
|
JobTitle = profile.JobTitle ?? string.Empty,
|
|
DateOfBirth = profile.DateOfBirth,
|
|
Contact = new ContactModel
|
|
{
|
|
Email = profile.Email ?? string.Empty,
|
|
Phone = profile.PhoneNumber ?? string.Empty,
|
|
Address = profile.StreetAddress ?? string.Empty,
|
|
City = profile.City ?? string.Empty,
|
|
Country = profile.Country ?? string.Empty,
|
|
PostalCode = profile.ZipCode ?? string.Empty
|
|
},
|
|
Socials = new UserSocialModel
|
|
{
|
|
LinkedIn = profile.SocialMediaLinkedIn ?? string.Empty,
|
|
Instagram = profile.SocialMediaInstagram ?? string.Empty,
|
|
GitHub = profile.SocialMediaX ?? string.Empty
|
|
}
|
|
};
|
|
}
|
|
_isProcessing = false;
|
|
}
|
|
|
|
private async Task SaveProfile()
|
|
{
|
|
var userId = CurrentUserService.UserId;
|
|
if (string.IsNullOrEmpty(userId))
|
|
{
|
|
Snackbar.Add("User session not found.", Severity.Error);
|
|
return;
|
|
}
|
|
|
|
_isProcessing = true;
|
|
|
|
var updateRequest = new UpdateProfileRequest
|
|
{
|
|
Id = userId,
|
|
FirstName = user.FirstName,
|
|
LastName = user.LastName,
|
|
ShortBio = user.Bio,
|
|
JobTitle = user.JobTitle,
|
|
DateOfBirth = user.DateOfBirth,
|
|
PhoneNumber = user.Contact.Phone,
|
|
StreetAddress = user.Contact.Address,
|
|
City = user.Contact.City,
|
|
Country = user.Contact.Country,
|
|
ZipCode = user.Contact.PostalCode,
|
|
SocialMediaLinkedIn = user.Socials.LinkedIn,
|
|
SocialMediaInstagram = user.Socials.Instagram,
|
|
SocialMediaX = user.Socials.GitHub
|
|
};
|
|
|
|
var result = await PersonalInformationService.UpdatePersonalInformationAsync(updateRequest);
|
|
await Task.Delay(500);
|
|
|
|
if (result != null && result.IsSuccess)
|
|
{
|
|
Snackbar.Add("Profile updated! Please re-login to see all changes in the session.", Severity.Success, config =>
|
|
{
|
|
config.VisibleStateDuration = 5000;
|
|
});
|
|
|
|
}
|
|
else
|
|
{
|
|
Snackbar.Add(result?.Message ?? "Update failed", Severity.Error);
|
|
}
|
|
|
|
_isProcessing = false;
|
|
}
|
|
|
|
public class UserProfileModel
|
|
{
|
|
public string FirstName { get; set; } = string.Empty;
|
|
public string LastName { get; set; } = string.Empty;
|
|
public string Bio { get; set; } = string.Empty;
|
|
public string JobTitle { get; set; } = string.Empty;
|
|
public DateTime? DateOfBirth { get; set; }
|
|
public ContactModel Contact { get; set; } = new();
|
|
public UserSocialModel Socials { get; set; } = new();
|
|
}
|
|
|
|
public class ContactModel
|
|
{
|
|
public string Email { get; set; } = string.Empty;
|
|
public string Phone { get; set; } = string.Empty;
|
|
public string Address { get; set; } = string.Empty;
|
|
public string City { get; set; } = string.Empty;
|
|
public string Country { get; set; } = string.Empty;
|
|
public string PostalCode { get; set; } = string.Empty;
|
|
}
|
|
|
|
public class UserSocialModel
|
|
{
|
|
public string LinkedIn { get; set; } = string.Empty;
|
|
public string GitHub { get; set; } = string.Empty;
|
|
public string Instagram { get; set; } = string.Empty;
|
|
}
|
|
} |