Implement card row positioning

Command/BatchEditRowColumnCommand.cs

@@ -0,0 +1,6 @@
+using Gridly.Models;
+using MediatR;
+
+namespace Gridly.Command;
+
+public class BatchEditRowColumnCommand : List<ColumnRowModel>, IRequest<IResult> {}

Command/GetAllRowColumnsCommands.cs

@@ -0,0 +1,5 @@
+using MediatR;
+
+namespace Gridly.Command;
+
+public class GetAllRowColumnsCommands : IRequest<IResult> {}

Command/SaveColumnRowCommands.cs

@@ -0,0 +1,6 @@
+using Gridly.Models;
+using MediatR;
+
+namespace Gridly.Command;
+
+public class SaveColumnRowCommands : ColumnRowModel, IRequest<IResult> { }

Constants/QueryStrings.cs

@@ -2,9 +2,14 @@ namespace Gridly.Constants;
 
 public class QueryStrings
 {
+    public const string InsertToRowQuery = @"
+    INSERT INTO RowColumn (RowPosition, RowWidth) 
+    VALUES (@RowPosition, @RowWidth);
+    SELECT * FROM RowColumn WHERE Id = last_insert_rowid();";
+
     public const string InsertToCardQuery = @"
-    INSERT INTO Card (IndexPosition, Name, Url, IconUrl) 
-    VALUES (@IndexPosition, @Name, @Url, @IconUrl);
+    INSERT INTO Card (RowColumnId, IndexPosition, Name, Url, IconUrl) 
+    VALUES (@RowColumnId, @IndexPosition, @Name, @Url, @IconUrl);
     SELECT * FROM Card WHERE Id = last_insert_rowid();";
 
     public const string InsertToSettingsQuery = @"
@@ -26,6 +31,7 @@ INSERT INTO IconsConnected (CardId, IconId)
      SELECT 
         co.Id AS CardId, 
         co.IndexPosition, 
+        co.RowColumnId,
         co.Name AS CardName, 
         co.Url, 
         co.IconUrl, 
@@ -41,6 +47,10 @@ INSERT INTO IconsConnected (CardId, IconId)
         i.MaterialIcon AS MaterialIcon
         FROM Card co /**leftjoin**//**where**//**orderby**/";
 
+    public const string SelectRowQuery = @"
+    SELECT r.Id AS Id, r.RowPosition AS RowPosition, r.RowWidth AS RowWidth
+    FROM RowColumn r /**leftjoin**//**where**//**orderby**/";
+
     public const string SelectIconQuery = @"
     SELECT i.Id, i.Name, i.Type, i.Base64Data, i.MaterialIcon 
     FROM Icon i /**leftjoin**//**where**/";
@@ -56,18 +66,26 @@ UPDATE Icon
         Base64Data = @Base64Data, 
         MaterialIcon = @MaterialIcon
         /**where**/";
+
+    public const string UpdateRowQuery = @"
+    UPDATE RowColumn
+    SET RowPosition = @RowPosition, 
+        RowWidth = @RowWidth
+        /**where**/";
 
     public const string UpdateCardQuery = @"
     UPDATE Card
     SET Name = @Name, 
         IndexPosition = @IndexPosition,
+        RowColumnId = @RowColumnId,
         Url = @Url, 
         IconUrl = @IconUrl
         /**where**/";
 
     public const string UpdateBatchCardQuery = @"
     UPDATE Card 
-    SET IndexPosition = @IndexPosition
+    SET IndexPosition = @IndexPosition, 
+        RowColumnId = @RowColumnId
     WHERE Id = @Id;
 
     UPDATE Settings 
@@ -100,5 +118,6 @@ UPDATE Settings
     public const string WhereCardIdEqualsCardIdWithAlias = "co.Id = @cardId";
     public const string WhereIconNameEqualsNameWithAlias = "i.Name = @Name";
     public const string WhereIconTypeEqualsTypeWithAlias = "i.Type = @Type";
+    public const string RowPositionWithAlias = "r.RowPosition;";
     public const string IndexPositionWithAlias = "co.IndexPosition;";
 }

Controllers/RowController.cs

@@ -0,0 +1,23 @@
+using Gridly.Command;
+using MediatR;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Gridly.Controllers;
+
+[ApiController]
+[Route("/api/[controller]")]
+public class RowController(IMediator meditor) : ControllerBase
+{
+    [HttpPost("save")]
+    public async Task<IResult> Save([FromBody] SaveColumnRowCommands commands) =>
+        await meditor.Send(commands) is null ? 
+            Results.BadRequest() : Results.Ok();
+
+    [HttpGet("get")]
+    public async Task<IResult> Get() =>
+        await meditor.Send(new GetAllRowColumnsCommands());
+
+    [HttpPost("batch/edit")]
+    public async Task<IResult> Edit([FromBody] BatchEditRowColumnCommand commands) => 
+        await meditor.Send(commands);
+}

Data/DbInitializer.cs

@@ -16,12 +16,19 @@ public async Task EnsureTablesCreatedAsync()
     {
         await connection.ExecuteAsync(
             sql:@"
+                CREATE TABLE IF NOT EXISTS RowColumn(
+                Id INTEGER PRIMARY KEY AUTOINCREMENT,
+                RowPosition INTEGER NOT NULL,
+                RowWidth INTEGER NOT NULL);
+
                 CREATE TABLE IF NOT EXISTS Card(
                 Id INTEGER PRIMARY KEY AUTOINCREMENT,
                 IndexPosition INTEGER NOT NULL,
+                RowColumnId INTEGER NOT NULL,
                 Name TEXT,
                 URL TEXT,
-                IconUrl TEXT);
+                IconUrl TEXT,
+                FOREIGN KEY(RowColumnId) REFERENCES RowColumn(Id) ON DELETE CASCADE);
 
                 CREATE TABLE IF NOT EXISTS IconsConnected(
                 Id INTEGER PRIMARY KEY AUTOINCREMENT,

Dtos/CardDtoModel.cs

@@ -4,6 +4,7 @@ public class CardDtoModel
 {
     public int CardId { get; set; }
     public int IndexPosition { get; set; }
+    public int RowColumnId { get; set; }
     public string CardName { get; set; }
     public string Url { get; set; }
     public string IconUrl { get; set; }

Dtos/ColumnRowDtoModel.cs

@@ -0,0 +1,11 @@
+using Gridly.Models;
+
+namespace Gridly.Dtos;
+
+public class ColumnRowDtoModel
+{
+    public int Id { get; set; }
+    public int RowPosition { get; set; }
+    public IEnumerable<CardModel> Cards { get; set; }
+    public int RowWidth { get; set; }
+}

Gridly-Client/src/app/components/grid/grid.component.css

@@ -1,12 +1,19 @@
 .grid-layout{
-  padding: 1em;
-  margin-top: 3em;
+  padding: 2em;
+  margin-top: 1em;
   display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: flex-start;
-  align-content: flex-start;
-  min-height: 100%;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.grid-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 32px;
+}
+
+.grid-row-empty {
+  min-height: 120px;
 }
 
 .grid-card-style {

Gridly-Client/src/app/components/grid/grid.component.html

@@ -1,15 +1,39 @@
-@if (cards$ | async; as cards) {
-  <div class="grid-layout" cdkDropList cdkDropListOrientation="horizontal" [cdkDropListDisabled]="!editActive()" [cdkDropListData]="cards" (cdkDropListDropped)="Drop($event)">
-    @for (card of cards; track card.id) {
-    <div
-      class="shadow-sm grid-card-style"
-      [style.height.px]="card.settings?.height"
-      [style.width.px]="card.settings?.width"
-      cdkDrag
-      [cdkDragDisabled]="!editActive()"
-      [id]="card.id.toString()">
-      <app-card-component [card]="card"></app-card-component>
-    </div>
+@if (rows$ | async; as rows) {
+  <div #gridLayout class="grid-layout">
+    @for (row of rows; track $index === row.id) {
+      <div class="grid-row"
+           [id]="RowId(row.rowPosition!)"
+           cdkDropList
+           cdkDropListOrientation="horizontal"
+           [cdkDropListConnectedTo]="RowIds(rows)"
+           [cdkDropListDisabled]="!editActive()"
+           [cdkDropListData]="row.cards"
+           (cdkDropListDropped)="Drop($event, rows ,row.rowPosition!)">
+        @for (card of row.cards; track card.id) {
+          <div
+            class="shadow-sm grid-card-style"
+            [style.height.px]="card.settings?.height"
+            [style.width.px]="card.settings?.width"
+            cdkDrag
+            [cdkDragData]="card"
+            [cdkDragDisabled]="!editActive()"
+            [id]="card.id.toString()">
+            <app-card-component [card]="card"></app-card-component>
+          </div>
+        }
+      </div>
+    }
+    @if (editActive()) {
+      <div
+        [id]="RowId(rows.length +1)"
+        class="grid-row grid-row-empty"
+        cdkDropList
+        cdkDropListOrientation="horizontal"
+        [cdkDropListData]="emptyRow"
+        [cdkDropListConnectedTo]="RowIds(rows)"
+        (cdkDropListDropped)="Drop($event, rows, (rows.length +1))">
+        <span></span>
+      </div>
     }
   </div>
 }