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             <div class="main-tabs-section">
   5                 <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
   6                     <tab tabTitle="Properties">
   7                         <properties-table class="properties-table"
   8                             [fePropertiesMap]="instanceFePropertiesMap"
   9                             [feInstanceNamesMap]="componentInstanceNamesMap"
  10                             [searchTerm]="searchQuery"
  11                             [selectedPropertyId]="selectedFlatProperty.path"
  12                             [propertyNameSearchText]="searchPropertyName"
  13                             [readonly]="isReadonly"
  14                             [isLoading]="loadingProperties || savingChangedData"
  15                             [hasDeclareOption]="true"
  16                             (propertyChanged)="dataChanged($event)"
  17                             (propertySelected)="propertySelected($event)"
  18                             (selectPropertyRow)="selectPropertyRow($event)"
  19                             (selectChildProperty)="selectChildProperty($event)"
  20                             (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
  21                             (selectInstanceRow)="selectInstanceRow($event)">
  22                         </properties-table>
  23                     </tab>
  24                     <tab tabTitle="Inputs">
  25                         <inputs-table class="properties-table"
  26                                       [readonly]="isReadonly"
  27                                       [inputs]="inputs | searchFilter:'name':searchQuery"
  28                                       [instanceNamesMap]="componentInstanceNamesMap"
  29                                       [isLoading]="loadingInputs"
  30                                       (deleteInput)="deleteInput($event)"
  31                                       (inputChanged)="dataChanged($event)">
  32                         </inputs-table>
  33                     </tab>
  34                 </tabs>
  35                 <div class="main-tabs-section-buttons">
  36                     <button class="tlv-btn outline blue" [disabled]="!hasChangedData || savingChangedData" (click)="reverseChangedData()" data-tests-id="properties-reverse-button">Discard</button>
  37                     <button class="tlv-btn blue" [disabled]="!hasChangedData || !isValidChangedData || savingChangedData" (click)="doSaveChangedData()" data-tests-id="properties-save-button">{{savingChangedData ? 'Saving' : 'Save'}}</button>
  38                 </div>
  39             </div>
  40             <div class="header">
  41                 <div class="search-filter-container" [class.without-filter]="isInputsTabSelected">
  42                     <span *ngIf="displayClearSearch && isPropertiesTabSelected" (click)="clickOnClearSearch()" class="clear-filter" data-tests-id="clear-filter-button">Clear All</span>
  43                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" data-tests-id="search-box"/>
  44                     <span class="sprite search-icon" data-tests-id="search-button"></span>
  45                     <filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
  46                 </div>
  47                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareProperties()" data-tests-id="declare-button">Declare</button>
  48             </div>
  49         </div>
  50         <div class="right-column gray-border">
  51             <tabs #hierarchyNavTabs tabStyle="simple-tabs">
  52                 <tab tabTitle="Composition">
  53                     <div class="hierarchy-nav-container">
  54                         <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
  55                         <div class="hierarchy-header white-sub-header">
  56                             <span tooltip="{{component.name}}">{{component.name}}</span>
  57                         </div>
  58                         <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0 || isInputsTabSelected">No data to display</div>
  59                         <hierarchy-navigation class="hierarchy-nav"
  60                                 (updateSelected)="onInstanceSelectedUpdate($event)"
  61                                 [displayData]="isInputsTabSelected ? []: instancesNavigationData"
  62                                 [selectedItem]="selectedInstanceData.uniqueId"
  63                                 [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
  64                     </div>
  65                 </tab>
  66                 <tab tabTitle="Property Structure">
  67                     <div class="hierarchy-nav-container">
  68                     <div class="hierarchy-header white-sub-header" [class.selected]="selectedFlatProperty.path == propertyStructureHeader">
  69                         <span tooltip="{{isPropertiesTabSelected ? propertyStructureHeader : ''}}">{{isPropertiesTabSelected ? (propertyStructureHeader || "No Property Selected") : "No Property Selected"}}</span>
  70                     </div>
  71                     <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0 || isInputsTabSelected">No data to display</div>
  72                     <hierarchy-navigation class="hierarchy-nav"
  73                             (updateSelected)="onPropertySelectedUpdate($event)"
  74                             [displayData]="isInputsTabSelected ? [] : propertiesNavigationData"
  75                             [selectedItem]="selectedFlatProperty.path"
  76                             [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
  77                     </div>
  78                 </tab>
  79             </tabs>
  80         </div>
  81     </div>
  82     <template #saveChangedDataModalContentTemplate>
  83         <loader [display]="savingChangedData" [size]="'medium'" [relative]="true"></loader>
  84         Your changes{{isValidChangedData ? '' : ' (invalid)'}} have not been saved.<br>
  85         Do you want to {{isValidChangedData ? 'save' : 'discard'}} them?
  86     </template>
  87 </div>