diff options
| -rw-r--r-- | vnfmarket/src/main/webapp/vnfmarket/app/modules/home/marketplace.html | 181 |
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 |