71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { Component, input, Type } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
export interface CellComponent<T> {
|
|
component?: Type<any>;
|
|
componentInputs?: (obj: T) => { [key: string]: any };
|
|
}
|
|
|
|
export interface DetailViewRow<T> extends CellComponent<T> {
|
|
attribute: keyof T;
|
|
getValue?: (obj: T) => any;
|
|
format?: 'date' | 'datetime' | 'number' | 'raw' | ((value: any) => string);
|
|
getTitle?: string | ((obj: T) => string);
|
|
getDetailClass?: (obj: T) => string;
|
|
getTitleStyleClass?: (obj: T) => string;
|
|
getValueStyleClass?: (obj: T) => string;
|
|
titleComponent?: Type<any>;
|
|
titleComponentInputs?: (obj: T) => { [key: string]: any };
|
|
}
|
|
|
|
export interface DetailViewConfig<T> {
|
|
data: T;
|
|
rows: DetailViewRow<T>[];
|
|
styleClass?: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-detail-view',
|
|
imports: [CommonModule],
|
|
templateUrl: './detail-view.html',
|
|
styleUrl: './detail-view.css',
|
|
})
|
|
export class DetailView<T> {
|
|
config = input.required<DetailViewConfig<T>>();
|
|
|
|
getFormattedValue(row: DetailViewRow<T>, data: T): string {
|
|
const value = row.getValue ? row.getValue(data) : data[row.attribute];
|
|
|
|
if (row.component) {
|
|
return '';
|
|
}
|
|
|
|
if (typeof row.format === 'function') {
|
|
return row.format(value);
|
|
}
|
|
|
|
switch (row.format) {
|
|
case 'date':
|
|
return new Date(value).toLocaleDateString();
|
|
case 'datetime':
|
|
return new Date(value).toLocaleString();
|
|
case 'number':
|
|
return Number(value).toString();
|
|
case 'raw':
|
|
default:
|
|
return value;
|
|
}
|
|
}
|
|
|
|
getTitle(row: DetailViewRow<T>, data: T): string {
|
|
if (row.titleComponent) {
|
|
return '';
|
|
}
|
|
|
|
if (typeof row.getTitle === 'function') {
|
|
return row.getTitle(data);
|
|
}
|
|
return row.getTitle || String(row.attribute);
|
|
}
|
|
}
|