catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   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 <ng1-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VSP" show-close-button="true">
  18     <info-tooltip class="general-info-button" info-message-translate="ON_BOARDING_GENERAL_INFO "></info-tooltip>
  19     <div class="title-wrapper">
  20         <div>
  21             <p class="sub-title">Select one of the software product component below:</p>
  22         </div>
  23
  24         <div class="top-search">
  25             <input type="text"
  26                    class="search-text"
  27                    placeholder="Search"
  28                    data-ng-model="search.filterTerm"
  29                    data-tests-id="onboarding-search"
  30                    ng-model-options="{ debounce: 300 }" />
  31             <span class="w-sdc-search-icon magnification"></span>
  32         </div>
  33     </div>
  34
  35     <div class="table-container-flex">
  36         <div class="table" data-ng-class="{'view-mode': isViewMode()}">
  37
  38             <!-- Table headers -->
  39             <div class="head flex-container">
  40                 <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)" data-tests-id="{{header.title}}">{{header.title}}
  41                     <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
  42                 </div>
  43             </div>
  44
  45             <!-- Table body -->
  46             <div class="body">
  47                 <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container" id="onboarding-modal-scrollbar-container">
  48
  49                     <!-- In case the component list is empty -->
  50                     <div data-ng-if="!componentsList || componentsList.length===0" class="no-row-text">
  51                         There are no software product component to display
  52                     </div>
  53
  54                     <div infinite-scroll-disabled='allItemsDisplayed'  infinite-scroll="increaseNumItemsToDisplay()" infinite-scroll-container="'#onboarding-modal-scrollbar-container'">
  55
  56                     <!-- Loop on components list -->
  57                     <div data-ng-repeat-start="component in componentsList | filter: search | orderBy:sortBy:reverse | limitTo:numberOfItemsToDisplay track by $index"
  58                          class="flex-container data-row"
  59                          data-ng-class="{'selected': component.packageId === selectedComponent.packageId}"
  60                          data-ng-click="doSelectComponent(component);"
  61                          data-tests-id="csar-row"
  62                          >
  63
  64                         <!-- Name -->
  65                         <div class="table-col-general flex-item"  sdc-smart-tooltip>
  66                             <span class="sprite table-arrow" data-ng-class="{'opened': component.packageId === selectedComponent.packageId}" data-tests-id="{{component.name}}"></span>
  67                             {{component.name}}
  68                         </div>
  69
  70                         <!-- Vendor -->
  71                         <div class="table-col-general flex-item" data-tests-id="{{component.vendorName}}" sdc-smart-tooltip>
  72                             {{component.vendorName}}
  73                         </div>
  74
  75                         <!-- Category -->
  76                         <div class="table-col-general flex-item"  sdc-smart-tooltip>
  77                             {{component.categories[0].name}}&nbsp;{{component.categories[0].subcategories[0].name}}
  78                         </div>
  79
  80                         <!-- Version -->
  81                         <div class="table-col-general flex-item"  sdc-smart-tooltip>
  82                             {{component.csarVersion}}
  83                         </div>
  84
  85                         <!-- Type -->
  86                         <div class="table-col-general flex-item"  sdc-smart-tooltip>
  87                             {{component.resourceType}}
  88                         </div>
  89
  90                         <!-- Import And Update -->
  91                         <div class="table-col-general flex-item"  sdc-smart-tooltip></div>
  92
  93                     </div>
  94
  95                     <div data-ng-repeat-end="" data-ng-if="component.packageId === selectedComponent.packageId" class="item-opened">
  96
  97                         <div class="item-opened-description">
  98                             <div class="item-opened-description-title">VSP Description:</div>
  99                             {{component.description}}
 100                         </div>
 101
 102                         <div class="item-opened-metadata1">
 103                             <div data-ng-if="isCsarComponentExists===true">
 104                                 <div class="item-opened-metadata-title">VF'S Meta Data:</div>
 105                                 <div><span class="th">Name:</span> {{componentFromServer.name}}</div>
 106                                 <div><span class="th">Lifecycle:</span> {{componentFromServer.lifecycleState}}</div>
 107                                 <div><span class="th">Creator:</span> {{componentFromServer.creatorFullName}}</div>
 108                             </div>
 109                         </div>
 110
 111                         <div class="item-opened-metadata2">
 112                             <div data-ng-if="isCsarComponentExists===true">
 113                                 <div class="item-opened-metadata-title">&nbsp;</div>
 114                                 <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
 115                                 <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
 116                                 <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
 117                                 <div data-ng-if="componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId !== user.userId">
 118                                     <span class="note">Designers cannot update a VSP if the VF is checked out by another user.</span>
 119                                 </div>
 120                                 <div data-ng-if="componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'">
 121                                     <span class="note">Designers cannot update a VSP if the VF is in Ready for testing state.</span>
 122                                 </div>
 123                             </div>
 124                         </div>
 125
 126                         <div class="item-opened-metadata3">
 127                             <info-tooltip class="info-button" info-message-translate="{{isCsarComponentExists?'ON_BOARDING_UPDATE_INFO':'ON_BOARDING_IMPORT_INFO'}}" direction="left"></info-tooltip>
 128                         </div>
 129
 130                         <div class="item-opened-icon">
 131                             <span data-ng-if="isCsarComponentExists!==true"
 132                                  class="sprite-new import-file-btn"
 133                                  data-ng-click="doImportCsar()"
 134                                  uib-tooltip="Import VSP"
 135                                  tooltip-class="uib-custom-tooltip"
 136                                  tooltip-placement="bottom"
 137                                  data-tests-id="import-csar"></span>
 138
 139                             <span data-ng-if="isCsarComponentExists===true"
 140                                  class="sprite-new refresh-file-btn"
 141                                  uib-tooltip="Update VSP"
 142                                  tooltip-class="uib-custom-tooltip"
 143                                  tooltip-placement="bottom"
 144                                  data-ng-class="{'disabled': (componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId!==user.userId) || componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'}"
 145                                  data-ng-click="doUpdateCsar()"
 146                                  data-tests-id="update-csar"></span>
 147
 148                             <span data-ng-click="downloadCsar(component.packageId)"
 149                                  class="sprite-new download-file-btn hand"
 150                                  uib-tooltip="Download VSP"
 151                                  tooltip-class="uib-custom-tooltip"
 152                                  tooltip-placement="bottom"
 153                                  data-tests-id="download-csar"></span>
 154                         </div>
 155                         <loader data-display="isLoading" relative="true" size="small"></loader>
 156                     </div>
 157                     </div>
 158
 159                 </perfect-scrollbar>
 160             </div><!-- End table body -->
 161         </div><!-- End table -->
 162     </div><!-- End table-container-flex -->
 163     <div class="w-sdc-modal-footer classic"></div>
 164
 165 </ng1-modal>