From 0ec83e281392df8cfe16e4200ceff4c3eb85f3da Mon Sep 17 00:00:00 2001
From: DJYohann <breuil.yohann@orange.fr>
Date: Wed, 7 Jun 2023 00:15:39 +0200
Subject: [PATCH] :sparkles: Add champion detail page and addedit page

---
 App/App.csproj                       |  2 +-
 App/Converters/Base64ToImage.cs      | 26 +++++++++++
 App/MauiProgram.cs                   |  5 +-
 App/Pages/ChampionAddEditPage.xaml   | 47 +++++++++++++++----
 App/Pages/ChampionDetailPage.xaml    | 57 +++++++++++++++++++---
 App/Pages/ChampionDetailPage.xaml.cs | 12 +++--
 App/Pages/ChampionsListPage.xaml     | 70 ++++++++++++++++++++++++----
 App/Pages/ChampionsListPage.xaml.cs  |  7 +--
 App/Platforms/iOS/Program.cs         |  2 +-
 App/Resources/Styles/Colors.xaml     |  4 ++
 LeagueOfLegends.sln                  | 10 ++--
 ViewModel/ChampionManagerVM.cs       | 18 +++++++
 ViewModel/ChampionVM.cs              | 34 ++++++++++++--
 13 files changed, 247 insertions(+), 47 deletions(-)
 create mode 100644 App/Converters/Base64ToImage.cs

diff --git a/App/App.csproj b/App/App.csproj
index 7525df6..855fd29 100644
--- a/App/App.csproj
+++ b/App/App.csproj
@@ -70,7 +70,7 @@
 	  <BundleResource Include="Resources\Images\lol_logo.png" />
 	</ItemGroup>
 	<ItemGroup>
-	  <ProjectReference Include="..\ViewModel\ViewModel.csproj" />
 	  <ProjectReference Include="..\StubLib\StubLib.csproj" />
+	  <ProjectReference Include="..\ViewModel\ViewModel.csproj" />
 	</ItemGroup>
 </Project>
diff --git a/App/Converters/Base64ToImage.cs b/App/Converters/Base64ToImage.cs
new file mode 100644
index 0000000..ba220f9
--- /dev/null
+++ b/App/Converters/Base64ToImage.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Globalization;
+
+namespace App.Converters
+{
+	public class Base64ToImage : IValueConverter
+	{
+		public Base64ToImage()
+		{
+            
+		}
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var bytes = System.Convert.FromBase64String(value as string);
+            MemoryStream imageDecode = new MemoryStream(bytes);
+            return ImageSource.FromStream(() => imageDecode);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}
+
diff --git a/App/MauiProgram.cs b/App/MauiProgram.cs
index 9b09708..f3a6caf 100644
--- a/App/MauiProgram.cs
+++ b/App/MauiProgram.cs
@@ -20,10 +20,7 @@ public static class MauiProgram
 			})
 			.Services.AddSingleton<IDataManager, StubData>()
 			.AddSingleton<ChampionManagerVM>()
-			.AddSingleton<ChampionsListPage>()
-
-			.AddTransient<ChampionVM>()
-			.AddTransient<ChampionDetailPage>();
+			.AddSingleton<ChampionsListPage>();			
 
 #if DEBUG
 		builder.Logging.AddDebug();
diff --git a/App/Pages/ChampionAddEditPage.xaml b/App/Pages/ChampionAddEditPage.xaml
index 25ee6d1..8692069 100644
--- a/App/Pages/ChampionAddEditPage.xaml
+++ b/App/Pages/ChampionAddEditPage.xaml
@@ -2,16 +2,47 @@
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="App.Pages.ChampionAddEditPage"
-             Title="Add Champion">
-    <ContentPage.ToolbarItems>
-        <ToolbarItem Text="Edit"/>
+             xmlns:converters="clr-namespace:App.Converters"
+             Title="Add Champion"
+             BackgroundColor="Black">
+    <ContentPage.Resources>
+        <converters:Base64ToImage x:Key="Base64ToImageConv"/>
 
-    </ContentPage.ToolbarItems>
+        <Style TargetType="Label">
+            <Setter Property="TextColor" Value="{StaticResource Primary}"/>
+        </Style>
+
+        <Style TargetType="Entry">
+            <Setter Property="ClearButtonVisibility" Value="WhileEditing"/>
+            <Setter Property="TextColor" Value="{StaticResource Black}"/>
+            <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
+            <Setter Property="PlaceholderColor" Value="{StaticResource Gray500}"/>
+        </Style>
+    </ContentPage.Resources>
 
     <VerticalStackLayout>
-        <Label 
-            Text="Welcome to .NET MAUI!"
-            VerticalOptions="Center" 
-            HorizontalOptions="Center" />
+        <ScrollView>
+            <StackLayout Padding="20,0,0,0" Orientation="Vertical">
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Name"/>
+                    <Entry Placeholder="Champion name"/>
+                </StackLayout>
+
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Icon"/>
+                    
+                </StackLayout>
+
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Image"/>
+                    
+                </StackLayout>
+
+                <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
+                    <Label Text="Bio"/>
+                    <Entry/>
+                </StackLayout>
+            </StackLayout>
+        </ScrollView>
     </VerticalStackLayout>
 </ContentPage>
diff --git a/App/Pages/ChampionDetailPage.xaml b/App/Pages/ChampionDetailPage.xaml
index f6b1604..80f3cb6 100644
--- a/App/Pages/ChampionDetailPage.xaml
+++ b/App/Pages/ChampionDetailPage.xaml
@@ -1,12 +1,55 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:converters="clr-namespace:App.Converters"
              x:Class="App.Pages.ChampionDetailPage"
-             Title="Champion Page">
-    <VerticalStackLayout>
-        <Label 
-            Text="{Binding Name}"
-            VerticalOptions="Center" 
-            HorizontalOptions="Center" />
-    </VerticalStackLayout>
+             Title="Champion Page"
+             BackgroundColor="Black">
+    <ContentPage.ToolbarItems>
+        <ToolbarItem Text="Edit" Clicked="ToolbarItem_Clicked"/>
+
+    </ContentPage.ToolbarItems>
+
+    <ContentPage.Resources>
+        <converters:Base64ToImage x:Key="Base64ToImageConv"/>
+
+        <Style TargetType="Label">
+            <Setter Property="TextColor" Value="{StaticResource Primary}"/>
+        </Style>
+    </ContentPage.Resources>
+
+    <ScrollView>
+        <StackLayout Orientation="Vertical">
+            <Image Source="{Binding Path=Image, Converter={StaticResource Base64ToImageConv}}"/>
+
+            <StackLayout Orientation="Horizontal" Padding="0,0,0,20">
+                <Label Text="{Binding Name}"
+                       HorizontalOptions="Start"
+                       FontSize="Title"/>
+
+                <Image HorizontalOptions="End"/>
+            </StackLayout>
+
+            <Label Text="{Binding Bio}"/>
+
+            <Label Text="Characteristics"
+                   FontSize="Title"
+                   Padding="0,0,0,20"/>
+
+            <CollectionView ItemsSource="{Binding Characteristics}"
+                            ItemsLayout="VerticalGrid, 3">
+                <CollectionView.ItemTemplate>
+                    <DataTemplate>
+                        <Border Margin="10" Stroke="{StaticResource Primary}" StrokeThickness="3">
+                            <StackLayout Orientation="Vertical" VerticalOptions="Center">
+                                <Label HorizontalOptions="Center" Text="{Binding Key}"/>
+                                <Label HorizontalOptions="Center" Text="{Binding Value}"/>
+                            </StackLayout>
+                        </Border>
+                    </DataTemplate>
+                </CollectionView.ItemTemplate>
+            </CollectionView>
+        </StackLayout>
+    </ScrollView>
+
 </ContentPage>
diff --git a/App/Pages/ChampionDetailPage.xaml.cs b/App/Pages/ChampionDetailPage.xaml.cs
index d321107..b84ded8 100644
--- a/App/Pages/ChampionDetailPage.xaml.cs
+++ b/App/Pages/ChampionDetailPage.xaml.cs
@@ -4,11 +4,17 @@ namespace App.Pages;
 
 public partial class ChampionDetailPage : ContentPage
 {
-	//public ChampionVM ChampionVM { get; private set; }
+	public ChampionVM ChampionVM { get; private set; }
 
 	public ChampionDetailPage(ChampionVM championVM)
 	{
-		InitializeComponent();
-        BindingContext = championVM;
+        ChampionVM = championVM;
+        InitializeComponent();
+        BindingContext = ChampionVM;
+    }
+
+    async void ToolbarItem_Clicked(System.Object sender, System.EventArgs e)
+    {
+        await Navigation.PushAsync(new ChampionAddEditPage());
     }
 }
diff --git a/App/Pages/ChampionsListPage.xaml b/App/Pages/ChampionsListPage.xaml
index 4e46368..9b6ca4f 100644
--- a/App/Pages/ChampionsListPage.xaml
+++ b/App/Pages/ChampionsListPage.xaml
@@ -1,20 +1,70 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:converters="clr-namespace:App.Converters"
              x:Class="App.Pages.ChampionsListPage"
              Title="Champions">
     <ContentPage.ToolbarItems>
         <ToolbarItem Text="Add" Clicked="AddClicked"/>
     </ContentPage.ToolbarItems>
 
-    <ListView ItemsSource="{Binding ChampionVMs}" ItemSelected="ListView_ItemSelected">
-        <ListView.ItemTemplate>
-            <DataTemplate>
-                <TextCell 
-                        Text="{Binding Name}"
-                        Detail="{Binding Bio}">
-                </TextCell>
-            </DataTemplate>
-        </ListView.ItemTemplate>
-    </ListView>
+    <ContentPage.Resources>
+        <converters:Base64ToImage x:Key="Base64ToImageConv"/>
+
+        <Style TargetType="Button">
+            <Setter Property="WidthRequest">40</Setter>
+            <Setter Property="HeightRequest">20</Setter>
+        </Style>
+    </ContentPage.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition/>
+            <RowDefinition/>
+        </Grid.RowDefinitions>
+
+        <ListView Grid.Row="0"
+                  ItemsSource="{Binding ChampionVMs}"
+                  ItemSelected="ListView_ItemSelected"
+                  SelectionMode="Single">
+            <ListView.ItemTemplate>
+                <DataTemplate>
+                    <ViewCell>
+                        <SwipeView Grid.Row="0">
+                            <SwipeView.RightItems>
+                                <SwipeItems>
+                                    <SwipeItem Text="Delete"
+                                               BackgroundColor="{StaticResource DeleteColor}"/>
+                                    <SwipeItem Text="Edit"
+                                               BackgroundColor="{StaticResource EditColor}"/>
+                                </SwipeItems>
+                            </SwipeView.RightItems>
+
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*"/>
+                                    <ColumnDefinition Width="3*"/>
+                                </Grid.ColumnDefinitions>
+
+                                <Image Grid.Column="0" Source="{Binding Path=Icon, Converter={StaticResource Base64ToImageConv}}"/>
+
+                                <StackLayout Grid.Column="1">
+                                    <Label Text="{Binding Name}"/>
+                                </StackLayout>
+                            </Grid>
+
+                        </SwipeView>
+                    </ViewCell>
+                </DataTemplate>
+            </ListView.ItemTemplate>
+        </ListView>
+
+        <StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="End">
+            <Button Text="&lt;"/>
+            <Label Text="{Binding Index}"/>
+            <Label Text="/"/>
+            <Label Text="{Binding NbPages}"/>
+            <Button Text="&gt;"/>
+        </StackLayout>
+    </Grid>
 </ContentPage>
diff --git a/App/Pages/ChampionsListPage.xaml.cs b/App/Pages/ChampionsListPage.xaml.cs
index 34f9853..0145309 100644
--- a/App/Pages/ChampionsListPage.xaml.cs
+++ b/App/Pages/ChampionsListPage.xaml.cs
@@ -15,14 +15,11 @@ public partial class ChampionsListPage : ContentPage
 
     async void AddClicked(System.Object sender, System.EventArgs e)
     {
-		await Shell.Current.GoToAsync(nameof(ChampionAddEditPage));
+        await Navigation.PushAsync(new ChampionAddEditPage());
     }
 
     async void ListView_ItemSelected(System.Object sender, Microsoft.Maui.Controls.SelectedItemChangedEventArgs e)
     {
-        await Shell.Current.GoToAsync(nameof(ChampionDetailPage), true, new Dictionary<string, object>
-        {
-            { "ChampionVM", e.SelectedItem }
-        });
+        await Navigation.PushAsync(new ChampionDetailPage(e.SelectedItem as ChampionVM));
     }
 }
diff --git a/App/Platforms/iOS/Program.cs b/App/Platforms/iOS/Program.cs
index a8da03b..07cdc01 100644
--- a/App/Platforms/iOS/Program.cs
+++ b/App/Platforms/iOS/Program.cs
@@ -10,7 +10,7 @@ public class Program
 	{
 		// if you want to use a different Application Delegate class from "AppDelegate"
 		// you can specify it here.
-		UIApplication.Main(args, null, typeof(AppDelegate));
+				UIApplication.Main(args, null, typeof(AppDelegate));
 	}
 }
 
diff --git a/App/Resources/Styles/Colors.xaml b/App/Resources/Styles/Colors.xaml
index b72af37..bd119a9 100644
--- a/App/Resources/Styles/Colors.xaml
+++ b/App/Resources/Styles/Colors.xaml
@@ -17,6 +17,10 @@
     <Color x:Key="Gray600">#404040</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
+
+    <Color x:Key="EditColor">#AEAEB1</Color>
+    <Color x:Key="DeleteColor">#FE3C30</Color>
+
     <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/>
     <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource Secondary}"/>
     <SolidColorBrush x:Key="TertiaryBrush" Color="{StaticResource Tertiary}"/>
diff --git a/LeagueOfLegends.sln b/LeagueOfLegends.sln
index 01782d8..ca9fded 100644
--- a/LeagueOfLegends.sln
+++ b/LeagueOfLegends.sln
@@ -15,7 +15,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Tests", "Tests", "{A88951E3
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "App", "App\App.csproj", "{9A58F419-4627-4656-9C36-959DA39A55E9}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ViewModel", "ViewModel\ViewModel.csproj", "{7A222D06-D84F-4DA7-ADCC-71D339261117}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ViewModel", "ViewModel\ViewModel.csproj", "{75E3813D-87BE-4837-B318-916CFA6A276F}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -43,10 +43,10 @@ Global
 		{9A58F419-4627-4656-9C36-959DA39A55E9}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{9A58F419-4627-4656-9C36-959DA39A55E9}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{9A58F419-4627-4656-9C36-959DA39A55E9}.Release|Any CPU.Build.0 = Release|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{7A222D06-D84F-4DA7-ADCC-71D339261117}.Release|Any CPU.Build.0 = Release|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{75E3813D-87BE-4837-B318-916CFA6A276F}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
diff --git a/ViewModel/ChampionManagerVM.cs b/ViewModel/ChampionManagerVM.cs
index f65ef78..9cd6c0b 100644
--- a/ViewModel/ChampionManagerVM.cs
+++ b/ViewModel/ChampionManagerVM.cs
@@ -48,6 +48,24 @@ namespace ViewModel
                 await LoadChampions();
         }
 
+        public int NbPages => NbChampions / Count;
+
+        public int NbChampions
+        {
+            get => _nbChampions;
+            set
+            {
+                _nbChampions = value;
+            }
+        }
+        private int _nbChampions;
+
+        private async Task GetNbChampions()
+        {
+            NbChampions = await DataManager.ChampionsMgr.GetNbItems();
+            OnPropertyChanged(nameof(NbPages));
+        }
+
         private async Task LoadChampions()
         {
             _championVMs.Clear();
diff --git a/ViewModel/ChampionVM.cs b/ViewModel/ChampionVM.cs
index 8236d66..0a99621 100644
--- a/ViewModel/ChampionVM.cs
+++ b/ViewModel/ChampionVM.cs
@@ -1,4 +1,5 @@
 using Model;
+using System;
 
 namespace ViewModel
 {
@@ -9,7 +10,7 @@ namespace ViewModel
             get => _model;
             set
             {
-                //if (_model.Equals(value) || _model.Equals(null)) return;
+                if (_model.Equals(value) || value == null) return;
                 _model = value;
                 OnPropertyChanged();
             }
@@ -19,12 +20,12 @@ namespace ViewModel
 
         public ChampionVM(Champion model)
         {
-            Model = model;
+            _model = model;
         }
 
         public ChampionVM()
         {
-            Model = new Champion("Poppy", ChampionClass.Tank);
+            _model = new Champion("Poppy", ChampionClass.Tank);
         }
 
         public string Name
@@ -42,5 +43,32 @@ namespace ViewModel
                 OnPropertyChanged();
             }
         }
+
+        public string Icon
+        {
+            get => Model.Icon;
+            set
+            {
+                if (value == null) return;
+                _model.Icon = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public string Image
+        {
+            get => Model.Image.Base64;
+            set
+            {
+                if (value == null) return;
+                _model.Image.Base64 = value;
+                OnPropertyChanged();
+            }
+        }
+
+        public IReadOnlyDictionary<string, int> Characteristics
+        {
+            get => Model.Characteristics;
+        }
     }
 }
\ No newline at end of file