diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/inputs-table')
3 files changed, 275 insertions, 0 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 new file mode 100644 index 0000000000..57e0474c66 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -0,0 +1,49 @@ +<div class="properties-table"> + <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader> + <div class="table-header"> + <div class="table-cell col1">Property Name</div> + <div class="table-cell col3">From Instance</div> + <div class="table-cell col2">Type</div> + <div class="table-cell valueCol">Value</div> + </div> + <div class="table-body"> + <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div> + <div> + <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}"> + <div class="table-cell col1"> + <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div> + <span *ngIf="input.description" + class="property-description-icon sprite-new show-desc" + tooltip="{{input.description}}" tooltipDelay="0"></span> + </div> + <div class="table-cell col3"> + <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]}}"> + <span>{{instanceNamesMap[input.instanceUniqueId]}}</span> + </div> + </div> + <div class="table-cell col2"> + <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}"> + <span>{{input.type | contentAfterLastDot}}</span> + </div> + </div> + <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType"> + <dynamic-element class="value-input" + *ngIf="input.isSimpleType" + pattern="validationUtils.getValidationPattern(input.type)" + [(value)]="input.defaultValue" + [type]="input.type" + [name]="input.name" + (change)="onInputValueChanged(input);" + [readonly]="readonly"> + </dynamic-element> + <div class="delete-button-container"> + <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span> + </div> + </div> + + </div> + </div> + </div> +</div> + + 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 new file mode 100644 index 0000000000..0545874f53 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -0,0 +1,164 @@ + +@import './../../../../../assets/styles/variables.less'; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + .inner-cell-div{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + + .table-header { + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #eaeaea; + color:#191919; + + .table-cell { + font-size: 13px; + } + .valueCol { + justify-content: flex-start; + padding: 10px; + } + } + .table-header, .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + } + + .table-row { + &:hover { + background-color:#f8f8f8; cursor:pointer; + } + + &:last-child { + flex: 1 0 auto; + } + .selected-row { + background-color:#e6f6fb; + } + } + + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 200px; + max-width:300px; + display: flex; + justify-content: space-between; + + .property-name { + flex: 1; + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + } + + &.valueCol { + flex: 1 0 auto; + min-width: 350px; + display: flex; + justify-content: flex-end; + padding: 0px; + align-items: center; + + .value-input { + flex: 1; + max-height: 24px; + border: none; + background-color: inherit; + + &:focus, &:active { + border:none; + outline:none; + } + } + + .delete-btn { + flex: 0 0 auto; + } + + .delete-button-container { + max-height: 24px; + } + + &.inner-table-container { + padding: 0px; + + .delete-button-container { + padding: 3px 5px 0 0 ; + } + } + } + + &.input-value-col { + padding: 8px; + } + + + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + +} 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 new file mode 100644 index 0000000000..0add1cd707 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/4/2017. + */ +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import {InputFEModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; + +@Component({ + selector: 'inputs-table', + templateUrl: './inputs-table.component.html', + styleUrls: ['../inputs-table/inputs-table.component.less'], +}) +export class InputsTableComponent { + + @Input() inputs: Array<InputFEModel>; + @Input() instanceNamesMap: Map<string, string>; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>(); + @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); + + selectedInputToDelete:InputFEModel; + + constructor(private modalService: ModalService){ + } + + onInputValueChanged = (input) => { + this.inputValueChanged.emit(input); + }; + + onDeleteInput = () => { + this.deleteInput.emit(this.selectedInputToDelete); + this.modalService.closeCurrentModal(); + }; + + openDeleteModal = (input:InputFEModel) => { + this.selectedInputToDelete = input; + this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); + } +} + + |