From c9473986d3eb5527f112e17441492cc50f522943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 6 Mar 2019 14:05:31 +0100
Subject: [PATCH] Add highlighting for status in list

---
 .../board/board-list/board-list.component.html |  8 +++++++-
 .../board/board-list/board-list.component.sass |  8 ++++++++
 .../board/board-list/board-list.component.ts   | 18 +++++++++++++++++-
 .../modules/boards/board/board.component.html  |  4 +++-
 .../modules/boards/board/board.component.sass  |  1 -
 .../modules/boards/board/board.component.ts    | 13 ++++++++++++-
 6 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/modules/boards/board/board-list/board-list.component.html b/frontend/src/app/modules/boards/board/board-list/board-list.component.html
index 6f227ca973..36a8f838a2 100644
--- a/frontend/src/app/modules/boards/board/board-list/board-list.component.html
+++ b/frontend/src/app/modules/boards/board/board-list/board-list.component.html
@@ -1,8 +1,14 @@
 <div #loadingIndicator
      [attr.data-query-name]="listName"
-     class="board-list--container loading-indicator--location">
+     class="board-list--container loading-indicator--location"
+     [ngClass]="{ '-action-list': board.isAction }">
   <ng-container *ngIf="query">
 
+    <div *ngIf="board.isAction"
+         class="board-list--action-bar"
+         [ngClass]="boardListActionColorClass(query)">
+    </div>
+
     <div class="board-list--header">
       <editable-toolbar-title [title]="query.name"
                               [inFlight]="inFlight"
diff --git a/frontend/src/app/modules/boards/board/board-list/board-list.component.sass b/frontend/src/app/modules/boards/board/board-list/board-list.component.sass
index 5f691da99d..fc3ee70edb 100644
--- a/frontend/src/app/modules/boards/board/board-list/board-list.component.sass
+++ b/frontend/src/app/modules/boards/board/board-list/board-list.component.sass
@@ -3,6 +3,14 @@
   height: 75vh
   overflow-y: auto
 
+.board-list--container
+  border: 1px solid #ccc
+
+.board-list--action-bar
+  width: 100%
+  height: 5px
+  border-bottom: 1px solid #f1f1f1
+
 .board-list--header
   padding: 10px 20px
   border-bottom: 1px solid #ccc
diff --git a/frontend/src/app/modules/boards/board/board-list/board-list.component.ts b/frontend/src/app/modules/boards/board/board-list/board-list.component.ts
index 657811cc58..402e9abc7f 100644
--- a/frontend/src/app/modules/boards/board/board-list/board-list.component.ts
+++ b/frontend/src/app/modules/boards/board/board-list/board-list.component.ts
@@ -2,7 +2,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  EventEmitter,
+  EventEmitter, Input,
   OnDestroy,
   OnInit,
   Output,
@@ -23,6 +23,8 @@ import {BoardCacheService} from "core-app/modules/boards/board/board-cache.servi
 import {StateService} from "@uirouter/core";
 import {NotificationsService} from "core-app/modules/common/notifications/notifications.service";
 import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space";
+import {Board} from "core-app/modules/boards/board/board";
+import {HalResource} from "core-app/modules/hal/resources/hal-resource";
 
 @Component({
   selector: 'board-list',
@@ -36,6 +38,9 @@ export class BoardListComponent extends AbstractWidgetComponent implements OnIni
   /** Output fired upon query removal */
   @Output() onRemove = new EventEmitter<void>();
 
+  /** Access to the board resource */
+  @Input() public board:Board;
+
   /** Access to the loading indicator element */
   @ViewChild('loadingIndicator') indicator:ElementRef;
 
@@ -130,6 +135,17 @@ export class BoardListComponent extends AbstractWidgetComponent implements OnIni
       .catch(() => this.inFlight = false);
   }
 
+  public boardListActionColorClass(query:QueryResource):string {
+    const attribute = this.board.actionAttribute!;
+    const filter = _.find(query.filters, f => f.id === attribute);
+
+    if (!(filter && filter.values[0] instanceof HalResource)) {
+      return '';
+    }
+    const value = filter.values[0] as HalResource;
+    return `__hl_row_${attribute}_${value.getId()}`;
+  }
+
   public get listName() {
     return this.query && this.query.name;
   }
diff --git a/frontend/src/app/modules/boards/board/board.component.html b/frontend/src/app/modules/boards/board/board.component.html
index cd7cbfca4d..99c9568e9b 100644
--- a/frontend/src/app/modules/boards/board/board.component.html
+++ b/frontend/src/app/modules/boards/board/board.component.html
@@ -50,7 +50,9 @@
       <span *ngIf="board.editable"
             class="boards-list-item-handle icon icon-drag-handle"
             cdkDragHandle></span>
-      <board-list [resource]="query" (onRemove)="removeList(board, query)"></board-list>
+      <board-list [resource]="query"
+                  [board]="board"
+                  (onRemove)="removeList(board, query)"></board-list>
     </div>
 
     <div class="boards-list--add-item -no-text-select"
diff --git a/frontend/src/app/modules/boards/board/board.component.sass b/frontend/src/app/modules/boards/board/board.component.sass
index 5fc81f07d2..d803d1e195 100644
--- a/frontend/src/app/modules/boards/board/board.component.sass
+++ b/frontend/src/app/modules/boards/board/board.component.sass
@@ -9,7 +9,6 @@
 
 .boards-list--item
   flex: 0 0 20%
-  border: 1px solid #ccc
   margin-left: 2rem
   position: relative
 
diff --git a/frontend/src/app/modules/boards/board/board.component.ts b/frontend/src/app/modules/boards/board/board.component.ts
index a7739dfd63..24ebfab12c 100644
--- a/frontend/src/app/modules/boards/board/board.component.ts
+++ b/frontend/src/app/modules/boards/board/board.component.ts
@@ -15,6 +15,8 @@ import {BoardListComponent} from "core-app/modules/boards/board/board-list/board
 import {BoardActionsRegistryService} from "core-app/modules/boards/board/board-actions/board-actions-registry.service";
 import {OpModalService} from "core-components/op-modals/op-modal.service";
 import {AddListModalComponent} from "core-app/modules/boards/board/add-list-modal/add-list-modal.component";
+import {DynamicCssService} from "core-app/modules/common/dynamic-css/dynamic-css.service";
+import {init} from "protractor/built/launcher";
 
 
 @Component({
@@ -61,6 +63,7 @@ export class BoardComponent implements OnInit, OnDestroy {
               private readonly injector:Injector,
               private readonly boardActions:BoardActionsRegistryService,
               private readonly BoardCache:BoardCacheService,
+              private readonly dynamicCss:DynamicCssService,
               private readonly Boards:BoardService) {
   }
 
@@ -70,13 +73,21 @@ export class BoardComponent implements OnInit, OnDestroy {
 
   ngOnInit():void {
     const id:string = this.state.params.board_id.toString();
+    let initialized = false;
 
     this.BoardCache
       .requireAndStream(id)
       .pipe(
         untilComponentDestroyed(this)
       )
-      .subscribe(board => this.board = board);
+      .subscribe(board => {
+        this.board = board;
+
+        if (board.isAction && !initialized) {
+          this.dynamicCss.requireHighlighting();
+          initialized = true;
+        }
+      });
   }
 
   ngOnDestroy():void {