Xamarin.Forms UI Controls - Building the Logify Client App (Part 3) - ReportsView.xaml and ReportViewModel.cs

ReportsView.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:dxg="clr-namespace:DevExpress.XamarinForms.DataGrid;assembly=DevExpress.XamarinForms.Grid"
    xmlns:vm="clr-namespace:Logify.ViewModels"
    xmlns:controls="clr-namespace:Logify.Controls"
    x:Class="Logify.Views.ReportsView"
    BackgroundColor="#ECECEC"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Padding="0">

    <ContentPage.BindingContext>
        <vm:ReportsViewModel/>
    </ContentPage.BindingContext>
    
    <ContentPage.Resources>
        <ResourceDictionary>
            <OnPlatform x:TypeArguments="x:String" x:Key="NormalFont">
                <On Platform="Android" Value="segoe-ui.ttf#NormalFont" />
                <On Platform="iOS" Value="Segoe UI" />
            </OnPlatform>
            <OnPlatform x:TypeArguments="x:String" x:Key="BoldFont">
                <On Platform="Android" Value="segoe-ui-bold.ttf#BoldFont" />
                <On Platform="iOS" Value="Segoe UI Bold" />
            </OnPlatform>
            
            <Style x:Key="GridCellMainText" TargetType="Label">
                <Setter Property="FontFamily" Value="{StaticResource BoldFont}" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="FontAttributes" Value="Bold" />
                <Setter Property="TextColor" Value="#424242" />
            </Style>

            <Style x:Key="GridCellSecondaryText" TargetType="Label">
                <Setter Property="FontFamily" Value="{StaticResource NormalFont}" />
                <Setter Property="FontSize" Value="13" />
                <Setter Property="TextColor" Value="#80353535" />
            </Style>
            
            <Style TargetType="dxg:CellStyle">
                <Setter Property="HorizontalLineThickness" Value="0"/>
                <Setter Property="BorderColor" Value="Transparent"/>
                <Setter Property="BackgroundColor" Value="#ECECEC"/>
                <Setter Property="SelectionColor" Value="#ECECEC"/>
            </Style>
            
            <Style TargetType="dxg:DataGridView">
                <Setter Property="BackgroundColor" Value="#D9D9D9"/>
            </Style>
            
            <DataTemplate x:Key="SwipeItemIgnoreTemplate">
                <Grid Margin="0,8,0,7.5" BackgroundColor="#424242">
                    <StackLayout>
                        <controls:IconView ImageSource="Ignore.svg" ForegroundColor="#FFFFFF" VerticalOptions="EndAndExpand" HorizontalOptions="Center" WidthRequest="24" HeightRequest="24"/>
                        <Label Text="Ignore" Style="{StaticResource GridCellMainText}" TextColor="#FFFFFF" VerticalOptions="StartAndExpand" HorizontalOptions="Center" Margin="0,8,0,0"/>
                    </StackLayout>
                    <BoxView WidthRequest="1" HorizontalOptions="End" VerticalOptions="Fill" BackgroundColor="#D9D9D9"/>
                </Grid>
            </DataTemplate>
            
            <DataTemplate x:Key="SwipeItemCloseTemplate">
                <StackLayout Margin="0,8,0,7.5" BackgroundColor="#424242">
                    <controls:IconView ImageSource="Close.svg" ForegroundColor="#FFFFFF" VerticalOptions="EndAndExpand" HorizontalOptions="Center" WidthRequest="24" HeightRequest="24"/>
                    <Label Text="Close" Style="{StaticResource GridCellMainText}" TextColor="#FFFFFF" VerticalOptions="StartAndExpand" HorizontalOptions="Center" Margin="0,8,0,0"/>
                </StackLayout>
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <AbsoluteLayout>
        <dxg:DataGridView Margin="16,0" BorderThickness="0" AllowEndFullSwipe="False" IsVerticalScrollBarVisible="False"
            AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
            ItemsSource="{Binding Reports}" x:Name="grid" IsUpdateLocked="{Binding IsUpdateLocked}" SelectionMode="None"
            IsLoadMoreEnabled="True" LoadMoreCommand="{Binding LoadMoreCommand}" RowTap="Handle_RowTap"
            IsPullToRefreshEnabled="true" PullToRefreshCommand="{Binding RefreshCommand}"
            IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}" IsColumnHeaderVisible="False">
            
            <dxg:DataGridView.EndSwipeItems>
                <dxg:SwipeItem Template="{StaticResource SwipeItemIgnoreTemplate}" Width="80" Command="{Binding IgnoreCommand}" BackgroundColor="#ECECEC" />
                <dxg:SwipeItem Template="{StaticResource SwipeItemCloseTemplate}" Width="80" Command="{Binding CloseCommand}" BackgroundColor="#ECECEC" />
            </dxg:DataGridView.EndSwipeItems>

            <dxg:DataGridView.Columns>
                <dxg:TemplateColumn>
                    <dxg:TemplateColumn.DisplayTemplate>
                        <DataTemplate>
                            <Grid BackgroundColor="#D9D9D9" ColumnSpacing="0" Padding="1" Margin="0,7"> 
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="7"/>
                                </Grid.ColumnDefinitions>
                                <Grid Padding="14" BackgroundColor="#FFFFFF" Grid.Column="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <Grid Grid.Row="0">
                                        <StackLayout Orientation="Horizontal" Padding="-3,0,0,0">
                                            <StackLayout Orientation="Horizontal" IsVisible="{Binding Source.HasAffectedUsers}" Margin="0,0,11,0">
                                                <controls:IconView ImageSource="Users.svg" WidthRequest="18" HeightRequest="18"/>
                                                <Label
                                                    Style="{StaticResource GridCellMainText}" TextColor="{DynamicResource ReportsCountersTextColor}"
                                                    Text="{Binding Source.AffectedUsersCount}" Margin="-6,0,0,0" LineBreakMode="TailTruncation"/>
                                            </StackLayout>
                                            <StackLayout Orientation="Horizontal" IsVisible="{Binding Source.HasCounter}">
                                                <controls:IconView ImageSource="Count.svg" WidthRequest="18" HeightRequest="18"/>
                                                <Label
                                                    Style="{StaticResource GridCellMainText}" TextColor="{DynamicResource ReportsCountersTextColor}"
                                                    Text="{Binding Source.Counter}" Margin="-6,0,0,0" LineBreakMode="TailTruncation"/>
                                            </StackLayout>
                                        </StackLayout>

                                        <StackLayout Orientation="Horizontal" HorizontalOptions="End">
                                            <Label
                                                Style="{StaticResource GridCellSecondaryText}" Text="{Binding Source.Version}"
                                                WidthRequest="80" HorizontalTextAlignment="End" LineBreakMode="TailTruncation"/>
                                            <Label
                                                Style="{StaticResource GridCellSecondaryText}" Text="{Binding Source.DateTimeLastReport}" HorizontalTextAlignment="End"
                                                Margin="16,0,0,0" IsVisible="{Binding Source.HasDateTimeLastReport}" LineBreakMode="TailTruncation"/>
                                        </StackLayout>

                                    </Grid>

                                    <Label Grid.Row="1" LineBreakMode="TailTruncation" MaxLines="2" Style="{StaticResource GridCellMainText}" Text="{Binding Source.ApplicationName}"/>
                                    <Label Grid.Row="2" LineBreakMode="TailTruncation" MaxLines="2" Style="{StaticResource GridCellSecondaryText}" Text="{Binding Source.ReportsListInfo}"/>
                                    
                                </Grid>
                                <BoxView Grid.Column="1" Color="{Binding Source.StatusColor}"/>
                            </Grid>
                        </DataTemplate>
                    </dxg:TemplateColumn.DisplayTemplate>
                </dxg:TemplateColumn>
            </dxg:DataGridView.Columns>
        </dxg:DataGridView>

        <Label Text="No Reports Found" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" IsVisible="{Binding HasReports}"
               AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5"/>
    </AbsoluteLayout>

</ContentPage>

ReportViewModel.cs

using System;
using System.Text;
using System.Threading.Tasks;
using Logify.Models;
using Logify.Services;
using Xamarin.Forms;

namespace Logify.ViewModels {
    public class ReportViewModel : NotificationObject {
        public Report Report { get; private set; }
        ReportDataProvider dataProvider;

        public ReportViewModel(Report report) {
            Report = report;
            this.dataProvider = new ReportDataProvider();
        }

        public int AffectedUsersCount => Report.AffectedUsersCount;
        public bool HasAffectedUsers => Report.AffectedUsersCount > 0;

        public int Counter => Report.Counter;
        public bool HasCounter => Report.Counter > 0;

        public string ApplicationName => Report.ApplicationName;
        public string Version => Report.Version;
        public string ReportsListInfo => Report.ReportsListInfo;

        public Color StatusColor => (Color)Resources.Values[$"ReportStatus{Report.Status.ToString()}"];

        public bool HasDateTimeLastReport => !string.IsNullOrEmpty(DateTimeLastReport);
        string dateTimeLastReport = null;
        public string DateTimeLastReport {
            get {
                if (dateTimeLastReport == null) {
                    var sb = new StringBuilder();
                    var nowDateTime = DateTime.UtcNow;
                    if (Report.DateTime > DateTime.MinValue) {
                        sb.Append(ElapsedString(Report.DateTime, nowDateTime));
                    }
                    if (Report.LastReport > DateTime.MinValue) {
                        if (sb.Length > 0) {
                            sb.Append(" / ");
                        }
                        sb.Append(ElapsedString(Report.LastReport, nowDateTime));
                    }
                    dateTimeLastReport = sb.ToString();
                }
                return dateTimeLastReport;
            }
        }

        public void UpdateStatus(ReportStatus status) {
            if(status != Report.Status) {
                Task.Run(() => dataProvider.UpdateStatus(Report, status));
                Report.Status = status;
                OnPropertyChanged("StatusColor");
            }
        }

        string ElapsedString(DateTime fromDateTime, DateTime toDateTime) {
            var span = toDateTime - fromDateTime;
            if (span.Days > 365) {
                return span.Days / 365 + "Y";
            }
            var spanMonths = (12 * span.Days) / 365;
            if (spanMonths > 0) {
                return spanMonths + "M";
            }
            if (span.Days > 0) {
                return span.Days + "d";
            }
            if (span.Hours > 0) {
                return span.Hours + "h";
            }
            if (span.Minutes > 0) {
                return span.Minutes + "m";
            }
            return "a few seconds";
        }
    }
}