Grid Component

src/Connected.Components.Showcase.Runner/Connected.Components.Showcase.Runner.csproj

@@ -22,4 +22,10 @@
 		<Watch Remove="..\..\src\**\bin\**" />
 	</ItemGroup>
 
+
+	<ItemGroup>
+	  <Watch Remove="Pages\ComponentsExamples\DataGridExample.razor" />
+	  <Watch Remove="Pages\ComponentsExamples\DatePickerExample.razor" />
+	</ItemGroup>
+
 </Project>

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)
+{
+    <h1 style="text-align:center;">DATA GRID EXAMPLE</h1>
+
+    <Grid Items="Data" Context="number" Options="dataGridOptions">
+        <RowTemplate>
+            @number
+        </RowTemplate>
+        <RowDetailTemplate>
+            @(number * 2)
+        </RowDetailTemplate>
+    </Grid>
+
+    <Grid Items="DData" Context="dummy" Options="dataGridOptions">
+        <RowTemplate>
+            @dummy.Value
+        </RowTemplate>
+        <RowDetailTemplate>
+            @dummy.Value
+        </RowDetailTemplate>
+    </Grid>
+
+}
+else
+{
+    <h4>Data filling...</h4>
+}
+
+@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<int> Data = new();
+    ObservableCollection<DummyData> 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";
+    }
+}
+

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;
+
+
+<h1 style="text-align:center;">DATE PICKER EXAMPLE</h1>
+
+
+<DatePicker @bind-SelectedDate=@date></DatePicker>
+
+
+<h4>Selected date: @date.ToString("dd. MM. yyyy")</h4>
+
+
+@code {
+    DateTime date = DateTime.Now;
+}

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
-
 
 <h1 style="text-align:center;">MODAL DIALOG EXAMPLE</h1>
 
-
 <Button OnClick="OpenModalDialog">Open dialog</Button>
 
 <p>Modal result: @test_modal_result</p>
 
 <h4>Value: @value.ToString()</h4>
 
-
 @code {
     int value = 0;
 

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -1,71 +1,31 @@
 @page "/"
+@using Connected.Enums;
 @using Connected.Models;
 @using Connected.Components;
+@using Connected.Services;
+@using Connected.Utilities;
 
+@if (loaded)
+{
+    <h1 style="text-align:center;">Component Example page</h1>
 
-<h1 style="text-align:center;">Component Sandbox</h1>
+    <ul>
-
+        <li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self"  /></li>
-<Grid>
+        <li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
-    @for (int i = 0; i < 5; i++)
+        <li><Link Class="m-1" Url="datepicker" Text="Date picker" Target="Target.Self" /></li>
-    {
+       <li><Link Class="m-1" Url="datagrid" Text="Data Grid" Target="Target.Self" /></li>
-        int num = i;
+    </ul>
-        <GridRow>
+} else
-            <GridRowContent>
+{
-                Fixed content @num.ToString()
+    <h3>Loading...</h3>
-            </GridRowContent>
+}
-            <GridRowContent Collapsable=true>
-                Collapsable content @num.ToString()
-            </GridRowContent>
-        </GridRow>
-    }
-</Grid>
-
-<p>Izbran datum je: @date</p>
-
-<FormWizard Id="Wizard1">
-    <FormWizardStep Name="Step1">
-        Step1
-    </FormWizardStep>
-    <FormWizardStep Name="Step2">
-        Step2
-    </FormWizardStep>
-    <FormWizardStep Name="Step3">
-        Step3
-    </FormWizardStep>
-    <FormWizardStep Name="Step4">
-        Step4
-    </FormWizardStep>
-</FormWizard>
-<DatePicker @bind-SelectedDate=@date>
- 
-</DatePicker>
-
-<NumberStepper @bind-Value=number ></NumberStepper>
-
-<Button OnClick="ChangeErrorText" >Error text</Button>
-
-<NumberInput @bind-Value=@dnumber Step=0.03 DecimalPlaces=2 HelperText="Helper text" ErrorText="@ErrorText" Clearable=true></NumberInput>
-
-<p>Selected date is @date.ToString()</p>
-
-<p>Number is: @number.ToString()</p>
-<p>DNumber is: @dnumber.ToString()</p>
 
 @code {
-    DateTime date = DateTime.Today;
+    bool loaded = false;
 
-    double dnumber = 0;
+    protected override void OnInitialized()
-
-    int number = 0;
-
-    string ErrorText = "";
-
-    public void ChangeErrorText()
     {
-        if (string.IsNullOrEmpty(ErrorText))
+        loaded=true;
-            ErrorText = "Test string: Error has ocurred!";
+        StateHasChanged();
-        else
-            ErrorText = string.Empty;
-        //StateHasChanged();
     }
-}
+}

src/Connected.Components/Classes/Grid/DataGridOptions.cs

@@ -0,0 +1,67 @@
+namespace Connected.Classes.Grid;
+public class DataGridOptions
+{
+	/// <summary>
+	/// Determine if images will be shown inside the row. If row has no image then it is ignored
+	/// </summary>
+	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;
+
+	}
+}

src/Connected.Components/Components/Grid.razor

@@ -1,5 +1,18 @@
-<CascadingValue Value="this">
+@attribute [CascadingTypeParameter(nameof(DataType))]
-    <div class="@GridClass">
+@typeparam DataType
-        @ChildContent
+
+<CascadingValue Value="this">
+    <div class="@GridClassList.ToString()">
+        @foreach (var Item in ItemsToShow)
+        {
+            <GridRow DataType="DataType" Item="@Item" ImgSrc="" >
+                <FixedContent>
+                    @RowTemplate(Item) 
+                </FixedContent>
+                <CollapsibleContent>
+                    @RowDetailTemplate(Item)
+                </CollapsibleContent>
+            </GridRow>
+        }
     </div>
 </CascadingValue>

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<DataType> : ComponentBase
 {
-	public List<GridRow> Rows { get; set; } = new();
-	
-	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
 
 	[Parameter]
-	public bool Dense { get; set; } = true;
+	public ObservableCollection<DataType>? Items { get; set; }
+
+	private List<DataType>? ItemsToShow { get; set; }
 
 	[Parameter]
-	public bool ContainsImage { get; set; } = true;
+	public RenderFragment<DataType>? RowTemplate { get; set; }
 
 	[Parameter]
-	public bool ShowSelect { get; set; } = true;
+	public RenderFragment<DataType>? 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<string>? 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("dense", Options?.Dense ?? true)
-				.AddClass("image", ContainsImage)
+				.AddClass("image", Options?.ShowImage ?? true)
-				.AddClass("select", ShowSelect)
+				.AddClass("select", Options?.ShowSelect ?? true)
-				.AddClass("collapse", Collapsable)
+				.AddClass("collapse", Options?.Collapsible ?? true)
-				.AddClass(Class)
+				.AddClass(GridClass);
-				.Build();
 		}
 	}
+
+	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();
+	}
 }

src/Connected.Components/Components/GridRow.razor

@@ -1,19 +1,32 @@
-<CascadingValue Value="this">
+@typeparam DataType
-    <div class="@GridRowClass" id="@Guid.NewGuid()">
+
-        <div class="data-grid-select" >
+<CascadingValue Value="this">
+    <div class="@GridRowClass.ToString()" id="@Guid.NewGuid()">
+        <div class="data-grid-select">
             <label class="toggle-group m-0" for="@SwitchButtonId">
                 <input class="toggle-input" id="@SwitchButtonId" name="toggle" type="checkbox" @onchange="(args=>SwitchButtonChange(args))">
                 <div class="toggle-fill"></div>
             </label>
         </div>
 
-        <div class="data-grid-img">
+        <div class="data-grid-container @ImageClass.ToString()">
-            <img class="img-fluid" src="https://source.unsplash.com/random?face" />
+            @if (ShowImageBlock())
-        </div>
+            {
+                <div class="data-grid-img"><img class="img-fluid" src="@ImgSrc" /></div>
+            }
 
-        <!-- Row content -->
+            <div class="data-grid-wrapper">
-        <div class="data-grid-container">
+
-            @ChildContent
+                <!-- Nova verzija-->
+                <div class="row">
+                    <!-- Fiksna vsebina --> 
+                    @FixedContent(Item)
+                </div>
+                <div class="row collapsed @CollapsedClass.ToString()">
+                    @CollapsibleContent(Item)
+                </div>
+
+            </div>
         </div>
 
         <div class="data-grid-collapse-cta" @onclick="ToggleNav">

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<DataType> : ComponentBase
 {
 
 	[CascadingParameter]
-	public Grid Parent { get; set; }
+	public Grid<DataType> Parent { get; set; }
-
-	public List<GridRowContent> Children { get; set; }
 
 	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
+	public RenderFragment<DataType>? FixedContent { get; set; }
+
+	[Parameter]
+	public RenderFragment<DataType>? CollapsibleContent { get; set; }
+
+	[Parameter]
+	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
-	[Parameter]
-	public GridRowTemplate? Template { get; set; } = null;
-
-	private string GridRowClass
 	{
 		get
 		{
 			return new CssBuilder("data-grid-row-content")
-				.AddClass("show",CollapsedItemShown)
+				.AddClass("show", CollapsedItemShown)
-				.AddClass(Class)
+				.AddClass(RowClass);
-				.Build();
+		}
+	}
+
+	private CssBuilder CollapsedClass
+	{
+		get
+		{
+			return new CssBuilder()
+				.AddClass("show", CollapsedItemShown)
+				.AddClass(RowClass);
+		}
+	}
+
+	private bool ShowImageBlock()
+	{
+		if (string.IsNullOrEmpty(ImgSrc)) return false;
+		bool result = Parent.Options?.ShowImage ?? true;
+		return result;
+	}
+
+	private CssBuilder ImageClass
+	{
+		get
+		{
+			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();
+		SetImgSrc();
-		Parent.Rows.Add(this);
 		await base.OnInitializedAsync();
 	}
 
+	private string SwitchButtonId = Guid.NewGuid().ToString();
+
 }

src/Connected.Components/Components/GridRowContent.razor

@@ -1,3 +0,0 @@
-<div class="@GeneratedRowContentClass">
-    @ChildContent
-</div>

src/Connected.Components/Components/GridRowContent.razor.cs

@@ -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; }
-
-	/// <summary>
-	/// Text shown inside the button
-	/// Options: any string variable
-	/// Default: string.Empty
-	/// </summary>
-	[Parameter]
-	public RenderFragment? ChildContent { get; set; }
-
-	/// <summary>
-	/// Disabled or enabled.
-	/// Default: false
-	/// </summary>
-	[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();
-	}
-}
-

src/Connected.Components/Enums/Position.cs

@@ -15,3 +15,9 @@ public enum Position
 	Start,
 	End
 }
+
+public enum SmScrn_GridImgPos
+{
+	Top,
+	Left,
+}