From 6b4826fd23994953dd271d63c7008f268374cc24 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Tue, 22 Sep 2020 21:11:31 +0200
Subject: [PATCH] Add different color to fixed columns

---
 src/app/pages/tables/bikes/bikes.component.html | 2 +-
 src/app/pages/tables/bikes/bikes.component.scss | 5 +++++
 src/app/pages/tables/bikes/bikes.component.ts   | 7 +++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html
index d407035..3a8e9c4 100644
--- a/src/app/pages/tables/bikes/bikes.component.html
+++ b/src/app/pages/tables/bikes/bikes.component.html
@@ -78,7 +78,7 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element">
           <div class="button-wrapper">
-            <button mat-icon-button>
+            <button mat-icon-button (click)="edit(element.id)">
               <mat-icon>edit</mat-icon>
             </button>
             <button mat-icon-button>
diff --git a/src/app/pages/tables/bikes/bikes.component.scss b/src/app/pages/tables/bikes/bikes.component.scss
index e4dddb5..d9125d0 100644
--- a/src/app/pages/tables/bikes/bikes.component.scss
+++ b/src/app/pages/tables/bikes/bikes.component.scss
@@ -20,6 +20,11 @@
         box-sizing: border-box;
       }
 
+      .mat-table-sticky {
+        filter: brightness(90%);
+        //opacity: 1;
+      }
+
       .button-wrapper {
         display: flex;
         flex-direction: row;
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts
index 019a1d3..522bfca 100644
--- a/src/app/pages/tables/bikes/bikes.component.ts
+++ b/src/app/pages/tables/bikes/bikes.component.ts
@@ -21,9 +21,12 @@ export class BikesComponent {
     bikesService.loadBikes();
   }
 
+  edit(id: string) {
+    console.log(id);
+  }
+
   drop(event: CdkDragDrop<string[]>) {
-    console.log(event);
-    moveItemInArray(this.displayedColumns, event.previousIndex + 1, event.currentIndex + 1); // + 1 because the first (selection) column is not dragable
+    moveItemInArray(this.displayedColumns, event.previousIndex + 2, event.currentIndex + 2); // +2 because the first 2 (selection + name) columns are not dragable
   }
 
   /** Whether the number of selected elements matches the total number of rows. */