ng-firebase-table-kxp 1.0.0

package/src/lib/components/table/table.component.html

@@ -0,0 +1,555 @@
+<div *ngIf="data" class="card-body">
+  <div class="flex flex-col justify-between gap-6">
+    <!-- UNIFIED CONTROL PANEL: FILTERS, SORT & ACTIONS -->
+    <div
+      class="rounded-xl border border-gray-200 bg-white p-4 shadow-lg"
+      *ngIf="
+        data.pagination === true &&
+        (dropdownItems.length > 0 ||
+          sortableDropdownItems.length > 0 ||
+          data.actionButton)
+      "
+    >
+      <!-- PANEL HEADER: Title, Custom Action, and Global Actions -->
+      <div
+        class="mb-4 flex flex-col items-start justify-between gap-4 border-b-2 border-gray-200 pb-4 md:flex-row md:items-center"
+      >
+        <!-- Left Side: Title & Main Action Button -->
+        <div class="flex flex-wrap items-center gap-4">
+          <div class="flex items-center gap-2">
+            <i class="fa fa-filter text-xl text-blue-500"></i>
+            <span class="text-lg font-semibold text-gray-700"
+              >Filtros e Ações</span
+            >
+          </div>
+          <button
+            *ngIf="data.actionButton && data.actionButton.condition"
+            [ngClass]="
+              (data.actionButton.colorClass || 'bg-blue-500') +
+              ' flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'
+            "
+            [routerLink]="data.actionButton.routerLink"
+            (click)="
+              data.actionButton.method ? data.actionButton.method($event) : null
+            "
+          >
+            <i
+              *ngIf="data.actionButton.icon"
+              [class]="data.actionButton.icon"
+            ></i>
+            {{ data.actionButton.label }}
+          </button>
+        </div>
+
+        <!-- Right Side: Search, Reset, Export -->
+        <div
+          class="flex flex-wrap gap-3"
+          *ngIf="
+            this.hasFilterableColumn === true || this.hasSortableColumn === true
+          "
+        >
+          <button
+            (click)="search()"
+            type="button"
+            class="flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
+            matTooltip="Aplicar filtros"
+          >
+            <i class="fa fa-search"></i>
+            Pesquisar
+          </button>
+
+          <button
+            (click)="resetFilter()"
+            class="flex items-center gap-2 rounded-lg bg-red-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600"
+            matTooltip="Limpar filtros"
+          >
+            <i class="fas fa-redo-alt"></i>
+            Resetar
+          </button>
+
+          <button
+            *ngIf="data.download !== false && downloadTable"
+            class="flex items-center gap-2 rounded-lg bg-orange-500 px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-600"
+            matTooltipPosition="above"
+            matTooltip="Exportar Tabela"
+            [disabled]="
+              this.dataSource && this.dataSource.filteredData.length <= 0
+            "
+            (click)="
+              $any(arrange) && downloadTable !== undefined
+                ? downloadTable($any(arrange), data.conditions || [])
+                : null
+            "
+          >
+            <i class="fa fa-download"></i>
+            Exportar
+          </button>
+        </div>
+      </div>
+
+      <!-- FILTERS CONTENT (WITH REFINEMENTS) -->
+      <div class="mb-4 space-y-3" *ngIf="filtersForm.controls.length > 0">
+        <div
+          [formGroup]="$any(filterGroup)"
+          *ngFor="let filterGroup of filtersForm.controls; let i = index"
+          class="flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 p-2"
+        >
+          <!-- FILTER TYPE SELECTOR -->
+          <div class="min-w-[200px] flex-1" *ngIf="dropdownItems.length > 0">
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label>Tipo de filtro</mat-label>
+              <mat-select
+                placeholder="Selecione o tipo..."
+                formControlName="selectFilter"
+                (selectionChange)="onSelectFilterChange()"
+              >
+                <mat-option *ngFor="let item of dropdownItems" [value]="item">
+                  <div class="flex items-center gap-2">
+                    <i
+                      [class]="item.icon || 'fa fa-filter'"
+                      class="text-sm text-blue-500"
+                    ></i>
+                    <span>{{ item.title }}</span>
+                  </div>
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
+          <!-- TEXT FILTER -->
+          <div
+            class="min-w-[200px] flex-1"
+            *ngIf="
+              $any(filterGroup).get('selectFilter')?.value?.arrange === 'filter'
+            "
+          >
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label class="flex items-center gap-2">
+                <i class="fa fa-search text-gray-400"></i>
+                <span>{{
+                  $any(filterGroup).get("selectFilter")?.value?.title ||
+                    "Filtrar"
+                }}</span>
+              </mat-label>
+              <input
+                (keyup.enter)="search()"
+                formControlName="typeFilter"
+                matInput
+                placeholder="Digite para filtrar..."
+                #input
+              />
+            </mat-form-field>
+          </div>
+
+          <!-- DROPDOWN FILTER -->
+          <div
+            class="min-w-[200px] flex-1"
+            *ngIf="
+              $any(filterGroup).get('selectFilter')?.value &&
+              $any(filterGroup)
+                .get('selectFilter')
+                ?.value.hasOwnProperty('items')
+            "
+          >
+            <mat-form-field appearance="outline" class="w-full">
+              <mat-label>{{
+                $any(filterGroup).get("selectFilter")?.value?.title ||
+                  "Selecione"
+              }}</mat-label>
+              <mat-select
+                placeholder="Selecione..."
+                formControlName="selectItem"
+                multiple
+              >
+                <mat-option
+                  *ngFor="
+                    let item of $any(filterGroup).get('selectFilter')?.value
+                      .items
+                  "
+                  [value]="item"
+                >
+                  {{ item.label }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
+          <!-- DATE FILTER -->
+          <div
+            class="min-w-[340px] flex-auto"
+            *ngIf="
+              $any(filterGroup).get('selectFilter')?.value?.arrange ===
+              'filterByDate'
+            "
+          >
+            <div
+              class="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center"
+            >
+              <mat-form-field appearance="outline" class="flex-1">
+                <mat-label class="flex items-center gap-2">
+                  <i class="fa fa-calendar text-gray-400"></i>
+                  <span>Data Inicial</span>
+                </mat-label>
+                <input
+                  matInput
+                  (keyup.enter)="search()"
+                  formControlName="initialDate"
+                  placeholder="DD/MM/AAAA"
+                  maxlength="10"
+                />
+              </mat-form-field>
+
+              <mat-form-field appearance="outline" class="flex-1">
+                <mat-label class="flex items-center gap-2">
+                  <i class="fa fa-calendar text-gray-400"></i>
+                  <span>Data Final</span>
+                </mat-label>
+                <input
+                  (keyup.enter)="search()"
+                  matInput
+                  formControlName="finalDate"
+                  placeholder="DD/MM/AAAA"
+                  maxlength="10"
+                />
+              </mat-form-field>
+            </div>
+          </div>
+
+          <!-- REMOVE FILTER BUTTON -->
+          <div *ngIf="filtersForm.length > 1" class="ml-auto flex-shrink-0">
+            <button
+              (click)="removeFilter(i)"
+              class="flex h-10 w-10 items-center justify-center rounded-full transition-colors duration-300 hover:bg-red-100"
+              matTooltip="Remover filtro"
+            >
+              <i class="fa fa-trash text-red-500 hover:text-red-600"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- PANEL FOOTER: Add Filter & Sort -->
+      <div
+        class="-mb-2 flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-4 sm:flex-row"
+      >
+        <!-- Add Filter Button -->
+        <div *ngIf="dropdownItems.length > 0">
+          <button
+            (click)="addFilter()"
+            class="transform rounded-full border-2 border-blue-300 bg-blue-50 px-6 py-2 text-sm font-medium text-blue-600 transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400 hover:bg-blue-100 hover:shadow-md"
+            matTooltip="Adicionar novo filtro"
+          >
+            <i class="fa fa-plus mr-2"></i>
+            Adicionar Filtro
+          </button>
+        </div>
+
+        <!-- Sort Dropdown -->
+        <div
+          class="w-full sm:w-auto sm:min-w-[250px]"
+          *ngIf="sortableDropdownItems.length > 0"
+        >
+          <mat-form-field appearance="outline" class="w-full">
+            <mat-label>Ordenar por</mat-label>
+            <mat-select placeholder="Selecione..." [formControl]="selectSort">
+              <mat-option
+                *ngFor="let item of sortableDropdownItems"
+                [value]="item"
+              >
+                <div class="flex items-center gap-2">
+                  <i class="fa fa-sort-alpha-down text-cyan-600"></i>
+                  <span>{{ item.title }}</span>
+                </div>
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
+    </div>
+
+    <!-- SIMPLE SEARCH (for non-paginated tables) -->
+    <div
+      class="rounded-xl border border-gray-200 bg-white p-4 shadow-lg"
+      *ngIf="data.pagination === false"
+    >
+      <mat-form-field appearance="outline" class="w-full">
+        <mat-label class="flex items-center gap-2">
+          <i class="fa fa-search text-blue-500"></i>
+          Buscar
+        </mat-label>
+        <input
+          matInput
+          (keyup.enter)="search()"
+          (keyup)="applyFilter(filterInput.value)"
+          placeholder="Digite para filtrar..."
+          #filterInput
+        />
+        <mat-icon matSuffix class="text-gray-500">search</mat-icon>
+      </mat-form-field>
+      <button
+        *ngIf="data.actionButton"
+        [ngClass]="
+          (data.actionButton.colorClass || 'bg-blue-500') +
+          ' float-right flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-70'
+        "
+        [routerLink]="data.actionButton.routerLink"
+        (click)="
+          data.actionButton.method ? data.actionButton.method($event) : null
+        "
+      >
+        <i *ngIf="data.actionButton.icon" [class]="data.actionButton.icon"></i>
+        {{ data.actionButton.label }}
+      </button>
+    </div>
+
+    <div class="flex flex-col">
+      <div
+        class="mx-auto flex flex-col"
+        *ngIf="data.tabs && data.tabs.tabsData && data.tabs.tabsData.length > 0"
+      >
+        <!-- Calcular quantos grupos de 6 tabs existem -->
+        <ng-container
+          *ngFor="
+            let groupIndex of getTabGroups(data.tabs.tabsData);
+            let i = index
+          "
+        >
+          <div class="mx-auto flex flex-row">
+            <ng-container
+              *ngFor="
+                let tab of getTabGroup(data.tabs.tabsData, groupIndex);
+                let j = index
+              "
+            >
+              <button
+                class="border-2 border-gray-300 bg-gray-200 px-4 py-2 font-medium transition hover:brightness-95"
+                [ngClass]="
+                  isTabSelected(getRealTabIndex(i, j))
+                    ? 'border-b-0 brightness-110'
+                    : ''
+                "
+                (click)="onTableSelected(i, j)"
+              >
+                {{ tab.label }}
+                <span
+                  *ngIf="tab.counter !== undefined"
+                  class="ml-2 text-xs font-bold"
+                  [ngClass]="tab.counterClass"
+                >
+                  {{ tab.counter }}
+                </span>
+              </button>
+            </ng-container>
+          </div>
+        </ng-container>
+      </div>
+      <div class="mat-elevation-z8 w-full overflow-x-auto rounded-xl">
+        <table
+          mat-table
+          [dataSource]="dataSource"
+          matSort
+          #sort="matSort"
+          matSortActive="createdAt"
+          matSortDirection="desc"
+        >
+          <ng-container
+            *ngFor="let col of data.displayedColumns"
+            matColumnDef="{{ col.property }}"
+          >
+            <ng-container *matHeaderCellDef>
+              <!-- IF THE COLUMN IS NOT SORTABLE, THEN DON'T SHOW THE SORT BUTTONS -->
+              <th
+                *ngIf="!col.isSortable || data.pagination === true"
+                mat-header-cell
+                [ngClass]="
+                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +
+                  (data?.color?.text ? ' ' + $any(data.color).text : '')
+                "
+              >
+                {{ col.title }}
+              </th>
+              <!-- IF THE COLUMN IS SORTABLE, THEN SHOW THE SORT BUTTONS -->
+              <th
+                *ngIf="col.isSortable && data.pagination === false"
+                mat-header-cell
+                mat-sort-header
+                [ngClass]="
+                  (data?.color?.bg ? ' ' + $any(data.color).bg : '') +
+                  (data?.color?.text ? ' ' + $any(data.color).text : '')
+                "
+              >
+                {{ col.title }}
+              </th>
+              <td
+                mat-cell
+                *matCellDef="let row"
+                (click)="col.method ? col.method(row) : null"
+                (mouseenter)="onCellMouseEnter($event, row, col)"
+                (mouseleave)="onCellMouseLeave()"
+                (mousemove)="onCellMouseMove($event)"
+              >
+                <!-- CHECK IF THE COLUMN MUST BE DISPLAYED -->
+                <span *ngIf="!col.image && !col.iconClass && !col.method">
+                  <ng-container>
+                    <span
+                      *ngIf="
+                        col.charLimit &&
+                          row[col.property] &&
+                          row[col.property].length > col.charLimit;
+                        else withinLimit
+                      "
+                    >
+                      <a
+                        *ngIf="col.hasLink === true"
+                        [href]="row[col.property]"
+                        target="_blank"
+                      >
+                        {{ getDisplayValue(col, row) }}
+                      </a>
+                      <a
+                        *ngIf="col.hasLink && isString(col.hasLink)"
+                        [href]="col.hasLink"
+                        target="_blank"
+                      >
+                        {{ getDisplayValue(col, row) }}
+                      </a>
+                      <span
+                        *ngIf="col.hasLink !== true && !isString(col.hasLink)"
+                      >
+                        {{ getDisplayValue(col, row) }}
+                      </span>
+                    </span>
+                  </ng-container>
+                  <ng-template #withinLimit>
+                    <a
+                      *ngIf="col.hasLink === true"
+                      [href]="row[col.property]"
+                      target="_blank"
+                    >
+                      {{ getDisplayValue(col, row, true) }}
+                    </a>
+                    <a
+                      *ngIf="col.hasLink && isString(col.hasLink)"
+                      [href]="col.hasLink"
+                      target="_blank"
+                    >
+                      {{ getDisplayValue(col, row, true) }}
+                    </a>
+                    <span
+                      *ngIf="col.hasLink !== true && !isString(col.hasLink)"
+                    >
+                      {{ getDisplayValue(col, row, true) }}
+                    </span>
+                  </ng-template>
+                </span>
+                <!------------------- IMAGE ------------------>
+                <img
+                  *ngIf="
+                    col.image && col.image.path && !col.iconClass && !col.method
+                  "
+                  [src]="col.image.path + '/' + row[col.property]"
+                  [ngClass]="col.image.class"
+                  alt="Imagem"
+                />
+                <img
+                  *ngIf="
+                    col.image && col.image.url && !col.iconClass && !col.method
+                  "
+                  [src]="row[col.property]"
+                  [ngClass]="col.image.class"
+                  alt="Imagem"
+                />
+                <ng-container *ngIf="col.iconClass">
+                  <button
+                    *ngFor="let iconClass of col.iconClass"
+                    (click)="
+                      iconClass.buttonMethod
+                        ? iconClass.buttonMethod(row, $event)
+                        : $event.stopPropagation()
+                    "
+                  >
+                    <span
+                      [ngClass]="iconClass.class"
+                      *ngIf="
+                        iconClass.condition === undefined ||
+                        (iconClass.condition !== undefined &&
+                          $any(iconClass.condition)(row))
+                      "
+                      >{{ iconClass.text }}</span
+                    >
+                  </button>
+                </ng-container>
+              </td>
+            </ng-container>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="columnProperties"></tr>
+          <tr
+            [ngClass]="{
+              'example-element-row': data.isNotClickable === true,
+              'example-element-row cursor-pointer': !data.isNotClickable
+            }"
+            mat-row
+            *matRowDef="let row; columns: columnProperties"
+            (click)="goToDetails(row)"
+          ></tr>
+
+          <!-- ROW SHOWN WHEN THERE IS NO MATCHING DATA. -->
+          <tr class="mat-row" *matNoDataRow>
+            <td *ngIf="!isLoading" class="mat-cell p-4" colspan="4">
+              Nenhum resultado encontrado para a busca
+            </td>
+          </tr>
+        </table>
+
+        <div class="flex justify-center" *ngIf="isLoading">
+          <mat-spinner></mat-spinner>
+        </div>
+
+        <div class="paginator-container">
+          <mat-paginator
+            #paginator
+            [pageSizeOptions]="[25, 50, 100]"
+            [pageSize]="pageSize"
+            [length]="totalItems"
+            showFirstLastButtons
+            aria-label="Select page of periodic elements"
+            (page)="onPageChange($event)"
+            [ngClass]="{
+              'hide-length':
+                ['filter', 'filterByDate', 'equals'].includes(
+                  this.currentArrange
+                ) || this.data.filterFn,
+              'hide-next-button': !hasNextPage && data.pagination === true,
+              'hide-last-button':
+                (!hasNextPage && data.pagination === true) || this.data.filterFn
+            }"
+          >
+          </mat-paginator>
+          <div
+            *ngIf="
+              !isLoading &&
+              dataSource?.data &&
+              dataSource.data.length > 0 &&
+              data?.filterFn
+            "
+            class="page-number-display"
+          >
+            {{ currentPageNumber }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- TOOLTIP PERSONALIZADO -->
+  <div
+    *ngIf="showTooltip"
+    class="fixed z-50 max-w-md break-words rounded-lg bg-gray-800 px-3 py-2 text-sm text-white shadow-lg"
+    [style.left.px]="tooltipPosition.x"
+    [style.top.px]="tooltipPosition.y"
+    [style.pointer-events]="'none'"
+  >
+    {{ tooltipContent }}
+  </div>
+</div>

package/src/lib/components/table/table.component.scss

@@ -0,0 +1,22 @@
+::ng-deep .hide-length .mat-mdc-paginator-range-label {
+    display: none;
+}
+
+::ng-deep .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-next.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base{
+  visibility: hidden;
+}
+
+::ng-deep  .hide-next-button .mat-mdc-tooltip-trigger.mat-mdc-paginator-navigation-last.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base.ng-star-inserted {
+  visibility: hidden;
+}
+
+::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field.ng-tns-c162-1.mdc-text-field--filled{
+  width: 25dvw;
+}
+
+::ng-deep .custom-filter .mat-mdc-text-field-wrapper {
+  width: 20dvw;
+  max-width: 300px;
+}
+
+

package/src/lib/components/table/table.component.spec.ts

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {TableComponent} from './table.component';
+
+describe('TableComponent', () => {
+    let component: TableComponent;
+    let fixture: ComponentFixture<TableComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [TableComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(TableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
+
+