patternfly/angular-patternfly

<span>
  <div class="list-group list-view-pf list-view-pf-view"
       dnd-list="$ctrl.items"
       ng-class="{'list-view-pf-dnd': $ctrl.config.dragEnabled === true}"
       ng-if="$ctrl.config.itemsAvailable !== false">
    <div class='dndPlaceholder'></div>
    <div class="list-group-item {{item.rowClass}}"
         ng-repeat="item in $ctrl.items | startFrom:($ctrl.pageConfig.pageNumber - 1)*$ctrl.pageConfig.pageSize | limitTo:$ctrl.pageConfig.pageSize track by $index"
         dnd-draggable="item"
         dnd-effect-allowed="move"
         dnd-disable-if="$ctrl.config.dragEnabled !== true"
         dnd-dragstart="$ctrl.dragStart(item)"
         dnd-moved="$ctrl.dragMoved()"
         dnd-dragend="$ctrl.dragEnd()"
         ng-class="{'drag-original': $ctrl.isDragOriginal(item), 'pf-selectable': $ctrl.selectItems, 'active': $ctrl.isSelected(item), 'disabled': $ctrl.checkDisabled(item), 'list-view-pf-expand-active': item.isExpanded}">
      <div class="list-group-item-header" ng-class="{'list-group-item-not-selectable' : !$ctrl.config.selectItems && (!$ctrl.config.useExpandingRows || $ctrl.config.compoundExpansionOnly)}">
        <div class="list-view-pf-dnd-drag-items" ng-if="$ctrl.config.dragEnabled === true">
          <div pf-transclude="parent" class="list-view-pf-main-info"></div>
        </div>
        <div ng-class="{'list-view-pf-dnd-original-items': $ctrl.config.dragEnabled === true}">
          <div class="list-view-pf-expand" ng-if="$ctrl.config.useExpandingRows && !$ctrl.config.compoundExpansionOnly">
            <span class="fa fa-angle-right" ng-show="!item.disableRowExpansion" ng-click="$ctrl.toggleItemExpansion(item)" ng-class="{'fa-angle-down': item.isExpanded}"></span>
            <span class="pf-expand-placeholder" ng-show="item.disableRowExpansion"></span>
          </div>
          <div class="list-view-pf-checkbox" ng-if="$ctrl.config.showSelectBox" >
            <input type="checkbox" value="item.selected" ng-model="item.selected" ng-disabled="$ctrl.checkDisabled(item)" ng-change="$ctrl.checkBoxChange(item)"/>
          </div>

          <div class="list-view-pf-actions"
               ng-if="($ctrl.actionButtons && $ctrl.actionButtons.length > 0) || ($ctrl.menuActions && $ctrl.menuActions.length > 0)">
            <button class="btn {{actionButton.class || 'btn-default'}}" ng-repeat="actionButton in $ctrl.actionButtons"
                    title="{{actionButton.title}}"
                    ng-class="{'disabled' : $ctrl.checkDisabled(item) || !$ctrl.enableButtonForItem(actionButton, item)}"
                    ng-click="$ctrl.handleButtonAction(actionButton, item)">
              <div ng-if="actionButton.include" class="actionButton.includeClass" ng-include src="actionButton.include"></div>
              <span ng-if="!actionButton.include">{{actionButton.name}}</span>
            </button>
            <div uib-dropdown class="{{$ctrl.dropdownClass}} pull-right dropdown-kebab-pf {{$ctrl.getMenuClassForItem(item)}} {{$ctrl.hideMenuForItem(item) ? 'invisible' : ''}}"
                 id="kebab_{{$index}}"
                 ng-if="$ctrl.menuActions && $ctrl.menuActions.length > 0">
              <button uib-dropdown-toggle class="btn btn-link" type="button"
                      id="dropdownKebabRight_{{$index}}"
                      ng-class="{'disabled': $ctrl.checkDisabled(item)}"
                      ng-click="$ctrl.setupActions(item, $event)">
                <span class="fa fa-ellipsis-v"></span>
              </button>
              <ul uib-dropdown-menu class="dropdown-menu dropdown-menu-right {{$index}}" ng-class="{'invisible': !$ctrl.kebabMenuReady}" aria-labelledby="dropdownKebabRight_{{$index}}" >
                <li ng-repeat="menuAction in $ctrl.menuActions"
                    ng-if="menuAction.isVisible !== false"
                    role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
                    ng-class="{'divider': (menuAction.isSeparator === true), 'disabled': (menuAction.isDisabled === true)}">
                  <a ng-if="menuAction.isSeparator !== true" title="{{menuAction.title}}" ng-click="$ctrl.handleMenuAction(menuAction, item)">
                    {{menuAction.name}}
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div pf-transclude="parent"
               class="list-view-pf-main-info"
               ng-click="$ctrl.itemClick($event, item)"
               ng-dblclick="$ctrl.dblClick($event, item)">
          </div>
        </div>
      </div>
      <div class="list-group-item-container container-fluid" ng-transclude="expandedContent" ng-if="$ctrl.config.useExpandingRows && item.isExpanded"></div>
    </div>
    <pf-pagination ng-if="$ctrl.pageConfig.showPaginationControls && $ctrl.config.itemsAvailable === true"
      page-size="$ctrl.pageConfig.pageSize"
      page-size-increments="$ctrl.pageConfig.pageSizeIncrements"
      page-number="$ctrl.pageConfig.pageNumber"
      num-total-items="$ctrl.pageConfig.numTotalItems">
    </pf-pagination>
  </div>
  <pf-empty-state ng-if="$ctrl.config.itemsAvailable === false" config="$ctrl.emptyStateConfig" action-buttons="$ctrl.emptyStateActionButtons"></pf-empty-state>
</span>