@openveo/core/assets/be/views/elements/dataTable.html

OpenVeo core CMS

<div class="datatable" ng-controller="DataTableController as dataTable">
  <div class="control-block">
    <div class="allactions btn-group " ng-class="{'displayAction':dataTable.isRowSelected, 'searchOpen':dataTable.filterBy.length<=2 || dataTable.showFilter}" ng-init="dataTable.rowSelected = false" ng-if="dataTable.showSelectAll && dataTable.rows.length!=0">
      <div class="check-btn btn btn-default btn-sm" uib-popover="{{'CORE.UI.SELECT_ALL' | translate}}" popover-trigger="'mouseenter'" ng-click="dataTable.selectAll=!dataTable.selectAll;dataTable.checkAll();$event.stopPropagation();">
        <input type="checkbox" ng-init='dataTable.selectAll=false' ng-model="dataTable.selectAll" ng-click="dataTable.checkAll();$event.stopPropagation();">
      </div>
      <div class="animate-action" uib-dropdown ng-if="dataTable.isRowSelected">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle ng-disabled="dataTable.disabled">
          Action <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
          <li role="presentation" ng-repeat="action in dataTable.actions" ng-if='dataTable.verifyCondition(action)' >
            <a role="menuitem" href="#" ng-click="dataTable.executeGlobalAction(action);" ng-bind="action.label"></a>
          </li>
          <li role="presentation" ng-if="!dataTable.commonActionExist">
            <a role="menuitem" href="#" ng-bind="'CORE.UI.NO_COMMON_ACTION' | translate"></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="search-form form-group" ng-class="{'open':dataTable.isRowSelected}" ng-init="dataTable.showFilter = dataTable.filterBy.length<=2">
      <div ng-click="dataTable.showFilter = !dataTable.showFilter" class="search-title" ng-class="{'cursor':dataTable.filterBy.length>2}">
        <span class="glyphicon glyphicon-search" ></span>
        <span ng-bind="'CORE.UI.SEARCH_BY' | translate"></span>
      </div>
      <div class="search-fields" ng-show="dataTable.filterBy.length <= 2 || dataTable.showFilter" ng-class="{'multiline-filters': dataTable.filterBy.length > 4}">
        <div class="col-sm-3 field" ng-repeat="filter in dataTable.filterBy track by $index" ng-class="{'secondary-filters': $index > 3}">
          <label class="control-label"> {{filter.label}} :</label>
          <input type="text" ng-if="!filter.type || filter.type=='text'" class="form-control input-sm" ng-model="dataTable.filterBy[$index].value" />
          <div ng-if="filter.type && filter.type=='date'" ng-controller="DatePickerController as dp">
            <div class="input-group">
              <input type="text" class="form-control input-sm" uib-datepicker-popup="shortDate" ng-model="dataTable.filterBy[$index].value" is-open="dp.status.opened" max-date="dp.maxDate" datepicker-options="dp.dateOptions" current-text="{{'CORE.DATEPICKER.TODAY' | translate}}" clear-text="{{'CORE.DATEPICKER.CLEAR' | translate}}" close-text="{{'CORE.DATEPICKER.CLOSE' | translate}}" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-sm btn-default" ng-click="dp.open()"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </div>
          </div>
          <div ng-if="filter.type && filter.type=='select'">
            <select class="form-control input-sm" ng-options="option.value as option.name for option in filter.options" ng-model="dataTable.filterBy[$index].value"></select>
          </div>
          <div ng-if="filter.type && filter.type=='autoComplete'">
            <ov-auto-complete ng-model="dataTable.filterBy[$index].value"
                              ov-get-suggestions="dataTable.filterBy[$index].getSuggestions"
            ></ov-auto-complete>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div tasty-table bind-theme="dataTable.customTheme" bind-reload="dataTable.reloadCallback" bind-resource-callback="dataTable.getResource" bind-init="dataTable.init" bind-filters="dataTable.filterBy">
    <table class="table table-striped table-condensed">
      <thead tasty-thead bind-template-url="dataTable.showSelectAll?'views/elements/head.html':''" bind-not-sort-by="dataTable.notSortBy" ></thead>
      <tbody>
        <tr ng-repeat-start="row in dataTable.rows" ng-class="$index%2?'even':'odd'">
          <td class="checkbox-row" ng-if="dataTable.showSelectAll">
            <div class="table-cell"><input type="checkbox"  ng-model="row.selected" ng-checked="row.selected" ng-click="dataTable.check()"></div>
          </td>
          <td ng-click="dataTable.toggleRowDetails(row)" ng-class="{'first':$index==0, 'table-cell':dataTable.conditionToggleDetail(row)}" ng-repeat="entities in dataTable.header" ng-if="entities.key != 'action'" class='line {{entities.class[0]}}'>
            <div ng-if="$first && dataTable.conditionToggleDetail(row)" class="glyphicon" aria-hidden="true" ng-class="{'glyphicon-chevron-right' : !row.opened, 'glyphicon-chevron-down' : row.opened}"></div>
            <span class="cell-text" ng-if="!entities.type || entities.type == 'text'" title="{{row[entities.key]}}">{{row[entities.key] | truncate}}</span>
            <span ng-if="entities.type && entities.type == 'date'">{{row[entities.key] | date:'shortDate' }}</span>
            <ng-include ng-if="entities.type && entities.type != 'date' && entities.type != 'text' && dataTable.customTheme.cellTheme" src="dataTable.customTheme.cellTheme"></ng-include>
          </td>
          <td ng-if='dataTable.actions'>
            <div class="{{dataTable.header[dataTable.header.length-1].class[0]}}" >
              <div class="btn-group" uib-dropdown >
                <button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle ng-disabled="dataTable.disabled">
                  Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" ng-init='row.actionExist=false;'>
                  <li role="presentation" ng-repeat="action in dataTable.actions" ng-if='!action.condition || action.condition(row)' ng-init='row.actionExist=true;'>
                    <a role="menuitem" href="#" ng-click="dataTable.prepareSingleAction(action,row)" ng-bind="action.label"></a>
                  </li>
                  <li role="presentation" ng-if="!row.actionExist">
                    <a role="menuitem" href="#" ng-bind-html="'CORE.UI.NO_ACTION' | translate"></a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </tr>
        <tr ng-repeat-end ng-if="row.opened" class="open-tab detail open-tab-animate" ng-class="$index%2?'even':'odd'">
          <td colspan='{{dataTable.header.length+dataTable.showSelectAll}}'>
            <div class="col-xs-12 ">
              <ng-include src="'views/elements/dataTableForm.html'"></ng-include>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div tasty-pagination bind-template-url="'views/elements/pagination.html'"></div>
  </div>

  <script type="text/ng-template" id="tableModal.html">
        <div class="modal-header warning">
            <h2 class="modal-title">
              <span class="glyphicon glyphicon-alert"></span>
              <span ng-bind="'CORE.UI.WARNING' | translate"></span>
            </h2>
        </div>
        <div class="modal-body text-center" ng-bind-html="'CORE.UI.WARNING_MODAL_ACTION' | translate">
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()" ng-bind="'CORE.UI.FORM_CANCEL' | translate"></button>
        </div>
    </script>
</div>