TSK-843: replaced table tag with div table and refactored styles

web/src/app/history/task-query/task-query.component.html

@@ -1,43 +1,50 @@
 <div class="panel panel-default">
   <div class="panel-heading">
     <div class="pull-right btn-group">
-      <button type="button" class="btn btn-default" data-toggle="tooltip" title="Query">
-        <span class="material-icons md-20 blue" (click)="search()">search</span>
+        <button class="btn btn-default" data-toggle="tooltip" title="Query" type="button">
+            <span (click)="search()" class="material-icons md-20 blue">search</span>
       </button>
-      <button type="button" class="btn btn-default" data-toggle="tooltip" title="Query">
-        <span class="material-icons md-20 blue" (click)="clear()">clear</span>
+        <button class="btn btn-default" data-toggle="tooltip" title="Query" type="button">
+            <span (click)="clear()" class="material-icons md-20 blue">clear</span>
       </button>
     </div>
     <h4 class="panel-header">Taskana history query</h4>
   </div>
   <div class="panel-body">
-    <div class="divTable table-striped" *ngIf="taskQuery">
+      <div *ngIf="taskQuery" class="table table-striped">
       <form [formGroup]="taskQueryForm">
-        <div class="divTableHeading">
-          <div class="divTableRow">
+          <div class="table-header">
+              <div class="table-row">
             <ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
-              <div class="divTableHeader" *ngIf="filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
-                (click)="changeOrderBy(taskHeader.key); search();">
+                <div (click)="changeOrderBy(taskHeader.key); search();"
+                     *ngIf="filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
+                     class="table-cell--bold table-cell--justify">
                 <span class="icon-space">
                   {{getHeaderFieldDescription(taskHeader.key)}}
                 </span>
-                <span *ngIf="orderBy.sortBy === taskHeader.key" class="material-icons md-20 blue pull-right" [ngClass]="{'flip': orderBy.sortDirection === 'desc'}">sort</span>
+                    <span *ngIf="orderBy.sortBy === taskHeader.key"
+                          [ngClass]="{'flip': orderBy.sortDirection === 'desc'}"
+                          class="material-icons md-20 blue pull-right">sort</span>
               </div>
-              <div class="divTableHeader divTableHeaderSeparator" [ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
-                *ngIf="taskHeader.key === 'custom1'" (click)="toggleExpand = !toggleExpand">
-                <span class="material-icons md-24 blue pull-right">{{toggleExpand? 'chevron_left' : 'chevron_right'}}</span>
+                <div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
+                     [ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
+                     class="table-cell--bold table-cell--separator">
+                <span
+                    class="material-icons md-24 blue pull-right">{{toggleExpand ? 'chevron_left' : 'chevron_right'}}</span>
               </div>
-              <div class="divTableHeader" *ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
-                (click)="changeOrderBy(taskHeader.key); search();">
+                <div (click)="changeOrderBy(taskHeader.key); search();"
+                     *ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
+                     class="table-cell--bold">
                 <span class="icon-space">
                   {{getHeaderFieldDescription(taskHeader.key)}}
                 </span>
-                <span *ngIf="orderBy.sortBy === taskHeader.key && filterFieldsToAllowQuerying(taskHeader.key)" class="material-icons md-20 blue pull-right"
-                  [ngClass]="{'flip': orderBy.sortDirection === 'desc'}">sort</span>
+                    <span *ngIf="orderBy.sortBy === taskHeader.key && filterFieldsToAllowQuerying(taskHeader.key)"
+                          [ngClass]="{'flip': orderBy.sortDirection === 'desc'}"
+                          class="material-icons md-20 blue pull-right">sort</span>
               </div>
             </ng-container>
           </div>
-          <div class="divTableRow">
+              <div class="table-row">
             <ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
               <div class="divTableHeader divDate" *ngIf="isDate(taskHeader.key)">
                 <taskana-date-picker type="text" placeholder="{{getHeaderFieldDescription(taskHeader.key)}}" [name]="'this.created'" [id]="'created'" (dateOutput)="updateDate($event)" formControlName="{{taskHeader.key}}"></taskana-date-picker>
@@ -46,18 +53,23 @@
                 <input type="text" class="form-control input-sm" (keyup.enter)="search()" placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
                   formControlName="{{taskHeader.key}}">
               </div>
-              <div class="divTableHeader divTableHeaderSeparator" [ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
-                *ngIf="taskHeader.key === 'custom1'" (click)="toggleExpand = !toggleExpand">
+                <div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
+                     [ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
+                     class="table-cell--bold table-cell--separator">
               </div>
-              <div class="divTableHeader" *ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand">
-                <input *ngIf="filterFieldsToAllowQuerying(taskHeader.key)" type="text" formControlName="{{taskHeader.key}}"
-                  (keyup.enter)="search()" class="form-control input-sm" placeholder="{{getHeaderFieldDescription(taskHeader.key)}}">
+                <div *ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
+                     class="table-cell--bold">
+                    <input (keyup.enter)="search()" *ngIf="filterFieldsToAllowQuerying(taskHeader.key)"
+                           class="form-control input-sm"
+                           formControlName="{{taskHeader.key}}"
+                           placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
+                           type="text">
               </div>
             </ng-container>
           </div>
         </div>
-        <div class="divTableBody">
-          <div *ngFor="let task of taskQuery" class="divTableRow">
+          <div class="table-body">
+              <div *ngFor="let task of taskQuery" class="table-row">
             <ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
               <div class="divTableCell" *ngIf="isDate(taskHeader.key)">
                 {{task[taskHeader.key] | dateTimeZone:'yyyy-MM-dd'}}
@@ -65,14 +77,18 @@
               <div class="divTableCell" *ngIf="!isDate(taskHeader.key) && filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)">
                 {{task[taskHeader.key]}}
               </div>
-              <div class="divTableCell divTableCellSeparator" *ngIf="taskHeader.key === 'custom1'" [ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
-                (click)="toggleExpand = !toggleExpand">
+                <div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
+                     [ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
+                     class="table-cell table-cell--separator">
               </div>
-              <div class="divTableCell" *ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand">
+                <div
+                    *ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand"
+                    class="table-cell">
                 {{task[taskHeader.key]}}
               </div>
-              <div class="divTableCell" *ngIf="!filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand">
-                <button *ngIf="task[taskHeader.key]" type="button" class="btn btn-default btn-xs" (click)="openDetails(taskHeader.key, task[taskHeader.key])">
+                <div *ngIf="!filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand" class="table-cell">
+                    <button (click)="openDetails(taskHeader.key, task[taskHeader.key])" *ngIf="task[taskHeader.key]"
+                            class="btn btn-default btn-xs" type="button">
                   <span class="material-icons md-16 blue pull-right">open_in_new</span>
                 </button>
               </div>
@@ -81,9 +97,10 @@
         </div>
       </form>
     </div>
-    <div class="divTablePagination" *ngIf="taskQueryResource">
-      <taskana-pagination [(page)]="taskQueryResource.page" [numberOfItems]="taskQuery.length" type="Entries"
-        (changePage)="changePage($event)"></taskana-pagination>
+      <div *ngIf="taskQueryResource" class="table-pagination">
+          <taskana-pagination (changePage)="changePage($event)" [(page)]="taskQueryResource.page"
+                              [numberOfItems]="taskQuery.length"
+                              type="Entries"></taskana-pagination>
     </div>
   </div>
-</div>
+</div>

web/src/app/history/task-query/task-query.component.scss

@@ -1,13 +1,19 @@
-.divTable{
+@import './src/assets/_colors';
+
+.table {
 	max-height: calc(100vh - 152px);
 	padding-right: 15px;
 }
 
-.divTableFoot {
+.table-header {
+	background-color: $light-grey;
+}
+
+.table-footer {
 	display: block;
 }
 
-.divTableCell {
+.table-cell {
 	height: 34px;
 	max-height: 34px;
 }
@@ -19,14 +25,15 @@
 .btn-xs{
 	padding: 0px;
 }
-.divTable .btn {
+
+.table .btn {
 	border: none;
 }
 
-.icon-space{
+.icon-space {
 	margin-right: 20px;
 }
 
 .divTablePagination {
-  	margin: 0 auto;
+	margin: 0 auto;
 }

web/src/app/monitor/classification-tasks/classification-tasks.component.html

@@ -11,6 +11,6 @@
                 </div>
             </div>
         </div>
-        <taskana-report [type]="reportType" [reportData]="reportData"></taskana-report>
+        <taskana-report [reportData]="reportData"></taskana-report>
     </div>
 </div>

web/src/app/monitor/classification-tasks/classification-tasks.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ReportType } from '../report/reportType';
 import { RestConnectorService } from 'app/monitor/services/restConnector/rest-connector.service';
 import { ReportData } from '../models/report-data';
 import { ChartData } from 'app/monitor/models/chart-data';
@@ -11,7 +10,6 @@ import { ChartColorsDefinition } from '../models/chart-colors';
   styleUrls: ['./classification-tasks.component.scss']
 })
 export class ClassificationTasksComponent implements OnInit {
-  reportType = ReportType.ClassificationStatus;
   reportData: ReportData;
 
 

web/src/app/monitor/models/meta-info-data.ts

@@ -4,5 +4,5 @@ export class MetaInfoData {
     header: Array<string>;
     name: string;
     rowDesc: string;
-    TotalDesc: string;
+    totalDesc: string;
 }

web/src/app/monitor/monitor.module.ts

@@ -16,6 +16,7 @@ import { WorkbasketComponent } from './workbasket/workbasket.component';
 import { ClassificationTasksComponent } from './classification-tasks/classification-tasks.component';
 
 import { RestConnectorService } from './services/restConnector/rest-connector.service';
+import {ReportRowComponent} from "./report/row/row.component";
 
 const MODULES = [
   CommonModule,
@@ -27,13 +28,14 @@ const MODULES = [
   HttpClientModule,
   AngularSvgIconModule,
   SharedModule
-]
+];
 const DECLARATIONS = [
   TasksComponent,
   WorkbasketComponent,
   ReportComponent,
   MonitorComponent,
-  ClassificationTasksComponent
+  ClassificationTasksComponent,
+  ReportRowComponent
 ];
 
 @NgModule({

web/src/app/monitor/report/report.component.html

@@ -1,28 +1,27 @@
-<div class="row report" *ngIf="reportData">
-  <div class="col-sm-12" style="margin-bottom: 10px">
-    <table class="table table-responsive table-condensed table-striped">
-      <thead>
-        <tr>
-          <th>{{reportData.meta.rowDesc}}</th>
-          <th class="align-center" *ngFor="let header of reportData.meta.header">
-            {{header}}</th>
-          <th class="align-center">{{reportData.meta.totalDesc}}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let row of reportData.rows | mapToIterable | orderBy:['key']">
-          <td>{{row.key}}</td>
-          <td *ngFor="let header of reportData.meta.header" class="align-center">{{row.val.cells[header]}}</td>
-          <th class="align-center">{{row.val.total}}</th>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>{{reportData.meta.totalDesc}}</th>
-          <th *ngFor="let header of reportData.meta.header" class="align-center">{{reportData.sumRow.cells[header]}}</th>
-          <th class="align-center">{{reportData.sumRow.total}}</th>
-        </tr>
-      </tfoot>
-    </table>
-  </div>
+<div *ngIf="reportData" class="report table table-striped">
+    <div class="table-header">
+        <div class="table-row">
+            <div class="table-cell--bold table-cell--justify">{{reportData.meta.rowDesc}}</div>
+            <div *ngFor="let header of reportData.meta.header" class="table-cell--bold">{{header}}</div>
+            <div class="table-cell--bold">{{reportData.meta.totalDesc}}</div>
+        </div>
+    </div>
+    <div class="table-body">
+        <div *ngFor="let row of reportData.rows | mapToIterable | orderBy:['key']" [headers]="reportData.meta.header"
+             [row]="row" class="table-row" monitor-report-row>
+        </div>
+    </div>
+    <div class="table-footer">
+        <div class="table-row">
+            <div class="table-cell--bold table-cell--justify">
+                {{reportData.meta.totalDesc}}
+            </div>
+            <div *ngFor="let header of reportData.meta.header" class="table-cell--bold">
+                {{reportData.sumRow.cells[header]}}
+            </div>
+            <div class="table-cell--bold">
+                {{reportData.sumRow.total}}
+            </div>
+        </div>
+    </div>
 </div>

web/src/app/monitor/report/report.component.scss

@@ -1,3 +1,3 @@
-.report{
-    padding-top: 20px;
-}
+.report {
+	margin-top: 20px;
+}

web/src/app/monitor/report/report.component.ts

@@ -1,7 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ReportType } from './reportType';
-import { ReportData } from 'app/monitor/models/report-data';
-import { RestConnectorService } from 'app/monitor/services/restConnector/rest-connector.service';
+import {Component, Input, OnInit} from '@angular/core';
+import {ReportData} from 'app/monitor/models/report-data';
 
 @Component({
   selector: 'taskana-report',
@@ -11,16 +9,12 @@ import { RestConnectorService } from 'app/monitor/services/restConnector/rest-co
 export class ReportComponent implements OnInit {
 
   @Input()
-  type: ReportType;
-  @Input()
-  reportData: ReportData
+  reportData: ReportData;
 
-  reportType = ReportType;
-
-  constructor(private restConnector: RestConnectorService) {
+  constructor() {
   }
 
   ngOnInit(): void {
-
   }
+
 }

web/src/app/monitor/report/reportType.ts

@@ -1,5 +0,0 @@
-export enum ReportType {
-  TasksStatus,
-  WorkbasketStatus,
-  ClassificationStatus
-}

web/src/app/monitor/report/row/row.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="headers && row">
+    <div (click)="toggleFold()" class="table-cell table-cell--justify">
+        {{row.key}}
+    </div>
+    <div *ngFor="let header of headers" class="table-cell">
+        {{row.val.cells[header]}}
+    </div>
+    <div class="table-cell--bold">
+        {{row.val.total}}
+    </div>
+</ng-container>

web/src/app/monitor/report/row/row.component.ts

@@ -0,0 +1,41 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ReportInfoDataIterable} from "../../models/report-info-data";
+
+@Component({
+    selector: '[monitor-report-row]',
+    templateUrl: './row.component.html',
+    styleUrls: ['./row.component.scss']
+})
+export class ReportRowComponent implements OnInit {
+
+    @Output()
+    expand: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Input()
+    headers: Array<string>;
+    expanded = false;
+    foldable: boolean;
+
+    constructor() {
+    }
+
+    private _row: ReportInfoDataIterable;
+
+    get row(): ReportInfoDataIterable {
+        return this._row;
+    }
+
+    @Input() set row(row: ReportInfoDataIterable) {
+        this._row = row;
+        this.foldable = !!row.val.foldableRows;
+    }
+
+    ngOnInit() {
+    }
+
+    toggleFold() {
+        if (this.foldable) {
+            this.expanded = !this.expanded;
+            this.expand.emit(this.expanded);
+        }
+    }
+}

web/src/app/monitor/services/restConnector/rest-connector.service.ts

@@ -7,24 +7,33 @@ import { ChartData } from 'app/monitor/models/chart-data';
 import { TaskanaDate } from 'app/shared/util/taskana.date';
 import { map } from 'rxjs/internal/operators/map';
 
+const monitorUrl = '/v1/monitor/';
+
 @Injectable()
 export class RestConnectorService {
 
+
   constructor(private httpClient: HttpClient) {
   }
 
   getTaskStatusReport(): Observable<ReportData> {
-    return this.httpClient.get<ReportData>(environment.taskanaRestUrl + '/v1/monitor/tasks-status-report?states=READY,CLAIMED,COMPLETED');
+    return this.httpClient.get<ReportData>(environment.taskanaRestUrl + monitorUrl
+      + 'tasks-status-report?states=READY,CLAIMED,COMPLETED');
   }
 
   getWorkbasketStatistics(): Observable<ReportData> {
     return this.httpClient.get<ReportData>(environment.taskanaRestUrl
-      + '/v1/monitor/tasks-workbasket-report?daysInPast=5&states=READY,CLAIMED,COMPLETED');
+      + monitorUrl + 'tasks-workbasket-report?daysInPast=5&states=READY,CLAIMED,COMPLETED');
   }
 
   getClassificationTasksReport(): Observable<ReportData> {
     return this.httpClient.get<ReportData>(environment.taskanaRestUrl
-      + '/v1/monitor/tasks-classification-report');
+      + monitorUrl + 'tasks-classification-report');
+  }
+
+  getDailyEntryExitReport(): Observable<ReportData> {
+    return this.httpClient.get<ReportData>(environment.taskanaRestUrl
+      + monitorUrl + 'daily-entry-exit-report');
   }
 
   getChartData(source: ReportData): Array<ChartData> {
@@ -38,10 +47,10 @@ export class RestConnectorService {
 
       source.meta.header.forEach((headerValue: string) => {
         rowData.data.push(source.rows[key].cells[headerValue]);
-      })
+      });
 
       result.push(rowData)
-    })
+    });
 
     return result;
   }

web/src/app/monitor/tasks/tasks.component.html

@@ -6,6 +6,6 @@
     <div style="display: block" class =" col-xs-12 col-md-7 col-md-offset-2">
       <canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType"></canvas>
     </div>
-    <taskana-report [type]="reportType" [reportData]="reportData"></taskana-report>
+    <taskana-report [reportData]="reportData"></taskana-report>
   </div>
 </div>

web/src/app/monitor/tasks/tasks.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ReportType } from '../report/reportType';
 import { RestConnectorService } from '../services/restConnector/rest-connector.service';
 import { ReportData } from 'app/monitor/models/report-data';
 
@@ -15,7 +14,6 @@ export class TasksComponent implements OnInit {
   pieChartData: number[] = [];
   pieChartType = 'pie';
   reportData: ReportData
-  reportType = ReportType.TasksStatus;
 
   constructor(private restConnectorService: RestConnectorService) {
   }

web/src/app/monitor/workbasket/workbasket.component.html

@@ -11,6 +11,6 @@
         </div>
       </div>
     </div>
-    <taskana-report [type]="reportType" [reportData]="reportData"></taskana-report>
+    <taskana-report [reportData]="reportData"></taskana-report>
   </div>
 </div>

web/src/app/monitor/workbasket/workbasket.component.ts

@@ -2,8 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { RestConnectorService } from 'app/monitor/services/restConnector/rest-connector.service';
 import { ChartColorsDefinition } from '../models/chart-colors';
 import { ReportData } from 'app/monitor/models/report-data';
-import { ReportType } from 'app/monitor/report/reportType';
-import { ChartData } from 'app/monitor/models/chart-data';
+import {ChartData} from 'app/monitor/models/chart-data';
 
 @Component({
   selector: 'taskana-monitor-workbaskets',
@@ -13,7 +12,6 @@ import { ChartData } from 'app/monitor/models/chart-data';
 })
 export class WorkbasketComponent implements OnInit {
 
-  reportType = ReportType.WorkbasketStatus;
   reportData: ReportData;
 
 

web/src/assets/_table.scss

@@ -1,55 +1,67 @@
-.divTable{
+.table {
+	width: 100%;
 	display: table;
 }
 
-.divTableRow {
+.table-striped div.table-body div.table-row:nth-of-type(odd) {
+	background-color: #f9f9f9;
+}
+
+.table-caption {
+	display: table-caption;
+}
+
+.table-header, .table-footer {
+	display: table-header-group;
+	cursor: pointer;
+}
+
+.table-header > .table-row:last-child > .table-cell--bold {
+	border-bottom: 2px solid #ddd;
+}
+
+.table-footer > .table-row > .table-cell--bold, .table-header > .table-row > .table-cell--bold {
+	border-bottom: none;
+}
+
+.table-body {
+	display: table-row-group;
+}
+
+.table-row {
 	display: table-row;
 }
-.divTable .divTableHeading > .divTableRow:last-child > .divTableHeader  {
-	background-color: #f9f9f9;
-	border-bottom:  1px solid $grey
-}
 
-.divTable.table-striped .divTableBody > .divTableRow:nth-of-type(odd) {
-    background-color: #f9f9f9;
-}
-
-.divTableCell, .divTableHeader {
+.table-cell, .table-cell--bold {
 	display: table-cell;
-	padding: 3px 3px;
+	padding: 5px;
 	white-space: nowrap;
 	min-width: 50px;
 	vertical-align: middle;
-}
-.divTableCell{ 
-	padding: 0px 3px;
+	text-align: center;
+	border-bottom: 1px solid #ddd;
 }
 
-.divTableHeaderSeparator, .divTableCellSeparator{ 
-	border-left: 1px solid $grey;
-	border-right: 1px solid $grey;
+.table-cell--justify {
+	text-align: justify;
+}
+
+.table-cell--bold {
+	font-weight: bold;
+}
+
+.table-cell--separator {
+	border-left: 2px solid #ddd;
+	border-right: 2px solid #ddd;
 	background-color: $light-grey;
+
 	&.zoom-in {
 		cursor: zoom-in;
 	}
+
 	&.zoom-out {
 		cursor: zoom-out;
 	}
-	min-width: 0px;
-}
 
-.divTableHeading {
-	background-color: $light-grey;
-	display: table-header-group;
-	font-weight: bold;
-	cursor: pointer;
+	min-width: 0;
 }
-.divTableFoot {
-	background-color: $light-grey;
-	display: table-footer-group;
-	font-weight: bold;
-}
-
-.divTableBody {
-	display: table-row-group;
-}