CRUD Simples - Listagem

A tela de listagem, basicamente possui um cabeçalho, onde são exibidos o nome da entidade, a quantidade de registros, possui operações para inclusão de registros, pesquisa simples, pesquisa avançada e mostra os filtros aplicados e outras informações necessárias.

<totvs-page type="list" totvs-custom-element="customPage">
	<totvs-page-navbar>
		<totvs-page-breadcrumb>
			<breadcrumb link="#/">Home</breadcrumb>
			<breadcrumb link="#/">Sample</breadcrumb>
			<breadcrumb>{{'l-message' | i18n}}</breadcrumb>
		</totvs-page-breadcrumb>			
		<totvs-page-header>
			<totvs-page-header-title title="{{'l-message' | i18n}}" 
									 total="{{controller.totalRecords}}">
			</totvs-page-header-title>
			<totvs-page-header-operation>
				<totvs-page-header-operation-action>
					<action link="#/html-sample/message/new" class="glyphicon-plus">{{ 'btn-add' | i18n }}</action>
				</totvs-page-header-operation-action>				
				<totvs-page-header-operation-filter placeholder="{{ 'l-search' | i18n }}"
													ng-submit="controller.loadData()"
													ng-model="controller.quickSearchText"
													advanced-search="controller.openAdvancedSearch">
				</totvs-page-header-operation-filter>
			</totvs-page-header-operation>
			<totvs-page-disclaimers disclaimer-list="controller.disclaimers"
								   ng-click="controller.removeDisclaimer">
			</totvs-page-disclaimers>
		</totvs-page-header>		
	</totvs-page-navbar>	
	<totvs-page-content>		
		<totvs-list-item ng-repeat="message in controller.listResult"
						 totvs-custom-element="customListItem">		
			<totvs-list-item-header>				
				<totvs-list-item-title title="{{message['cod-mensagem']}} - {{message['descricao']}}"
									   link="#/html-sample/message/detail/{{ message['cod-mensagem'] }}">
				</totvs-list-item-title>				
				<totvs-list-item-action limit-primary-action="1">
					<action link="#/html-sample/message/edit/{{message['cod-mensagem']}}" class="glyphicon-pencil">{{ 'btn-edit' | i18n }}</action>
					<action ng-click="controller.delete(message)" class="glyphicon-remove">{{ 'btn-remove' | i18n }}</action>
				</totvs-list-item-action>				
			</totvs-list-item-header>
			<totvs-list-item-content-detail>				
				<totvs-list-item-info title="Texto"
									  value="{{message['texto-mensag']}}">
				</totvs-list-item-info>				
			</totvs-list-item-content-detail>			
		</totvs-list-item>		
		<totvs-list-pagination ng-if="controller.listResult.length < controller.totalRecords && controller.listResult.length"
							   ng-click="controller.loadData(true);">
		</totvs-list-pagination>		
	</totvs-page-content>
</totvs-page>

Linha 1 - O elemento <totvs-page> com o o atributo type="list" que define como alguns componentes da pagina seão apresentados.

Ainda nesta tag o atributo totvs-custom-element="customPage" define que a pagina é customizavel no evento EPC customPage

Linhas 9-10 - O elemento  <totvs-page-header-title> define o titulo da pagina, o atributo no total fazemos o binding com o atributo totalRecords do controller, isso mostra o total de registros retornados na pesquisa.

Linha 14 - A tag <action> define uma operação para a tela, nesse caso é um link para a URL do state de inclusão de registro na tabela.

Linhas 16-20 - a tag <totvs-page-header-operation-filter> é um componente de pequisa com os seguintes parametros:

• placehoder - descrição que será colocada no campo do termo de pesquisa quando vazio.
• ng-submin - metodo do controller que será chamado quando o usuario teclar ENTER ou clicar no botão pesquisar.
• ng-model - atributo do controller que será atualizado com o conteudo do campo
• advanced-search - função do controller que será chamado quando o usuario clicar no botão de pesquisa avançada.

Linhas 23-24 - a tag <totvs-page-disclaimer> é o componente para mostrar na tela os filtros que foram aplicados, os filtros estão no atributo controller.disclaimers, o atributo ng-click define o metodo do controller que deverá ser chamado para remover o disclaimer quando for clicado pelo usuario.

Linha 28 - dentro da tag <totvs-list-item> é definido como cada linha da lista deverá ser mostrada, o ng-repeat="message in controller.listResult" irá repetir a tag para cada item do array listResult, cada tag com um novo $scope contendo o atributo message.

Linha 29 - o atributo totvs-custom-element="customListItem" define que cada item da lista poderá ser customizado pela EPC no evento customListItem.

Linha 31-32 - a tag <totvs-list-item-title> define um titulo para um item da lista, a atributo title define o que sera mostrado e o atributo link indica o endereço do link gerado, nesse caso a URL do state de detalhar.

Linha 34-37 - a tag <totvs-list-item-action> define as ações para cada item da lista, o atributo limit-primary-action="1" define que será uma ação focal e as outras serão no dropdown "Ações" se houver mais de 2 actions.

Linha 35 -  define uma ação para operação de editar, com um link para a URL do state de editar.

Linha 36 - define uma ação para operação de remover, o ng-click define o metodo do controller que será chamado no evento de click deste botão.

Linha 39 - a tag <totvs-list-item-content-detail> define o conteudo que será apresentando quando o usuario expadir os detalhes do item da lista.

Linha 45-46 - a tag <totvs-list-pagination> é o componente de paginação, o ng-if define se o componente estará presente na tela ou não, baseado no length de listResult comparando com o totalRecords, o ng-click define o metodo do controller que será chamado para buscar mais dados da tabela.

O resultado desta tela é o seguinte: