Add highlighting for status in list

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"

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

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;
   }

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"

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
 

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 {