File
Implements
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Methods
onSelect
|
onSelect(undefined)
|
|
|
parseTime
|
parseTime(rawTime: string)
|
|
Parameters :
Name |
Type |
Optional |
rawTime |
string
|
No
|
|
headerHeight
|
Default value : Settings.tableHeaderHeight
|
|
messages
|
Type : object
|
Default value : {
emptyMessage: 'The list is empty.',
totalMessage: 'total',
selectedMessage: 'selected',
}
|
|
rowHeight
|
Default value : Settings.tableRowHeight
|
|
sorts
|
Type : []
|
Default value : [
{ prop: 'startTime', dir: 'desc' },
{ prop: 'name', dir: 'asc' },
]
|
|
table
|
Type : DatatableComponent
|
Decorators :
@ViewChild('jobsTable', {static: false})
|
|
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import moment from 'moment';
import { Settings } from '../../core/settings';
import { Job } from '../shared/workflow.model';
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'hi-job-list',
templateUrl: './job-list.component.html',
styleUrls: ['./job-list.component.scss'],
})
export class JobListComponent implements OnInit {
@Input()
jobs: Job[];
@ViewChild('jobsTable', { static: false })
table: DatatableComponent;
rowHeight = Settings.tableRowHeight;
headerHeight = Settings.tableHeaderHeight;
sorts = [
{ prop: 'startTime', dir: 'desc' },
{ prop: 'name', dir: 'asc' },
];
messages = {
emptyMessage: 'The list is empty.',
totalMessage: 'total',
selectedMessage: 'selected',
};
constructor() {}
ngOnInit() {}
parseTime(rawTime: string): string {
return moment(parseInt(rawTime)).fromNow();
}
onSelect({ selected }) {
const row = selected[0];
this.table.rowDetail.toggleExpandRow(row);
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<ngx-datatable
#jobsTable
class="material"
[headerHeight]="headerHeight"
[rowHeight]="rowHeight"
columnMode="force"
[footerHeight]="rowHeight"
[rows]="jobs"
selectionType="single"
[sorts]="sorts"
(select)="onSelect($event)"
[messages]="messages"
fxFill
>
<ngx-datatable-column
[width]="50"
[resizeable]="false"
[sortable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-expanded="expanded" ngx-datatable-cell-template>
<mat-icon>{{ expanded ? 'expand_more' : 'chevron_right' }}</mat-icon>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Start Time"
[width]="200"
[resizeable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<span *ngIf="value" [matTooltip]="value | date: 'medium'">
{{ parseTime(value) }}
</span>
<span *ngIf="!value">-</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Job Name" prop="name">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<span [matTooltip]="row.rawName"> ...{{ value }} </span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="State"
[width]="120"
[resizeable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-value="value" ngx-datatable-cell-template>
<span *ngIf="value" class="state-default state-{{ value }}">
{{ value }}
</span>
<span *ngIf="!value" class="state-PENDING">PENDING</span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-row-detail rowHeight="auto">
<ng-template let-row="row" ngx-datatable-row-detail-template>
<hi-job-detail [job]="row"></hi-job-detail>
</ng-template>
</ngx-datatable-row-detail>
</ngx-datatable>
Legend
Html element with directive