-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/refactor customers page #897
Changes from 5 commits
9eada7d
d662a10
f3ef808
202e496
554872d
9c70811
546f383
681ebdb
7d3d0f6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -22,60 +22,33 @@ | |
@Localizer["CustomersPage.AddCustomer"] | ||
</TextAdjuster> | ||
</MudButton> | ||
|
||
<MudTable Items="@AllCustomers" | ||
Hover="true" | ||
Loading="@Loading" | ||
Striped="true" | ||
Dense="true" | ||
Elevation="4" | ||
Filter="new Func<CustomerModel, bool>(FilterCustomer)" | ||
@bind-SelectedItem="_selectedCustomer" | ||
SortLabel="@Localizer["Common.SortBy"]" | ||
OnRowClick="NavigateOnRowClick" | ||
T="CustomerModel" | ||
Class="cursor-pointer"> | ||
<ToolBarContent> | ||
<MudTextField @bind-Value="_customerSearchString" Immediate="true" Placeholder="Søk" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0 pl-6"></MudTextField> | ||
</ToolBarContent> | ||
<HeaderContent> | ||
<MudTh> | ||
<MudTableSortLabel SortBy="new Func<CustomerModel, object>(x => x.Name)">Navn</MudTableSortLabel> | ||
</MudTh> | ||
<MudTh> | ||
<MudTableSortLabel SortBy="new Func<CustomerModel, object>(x => x.ContactPerson)">Kontaktperson</MudTableSortLabel> | ||
</MudTh> | ||
<MudTh> | ||
<MudTableSortLabel SortBy="new Func<CustomerModel, object>(x => x.ContactEmail)">Epost</MudTableSortLabel> | ||
</MudTh> | ||
<MudTh> | ||
<MudTableSortLabel SortBy="new Func<CustomerModel, object>(x => x.ContactPhone)">Telefon</MudTableSortLabel> | ||
</MudTh> | ||
<MudTh> | ||
<MudTableSortLabel SortBy="new Func<CustomerModel, object>(x => x.InvoiceAddress)">Fakturaaddresse</MudTableSortLabel> | ||
</MudTh> | ||
<MudTh> | ||
<MudTableSortLabel SortBy="new Func<CustomerModel, object>(x => x.OrgNr)">OrgNr</MudTableSortLabel> | ||
</MudTh> | ||
</HeaderContent> | ||
<RowTemplate> | ||
<MudTd DataLabel="Name">@context.Name</MudTd> | ||
<MudTd DataLabel="ContactPerson">@context.ContactPerson</MudTd> | ||
<MudTd DataLabel="ContactEmail">@context.ContactEmail</MudTd> | ||
<MudTd DataLabel="ContactPhone">@context.ContactPhone</MudTd> | ||
<MudTd DataLabel="InvoiceAddress">@context.InvoiceAddress</MudTd> | ||
<MudTd DataLabel="OrgNr">@context.OrgNr</MudTd> | ||
<MudTd> | ||
@* <MudButton Variant="Variant.Text" Size="Size.Small" OnClick="@(() => ShowCustomerDetails(context.Name))">@(context.ShowDetails ? "\u25b2" : "\u25bc") Prosjekter</MudButton> *@ | ||
</MudTd> | ||
</RowTemplate> | ||
<PagerContent> | ||
<MudTablePager | ||
PageSizeOptions="new[] { int.MaxValue, 20, 10 }" | ||
AllItemsText="@Localizer["Common.Pagination.All"]" | ||
RowsPerPageString="@Localizer["CustomerPage.Pagination.PerPage"]"/> | ||
</PagerContent> | ||
</MudTable> | ||
<MudTextField | ||
Value="@_customerSearchString" | ||
Immediate="true" | ||
ValueChanged="@(new Func<string, Task>(OnFilterChanged))" | ||
Placeholder="Søk" | ||
Adornment="Adornment.Start" | ||
AdornmentIcon="@Icons.Material.Filled.Search" | ||
IconSize="Size.Medium" | ||
Class="my-4"> | ||
</MudTextField> | ||
<MudPaper | ||
Elevation="0" | ||
Class="d-flex flex-wrap justify-start gap-8"> | ||
@if (FilteredCustomers is not null) | ||
{ | ||
@foreach (var customer in FilteredCustomers) | ||
{ | ||
<CustomerCard | ||
ActionLabel="@Localizer["Common.NavigateTo"]" | ||
OnActionPress="@(() => Navigation.NavigateTo($"/kunder/{customer.Id}"))" | ||
CustomerName="@customer.Name" | ||
ProjectCount="@customer.Projects?.Count" | ||
ContactPerson="@customer.ContactPerson"> | ||
</CustomerCard> | ||
} | ||
} | ||
</MudPaper> | ||
|
||
@code { | ||
[Inject] private HttpClient HttpClient { get; set; } | ||
|
@@ -84,9 +57,8 @@ | |
[Inject] NavigationManager Navigation { get; set; } | ||
|
||
private string _customerSearchString = ""; | ||
private CustomerModel? _selectedCustomer; | ||
private CustomerModel? _customerBeforeEdit; | ||
private HashSet<CustomerModel>? AllCustomers { get; set; } | ||
private HashSet<CustomerModel>? FilteredCustomers { get; set; } | ||
|
||
private bool Loading => AllCustomers == null; | ||
|
||
|
@@ -105,6 +77,7 @@ | |
if (customerResponse.IsSuccessStatusCode) | ||
{ | ||
AllCustomers = (await customerResponse.Content.ReadFromJsonAsync<HashSet<CustomerModel>>())?.OrderBy(c => c.Id).ToHashSet(); | ||
FilteredCustomers = [..AllCustomers ?? []]; | ||
} | ||
} | ||
catch (AccessTokenNotAvailableException exception) | ||
|
@@ -123,14 +96,14 @@ | |
private void AddEmptyCustomer() | ||
{ | ||
DialogService.ShowAsync<CustomerDialog>(@Localizer["CustomersPage.AddCustomer"], new DialogParameters | ||
{ | ||
["OnCustomerSubmit"] = RefreshAfterDialogAction | ||
}, | ||
new DialogOptions() | ||
{ | ||
FullWidth = true, | ||
MaxWidth = MaxWidth.Small | ||
} | ||
{ | ||
["OnCustomerSubmit"] = RefreshAfterDialogAction | ||
}, | ||
new DialogOptions() | ||
{ | ||
FullWidth = true, | ||
MaxWidth = MaxWidth.Small | ||
} | ||
); | ||
} | ||
|
||
|
@@ -139,89 +112,32 @@ | |
await RefreshCustomers(); | ||
StateHasChanged(); | ||
})); | ||
|
||
private async Task CustomerChangeCommitted() | ||
private void NavigateToCustomer(int customerId) | ||
{ | ||
try | ||
{ | ||
if (_selectedCustomer is { Id: 0 }) | ||
{ | ||
await HttpClient.PostAsJsonAsync(ApiRoutes.CustomersBase, _selectedCustomer.MapToCustomerUpsertRequest()); | ||
} | ||
else | ||
{ | ||
await HttpClient.PutAsJsonAsync(ApiRoutes.UpdateCustomer(_selectedCustomer!.Id), _selectedCustomer!.MapToCustomerUpsertRequest()); | ||
} | ||
|
||
await RefreshCustomers(); | ||
} | ||
catch (HttpResponseException) | ||
{ | ||
ResetCustomerToOriginalValues(_selectedCustomer); | ||
} | ||
|
||
StateHasChanged(); | ||
Navigation.NavigateTo($"/kunder/{customerId}"); | ||
} | ||
|
||
private void BackupCustomer(object customer) | ||
private Task OnFilterChanged(string value) | ||
{ | ||
_customerBeforeEdit = new CustomerModel | ||
{ | ||
Name = ((CustomerModel)customer).Name, | ||
ContactEmail = ((CustomerModel)customer).ContactEmail, | ||
ContactPerson = ((CustomerModel)customer).ContactPerson, | ||
ContactPhone = ((CustomerModel)customer).ContactPhone, | ||
InvoiceAddress = ((CustomerModel)customer).InvoiceAddress, | ||
OrgNr = ((CustomerModel)customer).OrgNr, | ||
}; | ||
_customerSearchString = value; | ||
FilterCustomers(); | ||
return Task.CompletedTask; | ||
} | ||
|
||
private void ResetCustomerToOriginalValues(object? customer) | ||
private void FilterCustomers() | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Kan den gamle FilterCustomer-metoden fjernes? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. godt fanget opp. den skal bort. fikser. |
||
{ | ||
if (_customerBeforeEdit == null) | ||
{ | ||
return; | ||
} | ||
|
||
if (customer == null) | ||
{ | ||
if (_selectedCustomer == null) | ||
{ | ||
return; | ||
} | ||
|
||
customer = _selectedCustomer; | ||
} | ||
if (AllCustomers == null) return; | ||
|
||
if (_selectedCustomer!.Id == 0) | ||
{ | ||
UndoNewCustomer(); | ||
} | ||
|
||
((CustomerModel)customer).Name = _customerBeforeEdit!.Name; | ||
((CustomerModel)customer).ContactEmail = _customerBeforeEdit.ContactEmail; | ||
((CustomerModel)customer).ContactPerson = _customerBeforeEdit.ContactPerson; | ||
((CustomerModel)customer).ContactPhone = _customerBeforeEdit.ContactPhone; | ||
((CustomerModel)customer).InvoiceAddress = _customerBeforeEdit.InvoiceAddress; | ||
((CustomerModel)customer).OrgNr = _customerBeforeEdit.OrgNr; | ||
_customerBeforeEdit = null; | ||
} | ||
FilteredCustomers = AllCustomers | ||
.Where(customer => | ||
string.IsNullOrWhiteSpace(_customerSearchString) || | ||
customer.Name.Contains(_customerSearchString, StringComparison.OrdinalIgnoreCase) || | ||
customer.ContactEmail.Contains(_customerSearchString, StringComparison.OrdinalIgnoreCase) || | ||
customer.ContactPerson.Contains(_customerSearchString, StringComparison.OrdinalIgnoreCase)) | ||
.ToHashSet(); | ||
|
||
private void UndoNewCustomer() | ||
{ | ||
AllCustomers!.Remove(_selectedCustomer!); | ||
StateHasChanged(); | ||
} | ||
|
||
private void ShowCustomerDetails(string name) | ||
{ | ||
var customer = AllCustomers!.First(e => e.Name == name); | ||
customer.ShowDetails = !customer.ShowDetails; | ||
} | ||
|
||
private void NavigateOnRowClick(TableRowClickEventArgs<CustomerModel> selectedCustomer) | ||
{ | ||
Navigation.NavigateTo($"/kunder/{selectedCustomer.Item.Id}"); | ||
} | ||
|
||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
@namespace Alvtime.Adminpanel.Client.Shared.Components | ||
@using Alvtime.Adminpanel.Client.Resources | ||
@using Microsoft.Extensions.Localization | ||
@inherits ComponentBase | ||
@inject IStringLocalizer<SharedContentStrings> Localizer | ||
|
||
<MudCard | ||
Elevation="2" | ||
Style="width: 200px;"> | ||
<MudAvatar | ||
Class="align-self-center ma-4" | ||
Color="Color.Secondary" | ||
Style="width: 80px; height: 80px; "> | ||
@if (AvatarImageUrl is not null) | ||
{ | ||
// Add image stuff | ||
} | ||
else if (AvatarIconUrl is not null) | ||
{ | ||
<MudIcon | ||
Icon="@AvatarIconUrl" | ||
Style="font-size: 4rem;"/> | ||
} | ||
else if (CustomerName is null) | ||
{ | ||
<MudIcon | ||
Icon="@Icons.Material.Filled.NoAccounts" | ||
Style="font-size: 4rem;"/> | ||
} | ||
else | ||
{ | ||
<TextAdjuster> | ||
<MudText Typo="Typo.button" Style="font-size: 2rem;">@Initials</MudText> | ||
</TextAdjuster> | ||
} | ||
|
||
</MudAvatar> | ||
<MudCardContent | ||
Class="mb-4" | ||
Style="text-wrap: wrap; text-align: center;"> | ||
<MudText Typo="Typo.body1" Style="font-size: 1.5rem;">@CustomerName</MudText> | ||
@if (ProjectCount is not null) | ||
{ | ||
var projectLabel = ProjectCount == 1 ? "Common.Project" : "Common.Projects"; | ||
var localizedLabel = Localizer[projectLabel]; | ||
|
||
if (!string.IsNullOrEmpty(localizedLabel)) | ||
{ | ||
<MudText | ||
Typo="Typo.body1" | ||
Class="mb-4" | ||
> | ||
@ProjectCount @localizedLabel.ToString().ToLower() | ||
</MudText> | ||
} | ||
} | ||
|
||
@if (!string.IsNullOrWhiteSpace(ContactPerson)) | ||
{ | ||
<MudText Typo="Typo.caption">@Localizer["Common.ContactPerson"]</MudText> | ||
<MudText Typo="Typo.body1">@ContactPerson</MudText> | ||
} | ||
|
||
</MudCardContent> | ||
|
||
<MudCardActions | ||
Class="align-self-center"> | ||
<MudButton | ||
Color="Color.Secondary" | ||
OnClick="@OnActionPress"> | ||
<TextAdjuster> | ||
@ActionLabel | ||
</TextAdjuster> | ||
</MudButton> | ||
</MudCardActions> | ||
</MudCard> | ||
|
||
@code { | ||
[Parameter] public RenderFragment? CustomerCardAvatarImage { get; set; } | ||
[Parameter] public EventCallback OnActionPress { get; set; } | ||
[Parameter] public string ActionLabel { get; set; } = ""; | ||
[Parameter] public string? AvatarImageUrl { get; set; } | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Regner med at flere av disse parameterene er tenkt til å tas i bruk senere? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. korrekt |
||
[Parameter] public string? AvatarIconUrl { get; set; } | ||
[Parameter] public string? CustomerName { get; set; } | ||
[Parameter] public string? ContactPerson { get; set; } | ||
[Parameter] public int? ProjectCount { get; set; } | ||
|
||
private string Initials => GetInitialsFromName(CustomerName); | ||
|
||
// known company suffixes and other words, for exclusion in initial generator | ||
private static readonly HashSet<string> CompanySuffixes = new HashSet<string>(StringComparer.OrdinalIgnoreCase) | ||
{ | ||
"AS", "ASA", "ANS", "DA", "BA", "ENK", "SE", "FKF", "IKS", "KF", "KS", "NUF", "SA", "SF", "OG", "&" | ||
}; | ||
|
||
// generates initials for use with the avatar, in the case on no image or icon is provided | ||
private string GetInitialsFromName(string? name) | ||
{ | ||
if (string.IsNullOrWhiteSpace(name)) return string.Empty; | ||
|
||
// split the name into words and filter out company suffixes | ||
var words = name.Split(' ', StringSplitOptions.RemoveEmptyEntries) | ||
.Where(w => !CompanySuffixes.Contains(w.ToUpper())) | ||
.ToArray(); | ||
|
||
if (words.Length == 0) | ||
return string.Empty; | ||
|
||
if (words.Length > 1) | ||
{ | ||
// if there are multiple words (excluding suffixes), return the first letter of the first two words | ||
return $"{words[0][0]}{words[1][0]}".ToUpper(); | ||
} | ||
else | ||
{ | ||
// if there is only one word left, return the first two letters | ||
return words[0].Length > 1 ? words[0][..2].ToUpper() : words[0].ToUpper(); | ||
} | ||
} | ||
|
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Brukes denne metoden lenger?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
planen er å bruke den straks.