zettapi_client/lib/directives/report/report.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.

<uib-tabset active="activeTab">
  <!-- LOAD/NEW -->
  <uib-tab index="0">
    <uib-tab-heading>
      <i class="fa fa-list"></i> As minhas listagens
    </uib-tab-heading>
    <div class="container-fluid">
      <!--LIST WITH DATA-->
      <ul class="api-list-item api-md list-unstyled">
        <li ng-repeat="savedItem in savedItems">
          <a ng-click="loadReport(savedItem, 4)" class="listlink">{{savedItem.name}}</a>

          <a ng-click="removeReport(savedItem)" class="btn btn-danger btn-xs pull-right"><i class="fa fa-trash" aria-hidden="true"></i> apagar</a>
          <a ng-click="loadReport(savedItem, 1)" class="btn btn-primary btn-xs api-edit pull-right"><i class="fa fa-pencil" aria-hidden="true"></i> editar</a>
        </li>
      </ul>

      <!--LIST WITHOUT DATA-->
      <h6 ng-if="savedItems.length === 0" class="text-info"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> Ainda não guardou nenhuma listagem parametrizada</h6>

      <!--NEW LIST ITEM-->
      <button type="button" ng-click="reset()" class="btn btn-primary btn-md pull-right" style="margin-top:20px;">Criar nova listagem <i class="fa fa-plus"></i></button>
    </div>
  </uib-tab>

  <!-- INCLUDE -->
  <uib-tab index="1">
    <uib-tab-heading>
      <i class="fa fa-plus"></i> Dados a incluir na minha listagem
    </uib-tab-heading>

    <div class="container-fluid">
      <uib-accordion close-others="false">
        <div uib-accordion-group class="panel-default" is-open="tab.isOpen" ng-repeat="tab in fieldTabs">
          <uib-accordion-heading>
            {{tab.name}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': tab.isOpen, 'glyphicon-chevron-right': !tab.isOpen}"></i>
          </uib-accordion-heading>

          <div class="col-md-3 col-sm-4 col-xs-6" ng-repeat="field in fields | filter: {tab: tab.name}">
            <input type="checkbox" checklist-model="item.select" checklist-value="field.id" class="w3-check" ng-class="{'input-lg':useInputLarge}">
            <label class="w3-validate">{{field.caption}}</label>
          </div>
        </div>
      </uib-accordion>
    </div>
  </uib-tab>

  <!-- FILTER -->
  <uib-tab index="2">
    <uib-tab-heading>
      <i class="fa fa-filter"></i> Filtrar
    </uib-tab-heading>

    <div class="container-fluid">
      <a class="pull-right btn btn-md btn-info" ng-click="appendQuery()" style="margin-bottom:15px;">Adicionar Linha <i class="fa fa-plus"></i></a>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Informação</th>
            <th>Operador</th>
            <th>Valor</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="query in item.query track by $index">
            <td><select selector model="query.field" options="fields" label-attr="caption" placeholder="Indique o campo..."></select></td>
            <td>
              <zl-query-builder field="query.field" model="query" key="operator" zl-class="form-control" ng-class="{'input-lg':useInputLarge}"></zl-query-builder>
            </td>
            <td>
              <zl-dynamic-field field="query.field" model="query" key="value" zl-class="form-control" ng-class="{'input-lg':useInputLarge}"></zl-dynamic-field>
            </td>
            <td class="text-right">
              <button type="button" ng-click="removeQuery($index)" class="btn btn-danger" ng-class="{'btn-lg':useInputLarge}"><i class="fa fa-trash"></i></button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </uib-tab>

  <!-- SORT -->
  <uib-tab index="3">
    <uib-tab-heading>
      <i class="fa fa-sort-alpha-asc"></i> Ordenar
    </uib-tab-heading>

    <div class="container-fluid">
      <div class="col-sm-6 form-group">
        <label>Campo</label>
        <select ng-model="item.sort.field" ng-options="field.id as field.caption for field in fields" class="form-control input-lg"></select>
      </div>
      <div class="col-sm-6">
        <br>
        <input type="radio" ng-model="item.sort.type" ng-value="1" class="w3-radio" />
        <label class="w3-validate">Ascendente</label>&nbsp;&nbsp;
        <input type="radio" ng-model="item.sort.type" ng-value="-1" class="w3-radio" />
        <label class="w3-validate">Descendente</label>
      </div>
    </div>
  </uib-tab>

  <!-- VIEW -->
  <uib-tab index="4">
    <uib-tab-heading>
      <i class="fa fa-eye"></i> Visualizar
    </uib-tab-heading>

    <div class="container-fluid">
      <ul class="list-unstyled list-inline">
        <li><a ng-click="getReport(item)" class="btn btn-primary btn-md">Ver no Ecrã <i class="fa fa-desktop" aria-hidden="true"></i></a></li>
        <li><a href="{{getExcelUrl(item)}}" target="_blank" class="btn btn-primary btn-md">Ver em Excel <i class="fa fa-file-excel-o" aria-hidden="true"></i></a></li>
        <!--<li><a href="#" target="_blank" class="btn btn-primary btn-md">Ver em PDF <i class="fa fa-file-pdf-o" aria-hidden="true"></i></a></li>-->
        <li ng-if="!!items">Resultados: {{items.length}}</li>
      </ul>
      <div ng-if="!!items" class="row">
        <!--SEARCH-->
        <div class="col-sm-12" style="margin:20px 0;">
          <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>

        <!--TABLE-->
        <div class="col-sm-12 table-responsive">
          <table ng-table-dynamic="tableParams with cols" class="table table-bordered">
            <tr ng-repeat="row in $data">
              <td ng-repeat="col in $columns">{{row[col.field]}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </uib-tab>

  <!-- SAVE -->
  <uib-tab index="5">
    <uib-tab-heading>
      <i class="fa fa-save"></i> Guardar
    </uib-tab-heading>

    <div class="container-fluid">
      <div class="col-sm-12 form-group">
        <label>Nome</label>
        <div class="input-group" ng-class="{'input-group-lg':useInputLarge}">
          <input type="text" ng-model="item.name" ng-disabled="!!item._id" class="form-control" ng-class="{'input-lg':useInputLarge}">
          <div class="input-group-btn">
            <button type="button" ng-click="saveReport(item)" class="btn btn-primary">Guardar <i class="fa fa-save"></i></button>
          </div>
        </div>
      </div>
    </div>
  </uib-tab>
</uib-tabset>