From 5f8215c5c5b883a5ca5ee2c0b2f04caf02155a4c Mon Sep 17 00:00:00 2001 From: markosteger Date: Fri, 17 Mar 2023 14:28:13 +0100 Subject: [PATCH] Grid Component --- ...onnected.Components.Showcase.Runner.csproj | 6 ++ .../ComponentsExamples/DataGridExample.razor | 88 +++++++++++++++++++ .../DatePickerExample.razor | 23 +++++ .../ModalDialogExample.razor | 5 +- .../Pages/Index.razor | 86 +++++------------- .../Classes}/Alert/AlertOptions.cs | 0 .../Classes/Grid/DataGridOptions.cs | 67 ++++++++++++++ .../{Models => Classes}/InputBase.cs | 0 .../{Models => Classes}/Modal/ModalButton.cs | 0 .../{Models => Classes}/Modal/ModalEvent.cs | 0 .../{Models => Classes}/Modal/ModalOptions.cs | 0 .../Components/Grid.razor | 19 +++- .../Components/Grid.razor.cs | 74 ++++++++++++---- .../Components/GridRow.razor | 31 +++++-- .../Components/GridRow.razor.cs | 67 ++++++++++---- .../Components/GridRowContent.razor | 3 - .../Components/GridRowContent.razor.cs | 53 ----------- src/Connected.Components/Enums/Position.cs | 6 ++ 18 files changed, 360 insertions(+), 168 deletions(-) create mode 100644 src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DataGridExample.razor create mode 100644 src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DatePickerExample.razor rename src/{connected.components/Models => Connected.Components/Classes}/Alert/AlertOptions.cs (100%) create mode 100644 src/Connected.Components/Classes/Grid/DataGridOptions.cs rename src/Connected.Components/{Models => Classes}/InputBase.cs (100%) rename src/Connected.Components/{Models => Classes}/Modal/ModalButton.cs (100%) rename src/Connected.Components/{Models => Classes}/Modal/ModalEvent.cs (100%) rename src/Connected.Components/{Models => Classes}/Modal/ModalOptions.cs (100%) delete mode 100644 src/Connected.Components/Components/GridRowContent.razor delete mode 100644 src/Connected.Components/Components/GridRowContent.razor.cs diff --git a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj index 7de2092..5b122b9 100644 --- a/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj +++ b/src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj @@ -22,4 +22,10 @@ + + + + + + diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DataGridExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DataGridExample.razor new file mode 100644 index 0000000..6a6155d --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DataGridExample.razor @@ -0,0 +1,88 @@ +@page "/datagrid" +@using Connected.Classes.Grid; +@using Connected.Components; +@using Connected.Enums; +@using Connected.Models.Modal; +@using Connected.Models; +@using Connected.Services; +@using Connected.Utilities; +@using System.Collections.ObjectModel; + +@if (loaded) +{ +

DATA GRID EXAMPLE

+ + + + @number + + + @(number * 2) + + + + + + @dummy.Value + + + @dummy.Value + + + +} +else +{ +

Data filling...

+} + +@code { + bool loaded = false; + + DataGridOptions dataGridOptions = new DataGridOptions() + { + ImagePosition = SmScrn_GridImgPos.Top, + ShowImage = true, + Dense = true, + ShowSelect = true, + ItemsPerPage = 10, + SelectedPage = 1, + DataSet_ImgColName = "Img", + }; + + ObservableCollection Data = new(); + ObservableCollection DData = new(); + + + protected override void OnInitialized() + { + if (Data is null) Data = new(); + if (DData is null) DData = new(); + Random r = new Random(); + for (int i = 0; i < 20; i++) + { + //int l = r.Next(50); + Data.Add(r.Next(50)); + DData.Add(new DummyData() { Value = r.Next(50) }); + } + loaded = true; + StateHasChanged(); + } + + public string RandomString(int length) + { + + Random random = new Random(DateTime.Now.Millisecond); + const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; + string result = new string(Enumerable.Repeat(chars, length) + .Select(s => s[random.Next(s.Length)]).ToArray()); + return result; + } + + public class DummyData + { + public object Value { get; set; } = null; + public string Img { get; set; } = "https://source.unsplash.com/random?face"; + } +} + diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DatePickerExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DatePickerExample.razor new file mode 100644 index 0000000..d345135 --- /dev/null +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/DatePickerExample.razor @@ -0,0 +1,23 @@ +@page "/datepicker" +@using Connected.Components; +@using Connected.Enums; +@using Connected.Models.Modal; +@using Connected.Models; +@using Connected.Services; +@using Connected.Utilities; + +@inject ModalDialogService modalDialog; + + +

DATE PICKER EXAMPLE

+ + + + + +

Selected date: @date.ToString("dd. MM. yyyy")

+ + +@code { + DateTime date = DateTime.Now; +} \ No newline at end of file diff --git a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor index 5d187f9..2263fe3 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/ComponentsExamples/ModalDialogExample.razor @@ -6,19 +6,16 @@ @using Connected.Services; @using Connected.Utilities; -@inject ModalDialogService modalDialog; - +@inject ModalDialogService modalDialog

MODAL DIALOG EXAMPLE

-

Modal result: @test_modal_result

Value: @value.ToString()

- @code { int value = 0; diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor index 4183816..237f31a 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor @@ -1,71 +1,31 @@ @page "/" +@using Connected.Enums; @using Connected.Models; @using Connected.Components; - - -

Component Sandbox

- - - @for (int i = 0; i < 5; i++) - { - int num = i; - - - Fixed content @num.ToString() - - - Collapsable content @num.ToString() - - - } - - -

Izbran datum je: @date

- - - - Step1 - - - Step2 - - - Step3 - - - Step4 - - - - - - - - - - - - -

Selected date is @date.ToString()

- -

Number is: @number.ToString()

-

DNumber is: @dnumber.ToString()

+@using Connected.Services; +@using Connected.Utilities; + +@if (loaded) +{ +

Component Example page

+ +
    +
    • +
    • +
    • +
    • +
+} else +{ +

Loading...

+} @code { - DateTime date = DateTime.Today; - - double dnumber = 0; - - int number = 0; - - string ErrorText = ""; + bool loaded = false; - public void ChangeErrorText() + protected override void OnInitialized() { - if (string.IsNullOrEmpty(ErrorText)) - ErrorText = "Test string: Error has ocurred!"; - else - ErrorText = string.Empty; - //StateHasChanged(); + loaded=true; + StateHasChanged(); } -} \ No newline at end of file +} diff --git a/src/connected.components/Models/Alert/AlertOptions.cs b/src/Connected.Components/Classes/Alert/AlertOptions.cs similarity index 100% rename from src/connected.components/Models/Alert/AlertOptions.cs rename to src/Connected.Components/Classes/Alert/AlertOptions.cs diff --git a/src/Connected.Components/Classes/Grid/DataGridOptions.cs b/src/Connected.Components/Classes/Grid/DataGridOptions.cs new file mode 100644 index 0000000..6caaf23 --- /dev/null +++ b/src/Connected.Components/Classes/Grid/DataGridOptions.cs @@ -0,0 +1,67 @@ +namespace Connected.Classes.Grid; +public class DataGridOptions +{ + /// + /// Determine if images will be shown inside the row. If row has no image then it is ignored + /// + public bool ShowImage = true; + public SmScrn_GridImgPos ImagePosition = SmScrn_GridImgPos.Left; + public bool Collapsible = true; + public bool Dense = true; + public bool ShowSelect = true; + public int ItemsPerPage = 10; + public int SelectedPage = 1; + public string DataSet_ImgColName = string.Empty; + + public int Offset + { + get + { + return (SelectedPage - 1) * ItemsPerPage; + } + } + + public DataGridOptions() + { + ShowImage = false; + ImagePosition = SmScrn_GridImgPos.Left; + Collapsible = true; + Dense = true; + ShowSelect = true; + ItemsPerPage = 10; + SelectedPage = 1; + DataSet_ImgColName = string.Empty; + } + public DataGridOptions(DataGridOptions options) + { + ShowImage = options.ShowImage; + ImagePosition = options.ImagePosition; + Collapsible = options.Collapsible; + Dense = options.Dense; + ShowSelect = options.ShowSelect; + ItemsPerPage = options.ItemsPerPage; + SelectedPage = options.SelectedPage; + DataSet_ImgColName = options.DataSet_ImgColName; + } + + public DataGridOptions( + bool ShowImage = false, + SmScrn_GridImgPos ImagePosition = SmScrn_GridImgPos.Left, + bool Collapsible = true, + bool Dense = true, + bool ShowSelect = true, + int ItemsPerPage = 10, + int SelectedPage = 1, + string DataSet_ImgColName = "") + { + this.ShowImage = ShowImage; + this.ImagePosition = ImagePosition; + this.Collapsible = Collapsible; + this.Dense = Dense; + this.ShowSelect = ShowSelect; + this.ItemsPerPage = ItemsPerPage; + this.SelectedPage = SelectedPage; + this.DataSet_ImgColName = DataSet_ImgColName; + + } +} diff --git a/src/Connected.Components/Models/InputBase.cs b/src/Connected.Components/Classes/InputBase.cs similarity index 100% rename from src/Connected.Components/Models/InputBase.cs rename to src/Connected.Components/Classes/InputBase.cs diff --git a/src/Connected.Components/Models/Modal/ModalButton.cs b/src/Connected.Components/Classes/Modal/ModalButton.cs similarity index 100% rename from src/Connected.Components/Models/Modal/ModalButton.cs rename to src/Connected.Components/Classes/Modal/ModalButton.cs diff --git a/src/Connected.Components/Models/Modal/ModalEvent.cs b/src/Connected.Components/Classes/Modal/ModalEvent.cs similarity index 100% rename from src/Connected.Components/Models/Modal/ModalEvent.cs rename to src/Connected.Components/Classes/Modal/ModalEvent.cs diff --git a/src/Connected.Components/Models/Modal/ModalOptions.cs b/src/Connected.Components/Classes/Modal/ModalOptions.cs similarity index 100% rename from src/Connected.Components/Models/Modal/ModalOptions.cs rename to src/Connected.Components/Classes/Modal/ModalOptions.cs diff --git a/src/Connected.Components/Components/Grid.razor b/src/Connected.Components/Components/Grid.razor index 42bb7aa..c0d110a 100644 --- a/src/Connected.Components/Components/Grid.razor +++ b/src/Connected.Components/Components/Grid.razor @@ -1,5 +1,18 @@ - -
- @ChildContent +@attribute [CascadingTypeParameter(nameof(DataType))] +@typeparam DataType + + +
+ @foreach (var Item in ItemsToShow) + { + + + @RowTemplate(Item) + + + @RowDetailTemplate(Item) + + + }
diff --git a/src/Connected.Components/Components/Grid.razor.cs b/src/Connected.Components/Components/Grid.razor.cs index fe820dd..9ef8e61 100644 --- a/src/Connected.Components/Components/Grid.razor.cs +++ b/src/Connected.Components/Components/Grid.razor.cs @@ -1,40 +1,78 @@ -using Connected.Utilities; +using Connected.Classes.Grid; +using Connected.Utilities; using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Options; +using System.Collections.ObjectModel; namespace Connected.Components; -public partial class Grid: ComponentBase +public partial class Grid : ComponentBase { - public List Rows { get; set; } = new(); - - [Parameter] - public RenderFragment? ChildContent { get; set; } [Parameter] - public bool Dense { get; set; } = true; + public ObservableCollection? Items { get; set; } + + private List? ItemsToShow { get; set; } [Parameter] - public bool ContainsImage { get; set; } = true; + public RenderFragment? RowTemplate { get; set; } [Parameter] - public bool ShowSelect { get; set; } = true; + public RenderFragment? RowDetailTemplate { get; set; } + [Parameter] + public RenderFragment? Img { get; set; } [Parameter] - public bool Collapsable { get; set; } = true; + public DataGridOptions? Options { get; set; } = null; [Parameter] - public string Class { get; set; } = string.Empty; + public List? SearchFilters { get; set; } = null; - private string GridClass + public int Count + { + get + { + return Items?.Count ?? 0; + } + } + + [Parameter] + public string GridClass { get; set; } = string.Empty; + private CssBuilder GridClassList { get { return new CssBuilder("data-grid") - .AddClass("dense", Dense) - .AddClass("image", ContainsImage) - .AddClass("select", ShowSelect) - .AddClass("collapse", Collapsable) - .AddClass(Class) - .Build(); + .AddClass("dense", Options?.Dense ?? true) + .AddClass("image", Options?.ShowImage ?? true) + .AddClass("select", Options?.ShowSelect ?? true) + .AddClass("collapse", Options?.Collapsible ?? true) + .AddClass(GridClass); } } + + public void GetItems() + { + /* + Web API call for item fetch include SearchFilters + */ + SetItemsToShow(); + } + + private void OnPageChange(int page) + { + Options.SelectedPage=page; + + //SetItemsToShow(); + } + + private void SetItemsToShow() + { + ItemsToShow= Items?.Skip(Options.Offset).Take(Options.ItemsPerPage).ToList() ?? new(); + } + + protected override async Task OnInitializedAsync() + { + SetItemsToShow(); + await base.OnInitializedAsync(); + } } diff --git a/src/Connected.Components/Components/GridRow.razor b/src/Connected.Components/Components/GridRow.razor index 292cee0..faaf275 100644 --- a/src/Connected.Components/Components/GridRow.razor +++ b/src/Connected.Components/Components/GridRow.razor @@ -1,19 +1,32 @@ - -
-
+@typeparam DataType + + +
+
-
- -
+
+ @if (ShowImageBlock()) + { +
+ } + +
+ + +
+ + @FixedContent(Item) +
+ - -
- @ChildContent +
diff --git a/src/Connected.Components/Components/GridRow.razor.cs b/src/Connected.Components/Components/GridRow.razor.cs index edcb6d5..08f4696 100644 --- a/src/Connected.Components/Components/GridRow.razor.cs +++ b/src/Connected.Components/Components/GridRow.razor.cs @@ -2,16 +2,23 @@ using Microsoft.AspNetCore.Components; namespace Connected.Components; -public partial class GridRow : ComponentBase +public partial class GridRow : ComponentBase { [CascadingParameter] - public Grid Parent { get; set; } + public Grid Parent { get; set; } - public List Children { get; set; } + [Parameter] + public RenderFragment? FixedContent { get; set; } + + [Parameter] + public RenderFragment? CollapsibleContent { get; set; } [Parameter] - public RenderFragment? ChildContent { get; set; } + public string? ImgSrc { get; set; } = null; + + [Parameter] + public DataType? Item { get; set; } [Parameter] public bool CollapsedItemShown { get; set; } = false; @@ -22,19 +29,43 @@ public partial class GridRow : ComponentBase } [Parameter] - public string Class { get; set; } = string.Empty; + public string RowClass { get; set; } = string.Empty; + private CssBuilder GridRowClass + { + get + { + return new CssBuilder("data-grid-row-content") + .AddClass("show", CollapsedItemShown) + .AddClass(RowClass); + } + } - [Parameter] - public GridRowTemplate? Template { get; set; } = null; + private CssBuilder CollapsedClass + { + get + { + return new CssBuilder() + .AddClass("show", CollapsedItemShown) + .AddClass(RowClass); + } + } - private string GridRowClass + private bool ShowImageBlock() + { + if (string.IsNullOrEmpty(ImgSrc)) return false; + bool result = Parent.Options?.ShowImage ?? true; + return result; + } + + private CssBuilder ImageClass { get { - return new CssBuilder("data-grid-row-content") - .AddClass("show",CollapsedItemShown) - .AddClass(Class) - .Build(); + return new CssBuilder() + .AddClass("show-image-vertical", Parent.Options.ImagePosition==SmScrn_GridImgPos.Top) + .AddClass("show-image", Parent.Options.ImagePosition == SmScrn_GridImgPos.Left) + + .AddClass(RowClass); } } @@ -46,13 +77,19 @@ public partial class GridRow : ComponentBase await SwitchButtonChangeEvent.InvokeAsync(args); } - private string SwitchButtonId = Guid.NewGuid().ToString(); + private void SetImgSrc() + { + var colname = Parent.Options.DataSet_ImgColName; + var property = typeof(DataType).GetProperty(colname); + ImgSrc = property?.GetValue(Item)?.ToString() ?? ""; + } protected override async Task OnInitializedAsync() { - if (Parent.Rows is null) Parent.Rows = new(); - Parent.Rows.Add(this); + SetImgSrc(); await base.OnInitializedAsync(); } + private string SwitchButtonId = Guid.NewGuid().ToString(); + } \ No newline at end of file diff --git a/src/Connected.Components/Components/GridRowContent.razor b/src/Connected.Components/Components/GridRowContent.razor deleted file mode 100644 index db07431..0000000 --- a/src/Connected.Components/Components/GridRowContent.razor +++ /dev/null @@ -1,3 +0,0 @@ -
- @ChildContent -
diff --git a/src/Connected.Components/Components/GridRowContent.razor.cs b/src/Connected.Components/Components/GridRowContent.razor.cs deleted file mode 100644 index 4c76533..0000000 --- a/src/Connected.Components/Components/GridRowContent.razor.cs +++ /dev/null @@ -1,53 +0,0 @@ -using Connected.Utilities; -using Microsoft.AspNetCore.Components; - -namespace Connected.Components; -public partial class GridRowContent : ComponentBase -{ - [CascadingParameter] - public GridRow? Parent { get; set; } - - /// - /// Text shown inside the button - /// Options: any string variable - /// Default: string.Empty - /// - [Parameter] - public RenderFragment? ChildContent { get; set; } - - /// - /// Disabled or enabled. - /// Default: false - /// - [Parameter] - public bool Collapsable { get; set; } = false; - - private string GeneratedRowContentClass - { - get - { - CssBuilder cssBuilder = new CssBuilder("row"); - - cssBuilder.AddClass("collapsed", Collapsable); - - if (Parent is not null) - { - cssBuilder.AddClass("show", (Collapsable ? Parent.CollapsedItemShown : false)); - } - - return cssBuilder.Build(); - } - } - - protected override async Task OnInitializedAsync() - { - - if (Parent is not null) - { - if (Parent.Children is null) Parent.Children = new(); - Parent.Children.Add(this); - } - await base.OnInitializedAsync(); - } -} - diff --git a/src/Connected.Components/Enums/Position.cs b/src/Connected.Components/Enums/Position.cs index 8f187be..eee9a3b 100644 --- a/src/Connected.Components/Enums/Position.cs +++ b/src/Connected.Components/Enums/Position.cs @@ -15,3 +15,9 @@ public enum Position Start, End } + +public enum SmScrn_GridImgPos +{ + Top, + Left, +}