gistfile1.txt

### KATELLO USAGE ###

%div{ 'ng-controller' => 'SystemsController' }
  %div{'ng-class' => '{"modal-mask": table.newPaneVisible}'}
  %div.form.table-searchbar
    %h1
      = _("Systems")
    %div.fl.search-input-container{ 'alch-search'=>'table' }
  %div.form.table-toolbar
    %div{ 'alch-selected'=>'table' }
  %div.table-mimic.table.table-bordered.table-striped{ 'row-select'=>'true', 'alch-table'=>'table' }
    %div{ 'alch-table-head'=>'table' }
      %div.th-mimic
        = _("Name")
      %div.th-mimic
        = _("Descrption")
    %div{ 'alch-table-body'=>'table', 'items'=>'systems' }
      %div.td-mimic
        {{ item.name }}
      %div.td-mimic
        {{ item.description }}

  %div#nutupane-new-item.nutupane-pane{'ng-show' => 'table.newPaneVisible', 'ng-cloak' => true}
    %a.fr{ 'ng-click' => 'table.setNewItemVisibility(false)' }
      = 'x'
    %div.nutupane-pane-content
  %span.nutupane-details.panel.nutupane-pane#nutupane-details{ 'nutupane-details'=>'table.detailsVisible', 'model'=>'table', 'ng-class' => '{ "nutupane-details-open" : model.detailsVisible }' }


#### DIRECTIVES #####

<div class="thead-mimic">
  <div class="tr-mimic" ng-transclude>
    <div class="row-select th-mimic" ng-show="rowSelect">
      <input class="select-all" 
             type="checkbox" 
             name="selectAll" 
             ng-model="table.allSelected" 
             ng-change="selectAll(table.allSelected)">
    </div>
  </div>
</div>

<div class="tbody-mimic" 
     infinite-scroll="table.nextPage()" 
     infinite-scroll-disable="table.loadingMore" 
     infinite-scroll-distance="table.scrollDistance">
  <div class="tr-mimic" ng-repeat="item in items" ng-transclude>
    <div ng-show="rowSelect" class="row-select td-mimic">
      <input ng-model="item.selected" 
             type="checkbox" 
             name="{{ item.id }}" 
             value="{{ item.id }}" 
             ng-change="itemSelected(item.selected)">
    </div>
  </div>
</div>

angular.module('alchemy').directive('alchTableHead', [function () {
    return {
        restrict: 'A',
        replace: true,
        require: '^alchTable',
        transclude: true,
        scope: {
            'table': '=alchTableHead',
        },
        templateUrl: 'component/templates/table-head.html',

        link: function(scope, element, attrs, alchTableController){
            scope.rowSelect = alchTableController.hasRowSelect();

            scope.selectAll = function(selected) {
                alchTableController.selectAll(selected);
            }
        }
    };
}]);

/**
 * @ngdoc directive
 * @name alchemy.directive:alchTableBody
 * @restrict AC
 *
 * @description
 *
 * @example
 */
angular.module('alchemy').directive('alchTableBody', [function () {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        require: '^alchTable',
        scope: {
            'items': '=items',
        },
        templateUrl: 'component/templates/table-body.html',

        link: function(scope, element, attrs, alchTableController){
            scope.rowSelect = alchTableController.hasRowSelect();

            scope.itemSelected = function(selected) {
                alchTableController.itemSelected(selected);
            };
        }
    };
}]);

/**
 * @ngdoc directive
 * @name alchemy.directive:alchTable
 * @restrict A
 *
 * @description
 *
 * @example
 */
angular.module('alchemy').directive('alchTable', ['$window', '$location', function ($window, $location) {
    return {
        restrict: 'A',
        transclude: true,
        replace: true,
        scope: {
            'table' : '=alchTable',
            'items' : '=items',
            'rowSelect' : '@'
        },