Lib-Sim-Angular

Uma biblioteca de componentes Angular úteis para o dia a dia dos desenvolvedores.

Instalação

Para testar a biblioteca no projeto Angular test-app, siga os passos abaixo:

1. Compile a biblioteca:

   cd projetos/lib-sim-angular
   yarn build

2. Link a biblioteca no seu projeto:

   cd dist/lib-sim-angular
   yarn link
   
   cd projects/test-app
   yarn link lib-sim-angular

3. Executar o Projeto:

   cd projects/test-app
   yarn dev

Uso Básico

No seu módulo principal, importe LibSimAngularModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LibSimAngularModule } from 'lib-sim-angular'; // Importa a biblioteca

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LibSimAngularModule // Adicione o módulo da biblioteca aqui
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Componentes Disponíveis

GenericTabsWithPaginationComponent

Um componente de abas com paginação para organizar conteúdo em seções distintas.

Propriedades

• tabs (Array): Uma lista de objetos que define as abas.

  • title (string): O título da aba.
  • template (string): O nome do template associado à aba.
  • paginated (boolean): Define se a aba deve ter paginação.
  • data (Array): Os dados a serem exibidos na aba.
  • itemsPerPage (number): Número de itens por página (aplicável apenas se paginated for true).
  • currentPage (number): A página atual (aplicável apenas se paginated for true).

• pageChange (EventEmitter<{ tabIndex: number, page: number }>): Um evento emitido quando a página é alterada.

Exemplo de Uso

Aqui está um exemplo de como usar o GenericTabsWithPaginationComponent:

<app-generic-tabs-with-pagination [tabs]="tabs" (pageChange)="onPageChange($event)">
  <ng-template #template1 let-data="data">
    <div *ngFor="let item of getPaginatedItems(0)">
      tab1
      {{ item }}
    </div>
  </ng-template>

  <ng-template #template2 let-data="data">
    teste
    <div>{{ data?.[0] }}</div>
    teste
  </ng-template>
</app-generic-tabs-with-pagination>

// app.component.ts
import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 tabs = [
   {
     title: 'Tab 1',
     template: 'template1',
     paginated: true,
     data: ['Item 1.1', 'Item 1.2', 'Item 1.3', 'Item 1.4', 'Item 1.5'],
     itemsPerPage: 2,
     currentPage: 1
   },
   {
     title: 'Tab 2',
     template: 'template2',
     paginated: false,
     data: ['Item 2.1', 'Item 2.2']
   }
 ];

 onPageChange(event: { tabIndex: number, page: number }) {
   this.tabs[event.tabIndex].currentPage = event.page;
 }

 getPaginatedItems(tabIndex: number): string[] | undefined {
   const tab = this.tabs[tabIndex];
   if (!tab || !tab.data) {
     return undefined;
   }
   const start = ((tab.currentPage ?? 1) - 1) * (tab.itemsPerPage ?? 1);
   const end = (tab.currentPage ?? 1) * (tab.itemsPerPage ?? 1);
   return tab.data.slice(start, end);
 }
}

ExcelExportComponent

Um componente para exportar dados para uma planilha Excel usando a biblioteca exceljs: yarn add exceljs@^4.4.0

Propriedades

jsonFilePath (string): Caminho do arquivo JSON que contém as informações das planilhas.

sheetData (SheetData): Dados das planilhas.

Estrutura do Arquivo JSON

{
  "fileName": "pessoas.xlsx",
  "sheets": [
    {
      "sheetName": "Sheet 1",
      "columns": [
        { "header": "ID", "key": "id", "width": 10 },
        { "header": "Name", "key": "name", "width": 32 },
        { "header": "Age", "key": "age", "width": 10 },
        { "header": "Sexo", "key": "sex", "width": 15 }
      ],
      "data": [],
      "styles": {
        "font": { "name": "Arial", "size": 12 },
        "alignment": { "horizontal": "center" }
      },
      "columnsMapping": {
        "id": "ID",
        "name": "Name",
        "age": "Age",
        "sex": "Sex"
      }
    },
    {
      "sheetName": "Sheet 2",
      "columns": [
        { "header": "ID", "key": "id", "width": 10 },
        { "header": "Fruta", "key": "fruta", "width": 32 },
        { "header": "Peso", "key": "peso", "width": 10 }
      ],
      "data": [],
      "styles": {
        "font": { "name": "Arial", "size": 12 },
        "alignment": { "horizontal": "center" }
      },
      ,
      "conditionalStyles": [
        {
          "columnKey": "peso",
          "condition": 10,
          "trueStyle": { "font": { "color": { "argb": "FFFF0000" } } },
          "falseStyle": { "font": { "color": { "argb": "FF000000" } } }
        }
      ],
      "columnsMapping": {
        "id": "ID",
        "fruta": "Fruta",
        "peso": "Peso"
      }
    }
  ]
}

Exemplo de Uso

Aqui está um exemplo de como usar o ExcelExportComponent:

// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  jsonFilePath: string = 'assets/sheets-data.json';
  sheetData: { [key: number]: any[] } = {};

  ngOnInit(): void {
    this.loadDataFromDatabase();
  }

  loadDataFromDatabase() {
    // Simulando dados fictícios
    this.sheetData = {
      0: [
        { id: 1, name: 'Maria', age: 30, sex: 'F' },
        { id: 2, name: 'João', age: 25, sex: 'M' },
        { id: 3, name: 'Alice Smith', age: 28, sex: 'F' },
        { id: 4, name: 'Ana', age: 35, sex: 'F' }
      ],
      1: [
        { id: 1, fruta: 'Maçã', peso: 150 },
        { id: 2, fruta: 'Banana', peso: 120 }
      ]
    };
  }
}

No seu HTML:

<!-- app.component.html -->
<div class="container">
  <lib-excel-export [jsonFilePath]="jsonFilePath" [sheetData]="sheetData"></lib-excel-export>
</div>

Estilos do Botão (Opcional)

.buton-modal {
  background-color: #ff0000; /* Vermelho */
  border: none;
  color: white;
  padding: 5px 4px;
  font-size: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.buton-modal:hover {
  background-color: #dc0000; /* Vermelho mais escuro */
}

.float-right {
  float: right;
}

i-lucide {
  font-size: 0.7rem;
}

Com essas instruções, você poderá configurar e usar o ExcelExportComponent em sua aplicação Angular, permitindo a exportação de dados para planilhas Excel de forma dinâmica.