From bd69f0814d1b2fffd2ad431b152444c8d8564fca Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Mon, 25 Jan 2021 22:00:53 -0600
Subject: [PATCH] #58 - add ability to pin database column left or right

---
 .../database/columns/columns.component.html   | 19 +++++++++++++++++++
 .../database/columns/columns.component.ts     |  9 +++++++++
 .../editor/database/database.component.ts     |  4 ++++
 3 files changed, 32 insertions(+)

diff --git a/src/app/components/editor/database/columns/columns.component.html b/src/app/components/editor/database/columns/columns.component.html
index 53cc852..3fb61b0 100644
--- a/src/app/components/editor/database/columns/columns.component.html
+++ b/src/app/components/editor/database/columns/columns.component.html
@@ -48,6 +48,25 @@
           <ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
             <ion-icon color="danger" name="trash"></ion-icon>
           </ion-button>
+          <ion-button
+              fill="outline"
+              color="light"
+              (click)="iteratePin(i)"
+              [title]="columnSets[i].additionalData.pinned ? 'Column is pinned to the ' + columnSets[i].additionalData.pinned : 'Column is not pinned'"
+          >
+            <i
+              class="fa fa-caret-square-left"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="columnSets[i].additionalData.pinned === 'left'"
+            ></i>
+            <i
+              class="fa fa-caret-square-right"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="columnSets[i].additionalData.pinned === 'right'"
+            ></i>
+            <i
+              class="fa fa-square"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="!columnSets[i].additionalData.pinned"
+            ></i>
+          </ion-button>
         </ion-row>
         <ion-row>
           <ion-button fill="outline" color="light" size="small" (click)="onUpArrow(i)">
diff --git a/src/app/components/editor/database/columns/columns.component.ts b/src/app/components/editor/database/columns/columns.component.ts
index e73cb6c..b5f01ad 100644
--- a/src/app/components/editor/database/columns/columns.component.ts
+++ b/src/app/components/editor/database/columns/columns.component.ts
@@ -84,4 +84,13 @@ export class ColumnsComponent implements OnInit {
     }
   }
 
+  iteratePin(i) {
+    if ( !this.columnSets[i].additionalData.pinned ) {
+      this.columnSets[i].additionalData.pinned = 'left';
+    } else if ( this.columnSets[i].additionalData.pinned === 'left' ) {
+      this.columnSets[i].additionalData.pinned = 'right';
+    } else {
+      delete this.columnSets[i].additionalData.pinned;
+    }
+  }
 }
diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index ea9298f..bd6a96f 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -225,6 +225,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
         x.width = x.additionalData.width;
       }
 
+      if ( x.additionalData?.pinned ) {
+        x.pinned = x.additionalData.pinned;
+      }
+
       // Set editors and renderers for different types
       if ( x.Type === 'text' ) {
         x.editor = 'agTextCellEditor';