Arquivos de category match

category-match.html

<div class="mui-row">
    <div class="mui-col-md-6">
        <h2 class="labs-h2-title">Match de categorias<span ng-if="self.sellerSellected"
                                                           ng-bind="': ' + self.sellerSellected.name"></span></h2>
    </div>
    <div class="mui-col-md-6">
        <div class="mui-dropdown mui--pull-right">
            <button class="mui-btn mui-btn--flat" data-mui-toggle="dropdown">
                Selecione um Seller para o match
                <span class="mui-caret"></span>
            </button>
            <ul class="mui-dropdown__menu mui-dropdown__menu--right">
                <li><a href ng-click="self.sellerSellected=null">Nenhum</a></li>
                <li ng-repeat="seller in self.sellers"><a href ng-bind="seller.name"
                                                          ng-click="self.selectSeller(seller)"></a></li>
            </ul>
        </div>
    </div>
</div>
<div class="mui-row">
    <div class="mui-col-md-12">
        <table class="mui-table" ng-init="self.init()">
            <thead>
            <tr>
                <th>Categoria</th>
                <th>Sugestão de mapeamento no Marketplace</th>
                <th class="mui--text-right">Ação</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in self.data" ng-init="categIndex=$index"
                ng-class="{'labs-light-green': row.categorySelected.hub, 'labs-light-yellow': !row.marketplace}">
                <td>
                    <span ng-if="row.seller.category.parent">
                        <strong ng-bind="'[' + row.seller.category.parent.id + ']'"></strong>
                        <span ng-bind="row.seller.category.parent.name"></span> &rightarrow;
                    </span>
                    <strong ng-bind="'[' + row.seller.category.id + ']'"></strong>
                    <span ng-bind="row.seller.category.name"></span>
                </td>
                <td>
                    <!-- Sem match -->
                    <span class="mui--text-black-54" ng-if="!row.marketplace">N/A</span>

                    <!-- Category do match -->
                    <div class="mui-dropdown" ng-if="row.marketplace">
                        <span ng-if="row.categorySelected.category.parent">
                            <strong ng-bind="'[' + row.categorySelected.category.parent.id + '] '"></strong>
                            <span ng-bind="row.categorySelected.category.parent.name"></span> &rightarrow;
                        </span>
                        <select ng-model="row.categorySelected"
                                ng-options="option.category.name for option in row.marketplace
                                track by option.category.id">
                            <option value="">Selecione</option>
                        </select>
                    </div>
                </td>
                <td class="mui--text-right">
                    <button ng-disabled="!row.categorySelected || row.categorySelected.hub"
                            ng-click="self.applyMatch(row, row.categorySelected)"
                            class="mui-btn mui-btn--small mui-btn--primary">Aplicar</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

category-match.js

(function () {
  'use strict';

  /**
   * @ngdoc function
   * @name app.controller:CategorymatchCtrl
   * @description
   * # CategorymatchCtrl
   * Controller of the app
   */

  function CategoryMatch(SellerService, LoadingService) {
    var self = this;

    self.sellerList = function () {
      LoadingService.startLoading();
      SellerService.list().then(
        function (data) {
          LoadingService.stopLoading();
          self.sellers = data.results;
        }
      ).catch(
        function (data) {
          LoadingService.stopLoading();
          self.message = 'Ops.: Error';
          console.log(data);
        }
      );
    };

    self.sellerList();

    self.selectSeller = function (obj) {
      self.sellerSelected = obj;
    };

    self.applyMatch = function (row, categorySelected) {
      // Payload to send on click in apply button
      var payload = {
        seller: {id: row.seller.id, category: row.seller.category},
        marketplace: categorySelected
      };
      console.log(payload);
    };

    self.data = [
      {
        seller: {id: 3, category: {id: 123, name: 'test123', parent: {id: 548, name: 't123'}}},
        marketplace: [
          {'category': {id: 876, name: 'test876', parent: {id: 345, name: 'tt345'}}, hub: false},
          {'category': {id: 657, name: 'test657', parent: {id: 324, name: 'tt324'}}, hub: true},
          {'category': {id: 453, name: 'test453', parent: null}, hub: false}
        ]
      },
      {
        seller: {id: 3, category: {id: 456, name: 'test456', parent: {id: 678, name: 't678'}}},
        marketplace: null
      },
      {
        seller: {id: 3, category: {id: 887, name: 'test887', parent: {id: 445, name: 't445'}}},
        marketplace: [
          {'category': {id: 987, name: 'test987', parent: {id: 665, name: 'tt665'}}, hub: true},
          {'category': {id: 980, name: 'test980', parent: {id: 556, name: 'tt556'}}, hub: false}
        ]
      }
    ];
  }

  angular
    .module('app')
    .controller('CategoryMatch', CategoryMatch);

  CategoryMatch.$inject = ['SellerService', 'LoadingService'];

})();