Crud implemented by Contact

This commit is contained in:
2023-04-19 17:25:42 +02:00
parent 0234db870b
commit ede368b963
10 changed files with 334 additions and 31 deletions

View File

@ -1,5 +1,6 @@
@page "/contacts"
@inject NavigationManager NavigationManager
@inject HttpClient Http
<h3>Contacts</h3>
<SfGrid DataSource="GridData" AllowFiltering="true" Toolbar="@(new List<string>() {"Search"})">
@ -14,6 +15,15 @@
}
</Template>
</GridColumn>
<GridColumn Width="60">
<Template>
@{
var contact = context as Contact;
<SfButton CssClass="e-inherit" IconCss="e-icons e-delete"
OnClick="@(() => DeleteContact(contact!))"></SfButton>
}
</Template>
</GridColumn>
<GridColumn Field="FirstName" HeaderText="First Name"></GridColumn>
<GridColumn Field="LastName" HeaderText="Last Name"></GridColumn>
<GridColumn Field="NickName" HeaderText="Nick Name"></GridColumn>
@ -23,43 +33,108 @@
</SfGrid>
<p>
<SfButton IsPrimary="true" Content="Create New Contact" OnClick="CreateContact" />
</p>
<SfDialog Width="335px" IsModal="true" @bind-Visible="showDeleteDialog">
<DialogTemplates>
<Header>Are you sure?</Header>
<Content>
<p>Do you really want to delete @contactToDelete!.NickName</p>
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="Yep." IsPrimary="false" OnClick="ConfirmDeleteContact"></DialogButton>
<DialogButton Content="Nope." IsPrimary="true" OnClick="CancelDeleteContact"></DialogButton>
</DialogButtons>
<DialogAnimationSettings Effect="@DialogEffect.Zoom" ></DialogAnimationSettings>
</SfDialog>
@code {
Contact? contactToDelete;
public List<Contact> GridData { get; set; } = new List<Contact>
{
new Contact
{
Id = 1,
FirstName = "Peter",
LastName = "Parker",
NickName = "Spider-Man",
Place = "New York City",
DateOfBirth = new DateTime(2001, 8, 1),
DateCreated = DateTime.Now
},
new Contact
{
Id = 1,
FirstName = "Tony",
LastName = "Stark",
NickName = "Iron Man",
Place = "Malibu",
DateOfBirth = new DateTime(1970, 5, 29),
DateCreated = DateTime.Now
},
new Contact
{
Id = 1,
FirstName = "Bruce",
LastName = "Wayne",
NickName = "Batman",
Place = "Gotham City",
DateOfBirth = new DateTime(1915, 4, 7),
DateCreated = DateTime.Now
}
//new Contact
//{
// Id = 1,
// FirstName = "Peter",
// LastName = "Parker",
// NickName = "Spider-Man",
// Place = "New York City",
// DateOfBirth = new DateTime(2001, 8, 1),
// DateCreated = DateTime.Now
//},
//new Contact
//{
// Id = 1,
// FirstName = "Tony",
// LastName = "Stark",
// NickName = "Iron Man",
// Place = "Malibu",
// DateOfBirth = new DateTime(1970, 5, 29),
// DateCreated = DateTime.Now
//},
//new Contact
//{
// Id = 1,
// FirstName = "Bruce",
// LastName = "Wayne",
// NickName = "Batman",
// Place = "Gotham City",
// DateOfBirth = new DateTime(1915, 4, 7),
// DateCreated = DateTime.Now
//}
};
bool showDeleteDialog = false;
protected override async Task OnInitializedAsync()
{
var result = await Http.GetFromJsonAsync<List<Contact>>("api/contacts");
if(result is not null)
{
GridData = result;
}
}
void EditContact(int Id)
{
NavigationManager.NavigateTo($"contacts/edit/{Id}");
}
void CreateContact()
{
NavigationManager.NavigateTo($"contacts/new");
}
void DeleteContact(Contact contact)
{
contactToDelete = contact;
showDeleteDialog = true;
}
void CancelDeleteContact()
{
showDeleteDialog = false;
}
async Task ConfirmDeleteContact()
{
if(contactToDelete is null)
{
return;
}
showDeleteDialog = false;
var result = await Http.DeleteAsync($"api/contacts/{contactToDelete.Id}");
if (result.IsSuccessStatusCode)
{
var jsonResult = await result.Content.ReadFromJsonAsync<List<Contact>>();
if(jsonResult is not null)
{
GridData = jsonResult;
}
}
}
}