Report

app-report er en delt rapportviser for tabulære rapporter med grupper, summer, søk og eksport. Den er enklere og mer rapportrettet enn smart-grid: parent sender inn en ReportDefinition, rader og visningsopsjoner, mens komponenten eier rendering og eksporthandlinger.

---

Kilde og import

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/report/report.component.ts
Modeller	ui/ePortal.ui/src/app/shared/report/report.models.ts
Custom celler	ui/ePortal.ui/src/app/shared/report/report-cell.directive.ts
Eksportservice	ui/ePortal.ui/src/app/shared/report/report-export.service.ts

Komponenten er standalone. Importer ReportComponent og ReportCellDirective direkte i standalone-forbrukere, eller via en modul som re-eksporterer dem.

import {
  ReportDefinition,
  ReportViewerOptions,
} from 'src/app/shared/report/report.models';

---

Feature-tabell

Feature	Støtte	Konfigurasjon
Flate rapporttabeller	Ja	def.columns, rows
Grupper	Ja	def.groups
Subtotal og grand total	Ja	aggregate, subtotalFor, grandTotalFor
Custom celle	Ja	ng-template appReportCell="field"
Søk i rapport	Ja	options.showSearch
Indeks/navigasjon	Ja	options.showIndex
PDF-opsjoner	Ja	options.pdf
Eksport	Ja	Innebygde eksportknapper i komponenten
Redigering	Nei	Bruk smart-grid for interaktive lister

---

Brukseksempel

TypeScript:

interface CustomerReportRow {
  customerNo: string;
  customerName: string;
  department: string;
  amount: number;
  invoiceDate: string;
}

reportRows: CustomerReportRow[] = [];

reportDef: ReportDefinition<CustomerReportRow> = {
  columns: [
    {
      field: 'customerNo',
      label: this.translate.instant('Customer.List.CustomerNo'),
      width: 90,
    },
    {
      field: 'customerName',
      label: this.translate.instant('Customer.List.CustomerName'),
      width: '*',
    },
    {
      field: 'amount',
      label: this.translate.instant('Common.Amount'),
      align: 'right',
      aggregate: 'sum',
      format: value => Number(value ?? 0).toLocaleString('nb-NO'),
    },
  ],
  groups: [
    {
      field: 'department',
      label: this.translate.instant('Department.Title'),
      subtotalFor: ['amount'],
    },
  ],
  grandTotalFor: ['amount'],
};

reportOptions: ReportViewerOptions = {
  title: this.translate.instant('Reports.CustomerTurnover.Title'),
  showSearch: true,
  showIndex: true,
  pdf: {
    landscape: true,
    pageNumbers: true,
    footerLeft: this.translate.instant('Reports.GeneratedByEPortal'),
  },
};

HTML:

<app-report
  [def]="reportDef"
  [rows]="reportRows"
  [options]="reportOptions"
  fileBaseName="customer-turnover">

  <ng-template appReportCell="customerName" let-row>
    <a [routerLink]="['/crm/customer', row.customerNo]">
      {{ row.customerName }}
    </a>
  </ng-template>
</app-report>

---

Viktige inputs

Input	Påkrevd	Beskrivelse
def	Ja	ReportDefinition med kolonner, grupper og totaloppsett.
rows	Ja	Datagrunnlaget som skal vises og eksporteres.
options	Nei	Tittel, undertittel, søk, indeks, PDF-layout og logo.
fileBaseName	Nei	Filnavnbase for eksport. Default er report.

---

Modellnotater

Modell	Viktige felt
ReportColumn	field, label, width, align, format, aggregate
GroupLevel	field, label, pageBreakAfter, collapsedByDefault, subtotalFor
ReportViewerOptions	title, subtitle, logoDataUrl, pageSize, showSearch, showIndex, pdf
PdfOptions	landscape, margin, footerLeft, footerRight, pageNumbers, fontSize

format skal returnere tekst for visning og eksport. HTML hører hjemme i appReportCell.

---

Når brukes report fremfor smart-grid?

Behov	Velg
Sluttbruker skal analysere, sortere, filtrere eller redigere rader	Smart-grid
Sluttbruker skal lese, skrive ut eller eksportere en rapport	app-report
Rapporten trenger gruppede summer og PDF-layout	app-report
Listen trenger server-side paging	Smart-grid

---

Kjente fallgruver

Fallgruve	Riktig mønster
Bruke report som redigerbar liste	Bruk smart-grid eller fagspesifikk komponent.
Returnere HTML fra format	Bruk appReportCell.
Glemme i18n ved labels	Bygg label og options.title fra translate-service i parent.
Eksportere ufiltrerte data uten å vite det	Husk at rows er kilden for både visning og eksport.

---

Relaterte sider

• Komponenter
• Smart-grid