diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
5 files changed, 44 insertions, 9 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html index eeba590046..d3db53aa43 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -29,6 +29,9 @@ <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}"> </span> </div> + <div class="table-cell col4" (click)="sort('required')" *ngIf="componentType == 'SERVICE'"> + <span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span> + </div> <div class="table-cell valueCol">Value</div> </div> <div class="table-body"> @@ -37,7 +40,9 @@ <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}"> <!-- Property Name --> <div class="table-cell col1"> - <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div> + <div class="inner-cell-div"> + <span class="property-name" tooltip="{{input.name}}">{{input.name}}</span> + </div> <span *ngIf="input.description" class="property-description-icon sprite-new show-desc" tooltip="{{input.description}}" tooltipDelay="0"></span> @@ -54,6 +59,12 @@ <span>{{input.type | contentAfterLastDot}}</span> </div> </div> + <!-- Required in runtime --> + <div class="table-cell col4" *ngIf="componentType == 'SERVICE'"> + <sdc-checkbox [(checked)]="input.required" + (checkedChange)="onRequiredChanged(input, $event)" + [disabled]="readonly"></sdc-checkbox> + </div> <!-- Value --> <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType"> <dynamic-element class="value-input" diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less index 72e19f3f51..77c002c899 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -101,9 +101,11 @@ &:last-child { border-right:#d2d2d2 solid 1px; } + + // Column: Property Name &.col1 { flex: 1 0 130px; - max-width:130px; + max-width: 250px; justify-content: space-between; @@ -118,16 +120,27 @@ flex: 0 0 auto; } } + + // Column: Type &.col2 { flex: 0 0 140px; - max-width:140px; + max-width: 140px; } + // Column: From Instance &.col3 { - flex:0 0 120px; - max-width:120px; + flex: 0 0 120px; + max-width: 120px; + } + + // Column: Required in Runtime + &.col4 { + flex: 0 0 80px; + max-width: 80px; + text-align: center; } + // Column: Value &.valueCol { .value-input { flex: 1; diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts index f45d5a85c7..682a3e2463 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -40,6 +40,7 @@ export class InputsTableComponent { @Input() instanceNamesMap: Map<string, InstanceFeDetails>; @Input() readonly: boolean; @Input() isLoading: boolean; + @Input() componentType: string; @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>(); @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); @@ -47,7 +48,7 @@ export class InputsTableComponent { sortBy: String; reverse: boolean; - selectedInputToDelete: InputFEModel; + selectedInputToDelete: InputFEModel; sort = (sortBy) => { this.reverse = (this.sortBy === sortBy) ? !this.reverse : true; @@ -88,6 +89,10 @@ export class InputsTableComponent { this.inputChanged.emit(input); }; + onRequiredChanged = (input: InputFEModel, event) => { + this.inputChanged.emit(input); + } + onDeleteInput = () => { this.deleteInput.emit(this.selectedInputToDelete); this.modalService.closeCurrentModal(); diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html index 89b85d3578..af7a61204c 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -27,7 +27,7 @@ <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}"> </span> </div> - <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hidePropertyType">ES + <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hidePropertyType">EntrySchema <span *ngIf="sortBy === 'schema.property.type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}"> </span> </div> diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less index 86832e57f0..8c2c6ce940 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less @@ -129,8 +129,10 @@ &:last-child { border-right:#d2d2d2 solid 1px; } + + // Column: Property Name &.col1 { - flex: 1 0 210px; + flex: 1 0 190px; max-width:300px; display: flex; @media @smaller-screen { flex: 0 0 25%;} @@ -149,20 +151,24 @@ flex: 0 0 auto; } } + + // Column: Type &.col2 { flex: 0 0 150px; max-width:150px; @media @smaller-screen { flex: 0 0 20%;} } + // Column: ES &.col3 { flex:0 0 120px; max-width:120px; @media @smaller-screen { flex: 0 0 15%;} } + // Column: Value &.valueCol { - flex: 2 0 300px; + flex: 2 0 250px; display: flex; @media @smaller-screen { flex: 1 0 40%;} } |