From 4c4e699f1f7ea8482466b484399aac721f3d6acd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Przyw=C3=B3ski?=
 <35424311+marcin-przywoski@users.noreply.github.com>
Date: Tue, 20 Feb 2024 01:23:46 +0100
Subject: [PATCH] UI Overhaul

* Added Main.xaml view

* Added Chats.xaml view

* Added MainViewModel.cs

* Added ChatsViewModel.cs

* Added IMenuItem.cs interface for declaring which class is used for navigation within the views

* Updated UtilitiesViewModel with IMenuItem interface

* Changed OnStart method from async void to async Task in UtilitiesViewModel.cs

* Replaced MainWindow view with Main for the startup in App.xaml.cs

* Added logging to App.xaml.cs

* Updated layout of Utilities.xaml view

* Removed AddLogging
---
 ExportViewer.GUI/App.xaml.cs                  |  3 +-
 ExportViewer.GUI/Interfaces/IMenuItem.cs      | 11 +++
 ExportViewer.GUI/ViewModels/ChatsViewModel.cs | 12 +++
 ExportViewer.GUI/ViewModels/MainViewModel.cs  | 45 ++++++++++
 .../ViewModels/UtilitiesViewModel.cs          |  6 +-
 ExportViewer.GUI/Views/Chats.xaml             | 56 +++++++++++++
 ExportViewer.GUI/Views/Chats.xaml.cs          | 26 ++++++
 ExportViewer.GUI/Views/Main.xaml              | 83 +++++++++++++++++++
 ExportViewer.GUI/Views/Main.xaml.cs           | 25 ++++++
 ExportViewer.GUI/Views/Utilities.xaml         | 17 ++--
 10 files changed, 275 insertions(+), 9 deletions(-)
 create mode 100644 ExportViewer.GUI/Interfaces/IMenuItem.cs
 create mode 100644 ExportViewer.GUI/ViewModels/ChatsViewModel.cs
 create mode 100644 ExportViewer.GUI/ViewModels/MainViewModel.cs
 create mode 100644 ExportViewer.GUI/Views/Chats.xaml
 create mode 100644 ExportViewer.GUI/Views/Chats.xaml.cs
 create mode 100644 ExportViewer.GUI/Views/Main.xaml
 create mode 100644 ExportViewer.GUI/Views/Main.xaml.cs

diff --git a/ExportViewer.GUI/App.xaml.cs b/ExportViewer.GUI/App.xaml.cs
index 7ebffff..0b33e41 100644
--- a/ExportViewer.GUI/App.xaml.cs
+++ b/ExportViewer.GUI/App.xaml.cs
@@ -31,6 +31,7 @@ public App()
         private void ConfigureServices(ServiceCollection services)
         {
             services.AddSingleton<MainWindow>();
+            services.AddSingleton<Main>();
             services.AddSingleton<IHtmlParsingService, HtmlParsingService>();
             services.AddSingleton<IJsonParsingService, JsonParsingService>();
             services.AddSingleton<IDataParsingService, DataParsingService>();
@@ -40,7 +41,7 @@ private void ConfigureServices(ServiceCollection services)
         }
         private void OnStartup(object sender, StartupEventArgs e)
         {
-            var mainWindow = serviceProvider.GetService<MainWindow>();
+            var mainWindow = serviceProvider.GetService<Main>();
             mainWindow.Show();
         }
     }
diff --git a/ExportViewer.GUI/Interfaces/IMenuItem.cs b/ExportViewer.GUI/Interfaces/IMenuItem.cs
new file mode 100644
index 0000000..70031f5
--- /dev/null
+++ b/ExportViewer.GUI/Interfaces/IMenuItem.cs
@@ -0,0 +1,11 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace ExportViewer.GUI.Interfaces
+{
+    public interface IMenuItem
+    {
+        public string Title { get; }
+    }
+}
diff --git a/ExportViewer.GUI/ViewModels/ChatsViewModel.cs b/ExportViewer.GUI/ViewModels/ChatsViewModel.cs
new file mode 100644
index 0000000..9fc3dd1
--- /dev/null
+++ b/ExportViewer.GUI/ViewModels/ChatsViewModel.cs
@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using ExportViewer.GUI.Interfaces;
+
+namespace ExportViewer.GUI.ViewModels
+{
+    public class ChatsViewModel : IMenuItem
+    {
+        public string Title => "Chats";
+    }
+}
diff --git a/ExportViewer.GUI/ViewModels/MainViewModel.cs b/ExportViewer.GUI/ViewModels/MainViewModel.cs
new file mode 100644
index 0000000..4c1eef6
--- /dev/null
+++ b/ExportViewer.GUI/ViewModels/MainViewModel.cs
@@ -0,0 +1,45 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Text;
+using System.Windows.Controls;
+using CommunityToolkit.Mvvm.ComponentModel;
+using ExportViewer.GUI.Interfaces;
+
+namespace ExportViewer.GUI.ViewModels
+{
+    public class MainViewModel : ObservableObject
+    {
+        public ObservableCollection<IMenuItem> MenuItems { get; }
+
+        private object? _selectedItem;
+        public object? SelectedItem
+        {
+            get => _selectedItem;
+            set
+            {
+                if (SetProperty(ref _selectedItem , value))
+                {
+                    IsMenuOpen = false;
+                }
+            }
+        }
+
+        private bool isMenuOpen;
+        public bool IsMenuOpen
+        {
+            get => isMenuOpen;
+            set => SetProperty(ref isMenuOpen , value);
+        }
+
+        public MainViewModel ()
+        {
+            MenuItems = new ObservableCollection<IMenuItem>()
+            {
+                new UtilitiesViewModel(),
+                new ChatsViewModel()
+            };
+            SelectedItem = MenuItems[0];
+        }
+    }
+}
diff --git a/ExportViewer.GUI/ViewModels/UtilitiesViewModel.cs b/ExportViewer.GUI/ViewModels/UtilitiesViewModel.cs
index f2d58dd..5eab9fe 100644
--- a/ExportViewer.GUI/ViewModels/UtilitiesViewModel.cs
+++ b/ExportViewer.GUI/ViewModels/UtilitiesViewModel.cs
@@ -18,7 +18,7 @@
 
 namespace ExportViewer.GUI.ViewModels
 {
-    public partial class UtilitiesViewModel
+    public partial class UtilitiesViewModel : IMenuItem
     {
         private readonly IHtmlParsingService htmlParsingService = App.Current.serviceProvider.GetRequiredService<IHtmlParsingService>();
         private readonly IJsonParsingService jsonParsingService = App.Current.serviceProvider.GetRequiredService<IJsonParsingService>();
@@ -31,13 +31,15 @@ public UtilitiesViewModel ()
         {
 
         }
+        public string Title => "Utilities";
 
         public IUtilities Utilities { get; set; }
 
         public UtilitiesModel _utilitiesModel { get; set; } = new UtilitiesModel();
 
+
         [RelayCommand]
-        async void OnStart ()
+        async Task OnStart ()
         {
             if (String.IsNullOrEmpty(_utilitiesModel.SourcePath) || String.IsNullOrEmpty(_utilitiesModel.DestinationPath))
             {
diff --git a/ExportViewer.GUI/Views/Chats.xaml b/ExportViewer.GUI/Views/Chats.xaml
new file mode 100644
index 0000000..f972850
--- /dev/null
+++ b/ExportViewer.GUI/Views/Chats.xaml
@@ -0,0 +1,56 @@
+<UserControl
+    x:Class="ExportViewer.GUI.Views.Chats"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:ExportViewer.GUI.Views"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <Grid>
+        <!--  Main Grid for layout  -->
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <!--  Chats List  -->
+        <materialDesign:Card Grid.Column="0" Margin="10">
+            <ListBox Name="ChatsListBox">
+                <!--  Example Chat Items  -->
+                <ListBoxItem>Chat 1</ListBoxItem>
+                <ListBoxItem>Chat 2</ListBoxItem>
+                <ListBoxItem>Chat 3</ListBoxItem>
+                <!--  Add more chat items as needed  -->
+            </ListBox>
+        </materialDesign:Card>
+
+        <!--  Chat Content  -->
+        <materialDesign:Card Grid.Column="1" Margin="10">
+            <StackPanel>
+                <!--  Header  -->
+                <TextBlock
+                    Margin="0,0,0,10"
+                    FontSize="18"
+                    FontWeight="Bold">
+                    Chat Header
+                </TextBlock>
+
+                <!--  Chat Messages  -->
+                <ListBox Name="ChatMessagesListBox">
+                    <!--  Example Chat Messages  -->
+                    <ListBoxItem>Sender 1: Message 1</ListBoxItem>
+                    <ListBoxItem>Sender 2: Message 2</ListBoxItem>
+                    <!--  Add more chat messages as needed  -->
+                </ListBox>
+
+                <!--  Message Input Box  -->
+                <TextBox Name="MessageTextBox" Margin="0,10,0,0" />
+                <Button Margin="0,5,0,0" Content="Send" />
+            </StackPanel>
+        </materialDesign:Card>
+    </Grid>
+
+</UserControl>
diff --git a/ExportViewer.GUI/Views/Chats.xaml.cs b/ExportViewer.GUI/Views/Chats.xaml.cs
new file mode 100644
index 0000000..159c6be
--- /dev/null
+++ b/ExportViewer.GUI/Views/Chats.xaml.cs
@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace ExportViewer.GUI.Views
+{
+    /// <summary>
+    /// Interaction logic for Chats.xaml
+    /// </summary>
+    public partial class Chats : UserControl
+    {
+        public Chats ()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/ExportViewer.GUI/Views/Main.xaml b/ExportViewer.GUI/Views/Main.xaml
new file mode 100644
index 0000000..fbc8a79
--- /dev/null
+++ b/ExportViewer.GUI/Views/Main.xaml
@@ -0,0 +1,83 @@
+<Window
+    x:Class="ExportViewer.GUI.Views.Main"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:interfaces="clr-namespace:ExportViewer.GUI.Interfaces"
+    xmlns:local="clr-namespace:ExportViewer.GUI.Views"
+    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:views="clr-namespace:ExportViewer.GUI.Views"
+    xmlns:vm="clr-namespace:ExportViewer.GUI.ViewModels"
+    Title="Facebook Export Viewer"
+    Width="800"
+    Height="500"
+    MinWidth="900"
+    MinHeight="850"
+    d:DataContext="{d:DesignInstance Type=vm:MainViewModel}"
+    ResizeMode="CanMinimize"
+    mc:Ignorable="d">
+    <Window.Resources>
+        <!--  This provides a link between the view models and views  -->
+        <DataTemplate DataType="{x:Type vm:UtilitiesViewModel}">
+            <views:Utilities />
+        </DataTemplate>
+        <DataTemplate DataType="{x:Type vm:ChatsViewModel}">
+            <views:Chats />
+        </DataTemplate>
+    </Window.Resources>
+    <Window.DataContext>
+        <vm:MainViewModel />
+    </Window.DataContext>
+    <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding IsMenuOpen}">
+        <materialDesign:DrawerHost.LeftDrawerContent>
+            <DockPanel MinWidth="220">
+                <ToggleButton
+                    Margin="16"
+                    HorizontalAlignment="Right"
+                    DockPanel.Dock="Top"
+                    IsChecked="{Binding IsMenuOpen}"
+                    Style="{StaticResource MaterialDesignHamburgerToggleButton}" />
+
+                <ListBox
+                    Margin="0,16,0,16"
+                    ItemsSource="{Binding MenuItems}"
+                    SelectedItem="{Binding SelectedItem, UpdateSourceTrigger=PropertyChanged}"
+                    Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
+                    <ListBox.Resources>
+                        <Style BasedOn="{StaticResource MaterialDesignScrollBarMinimal}" TargetType="ScrollBar" />
+                    </ListBox.Resources>
+                    <ListBox.ItemTemplate>
+                        <DataTemplate DataType="interfaces:IMenuItem">
+                            <TextBlock Margin="24,4,0,4" Text="{Binding Title}" />
+                        </DataTemplate>
+                    </ListBox.ItemTemplate>
+                </ListBox>
+            </DockPanel>
+        </materialDesign:DrawerHost.LeftDrawerContent>
+
+        <DockPanel>
+            <materialDesign:ColorZone
+                Padding="16"
+                materialDesign:ShadowAssist.ShadowDepth="Depth2"
+                DockPanel.Dock="Top"
+                Mode="PrimaryMid">
+                <Grid>
+                    <ToggleButton
+                        HorizontalAlignment="Left"
+                        IsChecked="{Binding IsMenuOpen}"
+                        Style="{StaticResource MaterialDesignHamburgerToggleButton}" />
+
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontSize="22"
+                        Text="Facebook Export Viewer" />
+                </Grid>
+            </materialDesign:ColorZone>
+
+            <!--  The default behavior of the DockPanel is to have the last child fill the middle  -->
+            <ContentControl Content="{Binding SelectedItem}" />
+        </DockPanel>
+    </materialDesign:DrawerHost>
+</Window>
diff --git a/ExportViewer.GUI/Views/Main.xaml.cs b/ExportViewer.GUI/Views/Main.xaml.cs
new file mode 100644
index 0000000..8191c70
--- /dev/null
+++ b/ExportViewer.GUI/Views/Main.xaml.cs
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Shapes;
+
+namespace ExportViewer.GUI.Views
+{
+    /// <summary>
+    /// Interaction logic for Main.xaml
+    /// </summary>
+    public partial class Main : Window
+    {
+        public Main ()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/ExportViewer.GUI/Views/Utilities.xaml b/ExportViewer.GUI/Views/Utilities.xaml
index d4d982e..0ea32eb 100644
--- a/ExportViewer.GUI/Views/Utilities.xaml
+++ b/ExportViewer.GUI/Views/Utilities.xaml
@@ -7,8 +7,8 @@
     xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="clr-namespace:ExportViewer.GUI.ViewModels"
-    d:DesignHeight="500"
-    d:DesignWidth="600"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
     Background="{DynamicResource MaterialDesignPaper}"
     mc:Ignorable="d">
 
@@ -16,7 +16,7 @@
         <vm:UtilitiesViewModel />
     </UserControl.DataContext>
 
-    <Grid>
+    <Grid Margin="10">
         <Grid.RowDefinitions>
             <RowDefinition Height="*" />
             <RowDefinition Height="*" />
@@ -49,23 +49,28 @@
         <TextBlock
             Grid.ColumnSpan="5"
             Margin="0,0,0,8"
+            FontSize="30"
             Style="{StaticResource MaterialDesignHeadline5TextBlock}"
             Text="Metadata fix" />
         <TextBox
             x:Name="SourceLocation"
             Grid.Row="1"
             Grid.ColumnSpan="14"
-            Margin="0,23,0,0"
+            Margin="0,23,0,15"
             materialDesign:HintAssist.HelperText="Source location of the Facebook export"
+            materialDesign:HintAssist.HelperTextFontSize="15"
             materialDesign:HintAssist.Hint="Source"
+            FontSize="20"
             Text="{Binding Path=_utilitiesModel.SourcePath}" />
         <TextBox
             x:Name="DestinationLocation"
             Grid.Row="2"
             Grid.ColumnSpan="14"
-            Margin="0,23,0,0"
+            Margin="0,23,0,15"
             materialDesign:HintAssist.HelperText="Destination of the media with fixed metadata"
+            materialDesign:HintAssist.HelperTextFontSize="15"
             materialDesign:HintAssist.Hint="Destination"
+            FontSize="20"
             Text="{Binding Path=_utilitiesModel.DestinationPath}" />
         <Button
             Grid.Row="4"
@@ -82,7 +87,7 @@
             Grid.RowSpan="4"
             Grid.Column="0"
             Grid.ColumnSpan="14"
-            Height="200"
+            Height="240"
             Padding="17,16,16,16"
             Panel.ZIndex="-1"
             materialDesign:HintAssist.Hint="Output from backend"