common-ui/src/lib/listing/table-content/table-item/table-item.component.ts
Dan Percic 8582f2e6be ng 19
2024-12-05 11:46:15 +02:00

40 lines
1.6 KiB
TypeScript

import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnChanges } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { RoundCheckboxComponent } from '../../../inputs/round-checkbox/round-checkbox.component';
import { ListingComponent } from '../../listing-component.directive';
import { IListable } from '../../models/listable';
import { ListingService } from '../../services/listing.service';
@Component({
selector: 'iqser-table-item [entity]',
templateUrl: './table-item.component.html',
styleUrls: ['./table-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [RoundCheckboxComponent, AsyncPipe, NgTemplateOutlet]
})
export class TableItemComponent<T extends IListable> implements OnChanges {
@Input() entity!: T;
readonly #entityChanged$ = new BehaviorSubject<T>(this.entity);
@Input() selectionEnabled = false;
readonly isSelected$: Observable<boolean>;
constructor(
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
readonly listingService: ListingService<T>,
) {
this.isSelected$ = this.#entityChanged$.pipe(switchMap(entity => this.listingService.isSelected$(entity)));
}
ngOnChanges(): void {
this.#entityChanged$.next(this.entity);
}
toggleEntitySelected($event: MouseEvent, entity: T): void {
$event.stopPropagation();
$event.preventDefault();
this.listingService.select(entity, $event.shiftKey);
}
}