From 023fad9b5e038c25cbc81091cbf6596232ea57b7 Mon Sep 17 00:00:00 2001
From: majean5 <mathilde.jean3@etu.uca.fr>
Date: Wed, 7 Dec 2022 10:16:42 +0100
Subject: [PATCH] Inventaire

---
 .../BlazorApp/Components/AvailableItem.razor  |  32 ++++++
 .../Components/AvailableItem.razor.cs         |  25 +++++
 .../Components/AvailableItem.razor.css        |  18 ++++
 BlazorApp/BlazorApp/Pages/Index.razor         |   2 +-
 BlazorApp/BlazorApp/Pages/Index.razor.cs      |   3 +-
 BlazorApp/BlazorApp/Pages/Inventory.razor     | 101 ++++++++++++------
 BlazorApp/BlazorApp/Pages/Inventory.razor.cs  |  27 ++++-
 BlazorApp/BlazorApp/Pages/Inventory.razor.css |  29 ++++-
 BlazorApp/BlazorApp/Pages/List.razor.cs       |   2 +-
 .../BlazorApp/Services/DataApiService.cs      |  16 ++-
 BlazorApp/BlazorApp/Services/IDataService.cs  |   2 +-
 11 files changed, 213 insertions(+), 44 deletions(-)
 create mode 100644 BlazorApp/BlazorApp/Components/AvailableItem.razor
 create mode 100644 BlazorApp/BlazorApp/Components/AvailableItem.razor.cs
 create mode 100644 BlazorApp/BlazorApp/Components/AvailableItem.razor.css

diff --git a/BlazorApp/BlazorApp/Components/AvailableItem.razor b/BlazorApp/BlazorApp/Components/AvailableItem.razor
new file mode 100644
index 0000000..a9b6b82
--- /dev/null
+++ b/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>
diff --git a/BlazorApp/BlazorApp/Components/AvailableItem.razor.cs b/BlazorApp/BlazorApp/Components/AvailableItem.razor.cs
new file mode 100644
index 0000000..106a7ab
--- /dev/null
+++ b/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; }
+
+    }
+}
+
diff --git a/BlazorApp/BlazorApp/Components/AvailableItem.razor.css b/BlazorApp/BlazorApp/Components/AvailableItem.razor.css
new file mode 100644
index 0000000..d4c6709
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Index.razor b/BlazorApp/BlazorApp/Pages/Index.razor
index 7ae5c1c..532a52a 100644
--- a/BlazorApp/BlazorApp/Pages/Index.razor
+++ b/BlazorApp/BlazorApp/Pages/Index.razor
@@ -45,4 +45,4 @@
 
 <div>
     <Crafting Items="Items" Recipes="Recipes" />
-</div>
+</div>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Index.razor.cs b/BlazorApp/BlazorApp/Pages/Index.razor.cs
index c55312f..0922a7b 100644
--- a/BlazorApp/BlazorApp/Pages/Index.razor.cs
+++ b/BlazorApp/BlazorApp/Pages/Index.razor.cs
@@ -30,5 +30,4 @@ namespace BlazorApp.Pages
             StateHasChanged();
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor b/BlazorApp/BlazorApp/Pages/Inventory.razor
index 68cc6c8..4ead9fd 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor
@@ -1,42 +1,75 @@
 @page "/inventory"
 @using BlazorApp.Components;
+@using BlazorApp.Pages;
+@using BlazorApp.Models;
 
+<div class="inventory">
+    <h3>Inventory</h3>
 
-<h3>Inventory</h3>
+    <div class="css-grid">
 
-
-<div class="css-grid">
-    <CraftingItem Index="0" />
-    <CraftingItem Index="1" />
-    <CraftingItem Index="2" />
-    <CraftingItem Index="3" />
-    <CraftingItem Index="4" />
-    <CraftingItem Index="5" />
-    <CraftingItem Index="6" />
-    <CraftingItem Index="7" />
-    <CraftingItem Index="8" />
-    <CraftingItem Index="9" />
-    <CraftingItem Index="10" />
-    <CraftingItem Index="11" />
-    <CraftingItem Index="12" />
-    <CraftingItem Index="13" />
-    <CraftingItem Index="14" />
-    <CraftingItem Index="15" />
-    <CraftingItem Index="16" />
-    <CraftingItem Index="17" />
-    <!--
-    <CraftingItem Index="18" />
-    <CraftingItem Index="19" />
-    <CraftingItem Index="20" />
-    <CraftingItem Index="21" />
-    <CraftingItem Index="22" />
-    <CraftingItem Index="23" />
-    <CraftingItem Index="24" />
-    <CraftingItem Index="25" />
-    <CraftingItem Index="26" />
-    -->
+        <CraftingItem Index="0" />
+        <CraftingItem Index="1" />
+        <CraftingItem Index="2" />
+        <CraftingItem Index="3" />
+        <CraftingItem Index="4" />
+        <CraftingItem Index="5" />
+        <CraftingItem Index="6" />
+        <CraftingItem Index="7" />
+        <CraftingItem Index="8" />
+        <CraftingItem Index="9" />
+        <CraftingItem Index="10" />
+        <CraftingItem Index="11" />
+        <CraftingItem Index="12" />
+        <CraftingItem Index="13" />
+        <CraftingItem Index="14" />
+        <CraftingItem Index="15" />
+        <CraftingItem Index="16" />
+        <CraftingItem Index="17" />
+        <!--
+        <CraftingItem Index="18" />
+        <CraftingItem Index="19" />
+        <CraftingItem Index="20" />
+        <CraftingItem Index="21" />
+        <CraftingItem Index="22" />
+        <CraftingItem Index="23" />
+        <CraftingItem Index="24" />
+        <CraftingItem Index="25" />
+        <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>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
index 6c32433..ca82231 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
+++ b/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();
+        }
+    }
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor.css b/BlazorApp/BlazorApp/Pages/Inventory.razor.css
index 1b5ace6..fd341b9 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor.css
+++ b/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%;
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/List.razor.cs b/BlazorApp/BlazorApp/Pages/List.razor.cs
index 12909a1..845f6a8 100644
--- a/BlazorApp/BlazorApp/Pages/List.razor.cs
+++ b/BlazorApp/BlazorApp/Pages/List.razor.cs
@@ -89,4 +89,4 @@ namespace BlazorApp.Pages
             NavigationManager.NavigateTo("list", true);
         }
     }
-}
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Services/DataApiService.cs b/BlazorApp/BlazorApp/Services/DataApiService.cs
index 51cc446..19e473b 100644
--- a/BlazorApp/BlazorApp/Services/DataApiService.cs
+++ b/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();
+
+        }
+        */
+    }
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Services/IDataService.cs b/BlazorApp/BlazorApp/Services/IDataService.cs
index c040c68..a39928c 100644
--- a/BlazorApp/BlazorApp/Services/IDataService.cs
+++ b/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();
     }
 }