Finish Liste element

ValblazeProject/Pages/Inventaire.razor

@@ -3,6 +3,9 @@
 @using ValblazeProject.Components
 @using ValblazeProject.Models
 
+<link href="/path/to/bootstrap.min.css" rel="stylesheet">
+<link href="dist/css/component-custom-switch.css" rel="stylesheet">
+
 <main class="contentInvent">
     <div class="inventaire">
         <h3>Inventaire</h3>
@@ -18,17 +21,20 @@
         <div class="toolSearch">
             <label>
                 Recherche: 
-                <input type="text" @bind-value="search" name="searchBar" />
+                <input type="text" @bind-value="search"/>
+            </label>
+            <label class="LabelFiltre">
+                Trie:
+                <input class="filtre" @bind-value="trieActive" onclick="@TrieChanged" type="checkbox">
             </label>
-            <button class="filtre"></button>
         </div>
-        
 
         <DataGrid TItem="Item"
                   Data="@items"
                   ReadData="@OnReadData"
                   TotalItems="@totalItem"
                   PageSize="@totalSizeByPage"
+                  
                   @ref="dataGrid"
                   ShowPager
                   Responsive>

ValblazeProject/Pages/Inventaire.razor.cs

@@ -17,6 +17,7 @@ namespace ValblazeProject.Pages
 {
     public partial class Inventaire
     {
+        /******************* Initialisation des attributs *******************/
         private List<Item> items;
         private int totalItem;
 
@@ -38,40 +39,66 @@ namespace ValblazeProject.Pages
         public IModalService Modal { get; set; }
 
         private DataGrid<Item> dataGrid;
-
-
         private string _searchText;
-
         private int totalSizeByPage = 10;
+        private bool _trie = false;
+        
 
-        public string search
+        /******************* Attribut modifier *******************/
+        private string search
         {
             get { return _searchText; }
             set
             {
-                _searchText = value;
-                OnSearch();
-            } 
+                if(_searchText != value )
+                {
+                    _searchText = value;
+                    SearchTextChange();
+                }               
+            }
         }
 
-        public async Task OnSearch()
+        private bool trieActive
         {
-            List<Item> maListe = await DataService.List();
-            items.Clear();
-            foreach(var item in maListe)
+            get { return _trie; }
+            set
             {
-                if(item.DisplayName == null || string.IsNullOrEmpty(_searchText) || item.DisplayName.Contains(_searchText))
+                if (_trie != value)
                 {
-                    items.Add(item);
+                    _trie = value;
+                    TrieChanged();
                 }
             }
-            totalItem = items.Count;
-            int pageCourante = dataGrid.CurrentPage;
-            items = items.Skip((pageCourante - 1) * totalSizeByPage).Take(totalSizeByPage).ToList();
+        }
+
+        /******************* Méthodes *******************/
+        /// <summary>
+        /// Trie par ordre alphabétique 
+        /// </summary>
+        /// <returns></returns>
+        public async Task TrieChanged()
+        {
+            await dataGrid.Reload();
             StateHasChanged();
         }
 
 
+        /// <summary>
+        /// Méthode de recherche
+        /// </summary>
+        /// <returns></returns>
+        public async Task SearchTextChange()
+        {
+            dataGrid.CurrentPage = 1;
+            await dataGrid.Reload();
+            StateHasChanged();
+        }
+
+        /// <summary>
+        /// Initialisation des données via un service
+        /// </summary>
+        /// <param name="e"></param>
+        /// <returns></returns>
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
@@ -81,15 +108,34 @@ namespace ValblazeProject.Pages
 
             if (!e.CancellationToken.IsCancellationRequested)
             {
-                if (string.IsNullOrEmpty(_searchText))
+                /* Il est important de découper le processus en 3 étapes: 
+                    1. le filtre
+                    2. le tri
+                    3. la pagination
+                */
+
+                items = await DataService.List();
+                //totalItem = items.Count();
+
+                // Search
+                if (!string.IsNullOrEmpty(_searchText))
                 {
-                    items = await DataService.List(e.Page, e.PageSize);
-                    totalItem = await DataService.Count();
+                    //await OnSearch();
+                    items = items.Where(i => i.DisplayName.Contains(_searchText)).ToList();
                 }
-                else
+
+                // Trie
+                if (_trie)
                 {
-                    await OnSearch();
+                    items = items.OrderBy(i => i.DisplayName).ToList();
+                    //await SortByName();
                 }
+
+                // Gestion pagination
+                totalItem = items.Count;
+                int pageCourante = dataGrid.CurrentPage;
+                items = items.Skip((pageCourante - 1) * totalSizeByPage).Take(totalSizeByPage).ToList();
+                StateHasChanged();
             }
         }
 

ValblazeProject/Pages/Inventaire.razor.css

@@ -20,13 +20,12 @@
     margin-top: 10px;
 }
 
-.filtre {
+.LabelFiltre {
+    display: flex;
     margin-left: 25px;
-    border: none;
+}
+
+.filtre {
     width: 42px;
     height: 32px;
-    background-image: url(https://cdn-icons-png.flaticon.com/512/21/21229.png);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-color: transparent;
 }

ValblazeProject/Services/DataApiService.cs

@@ -1,4 +1,5 @@
-using ValblazeProject.Components;
+using System.Xml.Linq;
+using ValblazeProject.Components;
 using ValblazeProject.Factories;
 using ValblazeProject.Models;