141 lines
4.2 KiB
Plaintext
141 lines
4.2 KiB
Plaintext
@page "/contacts"
|
|
@inject NavigationManager NavigationManager
|
|
@inject HttpClient Http
|
|
<h3>Contacts</h3>
|
|
|
|
<SfGrid DataSource="GridData" AllowFiltering="true" Toolbar="@(new List<string>() {"Search"})">
|
|
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
|
|
<GridColumns>
|
|
<GridColumn Width="60">
|
|
<Template>
|
|
@{
|
|
var contact = context as Contact;
|
|
<SfButton CssClass="e-inherit" IconCss="e-icons e-edit"
|
|
OnClick="@(() => EditContact(contact!.Id))"></SfButton>
|
|
}
|
|
</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>
|
|
<GridColumn Field="Place" HeaderText="Place"></GridColumn>
|
|
<GridColumn Field="DateOfBirth" HeaderText="Date Of Birth" Format="yyyy-MM-dd"></GridColumn>
|
|
</GridColumns>
|
|
|
|
</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
|
|
//}
|
|
};
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|