Skip to content
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

Merged
merged 9 commits into from
Oct 11, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 53 additions & 137 deletions packages/adminpanel/Client/Pages/Customers/Customers.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -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;

Expand All @@ -105,6 +77,7 @@
if (customerResponse.IsSuccessStatusCode)
{
AllCustomers = (await customerResponse.Content.ReadFromJsonAsync<HashSet<CustomerModel>>())?.OrderBy(c => c.Id).ToHashSet();
FilteredCustomers = [..AllCustomers ?? []];
}
}
catch (AccessTokenNotAvailableException exception)
Expand All @@ -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
}
);
}

Expand All @@ -139,89 +112,32 @@
await RefreshCustomers();
StateHasChanged();
}));

private async Task CustomerChangeCommitted()
private void NavigateToCustomer(int customerId)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brukes denne metoden lenger?

Copy link
Contributor Author

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.

{
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()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kan den gamle FilterCustomer-metoden fjernes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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
Expand Up @@ -91,7 +91,7 @@
<value>Kunder</value>
</data>
<data name="CustomersPage.AddCustomer" xml:space="preserve">
<value>Legg til ny kunde</value>
<value>Ny kunde</value>
</data>
<data name="Common.OrgNr" xml:space="preserve">
<value>Org.nummer</value>
Expand Down Expand Up @@ -210,4 +210,7 @@
<data name="CustomerPage.EditHourRate" xml:space="preserve">
<value>Endre timerate</value>
</data>
<data name="Common.NavigateTo" xml:space="preserve">
<value>Gå til</value>
</data>
</root>
121 changes: 121 additions & 0 deletions packages/adminpanel/Client/Shared/components/CustomerCard.razor
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; }
Copy link
Contributor

Choose a reason for hiding this comment

The 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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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();
}
}

}
Loading
Loading