Biblioteca SKA-List

Instalação

1. Crie um arquivo chamado .npmrc no root de seu projeto.
2. Em Azure Artifacts selecione a biblioteca ska-list
3. Clique em connect to feed
4. Copie as informações de registro e cole em seu arquivo .npmrc

$ npm install ska-list
$ ng add @angular/material

Inicialização

Importe ska-list no módulo de sua aplicação Angular.

Importação padrão do módulo

import { ListModule } from 'ska-list';

@NgModule({
  imports: [
    ListModule
  ]
})

Utilização básica (ska-list)

...
export class AppComponent {
  users: any[] = [
      {
			id: 0
			, user: 'Zé'
			, fullname: 'José Carvalho'
		}
		, {
			id: 1
			, user: 'Ana'
			, fullname: 'Ana Paula Silva'
		}
  ];
}

<ska-list [rows]="users"></ska-list>

Estão disponíveis diversas entradas e saidas de dados para configuração

Entradas de dados (Inputs)

| Input | Descrição | Observação | | --------------- | ---------------------------------------- | ------------------- | | rows | Array de objetos. Representa todos os itens que serão exibidos na lista. | Pode possuir um atributo chamado visible (boolean) para indicar se o checkbox ou toggle está ativado/desativado. Pode possuir um atributo chamado order (numérico) para indicar a ordenação da lista. | | buttonsList | Array de objetos. Representa a lista de botões exibidos para cada item da lista. | Atributos obrigatórios: icon (ícone - deve indicar o nome do arquivo desejado, que deve estar na pasta assets/icons) e color (cor do ícone).| | title | String. Representa o título da lista. Exibido no topo da lista. | - | | caption | String. Representa o nome da propriedade que possuí o título do item da lista. | - | | subCaption | String. Representa o nome da propriedade que possuí o subtítulo do item da lista. | - | | color | String. Nome da propriedade que possuí a cor da linha do item na lista. | - | | language | String. Indica a linguagem para qual deve ser feita a tradução. | Deve ser o mesmo nome do arquivo de tradução. | | isLoading | Boolean. Indica se a lista ainda está sendo carregada. | Quando for true, exibe um spinner loading na tela. | | displayFilter | Boolean. Indica se deve exibir o filtro no topo da lista. |-| | allowOrder | Boolean. Indica se deve habilitar o drag and drop e permitir a ordenação da lista. | - | | automaticOrder | Boolean. Indica se deve ordenar automaticamente. | Se for verdadeiro, tenta ordenar primeiro pelo atributo order. Se não existir, ordena pelo título do item na lista. | | displayToggle | Boolean. Indica se deve exibir botão toggle nas linhas. | - | | displayCheckbox | Boolean. Indica se deve exibir botão checkbox nas linhas. | - | | translateItems | Boolean. Indica se deve traduzir título e subtitulo de itens da lista. | As traduções devem estar dentro da pasta i18n, no assets do seu projeto. | | translateTitle | Boolean. Indica se deve traduzir título da lista. | As traduções devem estar dentro da pasta i18n, no assets do seu projeto. | | doSelection | Objeto. Representa um item que deve iniciar selecionado. | - | | paginatorConfig | Objeto. Recebe as proprieades do paginator. | - |

Propriedades Paginator

| Input | Descrição | Observação | | --------------- | ---------------------------------------- | ------------------- | | showPaginator | Boolean. Indica se deve exibir o paginador. | - | | disabled | Boolean. Indica se deve desabilitar o paginador. | - | | hidePageSize | Boolean. Indica se deve ocultar o a lista de páginas. | - | | pageSizeOptions | Array. Representa o select do número de páginas que serão apresentadas na lista de páginas| Exemplo: [15,30,50,100] | | showFirstLastButtons | Boolean. Indica se deve ocultar os botões de navegação para a primeira e última página. | - |

Saidas de dados (Outputs)

| Output | Descrição | | --------------- | ----------------------------------------------------------- | | ordenedData | Emite ação ao ordenar um item na lista. Retorna a lista de itens, indicando a ordenação pelo atributo order.| | doSelect | Emite ação ao selecionar um item da lista. Retorna o um objeto com o atributo option(objeto selecionado) e index(index na lista). | | doToggle | Emite ação ao clicar no toggle de um item na lista. Retorna o um objeto com o atributo option(objeto selecionado) e index(index na lista). | | doCheckbox | Emite ação ao clicar no checkbox de um item na lista. Retorna o um objeto com o atributo option(objeto selecionado) e index(index na lista). | doAction | Emite ação ao clicar em algum botão de um item (buttonsList). Retorna o um objeto com o atributo option(objeto selecionado), index(index na lista) e buttonSelected(objeto do botão selecionado). |

Estão disponivéis diretivas para acréscimo de elementos em tela

Acrescentando conteúdos (Directive)

<ska-list [rows]="users" (doSelect)="doSelect($event)">
    <ska-list-content>
        <div>Seu conteúdo aqui</div>
    </ska-list-content>
</ska-list>

| Directives | Descrição | | --------------------- | ------------------------------------------------------ | | ska-list-content | Acrescenta conteudos à direita na barra superior. |

Pasta assets

Em seu projeto se faz necessário criar uma pasta chamada assets, dentro de src. Essa pasta será responsável por reunir alguns itens importantes para a biblioteca, como ícones e imagens. Dentro da pasta assets, é importante criar duas pastas. São elas:

• src/assets/icons: deverá reunir todos os ícones utilizados pela biblioteca. Exemplo: ícones dos botões.
• src/assets/i18n: deverá possuir os arquivos de tradução do sistema. Por exemplo: pt-BR.json e en.json. A baixo segue exemplo de estrutura do arquivo de tradução. Para o funcionamento correto do sistema, é necessário manter o título SKA-LIST para as traduções de componentes da biblioteca. O campo da esquerda sempre irá representar o valor na linguagem original (geralmente en), em caps lock. O campo da direita é como o texto será exibido após a tradução.

		"SKA-LIST": {
			"NO ITEMS TO DISPLAY": "Nenhum item para exibir"
			, "SEARCH": "Procurar"
		}

OBS: 'No items to display' e **'Search'**são frases padrões utilizadas pela biblioteca e por isso precisam estar nos arquivos de tradução.