From adb861e583443c42f93d2aa1a2cd4016f7b3768b Mon Sep 17 00:00:00 2001 From: Mustapha Zorgati Date: Fri, 29 Mar 2019 09:42:55 +0100 Subject: [PATCH] TSK-843: replaced table tag with div table and refactored styles --- .../task-query/task-query.component.html | 85 +++++++++++-------- .../task-query/task-query.component.scss | 19 +++-- .../classification-tasks.component.html | 2 +- .../classification-tasks.component.ts | 2 - web/src/app/monitor/models/meta-info-data.ts | 2 +- web/src/app/monitor/monitor.module.ts | 6 +- .../app/monitor/report/report.component.html | 53 ++++++------ .../app/monitor/report/report.component.scss | 6 +- .../app/monitor/report/report.component.ts | 16 ++-- web/src/app/monitor/report/reportType.ts | 5 -- .../app/monitor/report/row/row.component.html | 11 +++ .../app/monitor/report/row/row.component.scss | 0 .../app/monitor/report/row/row.component.ts | 41 +++++++++ .../restConnector/rest-connector.service.ts | 19 +++-- .../app/monitor/tasks/tasks.component.html | 2 +- web/src/app/monitor/tasks/tasks.component.ts | 2 - .../workbasket/workbasket.component.html | 2 +- .../workbasket/workbasket.component.ts | 4 +- web/src/assets/_table.scss | 80 +++++++++-------- 19 files changed, 219 insertions(+), 138 deletions(-) delete mode 100644 web/src/app/monitor/report/reportType.ts create mode 100644 web/src/app/monitor/report/row/row.component.html create mode 100644 web/src/app/monitor/report/row/row.component.scss create mode 100644 web/src/app/monitor/report/row/row.component.ts diff --git a/web/src/app/history/task-query/task-query.component.html b/web/src/app/history/task-query/task-query.component.html index 82b7b4145..7648528c6 100644 --- a/web/src/app/history/task-query/task-query.component.html +++ b/web/src/app/history/task-query/task-query.component.html @@ -1,43 +1,50 @@
- -

Taskana history query

-
+
-
-
+
+
-
+
{{getHeaderFieldDescription(taskHeader.key)}} - sort + sort
-
- {{toggleExpand? 'chevron_left' : 'chevron_right'}} +
+ {{toggleExpand ? 'chevron_left' : 'chevron_right'}}
-
+
{{getHeaderFieldDescription(taskHeader.key)}} - sort + sort
-
+
@@ -46,18 +53,23 @@
-
+
-
- +
+
-
-
+
+
{{task[taskHeader.key] | dateTimeZone:'yyyy-MM-dd'}} @@ -65,14 +77,18 @@
{{task[taskHeader.key]}}
-
+
-
+
{{task[taskHeader.key]}}
-
-
@@ -81,9 +97,10 @@
-
- +
+
-
\ No newline at end of file +
diff --git a/web/src/app/history/task-query/task-query.component.scss b/web/src/app/history/task-query/task-query.component.scss index 3f6515889..49da1a43c 100644 --- a/web/src/app/history/task-query/task-query.component.scss +++ b/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; } diff --git a/web/src/app/monitor/classification-tasks/classification-tasks.component.html b/web/src/app/monitor/classification-tasks/classification-tasks.component.html index 5924b973a..61c3a1185 100644 --- a/web/src/app/monitor/classification-tasks/classification-tasks.component.html +++ b/web/src/app/monitor/classification-tasks/classification-tasks.component.html @@ -11,6 +11,6 @@
- +
diff --git a/web/src/app/monitor/classification-tasks/classification-tasks.component.ts b/web/src/app/monitor/classification-tasks/classification-tasks.component.ts index 887bde09e..cda5716a1 100644 --- a/web/src/app/monitor/classification-tasks/classification-tasks.component.ts +++ b/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; diff --git a/web/src/app/monitor/models/meta-info-data.ts b/web/src/app/monitor/models/meta-info-data.ts index 168c679e7..991e8845e 100644 --- a/web/src/app/monitor/models/meta-info-data.ts +++ b/web/src/app/monitor/models/meta-info-data.ts @@ -4,5 +4,5 @@ export class MetaInfoData { header: Array; name: string; rowDesc: string; - TotalDesc: string; + totalDesc: string; } diff --git a/web/src/app/monitor/monitor.module.ts b/web/src/app/monitor/monitor.module.ts index a428c1709..c529fceba 100644 --- a/web/src/app/monitor/monitor.module.ts +++ b/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({ diff --git a/web/src/app/monitor/report/report.component.html b/web/src/app/monitor/report/report.component.html index 7abe7c9b2..8245d1c61 100644 --- a/web/src/app/monitor/report/report.component.html +++ b/web/src/app/monitor/report/report.component.html @@ -1,28 +1,27 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - -
{{reportData.meta.rowDesc}} - {{header}}{{reportData.meta.totalDesc}}
{{row.key}}{{row.val.cells[header]}}{{row.val.total}}
{{reportData.meta.totalDesc}}{{reportData.sumRow.cells[header]}}{{reportData.sumRow.total}}
-
+
+
+
+
{{reportData.meta.rowDesc}}
+
{{header}}
+
{{reportData.meta.totalDesc}}
+
+
+
+
+
+
+
+
+
+ {{reportData.meta.totalDesc}} +
+
+ {{reportData.sumRow.cells[header]}} +
+
+ {{reportData.sumRow.total}} +
+
+
diff --git a/web/src/app/monitor/report/report.component.scss b/web/src/app/monitor/report/report.component.scss index ebd37f945..0e0b41ea1 100644 --- a/web/src/app/monitor/report/report.component.scss +++ b/web/src/app/monitor/report/report.component.scss @@ -1,3 +1,3 @@ -.report{ - padding-top: 20px; -} \ No newline at end of file +.report { + margin-top: 20px; +} diff --git a/web/src/app/monitor/report/report.component.ts b/web/src/app/monitor/report/report.component.ts index 1df76b094..cb096f3af 100644 --- a/web/src/app/monitor/report/report.component.ts +++ b/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 { - } + } diff --git a/web/src/app/monitor/report/reportType.ts b/web/src/app/monitor/report/reportType.ts deleted file mode 100644 index b9a838b64..000000000 --- a/web/src/app/monitor/report/reportType.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum ReportType { - TasksStatus, - WorkbasketStatus, - ClassificationStatus -} diff --git a/web/src/app/monitor/report/row/row.component.html b/web/src/app/monitor/report/row/row.component.html new file mode 100644 index 000000000..5779ab614 --- /dev/null +++ b/web/src/app/monitor/report/row/row.component.html @@ -0,0 +1,11 @@ + +
+ {{row.key}} +
+
+ {{row.val.cells[header]}} +
+
+ {{row.val.total}} +
+ diff --git a/web/src/app/monitor/report/row/row.component.scss b/web/src/app/monitor/report/row/row.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/web/src/app/monitor/report/row/row.component.ts b/web/src/app/monitor/report/row/row.component.ts new file mode 100644 index 000000000..033f97984 --- /dev/null +++ b/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 = new EventEmitter(); + @Input() + headers: Array; + 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); + } + } +} diff --git a/web/src/app/monitor/services/restConnector/rest-connector.service.ts b/web/src/app/monitor/services/restConnector/rest-connector.service.ts index e7f06a4db..695340db4 100644 --- a/web/src/app/monitor/services/restConnector/rest-connector.service.ts +++ b/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 { - return this.httpClient.get(environment.taskanaRestUrl + '/v1/monitor/tasks-status-report?states=READY,CLAIMED,COMPLETED'); + return this.httpClient.get(environment.taskanaRestUrl + monitorUrl + + 'tasks-status-report?states=READY,CLAIMED,COMPLETED'); } getWorkbasketStatistics(): Observable { return this.httpClient.get(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 { return this.httpClient.get(environment.taskanaRestUrl - + '/v1/monitor/tasks-classification-report'); + + monitorUrl + 'tasks-classification-report'); + } + + getDailyEntryExitReport(): Observable { + return this.httpClient.get(environment.taskanaRestUrl + + monitorUrl + 'daily-entry-exit-report'); } getChartData(source: ReportData): Array { @@ -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; } diff --git a/web/src/app/monitor/tasks/tasks.component.html b/web/src/app/monitor/tasks/tasks.component.html index 1ee702c8a..2e30e9fed 100644 --- a/web/src/app/monitor/tasks/tasks.component.html +++ b/web/src/app/monitor/tasks/tasks.component.html @@ -6,6 +6,6 @@
- +
diff --git a/web/src/app/monitor/tasks/tasks.component.ts b/web/src/app/monitor/tasks/tasks.component.ts index 1a699e798..8feb13596 100644 --- a/web/src/app/monitor/tasks/tasks.component.ts +++ b/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) { } diff --git a/web/src/app/monitor/workbasket/workbasket.component.html b/web/src/app/monitor/workbasket/workbasket.component.html index 018d77238..3ab82ac39 100644 --- a/web/src/app/monitor/workbasket/workbasket.component.html +++ b/web/src/app/monitor/workbasket/workbasket.component.html @@ -11,6 +11,6 @@
- +
diff --git a/web/src/app/monitor/workbasket/workbasket.component.ts b/web/src/app/monitor/workbasket/workbasket.component.ts index 98373dbe7..60c0bc624 100644 --- a/web/src/app/monitor/workbasket/workbasket.component.ts +++ b/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; diff --git a/web/src/assets/_table.scss b/web/src/assets/_table.scss index 312cfe57c..519dff93a 100644 --- a/web/src/assets/_table.scss +++ b/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; -} \ No newline at end of file