zettapi_client/lib/directives/list/list.html

Admin panel and client-side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project.

<div class="row" block-ui="listBlockUI">
  <!-- LEFT PANE: INPUTS -->
  <div class="col-sm-3">
    <!-- DB SELECTOR -->
    <div class="row">
      <div class="col-sm-12 form-group" style="max-height: 200px; overflow-y: auto;">
        <h6>Escolher dados</h6>
        <label class="w3-validate btn-block" ng-repeat="access in dbs">
          <input type="checkbox" checklist-model="selectedDbs" checklist-value="access" class="w3-check"> {{access}}</label>
      </div>
    </div>

    <!-- LIST SELECTOR -->
    <div class="row">
      <div class="col-sm-12 form-group">
        <h6>Escolher listagem</h6>
        <select ng-model="list" ng-change="reset(list)" ng-options="list as list.caption for list in lists" class="form-control" ng-class="{'input-lg':useInputLarge}"></select>
      </div>
    </div>

    <!-- GET LIST BUTTON -->
    <div ng-if="list.name" class="row" hide-element="zlApiList" exclude="false">
      <div class="col-sm-12 form-group text-right">
        <button type="button" ng-click="get(list)" class="btn btn-primary" ng-class="{'btn-lg':useInputLarge}">Ver no Ecrã</button>
      </div>
    </div>

    <!-- PARAMETER SELECTOR -->
    <div ng-if="list.parameters.length !== 0" class="row">
      <div class="col-sm-12 form-group">
        <h6>Introduzir parametros</h6>
        <div class="form-group" ng-repeat="parameter in list.parameters">
          <label>{{parameter.label}}</label>
          <zl-dynamic-field field="parameter.field" model="list.values" key="{{parameter.field.name}}"></zl-dynamic-field>
        </div>
      </div>
    </div>

    <!-- GET LIST BUTTON -->
    <div ng-if="list.name" class="row" hide-element="zlApiList" exclude="true">
      <div class="col-sm-12 form-group text-right">
        <button type="button" ng-click="get(list)" class="btn btn-primary" ng-class="{'btn-lg':useInputLarge}">Ver no Ecrã</button>
      </div>
    </div>
  </div>

  <!-- RIGHT PANE: OUTPUTS -->
  <div class="col-sm-9">
    <!--NO DATA-->
    <div ng-show="items.length === 0" class="row">
      <div class="col-sm-12">
        <p class="text-info"><strong><i class="fa fa-info-circle" aria-hidden="true"></i> Não existem registos para a listagem efectuada</strong></p>
      </div>
    </div>

    <!--DATA-->
    <div ng-if="items.length !== 0" class="row">
      <!--SEARCH-->
      <div class="col-sm-12 form-group">
        <div class="input-group" ng-class="{'input-group-lg':useInputLarge}">
          <span class="input-group-addon">{{search.inverted ? 'Excluindo' : 'Incluindo'}} <input type="checkbox" ng-model="search.inverted" /></span>
          <input type="text" class="form-control" placeholder="Criterio de Pesquisa" ng-model="search.text" />
          <span class="input-group-btn"><button class="btn btn-primary" type="button" ng-click="applySearch(search)" ng-disabled="!search.text"><i class="fa fa-search"></i></button></span>
        </div>
      </div>

      <!--EXPORT EXCEL-->
      <div class="col-sm-12">
        <a href="{{getExcelUrl(list)}}" target="_blank" class="pull-right btn btn-info" ng-class="{'btn-lg':useInputLarge}" style="margin-bottom:15px;">
          Exportar {{items.length}} resultados <i class="fa fa-file-excel-o" aria-hidden="true"></i>
        </a>
      </div>

      <!--NO LIST-->
      <div ng-if="!list" class="col-sm-12">
        <p class="text-info"><strong><i class="fa fa-info-circle" aria-hidden="true"></i> Nenhuma listagem selecionada</strong></p>
      </div>

      <!--TABLE-->
      <div class="col-sm-12">
        <div ng-if="list && !list.group" class="table-responsive">
          <table ng-table-dynamic="tableParams with list.cols" class="table table-bordered">
            <tr ng-repeat="row in $data" ng-class="{'text-success': row.color === 'success', 'text-danger': row.color === 'danger'}">
              <td ng-repeat="col in $columns" ng-bind-html="col.getValue(this, row)"></td>
            </tr>
          </table>
        </div>
      </div>

      <!--GROUP TABLE-->
      <div class="col-sm-12">
        <div ng-if="list && list.group" class="table-responsive">
          <table ng-table-dynamic="tableParams with list.cols" class="table table-bordered" show-group="isGroupHeaderRowVisible">
            <tr class="ng-table-group" ng-repeat-start="group in $groups">
              <td colspan="{{list.cols.length}}">
                <a ng-click="group.$hideRows = !group.$hideRows">
                  <span class="fa" ng-class="{ 'fa-angle-right': group.$hideRows, 'fa-angle-down': !group.$hideRows }"></span> <strong>{{ group.value }}</strong>
                </a>
              </td>
            </tr>
            <tr ng-hide="group.$hideRows" ng-repeat="row in group.data" ng-repeat-end>
              <td ng-repeat="col in $columns" ng-bind-html="col.getValue(this, row)"></td>
            </tr>
          </table>
        </div>
      </div>

    </div>
  </div>
</div>