Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Xamarin.Forms UI Controls - Building the Logify Client App (Part 3) - ReportsView.xaml and ReportViewModel.cs
<?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>
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";
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.