essential_components 0.1.35

  • Readme
  • Changelog
  • Example
  • Installing
  • 59

Essencials Components #

Uma biblioteca para desenvolvedores AngularDart. Em construção

Instalação #

  1. Adicione a dependência em seu gerenciador de pacotes dentro do arquivo pubspec.yaml.
dependencies:
  essential_components: ^0.1.2
  1. Instale usando o comando pub get

  2. Para usar basta importar a implementação dentro do seu componente:

import 'package:essential_components/essential_components.dart';

Componentes presentes #

  • Datatable
  • Select Dialog
  • Notification
  • Toast

Como usar #

É extremamente simples a forma de usar os componentes essenciais.

Datatable #

O datatable é um componente que organiza as os dados que são consumidos em um serviço, onde o mesmo devem possuir um estrutura defina tanto para o request, quanto para o response dos dados.

A principio, existe uma estrutura de dados que é enviada como 'Query Params'. Esses dados são muito relevantes para a funcionalidade de filtros. Logo, o backend da aplicação deverá tratar esses dados caso o desenvolvedor queira realizar pesquisas baseados em filtros. Esses parâmetros são expressados na seguinte estrutura de dados:

int limit;
int offset;
String search;
String orderBy;
String orderDir;

Por padrão, ao contrário do backend da aplicação, o Datatable já possuí esses dados tratados no frontend (Dart), logo os filtros ocorrem automáticamente.

Agora que já estamos ciente do que é preciso para funcionar a base de filtragem, vamos direcionar o foco para a renderização do nosso Datatable.

Definiando o modelo de negócios #

Para que o Datatable possa funcionar, o primeiro passo é implementar o modelo de negócio com a interface IDataTableRender. Por exemplo:

class Categoria implements IDataTableRender {
  int id;
  String nome;

  @override
  DataTableRow getRowDefinition() {
    DataTableRow settings = DataTableRow();
    settings.addSet(DataTableColumn(key: 'id', value: idAsString, title: 'Id'));
    settings.addSet(DataTableColumn(key: 'nome', value: nome, title: 'Nome'));
    return settings;
  }
}

A classe implementada sobrescreve um método que retorna um DataTableRow, chamado getRowDefinition(). Este método é respectivo a configuração de cabeçalho do Datatable. Onde é instanciado uma linha, e as colunas com o DataTableColumn. O DataTableColumn recebe alguns parâmetros pertinentes a sua configuração:

    class DataTableColumn {
        dynamic key;
        dynamic value;
        DataTableColumnType type;
        String title;
        int limit;
        String format;
        bool primaryDisplayValue;
    }

Vamos seguir o exemplo da nossa classe de categoria:

class Categoria implements IDataTableRender {
  int id;
  String nome;
}
```

```dart
dynamic key; //essa seria a chave. Ex.: 'nome'
dynamic value; //este seria o valor do campo. Ex: nome
DataTableColumnType type; // DataTableColumnType.text. Esses são os tipos presentes no Enum. Eles são: img, text, date, dateTime
String title; // 'Id'
int limit; //Limitar a quanidade de caracteres
String format; // Para alguns tipos existem uma formatação específica.
bool primaryDisplayValue; //Caso houver exibir uma unica coluna, qual a coluna vai ser exibida. Muito usada no select dialog.
```

Agora, o processo de renderização esta pré moldado para ser trabalhado dentro do seu componente angular dart.

Para isso, basta instanciar o componente referenciando a view.
```dart
@ViewChild('dataTable')
EssentialDataTableComponent dataTable;
```

Esta tabela emite alguns eventos. Entre os mais importantes, estão:
rowClick: Ao clicar, o objeto é retornado.
dataRequest: Pertinentes aos filtros a serem renderizados

o Inline da view do template, ficaria destacado da seguinte forma:

```html
<es-data-table
    #dataTable
    [data]="categorias"
    (rowClick)="onRowClick($event)"
    (dataRequest)="onRequestData($event)">
</es-data-table>
```

Os métodos onRowClient($event) e onRequestData($event), ambos precisam ser implementados no componente definindo lógicas de negócios.

Por exemplo... com o onRowClick($event), é possível navegar para outra página salvando uma refeerência de um objeto para realizar uma atualização de um objeto de dados.

```dart
    onRowClick(event) {
        this.categoria = event; //rebendo instancia do objeto categoria
        goToDetail();
    }
```

É preciso implementar o OnRequest data simplesmente para colher o filtro da tabela.
```dart
Future<void> onRequestData(DataTableFilter dataTableFilter) async {
    await getAllCampanhas(filters: dataTableFilter);
}
```

0.0.4 #

  • Initial version pre alpha

0.0.5 #

  • Fix analysis problems

0.0.6 #

  • Refactoring components names

0.0.7 #

  • Refactoring API names

0.0.8 #

  • Fix bug on DataTable component

0.1.0 #

  • Fix preventDefault and stopPropagation for form submission on enter key

0.1.1 #

  • implementation of a loading animation in dataTable

0.1.2 #

  • implementation directives utils

0.1.3 #

  • fix CSS dataTable

0.1.4 #

  • fix CSS Select Dialog

0.1.6 #

  • implementation onchange event in Select Dialog

0.1.9 #

  • implementation 2 new components "EssentialAccordionComponent" and fontawesome components

0.1.11 #

  • implementation 1 new type on datatable col type

0.1.12 #

  • implementation 1 new components "EssentialModalComponent"

0.1.13 #

  • implementation 1 new components "EssentialDropdownDialogComponent" and fix modal issues

0.1.14 #

  • implementation of RestClient a API for consumer web services

0.1.17 #

  • implementation 1 new components SimpleDialogComponent and fix issues

0.1.18 #

  • implementation 1 new components SimpleLoadingComponent and fix issues

0.1.19 #

  • fix issue on RestClientGeneric, not present totalRecords on result list of getAll

0.1.20 #

  • fix issue on RestClientGeneric, not present totalRecords on result list of getAll

0.1.22 #

  • fix bugs on simple select

0.1.23 #

  • fix bugs

0.1.24 #

  • Timeline Component

0.1.25 #

  • Timeline Component - Bug em renderização corrigida.
  • InnerHTML Componente com DOMSanitizer desbloqueado.

0.1.25 #

  • bug na exibição do timeline

0.1.26 #

  • fix bugs

0.1.31 #

  • implementation of Excel export API

0.1.32 #

  • introduction SimpleXLSX API for Excel export on DataTable

0.1.34 #

  • fix bugs in datePicker and simple select components

0.1.35 #

  • fix bugs on change event of simple select component

example/README.md

example #

A web app that uses AngularDart and AngularDart Components.

Created from templates made available by Stagehand under a BSD-style license.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  essential_components: ^0.1.35

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:essential_components/essential_components.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
57
Health:
Code health derived from static analysis. [more]
59
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
62
Overall:
Weighted score of the above. [more]
59
Learn more about scoring.

We analyzed this package on Oct 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21

Platforms

Detected platforms: web

Primary library: package:essential_components/essential_components.dart with components: html, js.

Health suggestions

Fix lib/src/excel/myexcel.dart. (-12.22 points)

Analysis of lib/src/excel/myexcel.dart reported 26 hints, including:

line 1 col 8: Unused import: 'dart:html'.

line 2 col 8: Unused import: 'dart:async'.

line 4 col 8: Unused import: 'dart:math'.

line 7 col 8: Unused import: 'package:archive/archive.dart'.

line 294 col 28: 'onError' is deprecated and shouldn't be used.

Fix lib/src/feedparser/models/feed_item.dart. (-5.36 points)

Analysis of lib/src/feedparser/models/feed_item.dart reported 11 hints, including:

line 37 col 17: Avoid empty catch blocks.

line 42 col 17: Avoid empty catch blocks.

line 47 col 17: Avoid empty catch blocks.

line 52 col 17: Avoid empty catch blocks.

line 57 col 17: Avoid empty catch blocks.

Fix lib/src/excel/simple_xlsx.dart. (-3.45 points)

Analysis of lib/src/excel/simple_xlsx.dart reported 7 hints, including:

line 1 col 8: Unused import: 'dart:convert'.

line 8 col 8: Unused import: './models/doc_props/app.dart'.

line 9 col 8: Unused import: './models/doc_props/core.dart'.

line 10 col 8: Unused import: './models/rels/relationship.dart'.

line 12 col 8: Unused import: './models/xl/theme/theme.dart'.

Fix additional 59 files with analysis or formatting issues. (-30.85 points)

Additional issues in the following files:

  • lib/src/simple_select/simple_select.dart (7 hints)
  • lib/src/feedparser/models/feed.dart (5 hints)
  • lib/src/datepicker/month_picker.dart (4 hints)
  • lib/src/datepicker/year_picker.dart (4 hints)
  • lib/src/directives/textmask_directive.dart (4 hints)
  • lib/src/dropdown/menu.dart (4 hints)
  • lib/src/dropdown/toggle.dart (4 hints)
  • lib/src/rest/rest_client_generic.dart (4 hints)
  • lib/src/data_table/data_table_future.dart (3 hints)
  • lib/src/datepicker/day_picker.dart (3 hints)
  • lib/src/directives/money_mask_directive.dart (2 hints)
  • lib/src/dropdown/dropdown.dart (2 hints)
  • lib/src/excel/models/content_types.dart (2 hints)
  • lib/src/feedparser/models/feed_image.dart (2 hints)
  • lib/src/rest/uri_mu_proto.dart (2 hints)
  • lib/src/data_table/data_table.dart (1 hint)
  • lib/src/datepicker/date_picker.dart (1 hint)
  • lib/src/datepicker/date_picker_popup.dart (1 hint)
  • lib/src/directives/maxlength_directive.dart (1 hint)
  • lib/src/dropdown_dialog/dropdown_dialog.dart (1 hint)
  • lib/src/dynamic_tabs/dynamic_tabs.dart (1 hint)
  • lib/src/excel/models/xl/style_sheet.dart (1 hint)
  • lib/src/excel/models/xl/theme/theme.dart (1 hint)
  • lib/src/fontawesome/stack.dart (1 hint)
  • lib/src/timeline/timeline_component.dart (1 hint)
  • lib/essential_components.dart (Run dartfmt to format lib/essential_components.dart.)
  • lib/src/accordion/accordion.dart (Run dartfmt to format lib/src/accordion/accordion.dart.)
  • lib/src/button/toggle.dart (Run dartfmt to format lib/src/button/toggle.dart.)
  • lib/src/core/helper.dart (Run dartfmt to format lib/src/core/helper.dart.)
  • lib/src/data_table/data_table_utils.dart (Run dartfmt to format lib/src/data_table/data_table_utils.dart.)
  • lib/src/data_table/datatable_render_interface.dart (Run dartfmt to format lib/src/data_table/datatable_render_interface.dart.)
  • lib/src/datepicker/index.dart (Run dartfmt to format lib/src/datepicker/index.dart.)
  • lib/src/directives/ano_validator.dart (Run dartfmt to format lib/src/directives/ano_validator.dart.)
  • lib/src/directives/collapse.dart (Run dartfmt to format lib/src/directives/collapse.dart.)
  • lib/src/directives/datetime_value_accessor.dart (Run dartfmt to format lib/src/directives/datetime_value_accessor.dart.)
  • lib/src/directives/decimal_value_accessor.dart (Run dartfmt to format lib/src/directives/decimal_value_accessor.dart.)
  • lib/src/directives/essential_inner_html_directive.dart (Run dartfmt to format lib/src/directives/essential_inner_html_directive.dart.)
  • lib/src/dropdown/index.dart (Run dartfmt to format lib/src/dropdown/index.dart.)
  • lib/src/excel/helpers.dart (Run dartfmt to format lib/src/excel/helpers.dart.)
  • lib/src/excel/models/doc_props/app.dart (Run dartfmt to format lib/src/excel/models/doc_props/app.dart.)
  • lib/src/excel/models/doc_props/core.dart (Run dartfmt to format lib/src/excel/models/doc_props/core.dart.)
  • lib/src/excel/models/interface_xml_serializable.dart (Run dartfmt to format lib/src/excel/models/interface_xml_serializable.dart.)
  • lib/src/excel/models/rels/relationship.dart (Run dartfmt to format lib/src/excel/models/rels/relationship.dart.)
  • lib/src/excel/models/rels/relationships.dart (Run dartfmt to format lib/src/excel/models/rels/relationships.dart.)
  • lib/src/excel/models/xl/shared_string.dart (Run dartfmt to format lib/src/excel/models/xl/shared_string.dart.)
  • lib/src/excel/models/xl/workbook.dart (Run dartfmt to format lib/src/excel/models/xl/workbook.dart.)
  • lib/src/excel/models/xl/worksheets/worksheet.dart (Run dartfmt to format lib/src/excel/models/xl/worksheets/worksheet.dart.)
  • lib/src/fontawesome/fontawesome.dart (Run dartfmt to format lib/src/fontawesome/fontawesome.dart.)
  • lib/src/fontawesome/list.dart (Run dartfmt to format lib/src/fontawesome/list.dart.)
  • lib/src/notification/notification.dart (Run dartfmt to format lib/src/notification/notification.dart.)
  • lib/src/notification/notification_services.dart (Run dartfmt to format lib/src/notification/notification_services.dart.)
  • lib/src/rest/rest_client.dart (Run dartfmt to format lib/src/rest/rest_client.dart.)
  • lib/src/rest/rest_response.dart (Run dartfmt to format lib/src/rest/rest_response.dart.)
  • lib/src/select_dialog/select_dialog.dart (Run dartfmt to format lib/src/select_dialog/select_dialog.dart.)
  • lib/src/simple_card/simple_card_component.dart (Run dartfmt to format lib/src/simple_card/simple_card_component.dart.)
  • lib/src/simple_dialog/simple_dialog.dart (Run dartfmt to format lib/src/simple_dialog/simple_dialog.dart.)
  • lib/src/simple_loading/simple_loading.dart (Run dartfmt to format lib/src/simple_loading/simple_loading.dart.)
  • lib/src/simple_tabs/simple_tabs.dart (Run dartfmt to format lib/src/simple_tabs/simple_tabs.dart.)
  • lib/src/toast/toast.dart (Run dartfmt to format lib/src/toast/toast.dart.)

Maintenance issues and suggestions

Support latest dependencies. (-30 points)

The version constraint in pubspec.yaml does not support the latest published versions for 3 dependencies (angular, angular_components, intl).

The package description is too short. (-8 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.4.0 <3.0.0
angular ^5.3.0 5.3.1 6.0.0-alpha+1
angular_components ^0.13.0 0.13.0+1 0.14.0-alpha+1
angular_forms ^2.0.0 2.1.2 2.1.4
angular_router ^2.0.0-alpha+19 2.0.0-alpha+22 2.0.0-alpha+24
archive ^2.0.10 2.0.10
decimal ^0.3.4 0.3.5
intl ^0.15.8 0.15.8 0.16.0
sass_builder ^2.1.3 2.1.3
xml ^3.5.0 3.5.0
Transitive dependencies
analyzer 0.35.4 0.38.5
angular_ast 0.5.9 0.5.11
angular_compiler 0.4.3 0.4.5
args 1.5.2
async 2.4.0
build 1.2.0
build_config 0.4.1+1
built_collection 4.2.2
built_value 6.7.1
charcode 1.1.2
checked_yaml 1.0.2
cli_repl 0.2.0+1
code_builder 3.2.0
collection 1.14.12
convert 2.1.1
crypto 2.1.3
csslib 0.14.6+1 0.16.1
dart_internal 0.1.7
dart_style 1.2.4 1.3.1
fixnum 0.10.9
front_end 0.1.14 0.1.27
glob 1.2.0
http 0.12.0+2
http_parser 3.1.3
js 0.6.1+1
json_annotation 3.0.0
kernel 0.3.14 0.3.27
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
node_interop 1.0.3
node_io 1.0.1+2
observable 0.22.2
package_config 1.1.0
package_resolver 1.0.10
path 1.6.4
petitparser 2.4.0
protobuf 0.13.16+1 1.0.0
pub_semver 1.4.2
pubspec_parse 0.1.5
quiver 2.0.5
rational 0.3.6
sass 1.23.0
source_gen 0.9.4+4 0.9.4+5
source_maps 0.10.8
source_span 1.5.5
stack_trace 1.9.3
stream_transform 0.0.19
string_scanner 1.0.5
term_glyph 1.1.0
tuple 1.0.3
typed_data 1.1.6
watcher 0.9.7+12
yaml 2.2.0
Dev dependencies
pedantic ^1.7.0 1.8.0+1
test ^1.6.0