git.apps.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 import { Component, Input, OnInit } from '@angular/core';
   2
   3 import { CellTemplate } from '../../enum/cell-template.enum';
   4 import { CdTableColumn } from '../../models/cd-table-column';
   5
   6 /**
   7  * Display the given data in a 2 column data table. The left column
   8  * shows the 'key' attribute, the right column the 'value' attribute.
   9  * The data table has the following characteristics:
  10  * - No header and footer is displayed
  11  * - The relation of the width for the columns 'key' and 'value' is 1:3
  12  * - The 'key' column is displayed in bold text
  13  */
  14 @Component({
  15   selector: 'cd-table-key-value',
  16   templateUrl: './table-key-value.component.html',
  17   styleUrls: ['./table-key-value.component.scss']
  18 })
  19 export class TableKeyValueComponent implements OnInit {
  20
  21   columns: Array<CdTableColumn> = [];
  22
  23   /**
  24    * An array of objects to be displayed in the data table.
  25    */
  26   @Input() data: Array<object> = [];
  27
  28   /**
  29    * The name of the attribute to be displayed as key.
  30    * Defaults to 'key'.
  31    * @type {string}
  32    */
  33   @Input() key = 'key';
  34
  35   /**
  36    * The name of the attribute to be displayed as value.
  37    * Defaults to 'value'.
  38    * @type {string}
  39    */
  40   @Input() value = 'value';
  41
  42   constructor() { }
  43
  44   ngOnInit() {
  45     this.columns = [
  46       {
  47         prop: this.key,
  48         flexGrow: 1,
  49         cellTransformation: CellTemplate.bold
  50       },
  51       {
  52         prop: this.value,
  53         flexGrow: 3
  54       }
  55     ];
  56   }
  57 }