customer page - table layout

src/PolarisDesk.API/Services/CustomerServiceMock.cs

@@ -29,8 +29,8 @@ public Task<Customer[]> GetList()
             var testCustomers = new Faker<Customer>()
 
                 .RuleFor(o => o.ID, f => f.Random.Guid())
-                .RuleFor(o => o.Description, f => f.Company.CompanyName(1))
-                .RuleFor(o => o.Description2, f => f.Company.CompanySuffix())
+                .RuleFor(o => o.Name, f => f.Company.CompanyName(1))
+                .RuleFor(o => o.Description, f => f.Company.CompanySuffix())
                 .RuleFor(o => o.Created, f => f.Date.Recent(5))
                 .RuleFor(o => o.Updated, f => f.Date.Recent(2))
                 .RuleFor(o => o.Address, f => f.Address.FullAddress())

src/PolarisDesk.Web/Pages/Customers.razor

@@ -1,37 +1,47 @@
 @page "/customers"
+
 @attribute [Authorize]
 @inject HttpClient Http
 
-<MudPaper Elevation="2" Class="mt-16 px-8" Style="height: 100%" MaxWidth="MaxWidth.False">
-    <MudSimpleTable Hover="true">
-        <thead>
-            <tr>
-                @*<th>Id</th>*@
-                <th>Name</th>
-                <th>Address</th>
-                <th>City</th>
-            </tr>
-        </thead>
-        <tbody>
-            @if (currentCustomer == null && customers != null)
-            {
-                @foreach (var customer in customers)
-                {
-                    <tr>
-                        @*<td>@customer.ID</td>*@
-                        <td>@customer.Description</td>
-                        <td>@customer.Address</td>
-                        <td>@customer.City</td>
-                    </tr>
-                }
-            }
-            s
-        </tbody>
-    </MudSimpleTable>
-</MudPaper>
+@if (currentCustomer == null && customers != null)
+{
+
+    <MudTable Items="@customers" Dense="@dense" Hover="@hover" Filter="new Func<Customer,bool>(FilterFunc)">
+        <ToolBarContent>
+            <MudText Typo="Typo.h6">Customers</MudText>
+            <MudToolBarSpacer />
+            <MudTextField @bind-Value="search_string" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+        </ToolBarContent>
+        <HeaderContent>
+            <MudTh>Name</MudTh>
+            <MudTh>Description</MudTh>
+            <MudTh>Address</MudTh>
+            <MudTh>City</MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd DataLabel="Name">@context.Name</MudTd>
+            <MudTd DataLabel="Description">@context.Description</MudTd>
+            <MudTd DataLabel="Address">@context.Address</MudTd>
+            <MudTd DataLabel="City">@context.City</MudTd>
+        </RowTemplate>
+        <PagerContent>
+            <MudTablePager />
+        </PagerContent>
+    </MudTable>
+    @*<MudSwitch @bind-Checked="@hover" Color="Color.Primary">Hover</MudSwitch>
+        <MudSwitch @bind-Checked="@dense" Color="Color.Secondary">Dense</MudSwitch>*@
+    @*<MudText Inline="true">Selected: @selected_item?.Name</MudText>*@
+
+}
 
 @code
 {
+
+    bool dense = false;
+    bool hover = true;
+    bool fixed_header = false;
+    string search_string = "";
+
     private Customer[] customers;
     private Customer currentCustomer;
 
@@ -46,7 +56,19 @@
         customers = await Http.GetFromJsonAsync<Customer[]>("https://localhost:44312/api/customers");
     }
 
+    bool FilterFunc(Customer element)
+    {
+        if (string.IsNullOrWhiteSpace(search_string))
+            return true;
+        if (element.Name.Contains(search_string))
+            return true;
+        if (element.Description.Contains(search_string))
+            return true;
+        return false;
+    }
+
 
 }
 
 
+