@using Astrol.Component.Basic.Grid

@using Astrol.Component.Basic.Button

@using Astrol.Component.Basic.Confirm

@using Astrol.Entities.Basic.UI.Grid

@using Astrol.Entities.Basic.Response

@using Astrol.Entities.Basic.Static.Notification

@using Astrol.Entities.Basic.UI

@using Astrol.JSInterop.Base

@inject AstrolJSInterop jsI

<AstrolConfirm @ref="_conf" />

<AstrolGrid TItem="Client" PageSize="5" Data="dataList" @ref="_grid">

 <Columns>

 <Column Name="@nameof(Client.Id)" Title="Id" Width="20px" Sortable="true">

 @{<span>@context.Id</span>}

 </Column>

 <Column Name="@nameof(Client.FullName)" Title="Full name" Sortable="true" Filtrable="true" />

 <Column ClassHead="blue-head" ClassRow="blue-row" Name="@nameof(Client.Points)" Title="Points" Sortable="true" Filtrable="true" />

 <Column Name="@nameof(Client.MaritialStatus)" Title="Maritial status" Sortable="true" Filtrable="true" />

 <Column Name="@nameof(Client.Sex)" Title="Sex" Width="80px" Sortable="true" Filtrable="true" />

 <Column Name="@nameof(Client.Age)" Title="Age" Sortable="false" Filtrable="true" />

 <Column Name="@nameof(Client.RegistrationDate)" Title="Date" Sortable="true" Filtrable="true" />

 <Column Title="Options" Width="30px">

 <AstrolButton Icon="astrol-trash" Style="AstrolStyle.Red" OnClick="x=>DeleteItem(context)" />

 </Column>

 </Columns>

</AstrolGrid>

<style>

 .blue-head {

 background: #0094ff31;

 }

 .blue-row {

 background: #0094ff12;

 }

</style>

@code {

 private AstrolGrid<Client> _grid;

 private AstrolConfirm _conf;

 private List<Client> dataList = new List<Client> {

 new Client { Id = 1, Points= 34.56F, Name = "Juan", Surnames = "Pérez", Sex = true, MaritialStatus = MaritialStatus.Widower, Age = 25, RegistrationDate = new DateTime(2022, 1, 1) },

 new Client { Id = 2, Points= 23.14F, Name = "María", Surnames = "García", Sex = false, MaritialStatus = MaritialStatus.Married, Age = 32, RegistrationDate = new DateTime(2021, 3, 15) },

 new Client { Id = 3, Points= 36.32F, Name = "Pedro", Surnames = "Rodríguez", Sex = true, Age = 45, MaritialStatus = MaritialStatus.Single, RegistrationDate = new DateTime(2020, 6, 30) },

 new Client { Id = 4, Points= 56.09F , Name = "Laura", Surnames = "Fernández", Sex = false, Age = 19, MaritialStatus = MaritialStatus.Divorced,RegistrationDate = new DateTime(2022, 2, 28) },

 new Client { Id = 5, Points= 12.05F, Name = "Carlos", Surnames = "Sánchez", Sex = true, Age = 56,MaritialStatus = MaritialStatus.Married, RegistrationDate = new DateTime(2019, 12, 1) },

 new Client { Id = 6,Points= 15.26F, Name = "Ana", Surnames = "Gómez", Age = 29, Sex = false, RegistrationDate = new DateTime(2021, 7, 10) },

 new Client { Id = 7,Points= 14.34F , Name = "Pablo", Surnames = "Martínez", Sex = true, Age = 41, MaritialStatus = MaritialStatus.Married, RegistrationDate = new DateTime(2022, 4, 5) },

 new Client { Id = 8,Points= 5.2F, Name = "Lucía", Surnames = "Jiménez", Age = 22,Sex = false, RegistrationDate = new DateTime(2023, 1, 2) },

 new Client { Id = 9,Points= 88.53F, Name = "Javier", Surnames = "Hernández",Sex = true, Age = 37,MaritialStatus = MaritialStatus.Married, RegistrationDate = new DateTime(2022, 9, 15) },

 new Client { Id = 10,Points= 45.23F , Name = "Sofía", Surnames = "Ruiz",Sex = false, Age = 28, RegistrationDate = new DateTime(2023, 3, 20) },

 new Client { Id = 11,Points= 32.54F, Name = "Miguel", Surnames = "López",Sex = true, Age = 60, MaritialStatus = MaritialStatus.Other, RegistrationDate = new DateTime(2020, 5, 11) },

 new Client { Id = 12,Points= 14.52F, Name = "Carmen", Surnames = "González",Sex = false, Age = 31, RegistrationDate = new DateTime(2021, 11, 16) },

 new Client { Id = 13,Points= 78.8F, Name = "Antonio", Surnames = "Santos",Sex = true, Age = 48, RegistrationDate = new DateTime(2020, 3, 7) },

 new Client { Id = 14,Points= 65.456F, Name = "Isabel", Surnames = "Ortega",Sex = false, Age = 20,MaritialStatus = MaritialStatus.Other, RegistrationDate = new DateTime(2022, 7, 31) },

 new Client { Id = 15,Points= 56, Name = "David", Surnames = "Ramírez",Sex = true,Age = 43, RegistrationDate = new DateTime(2019, 10, 25) },

 new Client { Id = 16,Points= 34.01F, Name = "Raquel", Surnames = "Pardo",Sex = false, Age = 26,MaritialStatus = MaritialStatus.Other, RegistrationDate = new DateTime(2021, 2, 14) },

 };

 private async Task DeleteItem(Client item) {

 var confirmed = await _conf.Confirmation("Are you sure?", "You want to delete the item..");

 if (confirmed) {

 dataList.Remove(item);

 await jsI.Notification("Item removed successfully.".NotificationError());

 await _grid.RefreshGrid();

 }

 }

 public class Client {

 public int Id { get; set; }

 public string? Name { get; set; }

 public bool Sex { get; set; }

 public string? Surnames { get; set; }

 public int Age { get; set; }

 public float Points { get; set; }

 public DateTime RegistrationDate { get; set; }

 public MaritialStatus MaritialStatus { get; set; }

 public string FullName => $"{Name} {Surnames}";

 }

 public enum MaritialStatus {

 Single,

 Married,

 Divorced,

 Widower,

 Other

 }

}