demo-contact/ui/Sufi.Demo.PeopleDirectory.UI/Client/Pages/Contacts.razor

@page "/contacts"

@inject HttpClient Http
@inject IDialogService DialogService
@inject ISnackbar Snackbar
@inject BoomerangService Boomerang

<PageTitle>Contact List</PageTitle>

<MudGrid Class="py-4">
	<MudItem xs="12">
		<MudText Typo="Typo.h3">Contact List</MudText>
	</MudItem>
	<MudItem xs="12">
		<MudText Typo="Typo.body1">Behold! Below is the list of all registered users in this application.</MudText>
		<MudText Typo="Typo.body1" Color="Color.Error">(All data will be deleted for every 10 minutes)</MudText>
	</MudItem>
	<MudItem xs="12" Class="d-flex gap-4">

		<MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="OnButtonCreateClicked">Create</MudButton>

		<MudSpacer />
		<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Refresh" OnClick="OnButtonRefreshClicked">Refresh</MudButton>

	</MudItem>
	<MudItem xs="12">
		@if (contacts != null && contacts.Length > 0)
		{
			<MudTable Items="@contacts" Hover Breakpoint="Breakpoint.Sm" Loading="@loading" LoadingProgressColor="Color.Info" Class="py-3">
				<HeaderContent>
					<MudTh>Id</MudTh>
					<MudTh>Username</MudTh>
					<MudTh>Phone</MudTh>
					<MudTh>Email</MudTh>
					<MudTh>Skill Sets</MudTh>
					<MudTh>Hobby</MudTh>
					<MudTh>Action</MudTh>
				</HeaderContent>
				<RowTemplate>
					<MudTd DataLabel="Id">@context.Id</MudTd>
					<MudTd DataLabel="Username">@context.UserName</MudTd>
					<MudTd DataLabel="Phone">@context.Phone</MudTd>
					<MudTd DataLabel="Email">@context.Email</MudTd>
					<MudTd DataLabel="Skill Sets">@context.SkillSets</MudTd>
					<MudTd DataLabel="Hobby">@context.Hobby</MudTd>
					<MudTd>
						<MudTooltip Text="Edit" Placement="Placement.Top" Arrow>
							<MudIconButton Icon="@Icons.Material.Filled.Edit" OnClick="() => OnEditContactClicked(context.Id)" Color="Color.Warning" Size="Size.Small" />
						</MudTooltip>
						<MudTooltip Text="Delete" Placement="Placement.Top" Arrow>
							<MudIconButton Icon="@Icons.Material.Filled.Delete" OnClick="() => OnDeleteContactClicked(context.Id)" Color="Color.Error" Size="Size.Small" />
						</MudTooltip>
					</MudTd>
				</RowTemplate>
				<PagerContent>
					<MudTablePager />
				</PagerContent>
			</MudTable>
		}
		else
		{
			<MudText Typo="Typo.h5">No item to display. Click on the 'Create' button to add.</MudText>
		}
	</MudItem>
</MudGrid>

<MudOverlay Visible="loading" DarkBackground ZIndex="9999">
	<MudProgressCircular Color="Color.Primary" Indeterminate />
</MudOverlay>

@code {
	private GetAllContactsResponse[]? contacts;
	private bool loading;

	protected override async Task OnInitializedAsync()
	{
		await LoadTableAsync();

		await Boomerang.AddVariableAsync("PageName", "Contacts");
		await Boomerang.SendBeaconAsync();
	}

	private async Task LoadTableAsync()
	{
		loading = true;

		var response = await Http.GetAsync("api/v1/contacts");
		var result = await response.ToResult<List<GetAllContactsResponse>>();

		if (result.Succeeded)
		{
			contacts = result.Data.ToArray();
		}
		else
		{
			contacts = null;

			foreach (var message in result.Messages)
			{
				Snackbar.Add(message, Severity.Error);
			}
		}

		loading = false;
	}

	private async Task OnButtonRefreshClicked()
	{
		await LoadTableAsync();
	}

	private async Task OnButtonCreateClicked()
	{
		var dialogOptions = new DialogOptions { BackdropClick = false, CloseButton = true };
		var dialog = await DialogService.ShowAsync<CreateContactDialog>("Create New Contact", dialogOptions);
		var dialogResult = await dialog.Result;

		if (dialogResult!.Canceled)
		{
			return;
		}

		loading = true;
		StateHasChanged();

		var contactData = (AddEditContactCommand)dialogResult.Data!;
		var response = await Http.PostAsJsonAsync("api/v1/contacts", contactData);
		var result = await response.ToResult<int>();

		if (result.Succeeded)
		{
			Snackbar.Add(result.Messages[0], Severity.Success);
			await LoadTableAsync();
		}
		else
		{
			foreach (var message in result.Messages)
			{
				Snackbar.Add(message, Severity.Error);
			}

			loading = false;
		}
	}

	async Task OnEditContactClicked(int id)
	{
		var dialogParams = new DialogParameters { ["Id"] = id };
		var dialogOptions = new DialogOptions { BackdropClick = false, CloseButton = true };
		var dialog = await DialogService.ShowAsync<EditContactDialog>("Edit Contact", dialogParams, dialogOptions);
		var dialogResult = await dialog.Result;
		if (dialogResult!.Canceled)
		{
			return;
		}

		loading = true;
		StateHasChanged();

		var contactData = (AddEditContactCommand)dialogResult.Data!;
		var response = await Http.PostAsJsonAsync("api/v1/contacts", contactData);
		var result = await response.ToResult<int>();

		if (result.Succeeded)
		{
			Snackbar.Add(result.Messages[0], Severity.Success);
			await LoadTableAsync();
		}
		else
		{
			foreach (var message in result.Messages)
			{
				Snackbar.Add(message, Severity.Error);
			}

			loading = false;
		}
	}
	async Task OnDeleteContactClicked(int id)
	{
		var dialogResult = await DialogService.ShowMessageBox("Delete Contact", "Confirm to delete the item? This action cannot be undone.", yesText: "Delete!", cancelText: "No");
		if (dialogResult == null)
		{
			return;
		}

		loading = true;
		StateHasChanged();

		var deleteResponse = await Http.DeleteAsync($"api/v1/contacts/{id}");
		if (deleteResponse.IsSuccessStatusCode)
		{
			var result = await deleteResponse.ToResult();
			if (result!.Succeeded)
			{
				Snackbar.Add("Contact deleted successfully.", Severity.Success);
				await LoadTableAsync();
			}
			else
			{
				Snackbar.Add(result.Messages[0], Severity.Error);
			}
		}
		else
		{
			Snackbar.Add("An error has occurred.", Severity.Error);
			loading = false;
		}
	}
}