Skip to content

Commit

Permalink
TSK-843: replaced table tag with div table and refactored styles
Browse files Browse the repository at this point in the history
  • Loading branch information
mustaphazorgati authored and holgerhagen committed Apr 30, 2019
1 parent ced5929 commit 91392c9
Show file tree
Hide file tree
Showing 19 changed files with 216 additions and 135 deletions.
85 changes: 51 additions & 34 deletions web/src/app/history/task-query/task-query.component.html
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -46,33 +53,42 @@ <h4 class="panel-header">Taskana history query</h4>
<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'}}
</div>
<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>
Expand All @@ -81,9 +97,10 @@ <h4 class="panel-header">Taskana history query</h4>
</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>
19 changes: 13 additions & 6 deletions web/src/app/history/task-query/task-query.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ <h4>{{reportData.meta.name}} ({{reportData.meta.date | dateTimeZone}})</h4>
</div>
</div>
</div>
<taskana-report [type]="reportType" [reportData]="reportData"></taskana-report>
<taskana-report [reportData]="reportData"></taskana-report>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;


Expand Down
2 changes: 1 addition & 1 deletion web/src/app/monitor/models/meta-info-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ export class MetaInfoData {
header: Array<string>;
name: string;
rowDesc: string;
TotalDesc: string;
totalDesc: string;
}
6 changes: 4 additions & 2 deletions web/src/app/monitor/monitor.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,13 +28,14 @@ const MODULES = [
HttpClientModule,
AngularSvgIconModule,
SharedModule
]
];
const DECLARATIONS = [
TasksComponent,
WorkbasketComponent,
ReportComponent,
MonitorComponent,
ClassificationTasksComponent
ClassificationTasksComponent,
ReportRowComponent
];

@NgModule({
Expand Down
53 changes: 26 additions & 27 deletions web/src/app/monitor/report/report.component.html
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 3 additions & 3 deletions web/src/app/monitor/report/report.component.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.report{
padding-top: 20px;
}
.report {
margin-top: 20px;
}
16 changes: 5 additions & 11 deletions web/src/app/monitor/report/report.component.ts
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -11,16 +9,12 @@ import { RestConnectorService } from 'app/monitor/services/restConnector/rest-co
export class ReportComponent implements OnInit {

@Input()
type: ReportType;
@Input()
reportData: ReportData

reportType = ReportType;
reportData: ReportData;

constructor(private restConnector: RestConnectorService) {
constructor() {
}

ngOnInit(): void {

}

}
5 changes: 0 additions & 5 deletions web/src/app/monitor/report/reportType.ts

This file was deleted.

11 changes: 11 additions & 0 deletions web/src/app/monitor/report/row/row.component.html
Original file line number Diff line number Diff line change
@@ -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>
Empty file.
41 changes: 41 additions & 0 deletions web/src/app/monitor/report/row/row.component.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
Loading

0 comments on commit 91392c9

Please sign in to comment.