aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.html
blob: 360af52dbf1d80e966408c3cd7cadae80bb76f3d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!--
  ~ ============LICENSE_START=======================================================
  ~  Copyright (C) 2021 Nordix Foundation
  ~  ================================================================================
  ~  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.
  ~
  ~  SPDX-License-Identifier: Apache-2.0
  ~  ============LICENSE_END=========================================================
  -->

<div class="operation-list">

  <div
      class="empty-list-container"
      *ngIf="!(interfaceOperationList$ | async)?.length">
    <span>No operation provided</span>
  </div>

  <div *ngIf="(interfaceOperationList$ | async)?.length">

    <div class="expand-collapse">
      <a
          class="link"
          data-tests-id="expand-all"
          [ngClass]="{'disabled': isAllExpanded()}"
          (click)="toggleAllExpand()">
        {{ 'INTERFACE_EXPAND_ALL' | translate }}
      </a> |
      <a
          class="link"
          data-tests-id="collapse-all"
          [ngClass]="{'disabled': isAllCollapsed()}"
          (click)="toggleAllCollapse()">
        {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
      </a>
    </div>

    <div
        class="interface-row"
        *ngFor="let interfaceType of getKeys(interfaceTypeMap)">

      <div
          class="interface-accordion"
          (click)="toggleCollapse(interfaceType)">
        <span
            class="chevron-container"
            [ngClass]="{'isCollapsed': isInterfaceCollapsed(interfaceType)}">
            <svg-icon
                name="caret1-down-o"
                mode="primary"
                size="small">
            </svg-icon>
        </span>
        <span class="interface-name">{{interfaceType}}</span>
      </div>

      <div class="generic-table" *ngIf="isInterfaceCollapsed(interfaceType)">
        <div class="header-row table-row">
          <span
              class="cell header-cell field-name">
            {{ 'OPERATION_NAME' | translate }}
          </span>
          <span
              class="cell header-cell field-description">
            {{ 'OPERATION_IMPLEMENTATION' | translate }}
          </span>
          <span
              class="cell header-cell field-actions header-actions">
            ●●●
          </span>
        </div>
        <div
            class="data-row"
            *ngFor="let operation of interfaceTypeMap.get(interfaceType)"
            [attr.data-tests-id]="'operation-' + operation.operationType"
            (click)="onEditOperation(operation)">
          <span
              class="cell field-name"
              [attr.data-tests-id]="'operation-' + operation.operationType + '-name'">
              {{operation.operationType}}
          </span>
          <span
              class="cell field-description"
              [attr.data-tests-id]="'operation-' + operation.operationType + '-implementation'">
              {{operation.implementation}}
          </span>
          <span class="cell field-actions">
            <span
                class="delete-action"
                [attr.data-tests-id]="'remove-operation-' + operation.operationType"
                (click)="onRemoveOperation($event, operation)">
              <svg-icon
                  *ngIf="!isReadOnly"
                  name="trash-o"
                  mode="info"
                  size="small"
                  [clickable]="true">
              </svg-icon>
            </span>
          </span>
        </div>

      </div>

    </div>

  </div>

</div>