aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/interface-definition
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-definition')
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html15
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less23
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts6
3 files changed, 35 insertions, 9 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
index f3043ffebd..bf36df0593 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.html
@@ -69,15 +69,20 @@
<span class="cell header-cell field-description header-description">
{{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
</span>
+ <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
</div>
- <div class="data-row" *ngFor="let operation of interface1.operations" (click)="onSelectInterfaceOperation(interface1, operation)">
- <span class="cell field-name">{{operation.name}}</span>
- <span class="cell field-description" [ngClass]="{'collapsed': operation.isCollapsed}">
- {{operation.getDescriptionEllipsis()}}
+ <div class="data-row" *ngFor="let operation of interface1.operations">
+ <span class="cell field-name"
+ (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
+ <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
+ [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
<span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
{{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
- </span>
</span>
+ </span>
+ <span class="cell field-delete" *ngIf="!readonly">
+ <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
+ </span>
</div>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less
index 2b76c8c0ec..464732e016 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.less
@@ -20,10 +20,21 @@
*/
@import '../../../../assets/styles/variables.less';
@import '../../../../assets/styles/override.less';
-
+@import '../../../../assets/styles/sprite-old.less';
.interface-definition {
font-size: 14px;
+ .delete-col-header{
+ .sprite;
+ .sprite.e-sdc-small-icon-delete;
+ }
+
+ .field-delete{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
.interface-empty-msg {
.bold-message {
font-family: @font-opensans-bold;
@@ -184,10 +195,18 @@
.data-row {
cursor: pointer;
+ .table-delete-btn{
+ .sprite;
+ .sprite.e-sdc-small-icon-delete;
+ border: none;
+ display: none !important;
+ }
&:hover {
background: @sdcui_color_light-silver;
-
+ .table-delete-btn{
+ display: inline-block !important;
+ }
.cell {
&.field-name {
color: @sdcui_color_dark-blue;
diff --git a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
index 5372fc919d..2a25ad90df 100644
--- a/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-definition/interface-definition.page.component.ts
@@ -398,8 +398,10 @@ export class InterfaceDefinitionComponent {
return this.interfaces.filter((interfaceData) => interfaceData.operations && interfaceData.operations.length > 0).length > 0;
}
- onRemoveOperation = (event: Event, operation: OperationModel): void => {
- event.stopPropagation();
+ onRemoveOperation(operation: OperationModel): void {
+ if (this.readonly) {
+ return;
+ }
const deleteButton: IModalButtonComponent = {
id: 'deleteButton',