catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-editable-view.html

   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, false)"
  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.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">
 100                                 <span data-tests-id="{{(!req.isCreatedManually ? req.ownerName + '.' : '') + req.name}}">{{(!req.isCreatedManually ? req.ownerName + '.' : '') + 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, true)"
 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                     </div>
 152                     <div data-ng-repeat-start="capability in filteredCapabilitiesList | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse  track by $index"
 153                          class="flex-container data-row"
 154                          data-ng-class="{'selected': capability.selected, 'editable-row': capability.isCreatedManually}"
 155                          data-ng-click="capability.isCreatedManually && onEditCapability(capability)"
 156                          data-tests-id="capabilities-table-row">
 157
 158                         <div class="table-col-general flex-item text ellipsis-text" tooltips
 159                              tooltip-content="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}">
 160                             <span class="sprite-new arrow-up-small hand"
 161                                   data-ng-class="{'hideme': !capability.properties.length, 'opened': capability.selected}"
 162                                   data-ng-click="capability.selected = !capability.selected; $event.stopPropagation();"></span>
 163                             <span data-tests-id="{{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}"
 164                                   class="name-col" data-ng-class="{'opened': capability.selected}">
 165                                 {{(!capability.isCreatedManually ? capability.ownerName + '.' : '') + capability.name}}
 166                             </span>
 167                         </div>
 168                         <div class="table-col-general flex-item text ellipsis-text" tooltips
 169                              tooltip-content="{{capability.type}}">
 170                             <span data-tests-id="{{capability.type}}">{{capability.type && cutToscaTypePrefix(capability.type, 'capabilities.')}}</span>
 171                         </div>
 172
 173                         <div class="table-col-general flex-item text description-col">
 174                             <div data-tests-id="{{capability.description}}" class="multiline-ellipsis"
 175                                  ellipsis="capability.description" max-chars="60">{{capability.description}}
 176                             </div>
 177                         </div>
 178
 179                         <div class="table-col-general flex-item text ellipsis-text" tooltips
 180                              tooltip-content="{{capability.validSourceTypes.join(',')}}">
 181                             <span data-tests-id="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span>
 182                         </div>
 183
 184                         <div class="table-col-general flex-item text ellipsis-text occurrences-col" tooltips
 185                              tooltip-content="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">
 186                             <span data-tests-id="{{capability.minOccurrences}} - {{capability.maxOccurrences}}">{{capability.minOccurrences}} - {{capability.maxOccurrences}}</span>
 187                         </div>
 188
 189                         <div class="table-col-general flex-item text other-col" data-tests-id="delete-cap"
 190                              data-ng-class="{'disabled': isReadonly()}">
 191                             <svg-icon name="trash-o" class="trash-icon" size="small"
 192                                       data-ng-if="capability.isCreatedManually && !isReadonly()"
 193                                       data-ng-click="onDeleteCap($event, capability)"></svg-icon>
 194                         </div>
 195                     </div>
 196                     <div data-ng-repeat-end data-ng-if="capability.selected" class="item-opened properties-section">
 197                         <p class="properties-title">Properties</p>
 198                         <div class="table-container-flex properties-table">
 199                             <div class="table" data-ng-class="{'view-mode': true}">
 200                                 <div class="head flex-container">
 201                                     <div class="table-header head-row hand flex-item"
 202                                          data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index"
 203                                          data-ng-click="sort(header.property, propertiesSortTableDefined, false)">
 204                                         {{header.title}}
 205                                         <span data-ng-if="propertiesSortTableDefined.sortByField === header.property"
 206                                               class="table-header-sort-arrow"
 207                                               data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span>
 208                                     </div>
 209                                 </div>
 210
 211                                 <div class="body">
 212                                     <div data-ng-repeat="property in capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse track by $index"
 213                                          data-tests-id="propertyRow"
 214                                          class="flex-container data-row">
 215                                         <div class="table-col-general flex-item text"
 216                                              data-tests-id="{{property.name}}"
 217                                              tooltips tooltip-content="{{property.name}}">
 218                                             {{property.name}}
 219                                         </div>
 220                                         <div class="table-col-general flex-item text"
 221                                              data-tests-id="{{property.type}}"
 222                                              tooltips tooltip-content="{{property.type}}">
 223                                             {{property.type}}
 224                                         </div>
 225                                         <div class="table-col-general flex-item text"
 226                                              data-tests-id="{{property.schema.property.type}}"
 227                                              tooltips tooltip-content="{{property.schema.property.type}}">
 228                                             {{property.schema.property.type}}
 229                                         </div>
 230                                         <div class="table-col-general flex-item text"
 231                                              tooltips tooltip-content="{{property.description}}"
 232                                              data-tests-id="{{property.description}}">
 233                                             {{property.description}}
 234                                         </div>
 235                                     </div>
 236                                 </div>
 237
 238                             </div>
 239                         </div>
 240                     </div>
 241                 </perfect-scrollbar>
 242             </div>
 243
 244         </div>
 245     </div>
 246 </div>
 247