initial commit
This commit is contained in:
@@ -0,0 +1,105 @@
|
||||
@using Indotalent.Features.Thirdparty.Customer
|
||||
@using Indotalent.Features.Thirdparty.Customer.Cqrs
|
||||
@using MudBlazor
|
||||
@using Features.Root.Shared
|
||||
@inject CustomerService CustomerService
|
||||
@inject IDialogService DialogService
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<MudPaper Elevation="0" Outlined="true" Style="border-radius: 12px; border: 1px solid #E5E7EB;">
|
||||
<div style="padding: 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff;">
|
||||
<MudText Typo="Typo.button" Color="Color.Primary" Style="font-weight: 600;">Customer Contacts</MudText>
|
||||
@if (!ReadOnly)
|
||||
{
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="OnAddClick" Size="Size.Small" Style="text-transform: none; font-weight: 500; border-radius: 6px;">
|
||||
Add Contact
|
||||
</MudButton>
|
||||
}
|
||||
</div>
|
||||
|
||||
<MudTable Class="mud-table-styled" Striped="true" Items="Contacts" Hover="true" Elevation="0" Dense="true" T="CustomerContactItemResponse">
|
||||
<HeaderContent>
|
||||
<MudTh Style="font-weight: 500; letter-spacing: 0.05em;">Name</MudTh>
|
||||
<MudTh Style="font-weight: 500; letter-spacing: 0.05em;">Job Title</MudTh>
|
||||
<MudTh Style="font-weight: 500; letter-spacing: 0.05em;">Contact Info</MudTh>
|
||||
<MudTh Style="font-weight: 500; letter-spacing: 0.05em;">Description</MudTh>
|
||||
@if (!ReadOnly)
|
||||
{
|
||||
<MudTh Style="width: 100px; text-align: right; font-weight: 500; letter-spacing: 0.05em;">Actions</MudTh>
|
||||
}
|
||||
</HeaderContent>
|
||||
<RowTemplate>
|
||||
<MudTd DataLabel="Name">
|
||||
<div class="d-flex flex-column">
|
||||
<MudText Typo="Typo.body2" Style="font-weight: 600;">@context.Name</MudText>
|
||||
<MudText Typo="Typo.caption" Style="color: #9CA3AF;">@context.AutoNumber</MudText>
|
||||
</div>
|
||||
</MudTd>
|
||||
<MudTd DataLabel="Job">@context.JobTitle</MudTd>
|
||||
<MudTd DataLabel="Contact">
|
||||
<div class="d-flex flex-column">
|
||||
<MudText Typo="Typo.caption" Style="color: #3B82F6;">@context.EmailAddress</MudText>
|
||||
<MudText Typo="Typo.caption">@context.PhoneNumber</MudText>
|
||||
</div>
|
||||
</MudTd>
|
||||
<MudTd DataLabel="Description">@context.Description</MudTd>
|
||||
@if (!ReadOnly)
|
||||
{
|
||||
<MudTd Style="text-align: right;">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" Color="Color.Primary" OnClick="@(() => OnEditClick(context))" />
|
||||
<MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error" OnClick="@(() => OnDeleteClick(context))" />
|
||||
</MudTd>
|
||||
}
|
||||
</RowTemplate>
|
||||
</MudTable>
|
||||
</MudPaper>
|
||||
|
||||
<style>
|
||||
.mud-table-styled .mud-table-row:hover { background-color: #F9FAFB !important; }
|
||||
.mud-table-styled .mud-table-cell { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6B7280; font-size: 0.875rem; }
|
||||
.mud-table-styled .mud-table-cell .mud-text-body2 { font-weight: 600; color: #374151; }
|
||||
.mud-input-outlined-border { border-radius: 8px !important; }
|
||||
.custom-select-dense .mud-input-control { margin-top: 0 !important; }
|
||||
.custom-select-dense .mud-input-slot { padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 8px !important; font-size: 12px !important; }
|
||||
</style>
|
||||
|
||||
@code {
|
||||
[Parameter] public string CustomerId { get; set; } = string.Empty;
|
||||
[Parameter] public List<CustomerContactItemResponse> Contacts { get; set; } = new();
|
||||
[Parameter] public bool ReadOnly { get; set; } = false;
|
||||
[Parameter] public EventCallback OnChanged { get; set; }
|
||||
|
||||
private async Task OnAddClick()
|
||||
{
|
||||
var parameters = new DialogParameters { ["CustomerId"] = CustomerId };
|
||||
var options = new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true, CloseButton = true };
|
||||
var dialog = await DialogService.ShowAsync<_CustomerContactCreateForm>("Add Customer Contact", parameters, options);
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled) await OnChanged.InvokeAsync();
|
||||
}
|
||||
|
||||
private async Task OnEditClick(CustomerContactItemResponse item)
|
||||
{
|
||||
var parameters = new DialogParameters { ["Data"] = item };
|
||||
var options = new DialogOptions { MaxWidth = MaxWidth.Small, FullWidth = true, CloseButton = true };
|
||||
var dialog = await DialogService.ShowAsync<_CustomerContactUpdateForm>("Edit Customer Contact", parameters, options);
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled) await OnChanged.InvokeAsync();
|
||||
}
|
||||
|
||||
private async Task OnDeleteClick(CustomerContactItemResponse item)
|
||||
{
|
||||
var parameters = new DialogParameters { ["ContentText"] = $"Are you sure you want to remove {item.Name} from contacts?" };
|
||||
var dialog = await DialogService.ShowAsync<_DeleteConfirmation>("Delete Confirmation", parameters, new DialogOptions { MaxWidth = MaxWidth.ExtraSmall, FullWidth = true });
|
||||
var result = await dialog.Result;
|
||||
if (result != null && !result.Canceled)
|
||||
{
|
||||
var success = await CustomerService.DeleteCustomerContactAsync(item.Id!);
|
||||
if (success)
|
||||
{
|
||||
Snackbar.Add("Contact removed successfully", Severity.Success);
|
||||
await OnChanged.InvokeAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user