ng-tablekit 1.0.0

package/src/app/templates/report-page/report-page.component.html

@@ -0,0 +1,75 @@
+<div class="template-code-actions"><app-copy-template-button [sourcePaths]="[{ name: 'Report Page', path: 'report-page/report-page' }]" />
+</div>
+<section class="template-page">
+  <div class="table-toolbar">
+    <div class="table-toolbar__left"><button class="back-btn" title="Back" aria-label="Go back" type="button" (click)="goBack()"><span nz-icon
+          nzType="arrow-left"></span></button>
+      <h1 class="page-heading">{{ reportTitle }}</h1>
+    </div>
+    <div class="table-toolbar__right">
+      @if(showFilter) { <button nz-button class="compact-btn" type="button" (click)="toggleFilter()"><span nz-icon
+          nzType="filter"></span> Filter</button> }
+      @if(showExcel) { <button nz-button nzType="primary" class="compact-btn" type="button"
+        (click)="downloadExcel()"><span nz-icon nzType="file-excel"></span>
+        Excel</button> }
+      @if(showPdf) { <button nz-button nzType="primary" class="compact-btn" type="button" (click)="downloadPdf()"><span
+          nz-icon nzType="file-pdf"></span> PDF</button> }
+      <nz-form-item class="search-field"><nz-input-group nzSearch [nzAddOnAfter]="searchButton"><input type="text"
+            nz-input (keydown.enter)="onSearch()" placeholder="Search Records"
+            [(ngModel)]="searchText" /></nz-input-group><ng-template #searchButton><button nz-button
+            class="compact-btn icon-only" nzType="primary" type="button" (click)="onSearch()"
+            aria-label="Search records"><span nz-icon nzType="search"></span></button></ng-template></nz-form-item>
+    </div>
+  </div>
+  @if(filterVisible){
+  <form class="filter-panel" [formGroup]="filterForm">
+    <div class="filter-panel__grid">
+      @if (showCategoryFilter) {
+      <div class="filter-panel__field"><label>Category</label><nz-select formControlName="category" nzAllowClear
+          nzPlaceHolder="Select category">@for(option of categories;track
+          option){<nz-option [nzLabel]="option" [nzValue]="option" />}</nz-select></div>
+      }
+      @if (showMultiselectFilter) {
+      <div class="filter-panel__field"><label>Categories (Multi)</label><nz-select formControlName="categories" nzMode="multiple" nzAllowClear
+          nzPlaceHolder="Select categories">@for(option of categories;track
+          option){<nz-option [nzLabel]="option" [nzValue]="option" />}</nz-select></div>
+      }
+      @if (showDateFilter) {
+      <div class="filter-panel__field"><label>Created Date</label><nz-date-picker formControlName="date" nzPlaceHolder="Select date"></nz-date-picker></div>
+      }
+      @if (showDateRangeFilter) {
+      <div class="filter-panel__field"><label>Date Range</label><nz-range-picker formControlName="dateRange"></nz-range-picker></div>
+      }
+      @if (showRadioFilter) {
+      <div class="filter-panel__field"><label>Status</label><nz-radio-group formControlName="status">
+          @for(option of statuses;track option){<label nz-radio [nzValue]="option">{{option}}</label>}
+        </nz-radio-group></div>
+      }
+    </div>
+    <div class="filter-panel__actions"><button nz-button class="compact-btn" type="button"
+        (click)="clearFilters()">Clear</button><button nz-button nzType="primary" class="compact-btn" type="button"
+        (click)="applyFilters()">Apply Filters</button></div>
+  </form>
+  }
+  <nz-table #table nzBordered nzSize="small" [nzData]="records" [(nzPageIndex)]="pageIndex" [nzPageSize]="10"
+    [nzShowSizeChanger]="true" [nzPageSizeOptions]="pageSizeOptions" [nzScroll]="{ y: '55vh' }"
+    (nzQueryParams)="onQueryParamsChange($event)">
+    <thead>
+      <tr>@for(column of columns; track column.key){
+        @if(column.sortable === true){
+        <th [nzWidth]="column.width ?? null" [nzSortFn]="sortBy(column.key)">{{column.title}}</th>
+        } @else {
+        <th [nzWidth]="column.width ?? null">{{column.title}}</th>
+        }
+        }
+      </tr>
+    </thead>
+    <tbody>@for(record of table.data; track record.id){<tr>@for(column of
+        columns; track column.key){<td [nzAlign]="column.align || 'left'">
+          @switch(column.type){@case('date'){ {{
+          formatDateValue(record[column.key]) }} }@case('status'){<nz-tag class="status-tag"
+            [nzColor]="getStatusColor(record.status)">{{record.status}}</nz-tag>}@case('currency'){ {{ getCurrencyValue(record[column.key]) | currency }} }@default{
+          {{record[column.key]}} }}
+        </td>}</tr>}</tbody>
+  </nz-table>
+</section>

package/src/app/templates/report-page/report-page.component.ts

@@ -0,0 +1,174 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CurrencyPipe, Location } from '@angular/common';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ArrowLeftOutline, FileExcelOutline, FilePdfOutline, FilterOutline, SearchOutline } from '@ant-design/icons-angular/icons';
+import { jsPDF } from 'jspdf';
+import * as XLSX from 'xlsx';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzIconModule, provideNzIconsPatch } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzTableModule, NzTableQueryParams } from 'ng-zorro-antd/table';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { PAGE_SIZE_OPTIONS, STANDARD_COLUMNS } from '@core/config/table.config';
+import { TABLE_RECORDS } from '@core/data/record.data';
+import { TableRecord } from '@core/models/table.models';
+import { createColumnSortFn, formatDateValue, getStatusColor, globalRecordSearch } from '@core/utils/table.utils';
+import { CopyTemplateButtonComponent } from '@shared/copy-template-button/copy-template-button.component';
+
+@Component({
+  selector: 'app-report-page',
+  standalone: true,
+  imports: [CurrencyPipe, FormsModule, ReactiveFormsModule, NzButtonModule, NzFormModule, NzIconModule, NzInputModule, NzSelectModule, NzTableModule, NzTagModule, NzDatePickerModule, NzRadioModule, CopyTemplateButtonComponent],
+  providers: [...provideNzIconsPatch([ArrowLeftOutline, FileExcelOutline, FilePdfOutline, FilterOutline, SearchOutline])],
+  templateUrl: './report-page.component.html',
+  styleUrl: './report-page.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ReportPageComponent {
+  private readonly fb = inject(FormBuilder);
+  private readonly location = inject(Location);
+  protected readonly columns = STANDARD_COLUMNS;
+  protected readonly pageSizeOptions = PAGE_SIZE_OPTIONS;
+  protected readonly getStatusColor = getStatusColor;
+  protected readonly formatDateValue = formatDateValue;
+  protected readonly sortBy = createColumnSortFn<TableRecord>;
+  protected readonly categories = ['Category A', 'Category B', 'Category C', 'Category D'];
+  protected readonly statuses = ['Active', 'Inactive', 'Pending', 'Approved', 'Rejected'];
+
+  protected reportTitle = 'Report Page';
+  protected showFilter = true;
+  protected showExcel = true;
+  protected showPdf = true;
+  protected showCategoryFilter = true;
+  protected showMultiselectFilter = true;
+  protected showDateFilter = true;
+  protected showDateRangeFilter = true;
+  protected showRadioFilter = true;
+
+  protected readonly filterForm = this.fb.nonNullable.group({
+    category: '',
+    categories: [[] as string[]],
+    date: [null as Date | null],
+    dateRange: [[] as Date[]],
+    status: ''
+  });
+  protected filterVisible = false;
+  protected searchText = '';
+  protected pageIndex = 1;
+  protected records: TableRecord[] = TABLE_RECORDS;
+  protected currentSort: { key: string | null; value: string | null } = { key: null, value: null };
+
+  protected toggleFilter(): void { this.filterVisible = !this.filterVisible; }
+  protected goBack(): void { this.location.back(); }
+  protected getCurrencyValue(value: unknown): string | number {
+    return typeof value === 'string' || typeof value === 'number' ? value : 0;
+  }
+  protected onSearch(): void { this.applyQuery(); }
+  protected applyFilters(): void {
+    this.applyQuery();
+    this.filterVisible = false;
+  }
+  protected clearFilters(): void {
+    this.filterForm.reset({ category: '', categories: [], date: null, dateRange: [], status: '' });
+    this.applyQuery();
+    this.filterVisible = false;
+  }
+
+  protected onQueryParamsChange(params: NzTableQueryParams): void {
+    const sort = params.sort.find((item: any) => item.value !== null);
+    this.currentSort = { key: sort?.key ?? null, value: sort?.value ?? null };
+  }
+
+  private getSortedRecords(): TableRecord[] {
+    if (!this.currentSort.key || !this.currentSort.value) return this.records;
+    return [...this.records].sort((a: any, b: any) => {
+      const valA = a[this.currentSort.key!];
+      const valB = b[this.currentSort.key!];
+      if (valA === valB) return 0;
+      const isAsc = this.currentSort.value === 'ascend';
+      return valA < valB ? (isAsc ? -1 : 1) : (isAsc ? 1 : -1);
+    });
+  }
+
+  protected downloadExcel(): void {
+    const rows = this.getSortedRecords().map(record => ({
+      Name: record.name,
+      Code: record.code,
+      Category: record.category,
+      'Created Date': formatDateValue(record.createdDate),
+      Status: record.status
+    }));
+    const sheet = XLSX.utils.json_to_sheet(rows);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, sheet, 'Report');
+    XLSX.writeFile(workbook, 'report-page.xlsx');
+  }
+
+  protected downloadPdf(): void {
+    const document = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' });
+    const columns = [
+      { label: 'Name', x: 14, width: 58 },
+      { label: 'Code', x: 75, width: 34 },
+      { label: 'Category', x: 112, width: 42 },
+      { label: 'Created Date', x: 157, width: 38 },
+      { label: 'Status', x: 198, width: 34 }
+    ];
+    const drawHeader = (): number => {
+      document.setFont('helvetica', 'bold');
+      document.setFontSize(16);
+      document.text(this.reportTitle, 14, 16);
+      document.setFontSize(10);
+      columns.forEach(column => document.text(column.label, column.x, 26));
+      document.line(14, 29, 232, 29);
+      document.setFont('helvetica', 'normal');
+      return 35;
+    };
+    let y = drawHeader();
+    for (const record of this.getSortedRecords()) {
+      if (y > 195) {
+        document.addPage();
+        y = drawHeader();
+      }
+      const values = [record.name, record.code, record.category, formatDateValue(record.createdDate), record.status];
+      values.forEach((value, index) => {
+        const column = columns[index];
+        const text = document.splitTextToSize(String(value), column.width)[0] ?? '';
+        document.text(text, column.x, y);
+      });
+      y += 7;
+    }
+    document.save('report-page.pdf');
+  }
+
+  private applyQuery(): void {
+    this.pageIndex = 1;
+    const search = this.searchText.trim();
+    const { category, categories, date, dateRange, status } = this.filterForm.getRawValue();
+    this.records = TABLE_RECORDS.filter(record => {
+      let pass = true;
+      if (!globalRecordSearch(record, search)) pass = false;
+      if (category && record.category !== category) pass = false;
+      if (categories && categories.length > 0 && !categories.includes(record.category)) pass = false;
+      if (status && record.status !== status) pass = false;
+
+      if (date) {
+        const recordDate = new Date(record.createdDate).setHours(0, 0, 0, 0);
+        const filterDate = new Date(date).setHours(0, 0, 0, 0);
+        if (recordDate !== filterDate) pass = false;
+      }
+
+      if (dateRange && dateRange.length === 2) {
+        const recordDate = new Date(record.createdDate).setHours(0, 0, 0, 0);
+        const start = new Date(dateRange[0]).setHours(0, 0, 0, 0);
+        const end = new Date(dateRange[1]).setHours(0, 0, 0, 0);
+        if (recordDate < start || recordDate > end) pass = false;
+      }
+
+      return pass;
+    });
+  }
+}