pagination

Sources/ClientMAUI/ClientMAUI.csproj

@@ -57,7 +57,6 @@
 
 	<ItemGroup>
 	  <Folder Include="Views\Components\" />
-	  <Folder Include="VMApp\" />
 	</ItemGroup>
 
 	<ItemGroup>

Sources/ClientMAUI/VMApp/ChampionListPageVM.cs

@@ -0,0 +1,30 @@
+using Microsoft.Maui.Controls;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using VM;
+
+namespace ClientMAUI.VMApp
+{
+    public class ChampionListPageVM
+    {
+
+        public DataManagerVM DataManagerVM { get; private set; }
+
+        public ICommand NextPageCommand { get; private set; }
+        public ICommand PreviousPageCommand { get; private set; }
+
+        public ChampionListPageVM(DataManagerVM dataManager)
+        {
+            DataManagerVM = dataManager;
+
+            NextPageCommand = new Command(
+                execute: () => DataManagerVM.PageId++
+                );
+            PreviousPageCommand = new Command( execute: () => DataManagerVM.PageId-- );
+        }
+    }
+}

Sources/ClientMAUI/Views/Pages/ChampionListPage.xaml

@@ -7,31 +7,40 @@
     <ContentPage.Resources>
         <converters:Base64ToImageSourceConverter x:Key="Base64ToImageSource"/>
     </ContentPage.Resources>
-    <ListView ItemsSource="{Binding ChampionVMs}" ItemTapped="ListView_ItemTapped" SelectionMode="Single" RowHeight="75">
-        <ListView.ItemTemplate>
-            <DataTemplate>
-                <ViewCell Height="75">
-                    <Grid Padding="10"
+    <VerticalStackLayout>
+        <ListView ItemsSource="{Binding DataManagerVM.ChampionVMs}" ItemTapped="ListView_ItemTapped" SelectionMode="Single" RowHeight="75">
+            <ListView.ItemTemplate>
+                <DataTemplate>
+                    <ViewCell Height="75">
+                        <Grid Padding="10"
                           RowDefinitions="*,*"
                           ColumnDefinitions="*,4*"
                           HeightRequest="75">
-                        <Image Grid.RowSpan="2"
+                            <Image Grid.RowSpan="2"
                                Source="{Binding Path=Icon,Converter={StaticResource Base64ToImageSource}}"
                                Aspect="AspectFill"
                                HeightRequest="60"
                                WidthRequest="60" />
-                        <Label Grid.Column="1"
+                            <Label Grid.Column="1"
                                Text="{Binding Name}"
                                FontAttributes="Bold" 
                                VerticalTextAlignment="Center"/>
-                        <Label Grid.Row="1"
+                            <Label Grid.Row="1"
                                Grid.Column="1"
                                Text="{Binding Class}"
                                FontAttributes="Italic" 
                                VerticalTextAlignment="Center"/>
-                    </Grid>
-                </ViewCell>
-            </DataTemplate>
-        </ListView.ItemTemplate>
-    </ListView>
+                        </Grid>
+                    </ViewCell>
+                </DataTemplate>
+            </ListView.ItemTemplate>
+        </ListView>
+
+        <HorizontalStackLayout HorizontalOptions="Center">
+            <Button Text="&lt;" Command="{Binding PreviousPageCommand}"/>
+            <Label Text="{Binding DataManagerVM.PageId}" Padding="5"/>
+            <Button Text="&gt;" Command="{Binding NextPageCommand}"/>
+        </HorizontalStackLayout>
+    </VerticalStackLayout>
+
 </ContentPage>

Sources/ClientMAUI/Views/Pages/ChampionListPage.xaml.cs

@@ -1,20 +1,22 @@
+using ClientMAUI.VMApp;
 using VM;
 
 namespace ClientMAUI.Views.Pages;
 
 public partial class ChampionListPage : ContentPage
 {
-	public DataManagerVM _dataManagerVM { get; private set; }
+    public ChampionListPageVM VMApp { get; private set; }
 
 	public ChampionListPage(DataManagerVM dataManager)
 	{
-		_dataManagerVM = dataManager;
+        VMApp = new ChampionListPageVM(dataManager);
         InitializeComponent();
-        BindingContext = _dataManagerVM;
+        BindingContext = VMApp;
 	}
 
     async void ListView_ItemTapped(System.Object sender, Microsoft.Maui.Controls.ItemTappedEventArgs e)
     {
         await Navigation.PushAsync(new ChampionDetail((sender as ListView).SelectedItem as ChampionVM));
+        (sender as ListView).SelectedItem = null;
     }
 }

Sources/VM/DataManagerVM.cs

@@ -1,14 +1,29 @@
-using System;
-using System.Collections.ObjectModel;
+using LolToolkit;
 using Model;
-using LolToolkit;
+using System.Collections.ObjectModel;
 
 namespace VM
 {
-	public class DataManagerVM : PropertyChangedSender
+    public class DataManagerVM : PropertyChangedSender
     {
         private ObservableCollection<ChampionVM> ChampionsObs { get; set; } = new ObservableCollection<ChampionVM>();
         public ReadOnlyObservableCollection<ChampionVM> ChampionVMs { get; private set; }
+        public int PageId 
+        {
+            get => _pageId;
+            set
+            {
+                if(_pageId != value)
+                {
+                    _pageId = value;
+                    OnPropertyChanged();
+                    LoadData();
+                }
+            }
+        
+        }
+        public int _pageId = 1;
+        public int PageSize { get; set; } = 5;
 
         public IDataManager DataManager
         {
@@ -32,9 +47,7 @@ namespace VM
         public async void LoadData()
         {
             ChampionsObs.Clear();
-            int nbItems = await DataManager.ChampionsMgr.GetNbItems();
-            IEnumerable<Champion?> champions = await DataManager.ChampionsMgr.GetItems(0, nbItems);
-
+            IEnumerable<Champion?> champions = await DataManager.ChampionsMgr.GetItems(PageId - 1, PageSize);
             foreach (var item in champions)
             {
                 ChampionsObs.Add(new ChampionVM(item));