diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/inputs-table')
5 files changed, 264 insertions, 28 deletions
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html new file mode 100644 index 0000000000..7fdd95b304 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.html @@ -0,0 +1,3 @@ +<modal #confirmationModal title="Delete Input" size="sm" [buttons]="footerButtons"> + Are you sure you want to delete this input? +</modal> diff --git a/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts new file mode 100644 index 0000000000..24c37b5636 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/inputs-table/confirmation-delete-input/confirmation-delete-input.component.ts @@ -0,0 +1,38 @@ +/** + * Created by rc2122 on 6/1/2017. + */ +import {Component, Output, EventEmitter, ViewChild} from "@angular/core"; +import {ButtonsModelMap, ButtonModel} from "app/models/button"; +import {ModalComponent} from "app/ng2/components/modal/modal.component"; + +@Component({ + selector: 'confirm-delete-input', + templateUrl: './confirmation-delete-input.component.html' +}) +export class ConfirmationDeleteInputComponent { + + @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); + @ViewChild ('confirmationModal') confirmationModal:ModalComponent; + footerButtons:ButtonsModelMap = {}; + + constructor (){ + } + + ngOnInit() { + this.footerButtons['Delete'] = new ButtonModel('Delete', 'blue', this.onDeleteInput); + this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.closeModal); + } + + onDeleteInput = (input) => { + this.deleteInput.emit(input); + this.closeModal(); + }; + + openModal = () => { + this.confirmationModal.open(); + } + + closeModal = () => { + this.confirmationModal.close(); + } +} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html index e7801b82cf..fb6b04013f 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html @@ -1,4 +1,5 @@ <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 col2">Type</div> @@ -7,31 +8,39 @@ </div> <div class="table-body"> <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div> - <div class="table-row" *ngFor="let input of inputs"> - <div class="table-cell col1"> - <span tooltip="{{input.name}}" >{{input.name}}</span> - <span *ngIf="input.description" - class="property-description-icon sprite-new show-desc" - tooltip="{{input.description}}"></span> - </div> - <div class="table-cell col2">{{input.type | contentAfterLastDot}}</div> - <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</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);"> - </dynamic-element> - <div class="delete-button-container"> - <span class="sprite-new delete-btn" (click)="onDeleteInput(input)"></span> + <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}}"></span> + </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 col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</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.ownerId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span> + </div> </div> - </div> + </div> </div> </div> </div> +<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input> diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less new file mode 100644 index 0000000000..93f96470bc --- /dev/null +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less @@ -0,0 +1,178 @@ + +@import './../../../../assets/styles/variables.less'; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + dynamic-property { + width:100%; + } + + /deep/ .dynamic-property-row { + border-top:solid #d2d2d2 1px; + } + + /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) { + border-top: none; + } + + .table-header { + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #eaeaea; + + .valueCol { + justify-content: flex-start; + padding: 5px; + } + } + .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-rows-header { + font-size:16px; + flex:1; + border: #d2d2d2 solid 1px; + border-top:none; + padding: 5px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background-color: @tlv_color_v; + } + + .table-row { + &:hover { + background-color:#f8f8f8; cursor:pointer; + } + + &:last-child { + flex: 1 0 auto; + } + .selected-row { + background-color:#e6f6fb; + } + } + .cut-inner-long-text{ + text-overflow: ellipsis; + overflow: hidden; + } + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding: 5px; + text-overflow: ellipsis; + white-space: nowrap; + + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 0 0 300px; + 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; + + .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: 5px; + } + + + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts index ea01edf043..83c0bda991 100644 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts +++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts @@ -1,20 +1,25 @@ /** * Created by rc2122 on 5/4/2017. */ -import {Component, Input, Output, EventEmitter} from "@angular/core"; +import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core"; import {InputFEModel} from "app/models"; +import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/confirmation-delete-input.component"; @Component({ selector: 'inputs-table', templateUrl: './inputs-table.component.html', - styleUrls: ['../properties-table/properties-table.component.less'] + styleUrls: ['../inputs-table/inputs-table.component.less'] }) export class InputsTableComponent { @Input() inputs: Array<InputFEModel>; - + @Input() readonly:boolean; + @Input() isLoading:boolean; @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>(); @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); + @ViewChild ('deleteInputConfirmation') deleteInputConfirmation:ConfirmationDeleteInputComponent; + + selectedInputToDelete:InputFEModel; constructor (){ } @@ -23,11 +28,14 @@ export class InputsTableComponent { this.inputValueChanged.emit(input); }; - onDeleteInput = (input) => { - this.deleteInput.emit(input); - } - + onDeleteInput = () => { + this.deleteInput.emit(this.selectedInputToDelete); + }; + openDeleteModal = (input:InputFEModel) => { + this.selectedInputToDelete = input; + this.deleteInputConfirmation.openModal(); + } } |