zettapi_client/directives/list/list.html

Client side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project

<div class="row">
	<!--LIST SELECTOR-->
	<div class="col-sm-3">
		<div class="row">
			<div class="col-sm-12">
				<legend>
					<h6 class="small">1. Escolher explorações</h6>
				</legend>
				<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>
		<div class="row">
			<div class="col-sm-12">
				<legend>
					<h6 class="small">2. Escolher listagem</h6>
				</legend>
				<select ng-model="list" ng-change="reset()" ng-options="list as list.caption for list in lists" class="form-control input-lg">
				</select>
			</div>
		</div>
		<div ng-if="list.parameters.length !== 0" class="row">
			<div class="col-sm-12">
				<legend>
					<h6 class="small">3. Introduzir parametros</h6>
				</legend>
				<div class="form-group" ng-repeat="parameter in list.parameters">
					<label>{{parameter.label}}</label>
					<zl-dynamic-field field="parameter.field" value="list.values"></zl-dynamic-field>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<button type="button" ng-click="get(list)" ng-disabled="!list.name" class="btn btn-lg btn-info btn-block">Ver no Ecrã</button>
			</div>
		</div>
	</div>
	<div class="col-sm-9">
		<!--IF NO DATA-->
		<div ng-if="items.length === 0" class="row">
			<div class="col-sm-12">
				<p>Não existem registos para a listagem efectuada</p>
			</div>
		</div>
		<div ng-if="items.length !== 0" 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>

			<!--EXPORT CSV-->
			<div class="col-sm-12">
				<a href="{{getExcelUrl(list)}}" target="_blank" class="pull-right">
					<i class="fa fa-file-excel-o" aria-hidden="true"></i> Exportar {{items.length}} resultados
				</a>
			</div>

			<!--IF NO LIST-->
			<div ng-if="!list" class="col-sm-12">
				<p>Nenhuma listagem selecionada</p>
			</div>

			<!--TABLE W/O GROUP-->
			<div ng-if="list && !list.group" class="col-sm-12 table-responsive">
				<table ng-table-dynamic="tableParams with list.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>

			<!--TABLE W/ GROUP-->
			<div ng-if="list && list.group" class="col-sm-12 table-responsive">
				<table ng-table-dynamic="tableParams with list.cols" class="table table-condensed table-bordered table-striped">
					<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="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
								<strong>{{ group.value }}</strong>
							</a>
						</td>
					</tr>
					<tr ng-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end>
						<td ng-repeat="col in $columns">{{user[col.field]}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>