maestrano/mno-enterprise-angular

<h2 class="section-title">{{ 'mno_enterprise.templates.dashboard.marketplace.index.title' | translate }}</h2>

<div class="row dashboard-marketplace">
  <!-- Loader -->
  <mno-loader ng-show="vm.isLoading" class="top-buffer-4"></mno-loader>

  <!-------------------------------------->
  <!--        Marketplace Content       -->
  <!-------------------------------------->
  <div class="top-buffer-4" ng-show="!vm.isLoading">
    <!-- Marketplace nav -->
    <div class="row">
      <div class="marketplace-nav">
        <div ng-if="vm.displayCategories" class="col-sm-4">
          <select class="form-control" ng-model="vm.selectedCategory" ng-options="c for c in vm.categories" ng-change="vm.searchTerm = ''">
            <option value=''>{{ 'mno_enterprise.templates.dashboard.marketplace.index.select_all' | translate }}</option>
          </select>
        </div>
        <div class="col-sm-4">
          <input type="text" class="form-control" placeholder="{{ 'mno_enterprise.templates.dashboard.marketplace.index.search' | translate }}" ng-model="vm.searchTerm" ng-change="vm.selectedCategory = ''"/>
        </div>
        <div ng-show="vm.isMarketplaceCompare && vm.apps.length > 1" class="col-sm-4 text-center">
          <button ng-click="vm.enableComparison()" ng-hide="vm.showCompare" class="btn btn-primary">
            <span>{{ 'mno_enterprise.templates.dashboard.marketplace.index.compare' | translate }}</span>
          </button>
          <div ng-show="vm.showCompare" class="marketplace-compare-action">
            <div>{{'mno_enterprise.templates.dashboard.marketplace.index.select_apps' | translate }}</div>
            <button class="btn btn-primary" ui-sref="home.marketplace.compare" ng-disabled="!vm.canBeCompared()">
              {{'mno_enterprise.templates.dashboard.marketplace.index.compare_apps' | translate}} ({{vm.nbAppsToCompare}})
            </button>
            <button class="btn btn-primary" ng-click="vm.cancelComparison()">{{ 'mno_enterprise.templates.dashboard.marketplace.index.cancel' | translate }}</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Marketplace list -->
    <div class="row">
      <div class="marketplace-list">

        <!-- App Cards-->
        <div class="col-sm-6 col-md-4" ng-repeat="app in vm.apps | filter:vm.appsFilter | filter:vm.searchTerm">
          <div class="marketplace-app-card-checkbox" ng-show="vm.showCompare">
            <label>
              <input type="checkbox"
                     ng-click="vm.toggleAppToCompare(app)"
                     ng-model="app.toCompare">
            </label>
          </div>
          <a class="marketplace-app-card" ui-sref="home.marketplace.app({appId: app.id})">
            <div class="media">
              <div class="pull-left">
                <img class="media-object" ng-src="{{::app.logo}}" ng-alt="{{::app.name}}">
              </div>
              <div class="media-body">
                <h4 class="media-heading">{{::app.name}}</h4>
                {{::app.tiny_description}}
              </div>
              <div class="arrow">
                <i class="fa fa-caret-right fa-2x"></i>
              </div>
            </div>
          </a>
        </div>
      </div><!-- End: marketplace-list -->
    </div><!-- End: row -->
  </div>
</div>