Inventaire

BlazorApp/BlazorApp/Components/AvailableItem.razor

@@ -0,0 +1,32 @@
+<CascadingValue Value="@this">
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+
+                <div>Available items:</div>
+                <div>
+                    <div class="css-grid">
+
+                        @foreach (var item in Items)
+                        {
+                                <grid>
+                                    <tr>
+                                        <td>
+
+                                            <img src="data:image/png;base64, @(item.ImageBase64)" class="img-thumbnail" title="@item.DisplayName" alt="@item.DisplayName" style="min-width: 50px; max-width: 50px"/>
+                                        </td>
+                                        <td class="txt">
+                                            @item.DisplayName
+                                        </td>
+                                    </tr>
+                                </grid>
+
+
+                            }
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</CascadingValue>

BlazorApp/BlazorApp/Components/AvailableItem.razor.cs

@@ -0,0 +1,25 @@
+using System;
+using BlazorApp.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace BlazorApp.Components
+{
+    public partial class AvailableItem
+    {
+        public Item CurrentDragItem { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; }
+
+        /// <summary>
+        /// Gets or sets the java script runtime.
+        /// </summary>
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
+    }
+}
+

BlazorApp/BlazorApp/Components/AvailableItem.razor.css

@@ -0,0 +1,18 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
+.css-grid {
+    grid-template-columns: repeat(1,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 286px;
+}
+.txt {
+    width: 1000px;
+}
+img {
+    margin: 10px;
+}

BlazorApp/BlazorApp/Pages/Index.razor.cs

@@ -31,4 +31,3 @@ namespace BlazorApp.Pages
         }
     }
 }
-

BlazorApp/BlazorApp/Pages/Inventory.razor

@@ -1,11 +1,13 @@
 @page "/inventory"
 @using BlazorApp.Components;
+@using BlazorApp.Pages;
+@using BlazorApp.Models;
 
-
+<div class="inventory">
     <h3>Inventory</h3>
 
-
     <div class="css-grid">
+
         <CraftingItem Index="0" />
         <CraftingItem Index="1" />
         <CraftingItem Index="2" />
@@ -36,7 +38,38 @@
         <CraftingItem Index="26" />
         -->
     </div>
+</div>
+<div class="available-items">
+
+    <div class="search-container">
+        <form action="/action_page.php">
+            <h3>Available Items</h3>
+            <input type="text" placeholder="Search" name="search"/>
+            <button type="submit"><i class="fa fa-search"></i></button>
+        </form>
+    </div>
+
+    <DataGrid TItem="Item"
+              Data="@Items"
+              ReadData="@OnReadData"
+              TotalItems="@totalItem"
+              PageSize="10"
+              ShowPager
+              Sortable="true">
 
-<div>
-    <AvailableItem Items="Items"/>
+        <button type="submit" @onclick="() => SortByName()"></button>
+        <DataGridColumn TItem="Item" Field="@nameof(Item.Id)">
+            <DisplayTemplate>
+                @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
+                {
+                    <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
+                }
+                else
+                {
+                    <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
+                }
+            </DisplayTemplate>
+        </DataGridColumn>
+        <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)"/>
+    </DataGrid>
 </div>

BlazorApp/BlazorApp/Pages/Inventory.razor.cs

@@ -2,6 +2,8 @@
 using BlazorApp.Components;
 using BlazorApp.Models;
 using BlazorApp.Services;
+using Blazorise;
+using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 
 namespace BlazorApp.Pages
@@ -13,6 +15,8 @@ namespace BlazorApp.Pages
 
         public List<Item> Items { get; set; } = new List<Item>();
 
+        private int totalItem;
+
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             base.OnAfterRenderAsync(firstRender);
@@ -26,6 +30,25 @@ namespace BlazorApp.Pages
 
             StateHasChanged();
         }
+
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                Items = await DataService.List(e.Page, e.PageSize);
+                totalItem = await DataService.Count();
             }
         }
 
+        private async Task SortByName(DataGridReadDataEventArgs<Item> e)
+        {
+            Items = await DataService.SortedList();
+        }
+    }
+}

BlazorApp/BlazorApp/Pages/Inventory.razor.css

@@ -2,5 +2,32 @@
     grid-template-columns: repeat(6,minmax(0,1fr));
     gap: 10px;
     display: grid;
-    width: 40%;
+}
+.inventory {
+    float: left;
+}
+.search-container h3 {
+    float: left;
+    margin-right: 94px;
+}
+input[type=text] {
+    padding: 6px;
+    margin-top: 8px;
+    font-size: 17px;
+}
+.search-container button {
+    float: right;
+    padding: 6px 10px;
+    margin-top: 8px;
+    margin-right: 16px;
+    background: #ddd;
+    font-size: 17px;
+    cursor: pointer;
+}
+.search-container button:hover {
+    background: #ccc;
+}
+.available-items {
+    float: right;
+    width: 50%;
 }

BlazorApp/BlazorApp/Services/DataApiService.cs

@@ -56,6 +56,18 @@ namespace BlazorApp.Services
         {
             return await _http.GetFromJsonAsync<List<CraftingRecipe>>("https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/recipe");
         }
+
+
+        // A CHANGER
+        /*
+        public async Task<List<Item>> SortedList(List<Item> items)
+        {
+
+
+            List<Item> it = await _http.GetFromJsonAsync<List<Item>>($"https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/");
+            return it.Sort();
+
+        }
+        */
     }
 }
-

BlazorApp/BlazorApp/Services/IDataService.cs

@@ -14,7 +14,7 @@ namespace BlazorApp.Services
         Task Update(int id, ItemModel itemModel);
         Task Delete(int id);
         Task<List<CraftingRecipe>> GetRecipes();
-
+        Task<List<Item>> SortedList();
     }
 }