gerrit.onap Code Review - sdc.git/blob

   1 <!--
   2   ~ Copyright © 2016-2018 European Support Limited
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15 -->
  16
  17 <div class="workspace-req-and-cap-editable">
  18     <loader data-display="isLoading"></loader>
  19
  20     <div class="tabs-header">
  21         <div class="req-and-cap-tabs">
  22             <div data-tests-id="req-tab" data-ng-click="onSwitchTab()" class="tab"
  23                  data-ng-class="{'selected':mode=='requirements'}">Requirements
  24             </div>
  25             <div data-tests-id="cap-tab" data-ng-click="onSwitchTab()" class="tab"
  26                  data-ng-class="{'selected':mode=='capabilities'}">Capabilities
  27             </div>
  28         </div>
  29         <div class="buttons-in-right" data-ng-if="!isListEmpty()">
  30             <div class="search">
  31                 <input id="search-box" data-ng-if="filter.show" data-tests-id="search-box" placeholder="Search"
  32                        data-ng-model-options="{debounce: 200}" data-ng-model="filter.txt" data-ng-change="onFilter()"/>
  33                 <div class="search-icon-container" data-tests-id="search-icon">
  34                     <svg-icon
  35                             class="hand"
  36                             [name]="'search-o'"
  37                             [mode]="'primary'"
  38                             [size]="'small'"
  39                             [clickable]="'true'"
  40                             data-ng-click="onSearchIconClick()">
  41                     </svg-icon>
  42                 </div>
  43             </div>
  44             <div class="add-button-icon-and-label" data-ng-if="isEditable" data-ng-click="onAddBtnClicked()"
  45                  data-ng-class="{'disabled': isReadonly()}" data-tests-id="add-button">
  46                 <svg-icon
  47                         name="plus"
  48                         mode="primary"
  49                         size="small"
  50                         clickable="true"
  51                         [disabled]="isReadonly()"
  52                         labelPlacement="top">
  53                 </svg-icon>
  54                 <span class="icon-label-txt">{{mode === 'requirements' ? 'Add Requirement' : 'Add Capability'}}</span>
  55             </div>
  56         </div>
  57     </div>
  58
  59     <div class="empty-list-container" data-ng-if="isListEmpty() && !isLoading" data-tests-id="empty-list-container">
  60         <div class="empty-list-add-btn add-button-icon-and-label" data-ng-class="{'disabled': isReadonly()}"
  61              data-ng-click="onAddBtnClicked()" data-tests-id="empty-list-add-btn">
  62             <svg-icon
  63                     name="plus-circle"
  64                     mode="primary"
  65                     size="x_large"
  66                     clickable="true"
  67                     [disabled]="isReadonly()">
  68             </svg-icon>
  69             <div class="icon-label-txt">{{mode === 'requirements' ? 'Add Requirement' : 'Add Capability'}}</div>
  70         </div>
  71     </div>
  72
  73     <div class="table-container-flex requirements-table" data-ng-if="mode=='requirements' && !isListEmpty()">
  74         <div class="table" data-ng-class="{'view-mode': isViewMode()}" data-tests-id="requirement-table">
  75             <div class="head flex-container">
  76                 <div data-ng-repeat="header in editableRequirementsTableHeadersList track by $index"
  77                      data-ng-click="sort(header.property, requirementsSortTableDefined)"
  78                      class="table-header head-row hand flex-item {{header.property}}"
  79                      data-tests-id="table-header-{{header.property}}">
  80                     {{header.title}}
  81                     <span data-ng-if="requirementsSortTableDefined.sortByField === header.property"
  82                           class="table-header-sort-arrow" data-tests-id="table-header-sort-arrow"
  83                           data-ng-class="{'down': requirementsSortTableDefined.reverse, 'up':!requirementsSortTableDefined.reverse}"> </span>
  84                 </div>
  85             </div>
  86
  87             <div class="body">
  88                 <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="editable-table-data">
  89                     <div data-ng-if="filteredRequirementsList.length === 0" class="no-row-text"
  90                          data-tests-id="no-rows-in-table">
  91                         There are no requirements to display
  92
  93                     </div>
  94                     <div data-ng-repeat="req in filteredRequirementsList | orderBy:requirementsSortTableDefined.sortByField:requirementsSortTableDefined.reverse  track by $index"
  95                          data-tests-id="reqRow">
  96                         <div class="flex-container data-row" data-ng-class="{'editable-row': req.isCreatedManually}"
  97                              data-ng-click="req.isCreatedManually && onEditRequirement(req)">
  98                             <div class="table-col-general flex-item text ellipsis-text" tooltips
  99                                  tooltip-content="{{req.name}}">
 100                                 <span data-tests-id="{{req.name}}">{{req.name}}</span>
 101                             </div>
 102                             <div class="table-col-general flex-item text ellipsis-text" tooltips
 103                                  tooltip-content="{{req.capability}}">
 104                                 <span data-tests-id="{{req.capability}}">{{req.capability && cutToscaTypePrefix(req.capability, 'capabilities.')}}</span>
 105                             </div>
 106                             <div class="table-col-general flex-item text ellipsis-text" tooltips
 107                                  tooltip-content="{{req.node}}">
 108                                 <span data-tests-id="{{req.node}}">{{req.node && cutToscaTypePrefix(req.node, "nodes.")}}</span>
 109                             </div>
 110                             <div class="table-col-general flex-item text ellipsis-text" tooltips
 111                                  tooltip-content="{{req.relationship}}">
 112                                 <span data-tests-id="{{req.relationship}}">{{req.relationship && cutToscaTypePrefix(req.relationship, "relationships.")}}</span>
 113                             </div>
 114                             <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips
 115                                  tooltip-content="{{req.minOccurrences}} - {{req.maxOccurrences}}">
 116                                 <span data-tests-id="{{req.minOccurrences}} - {{req.maxOccurrences}}">{{req.minOccurrences}} - {{req.maxOccurrences}}</span>
 117                             </div>
 118                             <div class="table-col-general flex-item text other-col" data-tests-id="delete-req"
 119                                  data-ng-class="{'disabled': isReadonly()}">
 120                                 <svg-icon name="trash-o" class="trash-icon" size="small"
 121                                           data-ng-if="req.isCreatedManually && !isReadonly()"
 122                                           data-ng-click="onDeleteReq($event, req)"></svg-icon>
 123                             </div>
 124                         </div>
 125                     </div>
 126                 </perfect-scrollbar>
 127             </div>
 128
 129         </div>
 130     </div>
 131     <div class="table-container-flex capabilities-table" data-ng-if="mode=='capabilities' && !isListEmpty()"
 132          data-tests-id="capabilities-table">
 133         <div class="table" data-ng-class="{'view-mode': isViewMode()}">
 134             <div class="head flex-container">
 135                 <div data-ng-repeat="header in editableCapabilitiesTableHeadersList track by $index"
 136                      data-ng-click="sort(header.property, capabilitiesSortTableDefined)"
 137                      class="table-header head-row hand flex-item {{header.property}}"
 138                      data-tests-id="header-{{header.property}}">
 139                     {{header.title}}
 140                     <span data-ng-if="capabilitiesSortTableDefined.sortByField === header.property"
 141                           class="table-header-sort-arrow" data-tests-id=="table-header-sort-arrow"
 142                           data-ng-class="{'down': capabilitiesSortTableDefined.reverse, 'up':!capabilitiesSortTableDefined.reverse}"> </span>
 143                 </div>
 144             </div>
 145
 146             <div class="body">
 147                 <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="editable-table-data">
 148                     <div data-ng-if="filteredCapabilitiesList.length === 0" class="no-row-text"
 149                          data-tests-id="no-rows-in-table">
 150                         There are no capabilities to display
 151
 152                     </div>
 153                     <div data-ng-repeat="capability in filteredCapabilitiesList | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse  track by $index"
 154                          class="flex-container data-row"
 155                          data-ng-class="{'selected': capability.selected, 'editable-row': capability.isCreatedManually}"
 156                          data-ng-click="capability.isCreatedManually && onEditCapability(capability)"
 157                          data-tests-id="capabilities-table-row">
 158
 159                         <div class="table-col-general flex-item text ellipsis-text" tooltips
 160                              tooltip-content="{{capability.name}}">
 161                             <span data-tests-id="{{capability.name}}">{{capability.name}}</span>
 162                         </div>
 163                         <div class="table-col-general flex-item text ellipsis-text" tooltips
 164                              tooltip-content="{{capability.type}}">
 165                             <span data-tests-id="{{capability.type}}">{{capability.type && cutToscaTypePrefix(capability.type, 'capabilities.')}}</span>
 166                         </div>
 167
 168                         <div class="table-col-general flex-item text description-col">
 169                             <div data-tests-id="{{capability.description}}" class="multiline-ellipsis"
 170                                  ellipsis="capability.description" max-chars="60">{{capability.description}}
 171                             </div>
 172                         </div>
 173
 174                         <div class="table-col-general flex-item text ellipsis-text" tooltips
 175                              tooltip-content="{{capability.validSourceTypes.join(',')}}">
 176                             <span data-tests-id="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span>
 177                         </div>
 178
 179                         <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips
 180                              tooltip-content="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">
 181                             <span data-tests-id="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">{{capability.minOccurrences}} - {{capability.maxOccurrences}}</span>
 182                         </div>
 183
 184                         <div class="table-col-general flex-item text other-col" data-tests-id="delete-cap"
 185                              data-ng-class="{'disabled': isReadonly()}">
 186                             <svg-icon name="trash-o" class="trash-icon" size="small"
 187                                       data-ng-if="capability.isCreatedManually && !isReadonly()"
 188                                       data-ng-click="onDeleteCap($event, capability)"></svg-icon>
 189                         </div>
 190                     </div>
 191                 </perfect-scrollbar>
 192             </div>
 193
 194         </div>
 195     </div>
 196 </div>
 197