zettapi_client
Version:
Admin panel and client-side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project.
157 lines (142 loc) • 6.83 kB
HTML
<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>
<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>