1 files changed, 43 insertions, 37 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index 0cc188134f..e499b3786b 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -8,9 +8,9 @@
  * Licensed 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.
@@ -19,33 +19,33 @@
  * ============LICENSE_END=========================================================
  */
 
-import { Component, Input, Output, EventEmitter} from "@angular/core";
-import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models";
-import {PropertiesService} from "../../../services/properties.service";
-import {ModalService} from "../../../services/modal.service";
-import { InstanceFeDetails } from "../../../../models/instance-fe-details";
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { DerivedFEProperty, InstanceFePropertiesMap, PropertyFEModel } from 'app/models';
+import { InstanceFeDetails } from '../../../../models/instance-fe-details';
+import { PropertiesService } from '../../../services/properties.service';
+import { ModalService } from '../../../services/modal.service';
 
 @Component({
     selector: 'properties-table',
     templateUrl: './properties-table.component.html',
     styleUrls: ['./properties-table.component.less']
 })
-export class PropertiesTableComponent {
+export class PropertiesTableComponent implements OnChanges {
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
     @Input() feInstanceNamesMap: Map<string, InstanceFeDetails>;
     @Input() selectedPropertyId: string;
-    @Input() propertyNameSearchText:string;
-    @Input() searchTerm:string;
-    @Input() readonly:boolean;
-    @Input() isLoading:boolean;
-    @Input() hasDeclareOption:boolean;
-    @Input() hidePropertyType:boolean;
+    @Input() propertyNameSearchText: string;
+    @Input() searchTerm: string;
+    @Input() readonly: boolean;
+    @Input() isLoading: boolean;
+    @Input() hasDeclareOption: boolean;
+    @Input() hidePropertyType: boolean;
     @Input() showDelete:boolean;
-    
+
     @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
-    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption and hasDeclareListOption
+    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>(); // only for hasDeclareOption
     @Output() updateCheckedChildPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareListOption
     @Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     private selectedPropertyToDelete: PropertyFEModel;
@@ -53,41 +53,48 @@ export class PropertiesTableComponent {
     sortBy: String;
     reverse: boolean;
     direction: number;
-    path:string[];
+    path: string[];
 
-    sort(sortBy){
-        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
-        this.direction = this.reverse ? 1 : -1;
-        this.sortBy = sortBy;
-        this.path = sortBy.split('.');
+    readonly ascUpperLettersFirst = 1;
+    readonly descLowerLettersFirst = -1;
+
+    constructor(private propertiesService: PropertiesService, private modalService: ModalService ) {
     }
 
-    constructor (private propertiesService:PropertiesService, private modalService: ModalService){
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.fePropertiesMap) {
+            this.sortBy = '';
+            this.sort('name');
+        }
     }
-    
-    ngOnInit() {
+
+    sort(sortBy) {
+        this.reverse = (this.sortBy === sortBy) ? !this.reverse : true;
+        this.direction = this.reverse ? this.ascUpperLettersFirst : this.descLowerLettersFirst;
+        this.sortBy = sortBy;
+        this.path = sortBy.split('.');
     }
 
     onPropertyChanged = (property) => {
         this.emitter.emit(property);
-    };
+    }
 
     // Click on main row (row of propertyFEModel)
-    onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
-        //event && event.stopPropagation();
+    onClickPropertyRow = (property: PropertyFEModel, instanceName: string, event?) => {
+        // event && event.stopPropagation();
         this.selectedPropertyId = property.name;
-        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
-    };
+    }
 
     // Click on inner row (row of DerivedFEProperty)
-    onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => {
-        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+    onClickPropertyInnerRow = (property: DerivedFEProperty, instanceName: string) => {
+        const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
         this.selectPropertyRow.emit(propertyRowSelectedEvent);
     }
 
     propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
-        let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
+        const isChecked: boolean = (!childPropName) ? prop.isSelected : prop.flattenedChildren.find((prop) => prop.propertiesName == childPropName).isSelected;
 
         if (!isChecked) {
             this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
@@ -116,11 +123,10 @@ export class PropertiesTableComponent {
 }
 
 export class PropertyRowSelectedEvent {
-    propertyModel:PropertyFEModel | DerivedFEProperty;
-    instanceName:string;
-    constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){
+    propertyModel: PropertyFEModel | DerivedFEProperty;
+    instanceName: string;
+    constructor( propertyModel: PropertyFEModel | DerivedFEProperty, instanceName: string ) {
         this.propertyModel = propertyModel;
         this.instanceName = instanceName;
     }
 }
-