Code for the VNF Market place

Issue-Id : CLIENT-4

Change-Id: I138f9ee72853ab12e0dd5197cc72db169b6f65ef
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>

1 files changed, 228 insertions, 0 deletions

diff --git a/vnfmarket/app/modules/home/marketplace.html b/vnfmarket/app/modules/home/marketplace.html
new file mode 100644
index 00000000..5e2916ac
--- /dev/null
+++ b/vnfmarket/app/modules/home/marketplace.html
@@ -0,0 +1,228 @@
+<!--
+  Copyright 2017 Huawei Technologies Co., Ltd.
+ 
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+      http://www.apache.org/licenses/LICENSE-2.0
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<div class="md-padding" flex layout-sm="column">
+    <md-card>
+        <md-card-content>
+            <p> </p>
+            <h4>{{'module.marketplace.main.description' | translate }}</h4>
+            <ul id="description">
+                <li>{{'module.marketplace.main.pointOne' | translate }}</li>
+                <li>{{'module.marketplace.main.pointTwo' | translate }}</li>
+            </ul>
+        </md-card-content>
+    </md-card>
+    <!-- Start About Page -->
+    <md-card>
+        <md-toolbar id="homeToolbar" class="md-hue-2">
+            <div class="md-toolbar-tools">
+                <md-select ng-model="sortBy" placeholder="{{'module.marketplace.main.sortBy.title'| translate}}" class="md-no-underline noMargin iconMargin fontSize" id="sortByLabel">
+                    <md-option class="fontSize" value="">{{'module.marketplace.main.sortBy.title' | translate}}</md-option>
+                    <md-option class="fontSize" value="{{'module.marketplace.main.sortBy.options.name.value' | translate}}">{{'module.marketplace.main.sortBy.options.name.key' | translate}}</md-option>
+                    <md-option class="fontSize" value="{{'module.marketplace.main.sortBy.options.dateModified.value' | translate}}">{{'module.marketplace.main.sortBy.options.dateModified.key' | translate}}</md-option>
+                    <md-option class="fontSize" value="{{'module.marketplace.main.sortBy.options.downloads.value' | translate}}">{{'module.marketplace.main.sortBy.options.downloads.key' | translate}}</md-option>
+                </md-select>
+
+                <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.search.label' | translate}}" ng-if="!vm.showSearch">
+                    <i class="fa fa-search" aria-hidden="true"></i>
+                </md-icon>
+                <form flex name="vm.filter.name">
+                    <md-input-container md-no-float class="md-block" id="searchFieldContainer" ng-if="!vm.showSearch">
+                        <input class="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">
+                    <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 iconMargin iconAlignment defaultColor" aria-label="{{'common.actions.search' | translate}}" ng-if="vm.showSearch" 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>
+
+                <button id="serviceUpload" type="button" class="btn btnDefault iconMargin" ng-click="vm.serviceUpload()">{{'module.marketplace.main.upload.label' | translate}}</button>
+
+                <span ng-if="vm.services.length > 0" class="iconMargin">
+                    <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.gridView.label' | translate}}" ng-if="!vm.hasGridView" ng-click="vm.changeView('grid')">
+                        <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.label' | translate}}</md-tooltip>
+                        <i class="fa fa-th" aria-hidden="true"></i>
+                    </md-icon>
+                    <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.listView.label' | translate}}" ng-if="vm.hasGridView" ng-click="vm.changeView('list')">
+                        <md-tooltip md-direction="top">{{'module.marketplace.main.listView.label' | translate}}</md-tooltip>
+                        <i class="fa fa-list" aria-hidden="true"></i>
+                    </md-icon>
+                </span>
+                <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>
+
+            </div>
+        </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" flex-xs="50" flex-gt-xs="30" ng-repeat="service in vm.services | filter: vm.filter.search| orderBy:sortBy" layout-wrap>
+            <md-card-header>
+                <md-card-header-text>
+                    <span class="md-headline"><a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a></span>
+                </md-card-header-text>
+                <span class="mdl-layout-spacer"></span>
+                <span id="service-type-name" class="mdl-chip mdl-chip--contact service-detail-tags" data-toggle="tooltip">
+
+                <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.serviceType.label' | translate}}</md-tooltip>
+                  <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white"><i class="material-icons service-details-icon">{{'module.marketplace.main.gridView.serviceType.value' | translate}}</i></span>
+                <span class="mdl-chip__text">{{service.type}}</span>
+                </span>
+                <span id="service-downloads-count" class="mdl-chip mdl-chip--contact service-detail-tags" data-toggle="tooltip">
+                <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.downloads.label' | translate}}</md-tooltip>
+                  <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white"><i class="material-icons service-details-icon">{{'module.marketplace.main.gridView.downloads.value' | translate}}</i></span>
+                <span class="mdl-chip__text">{{service.downloads ?service.downloads : 0 }}</span>
+                </span>
+            </md-card-header>
+            <div class="mdl-card__supporting-text service-desc">
+                {{service.shortDesc}}
+            </div>
+            <md-card-actions layout="row" layout-align="start center" class="mdl-card__actions service-actions">
+                <div class="col-sm-12  no-padding">
+                    <div class="col-md-8 no-padding">
+                        <div class="pull-left">
+                            <div class="btn-group btn-group-xs" role="group">
+                                <button class="show-deploy btn btn-default btnDefault" data-toggle="modal" data-target="#service-update-history-modal" data-tooltip="tooltip">
+
+                            <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.upload.tooltip' | translate}}</md-tooltip>
+                            <i class="fa fa-history" aria-hidden="true"></i>
+                            {{'module.marketplace.main.gridView.upload.buttonLabel' | translate}}
+                          </button>
+                                <button id="delete-service-button" class="show-deploy btn btn-default btnDefault" data-toggle="modal" data-target="#service-download-history-modal" data-tooltip="tooltip">
+                            <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.downloads.tooltip' | translate}}</md-tooltip>
+                            <i class="fa fa-history fa-flip-horizontal"></i>
+                            {{'module.marketplace.main.gridView.downloads.buttonLabel' | translate}}
+                          </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4 no-padding">
+                        <div class="pull-right">
+                            <div class="btn-group btn-group-xs" role="group">
+                                <button class="show-deploy btn btn-default btnDefault actionBtnHeight">
+                                <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
+                                <i class="material-icons materialIconAdjustment">{{'common.actions.fileUpload' | translate}}</i>
+                          </button>
+                                <button class="show-deploy btn btn-default btnDefault actionBtnHeight" ng-click="vm.downloadService(service.csarId)">
+                                 <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip>
+                                 <i class="material-icons materialIconAdjustment">{{'common.actions.getApp' | translate}}</i>
+                                </button>
+                                <button id="delete-service-button" class="show-deploy btn btn-default btnDefault" ng-click="vm.serviceDelete(service)">
+                                <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip>
+                            <i class="fa fa-times icon-red fa-lg"></i>
+                          </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </md-card-actions>
+        </md-card>
+    </div>
+    <md-card flex="100" ng-if="!vm.hasGridView  && vm.services.length > 0" id="listView">
+        <md-table-container>
+            <table md-table>
+                <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}} 
+                        </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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <th md-column md-numeric class="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>
+                    </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>
+                        <td md-cell class="text-center">
+                        <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>
+                        <td md-cell class="text-center">
+                        <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>
+                        <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>
+                        <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>
+                        <td md-cell class="text-center">
+                        <md-tooltip md-direction="top">{{service.downloads ?service.downloads : 0 }}</md-tooltip>
+                        {{service.downloads ?service.downloads : 0 }}</td>
+                        <td md-cell>
+                            <span class="pull-right">
+                                <md-icon class="md-icon" aria-label="{{'common.actions.update' | translate}}">
+                                <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip>
+                                    <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)">
+                                <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip>
+                                    <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.getApp' | translate}}</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 class="fa fa-times icon-red fa-sm" aria-hidden="true"></i>
+                                </md-icon>
+                                <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-card>
+
+    <md-card ng-if=" vm.services.length == 0">
+        <div flex layout="row">
+            <div flex="25" layout="column">
+            </div>
+            <div flex="50" layout="column" id="emptyList">
+                <h4 class="text-center">{{'module.marketplace.main.emptyList.label' | translate}} <a ng-click="vm.serviceUpload()">{{'module.marketplace.main.emptyList.anchor' | translate}}</a> {{'module.marketplace.main.emptyList.labelContinued' | translate}} </h4>
+            </div>
+            <div flex="25" layout="column">
+            </div>
+        </div>
+    </md-card>
+</div>
+</div>
\ No newline at end of file