catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html

   1 <div class="properties-assignment-page">
   2     <div class="main-content">
   3         <div class="left-column">
   4             <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
   5                 <tab tabTitle="Properties">
   6                     <properties-table class="properties-table"
   7                         [fePropertiesMap]="instanceFePropertiesMap"
   8                         [searchTerm]="searchQuery"
   9                         [selectedPropertyId]="selectedFlatProperty.path"
  10                         [propertyNameSearchText]="searchPropertyName"
  11                         [readonly]="isReadonly"
  12                         [isLoading]="loadingProperties"
  13                         (valueChanged)="propertyValueChanged($event)"
  14                         (propertySelected)="propertySelected($event)"
  15                         (selectPropertyRow)="selectPropertyRow($event)"
  16                         (selectChildProperty)="selectChildProperty($event)"
  17                         (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
  18                         (selectInstanceRow)="selectInstanceRow($event)">
  19                         </properties-table>
  20                 </tab>
  21                 <tab tabTitle="Inputs">
  22                     <inputs-table class="properties-table"
  23                                   [readonly]="isReadonly"
  24                                   [inputs]="inputs | searchFilter:'name':searchQuery"
  25                                   [isLoading]="loadingInputs"
  26                                   (deleteInput)="deleteInput($event)"
  27                                   (inputValueChanged)="inputValueChanged($event)"></inputs-table>
  28                 </tab>
  29             </tabs>
  30             <div class="header">
  31                 <div class="search-filter-container" [class.without-filter]="isInpusTabSelected">
  32                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
  33                     <span class="sprite search-icon"></span>
  34                     <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
  35                     <span *ngIf="displayClearSearch && !isInpusTabSelected" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
  36                 </div>
  37                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly" (click)="declareProperties()">Declare</button>
  38             </div>
  39         </div>
  40         <div class="right-column gray-border">
  41             <tabs #hierarchyNavTabs tabStyle="simple-tabs">
  42                 <tab tabTitle="Composition">
  43                     <div class="hierarchy-nav-container">
  44                         <loader [display]="loadingInstances" size="medium" [relative]="true"></loader>
  45                         <div class="hierarchy-header white-sub-header">
  46                             <span tooltip="{{component.name}}">{{component.name}}</span>
  47                         </div>
  48                         <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
  49                         <hierarchy-navigation class="hierarchy-nav"
  50                                 (updateSelected)="onInstanceSelectedUpdate($event)"
  51                                 [displayData]="isInpusTabSelected ? []: instancesNavigationData"
  52                                 [selectedItem]="selectedInstanceData.uniqueId"
  53                                 [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
  54                     </div>
  55                 </tab>
  56                 <tab tabTitle="Property Structure">
  57                     <div class="hierarchy-nav-container">
  58                     <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
  59                         <span tooltip="{{!isInpusTabSelected ? propertyStructureHeader : ''}}">{{!isInpusTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
  60                     </div>
  61                     <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInpusTabSelected">No data to display</div>
  62                     <hierarchy-navigation class="hierarchy-nav"
  63                             (updateSelected)="onPropertySelectedUpdate($event)"
  64                             [displayData]="isInpusTabSelected ? [] : propertiesNavigationData"
  65                             [selectedItem]="selectedFlatProperty.path"
  66                             [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
  67                     </div>
  68                 </tab>
  69             </tabs>
  70         </div>
  71     </div>
  72 </div>