catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.html

   1 <div class="add-property-container">
   2   <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
   3   <form class="w-sdc-form" [formGroup]="formGroup">
   4
   5     <div class="side-by-side">
   6       <div class="i-sdc-form-item">
   7         <label class="i-sdc-form-label required">{{'PROPERTY_NAME_LABEL' | translate}}</label>
   8         <input class="i-sdc-form-input"
   9                [ngClass]="{ 'disabled': property ? true : false }"
  10                type="text"
  11                data-tests-id="property-name"
  12                formControlName="name"
  13                [readOnly]="readOnly"/>
  14       </div>
  15       <div class="i-sdc-form-item">
  16         <label class="i-sdc-form-label required">{{'PROPERTY_TYPE_LABEL' | translate}}</label>
  17           <select formControlName="type" (change)="onTypeChange()" [ngClass]="{ 'disabled': property ? true : false }">
  18           <option [ngValue]="null">{{'GENERAL_LABEL_SELECT' | translate}}</option>
  19           <option *ngFor="let type of typeList"
  20                   [ngValue]="type">{{type}}</option>
  21         </select>
  22       </div>
  23       <div class="i-sdc-form-item">
  24         <input type="checkbox" formControlName="required" [attr.disabled]="readOnly ? readOnly : null"/> {{'PROPERTY_REQUIRED_LABEL' | translate}}
  25       </div>
  26       <div class="i-sdc-form-item propertySchemaType" *ngIf="showSchema">
  27         <label class="i-sdc-form-label required">{{'PROPERTY_SCHEMA_LABEL' | translate}}</label>
  28         <select formControlName="schema" (change)="onSchemaChange()" [attr.disabled]="readOnly ? readOnly : null">
  29           <option [ngValue]="null">{{'GENERAL_LABEL_SELECT' | translate}}</option>
  30           <option *ngFor="let type of schemaTypeList"
  31                   [ngValue]="type">{{type}}</option>
  32         </select>
  33       </div>
  34     </div>
  35
  36     <div class="i-sdc-form-item">
  37       <label class="i-sdc-form-label">{{'PROPERTY_DESCRIPTION_LABEL' | translate}}</label>
  38       <textarea class="i-sdc-form-textarea"
  39                 formControlName="description"
  40                 data-tests-id="property-description"
  41                 [readOnly]="readOnly">
  42       </textarea>
  43     </div>
  44       <div class="constraints-section i-sdc-form-item">
  45           <label class="i-sdc-form-label" *ngIf="property ? property.constraints: false">Constraints</label>
  46           <ng-container>
  47               <app-constraints [propertyConstraints]="property ? property.constraints ? property.constraints : null : null"
  48                                [isViewOnly]="readOnly"
  49                                [propertyType]="property ? property.type : typeForm.value"
  50                                (onConstraintChange)="onConstraintChange($event)">
  51               </app-constraints>
  52           </ng-container>
  53       </div>
  54
  55       <div class="default-value-container i-sdc-form-item" *ngIf="showDefaultValue()">
  56       <label class="i-sdc-form-label">{{'PROPERTY_DEFAULT_VALUE_LABEL' | translate}}</label>
  57       <ng-container *ngIf="!readOnly">
  58         <input type="checkbox" formControlName="hasDefaultValue" [attr.disabled]="readOnly ? readOnly : null"/> {{'PROPERTY_SET_DEFAULT_VALUE_MSG' | translate}}
  59       </ng-container>
  60       <ng-container *ngIf="hasDefaultValueForm.value">
  61         <ul>
  62           <app-input-list-item
  63               [name]="nameForm.value"
  64               [type]="getDataType(typeForm.value)"
  65               [dataTypeMap]="dataTypeMap"
  66               [valueObjRef]="defaultValueForm.value"
  67               [schema]="buildSchemaGroupProperty()"
  68               [nestingLevel]="0"
  69               [isViewOnly]="readOnly"
  70               [allowDeletion]="false"
  71               [isExpanded]="true"
  72               (onValueChange)="onPropertyValueChange($event)">
  73           </app-input-list-item>
  74         </ul>
  75       </ng-container>
  76     </div>
  77   </form>
  78 </div>