summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/logic/inputs-table
diff options
context:
space:
mode:
authorTal Gitelman <tg851x@intl.att.com>2017-12-10 18:55:03 +0200
committerTal Gitelman <tg851x@intl.att.com>2017-12-10 19:33:38 +0200
commit51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 (patch)
tree3ac236a864d74d19b0f5c9020891a7a7e5c31b44 /catalog-ui/src/app/ng2/components/logic/inputs-table
parentb5cc2e0695f195716d6ccdc65e73807a6632ec70 (diff)
Final commit to master merge from
Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman <tg851x@intl.att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/inputs-table')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html49
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less164
-rw-r--r--catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts62
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();
+ }
+}
+
+