catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts

   1 /*
   2  * -
   3  *  ============LICENSE_START=======================================================
   4  *  Copyright (C) 2022 Nordix Foundation.
   5  *  ================================================================================
   6  *  Licensed under the Apache License, Version 2.0 (the "License");
   7  *  you may not use this file except in compliance with the License.
   8  *  You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *  Unless required by applicable law or agreed to in writing, software
  13  *  distributed under the License is distributed on an "AS IS" BASIS,
  14  *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *  See the License for the specific language governing permissions and
  16  *  limitations under the License.
  17  *
  18  *  SPDX-License-Identifier: Apache-2.0
  19  *  ============LICENSE_END=========================================================
  20  */
  21
  22 import {Component, Input, OnInit} from '@angular/core';
  23 import {DataTypeModel} from "../../../../models/data-types";
  24 import {DataTypeService} from "../../../services/data-type.service";
  25 import {PropertyBEModel} from "../../../../models/properties-inputs/property-be-model";
  26 import { Subject } from "rxjs";
  27 import {debounceTime, distinctUntilChanged} from "rxjs/operators";
  28
  29 @Component({
  30   selector: 'app-type-workspace-properties',
  31   templateUrl: './type-workspace-properties.component.html',
  32   styleUrls: ['./type-workspace-properties.component.less']
  33 })
  34 export class TypeWorkspacePropertiesComponent implements OnInit {
  35   @Input() isViewOnly = true;
  36   @Input() dataType: DataTypeModel = new DataTypeModel();
  37
  38   properties: Array<PropertyBEModel> = [];
  39   filteredProperties: Array<PropertyBEModel> = [];
  40   tableHeadersList: Array<TableHeader> = [];
  41   tableSortBy: string = 'name';
  42   tableColumnReverse: boolean = false;
  43   tableFilterTerm: string = undefined;
  44   tableSearchTermUpdate = new Subject<string>();
  45
  46   constructor(private dataTypeService: DataTypeService) { }
  47
  48   ngOnInit(): void {
  49     this.initTable();
  50     this.initProperties();
  51     this.tableSearchTermUpdate.pipe(
  52         debounceTime(400),
  53         distinctUntilChanged())
  54     .subscribe(searchTerm => {
  55       this.filter(searchTerm);
  56     });
  57   }
  58
  59   private initTable(): void {
  60     this.tableHeadersList = [
  61       {title: 'Name', property: 'name'},
  62       {title: 'Type', property: 'type'},
  63       {title: 'Schema', property: 'schema.property.type'},
  64       {title: 'Description', property: 'description'},
  65     ];
  66
  67     this.tableSortBy = this.tableHeadersList[0].property;
  68   }
  69
  70   private initProperties(): void {
  71     this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => {
  72       this.properties = properties.map(value => new PropertyBEModel(value));
  73       this.filteredProperties = Array.from(this.properties);
  74       this.sort();
  75     });
  76   }
  77
  78   onUpdateSort(property: string): void {
  79     if (this.tableSortBy === property) {
  80       this.tableColumnReverse = !this.tableColumnReverse;
  81     } else {
  82       this.tableColumnReverse = false;
  83       this.tableSortBy = property;
  84     }
  85     this.sort();
  86   }
  87
  88   private sort(): void {
  89     const field = this.tableSortBy;
  90     this.filteredProperties = this.filteredProperties.sort((property1, property2) => {
  91       const result = property1[field] > property2[field] ? 1 : property1[field] < property2[field] ? -1 : 0;
  92       return this.tableColumnReverse ? result * -1 : result;
  93     });
  94   }
  95
  96   private filter(searchTerm: string): void {
  97     if (searchTerm) {
  98       searchTerm = searchTerm.toLowerCase();
  99       this.filteredProperties = this.properties.filter(property =>
 100           property.name.toLowerCase().includes(searchTerm)
 101           || property.type.toLowerCase().includes(searchTerm)
 102           || (property.getSchemaType() && property.getSchemaType().toLowerCase().includes(searchTerm))
 103           || (property.description && property.description.toLowerCase().includes(searchTerm))
 104       );
 105     } else {
 106       this.filteredProperties = Array.from(this.properties);
 107     }
 108     this.sort();
 109   }
 110 }
 111
 112 interface TableHeader {
 113   title: string;
 114   property: string;
 115 }