i'm trying to make a single filter with p-tables. However, some columns doesn't work for filtering (specifically those related to bills data). I'm tried to add a ng-container more to do something like a "let-client.bills" but doesn't work either and I don't have more ideas.
My component:
@Component({
selector: 'app-bills',
templateUrl: './bills.component.html',
styleUrls: ['./bills.component.css']
})
export class BillsComponent implements OnInit {
allClients!: Client[];
cols!: any[];
constructor(private billsService: BillsService,
private route: ActivatedRoute,
private router: Router) { }
ngOnInit() {
this.cols = [
{ field: 'billCode', header: 'Código factura' },
{ field: 'clientName', header: 'Cliente' },
{ field: 'city', header: 'Ciudad' },
{ field: 'nit', header: 'NIT' },
{ field: 'total', header: 'Total' },
{ field: 'subtotal', header: 'Subtotal' },
{ field: 'iva', header: 'IVA' },
{ field: 'retention', header: 'Retención' },
{ field: 'creationDate', header: 'Fecha creación' },
{ field: 'status', header: 'Estado' },
{ field: 'isPaid', header: 'Pagada' },
{ field: 'paymentDate', header: 'Fecha pago' }
];
this.getClients();
}
getClients = () => {
this.billsService.getAllClients().subscribe((clients) => {
this.allClients = clients;
});
}
My HTML:
<p-table #dt [columns]="cols" [value]="allClients">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<input #put pInputText type="text" (input)="dt.filter(put.value, col.field, 'startsWith')">
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-client let-columns="columns">
<tr *ngFor="let bill of client.bills">
<td *ngFor="let col of columns">
<ng-container *ngIf="client[col.field]">{{client[col.field]}}</ng-container>
<ng-container *ngIf="(col.field == 'paymentDate' && bill.isPaid) || col.field != 'paymentDate'">{{bill[col.field]}}</ng-container>
</td>
</tr>
</ng-template>
</p-table>
The interface Client:
import { Bill } from "./bill";
export interface Client {
id: string;
clientName: string;
city: string;
nit: string;
bills: Bill[];
}
The interface Bill:
export interface Bill {
billCode: string;
total: number;
subtotal: number;
iva: number;
retention: number;
creationDate: Date;
status: string;
isPaid: boolean;
paymentDate: Date;
}
Something of help is welcome. I don't have idea what do to make the filters related to the bills data work. The filters related to clientName, city and nit works well however.
Thanks for everyone who reads and help me with this.