aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html181
1 files changed, 106 insertions, 75 deletions
diff --git a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html
index c9c4a313..64a3f392 100644
--- a/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html
+++ b/vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html
@@ -16,14 +16,14 @@
<div class="md-padding nomargin nopadding" flex layout-sm="column">
<md-card class="nomargin">
<md-card-content class="nopadding">
- <img src="/onapui/vnfmarket/common/images/productioncardtype.png" style="width:100%;">
+ <img src="/onapui/vnfmarket/common/images/productioncardtype.png" style="width:100%;">
</md-card-content>
</md-card>
<!-- Start About Page -->
<md-card class="sortbar">
<md-toolbar id="homeToolbar" class="md-hue-3">
<div class="md-toolbar-tools">
- <label ng-if="vm.services.length > 0" class="md-title fontSize marginAuto selectLblAlignment">{{'module.marketplace.main.sortBy.label' | translate}}</label>
+ <label ng-if="vm.services.length > 0" class="md-title fontSize marginAuto selectLblAlignment">{{'module.marketplace.main.sortBy.label' | translate}}</label>
<select ng-model="sortBy" class="md-no-underline noMargin iconMargin md-title fontSize" id="sortByLabel" ng-if="vm.services.length > 0">
<option class="md-title fontSize " value="" disabled selected>{{'module.marketplace.main.sortBy.title' | translate}}</option>
<option class="md-title fontSize " value="{{'module.marketplace.main.sortBy.options.name.value' | translate}}">{{'module.marketplace.main.sortBy.options.name.key' | translate}}</option>
@@ -32,18 +32,22 @@
</select>
<form flex name="vm.filter.name" class="iconMargin">
<md-input-container md-no-float class="md-block" id="searchFieldContainer" ng-if="!vm.showSearch">
- <input class="md-title fontSize" ng-model="vm.filter.search" type="text" id="searchField" placeholder="{{'module.marketplace.main.search.placeholder' | translate}}" autofocus>
+ <input class="md-title fontSize" ng-model="vm.filter.search" type="text" id="searchField" placeholder="{{'module.marketplace.main.search.placeholder' | translate}}"
+ autofocus>
</md-input-container>
</form>
- <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'common.actions.close' | translate}}" ng-click="vm.showSearch = !vm.showSearch; vm.filter.search = '';" ng-if="!vm.showSearch" id="cancelSearch">
+ <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'common.actions.close' | translate}}" ng-click="vm.showSearch = !vm.showSearch; vm.filter.search = '';"
+ ng-if="!vm.showSearch" id="cancelSearch">
<md-tooltip md-direction="top">{{'common.actions.close' | translate}}</md-tooltip>
<i class="fa fa-close" aria-hidden="true"></i>
</md-icon>
- <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.search.label' | translate}}" ng-if="!vm.showSearch" id="searchIcon">
+ <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.search.label' | translate}}" ng-if="!vm.showSearch"
+ id="searchIcon">
<i class="fa fa-search searchIconColor" aria-hidden="true"></i>
</md-icon>
- <md-icon class="md-icon iconMargin iconAlignment defaultColor" aria-label="{{'common.actions.search' | translate}}" ng-if="vm.showSearch && vm.services.length > 0" ng-click="vm.showSearch = !vm.showSearch;">
+ <md-icon class="md-icon iconMargin iconAlignment defaultColor" aria-label="{{'common.actions.search' | translate}}" ng-if="vm.showSearch && vm.services.length > 0"
+ ng-click="vm.showSearch = !vm.showSearch;">
<md-tooltip md-direction="top">{{'common.actions.search' | translate}}</md-tooltip>
<i class="fa fa-search" aria-hidden="true"></i>
</md-icon>
@@ -52,21 +56,24 @@
<span ng-if="vm.services.length > 0" class="iconMargin btn-toolbar">
<div class="btn-group-xs" role="group" aria-label="Basic example">
- <button class="btn btnDefault gridViewType" aria-label="{{'module.marketplace.main.listView.label' | translate}}" ng-click="vm.changeView('list')" ng-disabled="!vm.hasGridView">
- <md-icon class="md-icon ">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.label' | translate}}</md-tooltip>
- <i class="fa fa-list viewIconPosition" aria-hidden="true"></i>
- </md-icon>
- </button>
- <button class="btn btnDefault gridViewType " aria-label="{{'module.marketplace.main.gridView.label' | translate}}" ng-click="vm.changeView('grid')" ng-disabled="vm.hasGridView">
- <md-icon class="md-icon">
- <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.label' | translate}}</md-tooltip>
- <i class="fa fa-th viewIconPosition" aria-hidden="true"></i>
- </md-icon>
- </button>
+ <button class="btn btnDefault gridViewType" aria-label="{{'module.marketplace.main.listView.label' | translate}}" ng-click="vm.changeView('list')"
+ ng-disabled="!vm.hasGridView">
+ <md-icon class="md-icon ">
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.label' | translate}}</md-tooltip>
+ <i class="fa fa-list viewIconPosition" aria-hidden="true"></i>
+ </md-icon>
+ </button>
+ <button class="btn btnDefault gridViewType " aria-label="{{'module.marketplace.main.gridView.label' | translate}}" ng-click="vm.changeView('grid')"
+ ng-disabled="vm.hasGridView">
+ <md-icon class="md-icon">
+ <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.label' | translate}}</md-tooltip>
+ <i class="fa fa-th viewIconPosition" aria-hidden="true"></i>
+ </md-icon>
+ </button>
</div>
</span>
- <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.refresh.label' | translate}}" ng-click="vm.getFeatureList()">
+ <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.refresh.label' | translate}}"
+ ng-click="vm.getFeatureList()">
<md-tooltip md-direction="top">{{'module.marketplace.main.refresh.label' | translate}}</md-tooltip>
<i class="fa fa-refresh" ng-class="vm.SpinClass" aria-hidden="true"></i>
</md-icon>
@@ -75,13 +82,17 @@
</md-toolbar>
</md-card>
<div class="md-padding" layout-xs="column" layout="row" layout-wrap ng-if="vm.hasGridView && vm.services.length > 0" id="gridView">
- <md-card class="gridViewMargin md-padding tiles flex-md-100 flex-gt-md-30 flex-lt-md-100" ng-repeat="service in vm.services | filter: vm.filter.search| orderBy:sortBy" layout-wrap>
+ <md-card class="gridViewMargin md-padding tiles flex-md-100 flex-gt-md-30 flex-lt-md-100" ng-repeat="service in vm.services | filter: vm.filter.search| orderBy:sortBy"
+ layout-wrap>
<md-card-header class="nopadding">
<md-card-header-text>
<md-toolbar class="md-menu-toolbar gridToolbarHeight">
<div class="md-toolbar-tools nopadding gridTitleHeight">
- <span class="md-title fontSize gridServiceTitle"><md-tooltip md-direction="top">{{'common.message.viewDetails' | translate}} </md-tooltip> <a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a></span>
- <span flex></span>
+ <span class="md-title fontSize gridServiceTitle">
+ <md-tooltip md-direction="top">{{'common.message.viewDetails' | translate}} </md-tooltip>
+ <a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a>
+ </span>
+ <span flex></span>
</div>
</md-toolbar>
</md-card-header-text>
@@ -93,14 +104,14 @@
<md-toolbar class="md-menu-toolbar">
<div class="md-toolbar-tools nopadding">
<button class="btn btnDefault iconMargin" ng-click="vm.serviceUpload(false, service.csarId)">
- <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
+ <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
<i>
<img src="/onapui/vnfmarket/common/images/reupload.png" class="btnIconSpacing">
</i>
- {{'common.actions.update' | translate}}
+ {{'common.actions.update' | translate}}
</button>
<button class="btn btnDefault iconMargin deletebutton" ng-click="vm.serviceDelete(service)">
- <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
+ <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
<i>
<img src="/onapui/vnfmarket/common/images/delete.png" class="btnIconSpacing">
</i>
@@ -108,11 +119,11 @@
</button>
<span flex></span>
<button class="btn btnPrimary downloadIcon" ng-click="vm.downloadService(service.csarId)" ng-disabled="service.downloadCount == -1">
- <md-tooltip md-direction="top">{{'common.actions.download' | translate}} </md-tooltip>
+ <md-tooltip md-direction="top">{{'common.actions.download' | translate}} </md-tooltip>
<i>
<img src="/onapui/vnfmarket/common/images/download.png" class="btnIconSpacing">
</i>
- {{'common.actions.download' | translate}}
+ {{'common.actions.download' | translate}}
</button>
</div>
</md-toolbar>
@@ -120,9 +131,11 @@
<span class="gridUnderline"></span>
<md-toolbar class="md-menu-toolbar gridBottomeHeight">
<div class="md-toolbar-tools nopadding gridBottomeHeight">
- <span class="md-subhead gridBottomFonts"> {{'module.marketplace.main.gridView.serviceType.label' | translate}} : {{service.type }}</span>
- <span flex></span>
- <span class="md-subhead gridBottomFonts"> {{'module.marketplace.main.gridView.downloads.label' | translate}} : <span class="md-title fontSize ">{{service.downloadCount != -1 ?service.downloadCount : 0 }}</span></span>
+ <span class="md-subhead gridBottomFonts"> {{'module.marketplace.main.gridView.serviceType.label' | translate}} : {{service.type }}</span>
+ <span flex></span>
+ <span class="md-subhead gridBottomFonts"> {{'module.marketplace.main.gridView.downloads.label' | translate}} :
+ <span class="md-title fontSize ">{{service.downloadCount != -1 ?service.downloadCount : 0 }}</span>
+ </span>
</div>
</md-toolbar>
</md-card>
@@ -133,92 +146,110 @@
<thead md-head md-order="sortBy">
<tr md-row>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.name' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.name' | translate}}
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.name' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.name'
+ | translate}}
</th>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.provider' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.provider' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.provider' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.provider'
+ | translate}}</th>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.description' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.description' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.description' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.description'
+ | translate}}</th>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.type' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.type' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.type' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.type'
+ | translate}}</th>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.size' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.size' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.size' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.size'
+ | translate}}</th>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.createdAt' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.createdAt' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.createdAt' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.createdAt'
+ | translate}}</th>
<th md-column class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.lastModified' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.lastModified' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.lastModified' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.lastModified'
+ | translate}}</th>
<th md-column md-numeric class="text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.donwloads' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.donwloads' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.donwloads' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.donwloads'
+ | translate}}</th>
<th md-column md-numeric class=" actionWidth text-center fontSize">
- <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.actions' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.actions' | translate}}</th>
+ <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.actions' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.actions'
+ | translate}}</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="dessert" md-select-id="name" md-auto-select ng-repeat="service in vm.services | filter: vm.filter.search | orderBy:sortBy | limitTo: vm.paginationQuery.limit: (vm.paginationQuery.page - 1) * vm.paginationQuery.limit">
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.name}}</md-tooltip>
- <a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a></td>
+ <md-tooltip md-direction="top">{{service.name}}</md-tooltip>
+ <a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a>
+ </td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.provider}}</md-tooltip>
- {{service.provider}}</td>
+ <md-tooltip md-direction="top">{{service.provider}}</md-tooltip>
+ {{service.provider}}</td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.shortDesc}}</md-tooltip>
- {{service.shortDesc | limitTo:50 }}<span ng-if="service.shortDesc.length > 50">...<span></td>
+ <md-tooltip md-direction="top">{{service.shortDesc}}</md-tooltip>
+ {{service.shortDesc | limitTo:50 }}
+ <span ng-if="service.shortDesc.length > 50">...
+ <span>
+ </td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.type}}</md-tooltip>
- {{service.type}}</td>
+ <md-tooltip md-direction="top">{{service.type}}</md-tooltip>
+ {{service.type}}</td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.size}}</md-tooltip>
- {{service.size}}</td>
+ <md-tooltip md-direction="top">{{service.size}}</md-tooltip>
+ {{service.size}}</td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.createTime | date:'yyyy-MM-dd h:mm a'}}</md-tooltip>
- {{service.createTime | date:'yyyy-MM-dd h:mm a'}}</td>
+ <md-tooltip md-direction="top">{{service.createTime | date:'yyyy-MM-dd h:mm a'}}</md-tooltip>
+ {{service.createTime | date:'yyyy-MM-dd h:mm a'}}</td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top">{{service.modifyTime | date:'yyyy-MM-dd h:mm a'}}</md-tooltip>
- {{service.modifyTime | date:'yyyy-MM-dd h:mm a'}}</td>
+ <md-tooltip md-direction="top">{{service.modifyTime | date:'yyyy-MM-dd h:mm a'}}</md-tooltip>
+ {{service.modifyTime | date:'yyyy-MM-dd h:mm a'}}</td>
<td md-cell class="text-center">
- <md-tooltip md-direction="top" >{{service.downloadCount ?service.downloadCount : 0 }}</md-tooltip>
- {{service.downloadCount != -1?service.downloadCount : 0 }}</td>
+ <md-tooltip md-direction="top">{{service.downloadCount ?service.downloadCount : 0 }}</md-tooltip>
+ {{service.downloadCount != -1?service.downloadCount : 0 }}</td>
<td md-cell>
<span class="pull-right">
<md-icon class="md-icon" aria-label="{{'common.actions.update' | translate}}" ng-click="vm.serviceUpload(false, service.csarId)">
- <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
- <i>
- <img src="/onapui/vnfmarket/common/images/reupload.png" class="btnIconSpacing">
- </i>
+ <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
+ <i>
+ <img src="/onapui/vnfmarket/common/images/reupload.png" class="btnIconSpacing">
+ </i>
<!-- <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.fileUpload' | translate}}</i> -->
</md-icon>
- <md-icon class="md-icon" aria-label="{{'common.actions.download' | translate}}" ng-click="vm.downloadService(service.csarId)" ng-if="service.downloadCount != -1">
- <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip>
+ <md-icon class="md-icon" aria-label="{{'common.actions.download' | translate}}" ng-click="vm.downloadService(service.csarId)"
+ ng-if="service.downloadCount != -1">
+ <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip>
<!-- <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.getApp' | translate}}</i> -->
<i>
- <img src="/onapui/vnfmarket/common/images/download.png" class="btnIconSpacing primaryColor">
- </i>
+ <img src="/onapui/vnfmarket/common/images/download.png" class="btnIconSpacing primaryColor">
+ </i>
</md-icon>
- <md-icon class="md-icon" aria-label="{{'common.actions.delete' | translate}}" ng-click="vm.serviceDelete(service)">
- <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
- <i>
- <img src="/onapui/vnfmarket/common/images/delete.png" class="btnIconSpacing">
- </i>
+ <md-icon class="md-icon" aria-label="{{'common.actions.delete' | translate}}" ng-click="vm.serviceDelete(service)">
+ <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
+ <i>
+ <img src="/onapui/vnfmarket/common/images/delete.png" class="btnIconSpacing">
+ </i>
<!-- <i class="fa fa-trash-o icon-red fa-sm" aria-hidden="true"></i> -->
</md-icon>
- <md-icon class="md-icon" aria-label="Delete service" >
+ <md-icon class="md-icon" aria-label="Delete service">
</span>
</td>
</tr>
</tbody>
</table>
</md-table-container>
- <md-table-pagination class="pagination-class" md-limit="vm.paginationQuery.limit" md-limit-options="vm.pagination" md-page="vm.paginationQuery.page" md-total="{{vm.services.length}}" md-page-select="vm.paginationOptions.pageSelect" md-boundary-links="vm.paginationOptions.boundaryLink" md-label="{ page : 'Page', RowPerPage:'row per page', of:'of'}"></md-table-pagination>
+ <md-table-pagination class="pagination-class" md-limit="vm.paginationQuery.limit" md-limit-options="vm.pagination" md-page="vm.paginationQuery.page"
+ md-total="{{vm.services.length}}" md-page-select="vm.paginationOptions.pageSelect" md-boundary-links="vm.paginationOptions.boundaryLink"
+ md-label="{ page : 'Page', RowPerPage:'row per page', of:'of'}"></md-table-pagination>
</md-card>
<div ng-if="vm.services.length == 0">
- <div class="content emptyPage">
- <div class="imageContainer">
- <img src="/onapui/vnfmarket/common/images/empty.png" class="btnIconSpacing">
+ <div class="content emptyPage">
+ <div class="imageContainer">
+ <img src="/onapui/vnfmarket/common/images/empty.png" class="btnIconSpacing">
+ </div>
+ <h3>{{'module.marketplace.main.emptyList.label' | translate}}
+ <a ng-click="vm.serviceUpload(true)">{{'module.marketplace.main.emptyList.anchor' | translate}}</a> {{'module.marketplace.main.emptyList.labelContinued'
+ | translate}}</h3>
</div>
- <h3>{{'module.marketplace.main.emptyList.label' | translate}} <a ng-click="vm.serviceUpload(true)">{{'module.marketplace.main.emptyList.anchor' | translate}}</a> {{'module.marketplace.main.emptyList.labelContinued' | translate}}</h3>
</div>
</div>
-</div>
</div> \ No newline at end of file