zettapi_client/lib/directives/report/report.html

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">
    <uib-tab index="0" heading="Restaurar">
        <ul>
            <li ng-repeat="savedItem in savedItems">
                <a ng-click="loadReport(savedItem)">{{savedItem.name}} <i class="fa fa-external-link"></i></a>
            </li>
        </ul>
        <button type="button" ng-click="reset()" class="btn btn-primary">Limpar</button>
    </uib-tab>
    <uib-tab index="1" heading="Incluir">
        <div class="col-sm-3" ng-repeat="field in fields">
            <input type="checkbox" checklist-model="item.select" checklist-value="field.id" class="w3-check">
            <label class="w3-validate">{{field.caption}}</label>
        </div>
    </uib-tab>
    <uib-tab index="2" heading="Filtrar">
        <h4><a class="pull-right text-info" ng-click="appendQuery()">Adicionar Linha</a></h4>
        <table class="table table-striped table-condensed">
            <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 input-lg"></zl-query-builder>
                    </td>
                    <td>
                        <zl-dynamic-field field="query.field" model="query" key="value" zl-class="form-control input-lg"></zl-dynamic-field>
                    </td>
                    <td>
                        <button type="button" ng-click="removeQuery($index)" class="btn btn-lg btn-danger"><i class="fa fa-trash"></i></button>
                    </td>
                </tr>
            </tbody>
        </table>
    </uib-tab>
    <uib-tab index="3" heading="Ordenar">
        <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">
            <input type="radio" ng-model="item.sort.type" ng-value="1" class="w3-radio" /> Ascendente<br/>
            <input type="radio" ng-model="item.sort.type" ng-value="-1" class="w3-radio" /> Descendente
        </div>
    </uib-tab>
    <uib-tab index="4" heading="Guardar">
        <div class="col-sm-6 form-group">
            <label>Nome</label>
            <div class="input-group input-group-lg">
                <input type="text" ng-model="item.name" ng-disabled="!!item._id" class="form-control input-lg">
                <div class="input-group-btn">
                    <button type="button" ng-click="saveReport(item)" class="btn btn-primary">Guardar</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6">

        </div>
    </uib-tab>
    <uib-tab index="5" heading="Visualizar">
        <ul>
            <li><a ng-click="getReport(item)">Ver no Ecrã</a></li>
            <li><a href="{{getExcelUrl(item)}}" target="_blank">Ver em Excel</a></li>
            <li><a href="#" target="_blank">Ver em PDF</a></li>
        </ul>
        <div ng-if="!!items" class="row">
            <!--SEARCH-->
            <div class="col-sm-12">
                <div class="input-group">
                    <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-default" 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-condensed table-bordered table-striped">
                    <tr ng-repeat="row in $data">
                        <td ng-repeat="col in $columns">{{row[col.field]}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </uib-tab>
</uib-tabset>