Colors in the submission table

src/app/submissions/submission-list/submission-list.component.html

@@ -86,12 +86,17 @@
                               [(ngModel)]="selectedState"
                               [settings]="stateSettings"
                               (onSelect)="onStateSelect($event)"
-                              (onDeSelect)="onStateDeselect($event)">
+                              (onDeSelect)="onAnyDeselect($event)">
         </angular2-multiselect>
       </div>
       <div class="form-group col-lg-2">
-        <label for="show-groups">Show groups</label>
-        <input type="checkbox" id="show-groups" [checked]="showGroups" (change)="showGroups = !showGroups"/>
+        <label>Result</label>
+        <angular2-multiselect [data]="resultOptions"
+                              [(ngModel)]="selectedResult"
+                              [settings]="resultSettings"
+                              (onSelect)="onResultSelect($event)"
+                              (onDeSelect)="onAnyDeselect($event)">
+        </angular2-multiselect>
       </div>
     </div>
     <div class="row">
@@ -105,6 +110,7 @@
           [headerHeight]="50"
           [footerHeight]="40"
           [rowHeight]="40"
+          [rowClass]="getRowClass"
           [limit]="10">
           <!-- Row Column Template -->
           <ngx-datatable-column name="Submitted at" prop="created_at">

src/app/submissions/submission-list/submission-list.component.ts

-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Course, Submission, User } from '../../shared/models/models';
 import { Subscription } from 'rxjs';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -31,11 +31,13 @@ export class SubmissionListComponent implements OnInit, OnDestroy {
   projectOptions = [];
   stateOptions = [];
 
-  courseSettings = {};
-  groupSettings = {};
-  roleSettings = {};
-  projectSettings = {};
-  stateSettings = {};
+  courseSettings: any = { singleSelection: true, text: 'Select Course' };
+  groupSettings: any = { singleSelection: false, text: 'Select Group' };
+  roleSettings: any = { singleSelection: false, text: 'Select Role' };
+  projectSettings: any = { singleSelection: false, text: 'Select Project' };
+  stateSettings: any = { singleSelection: true, text: 'Select State' };
+  resultSettings: any = { singleSelection: true, text: 'Select Result' };
+
   selectedCourse: Course = null;
   selectedGroups = [];
   selectedRoles = [];
@@ -44,7 +46,8 @@ export class SubmissionListComponent implements OnInit, OnDestroy {
   selectedState;
   temp: Submission[];
   submissions: Submission[];
-  showGroups = true;
+  resultOptions = [];
+  selectedResult: string;
 
   constructor(private router: Router,
               private route: ActivatedRoute,
@@ -59,22 +62,19 @@ export class SubmissionListComponent implements OnInit, OnDestroy {
     this.loading = true;
   }
 
+  static optionsFromArray(arr: string[]) {
+    return arr.map((x) => ({ id: x, itemName: x }));
+  }
+
   async ngOnInit() {
     this.subscriptions.push(this.route.data.subscribe((data: { loggedInUser: User }) => {
       this.loggedInUser = data.loggedInUser;
       this.loadSubmissionsForUser();
     }));
     await this.initCourseOptions();
-    this.courseSettings = { singleSelection: true, };
     this.loading = false;
-    this.groupSettings = { singleSelection: false };
-    this.roleSettings = { singleSelection: false };
-    this.projectSettings = { singleSelection: false };
-    this.stateSettings = { singleSelection: true, text: 'Select State' };
-    this.stateOptions = [ 'FINISHED', 'CREATED', 'CANCELLED', 'ABORTED', 'IN_PROGRESS' ]
-      .map(state => {
-        return { 'id': state, 'itemName': state };
-      });
+    this.stateOptions = SubmissionListComponent.optionsFromArray([ 'FINISHED', 'CREATED', 'CANCELLED', 'ABORTED', 'IN_PROGRESS' ]);
+    this.resultOptions = SubmissionListComponent.optionsFromArray([ 'pass', 'fail', 'error', 'skip', 'none' ]);
   }
 
   ngOnDestroy() {
@@ -211,20 +211,37 @@ export class SubmissionListComponent implements OnInit, OnDestroy {
     this.table.offset = 0;
   }
 
-  onStateSelect(event: any) {
+  onAnySelect(event, selector) {
+    const val = event.id.toLowerCase();
+
+    // filter our data
+    const temp = this.temp.filter(function (d) {
+      return d[ selector ].toLowerCase().indexOf(val) !== -1 || !val;
+    });
 
+    // update the rows
+    this.submissions = temp;
+    // Whenever the filter changes, always go back to the first page
+    this.table.offset = 0;
   }
 
-  onStateDeselect(event: any) {
+  onStateSelect(event: any) {
+    this.onAnySelect(event, 'state');
+  }
 
+  onResultSelect(event: any) {
+    this.onAnySelect(event, 'result');
   }
 
-  onSort(event) {
-    console.log('Event: ', event);
-    const rows = [ ...this.submissions ];
-    const sort = event.sorts[ 0 ];
-    rows.sort((a, b) => {
-      return (a[ sort.prop ] < b[ sort.prop ] ? 1 : -1) * (sort.dir === 'desc' ? -1 : 1);
-    });
+  onAnyDeselect(event: any) {
+    this.submissions = [ ...this.temp ];
   }
+
+  getRowClass = (row: any) => {
+    const rowResult = row.result;
+    const classResultName = `row-class-${rowResult}`;
+    const result = {};
+    result[ classResultName ] = true;
+    return result;
+  };
 }

src/assets/scss/row-result.scss

+.row-class-pass {
+  background-color: #33cc33 !important;
+}
+
+.row-class-fail {
+  background-color: #ff4d4d !important;
+}
+
+.row-class-error {
+  background-color: #800000 !important;
+}
+
+.row-class-none {
+  background-color: #c1d7d7 !important;
+}
+
+.row-class-skip {
+  background-color: #ffff80 !important;
+}

src/styles.scss

@@ -12,6 +12,7 @@ $fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts"
 @import '~@swimlane/ngx-datatable/release/index.css';
 @import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
+@import "assets/scss/row-result";
 
 .page-header {
   margin-bottom: 15px;
@@ -27,3 +28,4 @@ $fa-font-path: "../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts"
   font-style: normal;
 }
 
+