@ -19,6 +19,7 @@ import {
TemplateRef , TemplateRef ,
TrackByFunction , TrackByFunction ,
ViewChild , ViewChild ,
input
} from '@angular/core' ; } from '@angular/core' ;
import { AsyncPipe , isPlatformBrowser , NgComponentOutlet , NgTemplateOutlet } from '@angular/common' ; import { AsyncPipe , isPlatformBrowser , NgComponentOutlet , NgTemplateOutlet } from '@angular/common' ;
@ -109,8 +110,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
} }
@Input ( ) data ! : R [ ] ; @Input ( ) data ! : R [ ] ;
@Input ( ) list ! : ListService ; readonly list = input . required < ListService > ( ) ;
@Input ( ) recordsTotal ! : number ; readonly recordsTotal = input . required < number > ( ) ;
@Input ( ) set actionsColumnWidth ( width : number ) { @Input ( ) set actionsColumnWidth ( width : number ) {
this . _actionsColumnWidth . set ( width ? Number ( width ) : undefined ) ; this . _actionsColumnWidth . set ( width ? Number ( width ) : undefined ) ;
@ -120,25 +121,25 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
@Output ( ) tableActivate = new EventEmitter ( ) ; @Output ( ) tableActivate = new EventEmitter ( ) ;
@Input ( ) selectable = false ; readonly selectable = input ( false ) ;
@Input ( ) set selectionType ( value : SelectionType | string ) { @Input ( ) set selectionType ( value : SelectionType | string ) {
this . _selectionType = typeof value === 'string' ? SelectionType [ value ] : value ; this . _selectionType = typeof value === 'string' ? SelectionType [ value ] : value ;
} }
_selectionType : SelectionType = SelectionType . multiClick ; _selectionType : SelectionType = SelectionType . multiClick ;
@Input ( ) selected : any [ ] = [ ] ; readonly selected = input < any [ ] > ( [ ] ) ;
@Output ( ) selectionChange = new EventEmitter < any [ ] > ( ) ; @Output ( ) selectionChange = new EventEmitter < any [ ] > ( ) ;
// Infinite scroll configuration
// Infinite scroll configuration
@Input ( ) infiniteScroll = false ; readonly infiniteScroll = input ( false ) ;
@Input ( ) isLoading = false ; readonly isLoading = input ( false ) ;
@Input ( ) scrollThreshold = 10 ; readonly scrollThreshold = input ( 10 ) ;
@Output ( ) loadMore = new EventEmitter < void > ( ) ; @Output ( ) loadMore = new EventEmitter < void > ( ) ;
@Input ( ) tableHeight : number ; readonly tableHeight = input < number > ( undefined ) ;
@Input ( ) rowDetailTemplate? : TemplateRef < RowDetailContext < R > > ; readonly rowDetailTemplate = input < TemplateRef < RowDetailContext < R > >> ( undefined ) ;
@Input ( ) rowDetailHeight : string | number = '100%' ; readonly rowDetailHeight = input < string | number > ( '100%' ) ;
@Output ( ) rowDetailToggle = new EventEmitter < R > ( ) ; @Output ( ) rowDetailToggle = new EventEmitter < R > ( ) ;
@ContentChild ( ExtensibleTableRowDetailComponent ) @ContentChild ( ExtensibleTableRowDetailComponent )
@ -147,11 +148,11 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
@ViewChild ( 'table' , { static : false } ) table ! : DatatableComponent ; @ViewChild ( 'table' , { static : false } ) table ! : DatatableComponent ;
protected get effectiveRowDetailTemplate ( ) : TemplateRef < RowDetailContext < R > > | undefined { protected get effectiveRowDetailTemplate ( ) : TemplateRef < RowDetailContext < R > > | undefined {
return this . rowDetailComponent ? . template ( ) ? ? this . rowDetailTemplate ; return this . rowDetailComponent ? . template ( ) ? ? this . rowDetailTemplate ( ) ;
} }
protected get effectiveRowDetailHeight ( ) : string | number { protected get effectiveRowDetailHeight ( ) : string | number {
return this . rowDetailComponent ? . rowHeight ( ) ? ? this . rowDetailHeight ; return this . rowDetailComponent ? . rowHeight ( ) ? ? this . rowDetailHeight ( ) ;
} }
hasAtLeastOnePermittedAction : boolean ; hasAtLeastOnePermittedAction : boolean ;
@ -220,7 +221,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
if ( ! data ? . currentValue ) return ; if ( ! data ? . currentValue ) return ;
if ( data . currentValue . length < 1 ) { if ( data . currentValue . length < 1 ) {
this . list . totalCount = this . recordsTotal ; this . list ( ) . totalCount = this . recordsTotal ( ) ;
} }
this . data = data . currentValue . map ( ( record : any , index : number ) = > { this . data = data . currentValue . map ( ( record : any , index : number ) = > {
@ -278,8 +279,9 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
} }
onSelect ( { selected } ) { onSelect ( { selected } ) {
this . selected . splice ( 0 , this . selected . length ) ; const selectedValue = this . selected ( ) ;
this . selected . push ( . . . selected ) ; this . selected ( ) . splice ( 0 , selectedValue . length ) ;
selectedValue . push ( . . . selected ) ;
this . selectionChange . emit ( selected ) ; this . selectionChange . emit ( selected ) ;
} }
@ -299,12 +301,12 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
} }
private shouldHandleScroll ( ) : boolean { private shouldHandleScroll ( ) : boolean {
return this . infiniteScroll && ! this . isLoading ; return this . infiniteScroll ( ) && ! this . isLoading ( ) ;
} }
private isNearScrollBottom ( element : HTMLElement ) : boolean { private isNearScrollBottom ( element : HTMLElement ) : boolean {
const { offsetHeight , scrollTop , scrollHeight } = element ; const { offsetHeight , scrollTop , scrollHeight } = element ;
return offsetHeight + scrollTop >= scrollHeight - this . scrollThreshold ; return offsetHeight + scrollTop >= scrollHeight - this . scrollThreshold ( ) ;
} }
private triggerLoadMore ( ) : void { private triggerLoadMore ( ) : void {
@ -312,9 +314,10 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
} }
getTableHeight() { getTableHeight() {
if ( ! this . infiniteScroll ) return 'auto' ; if ( ! this . infiniteScroll ( ) ) return 'auto' ;
return this . tableHeight ? ` ${ this . tableHeight } px ` : 'auto' ; const tableHeight = this . tableHeight ( ) ;
return tableHeight ? ` ${ tableHeight } px ` : 'auto' ;
} }
toggleExpandRow ( row : R ) : void { toggleExpandRow ( row : R ) : void {
@ -325,8 +328,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
} }
ngAfterViewInit ( ) : void { ngAfterViewInit ( ) : void {
if ( ! this . infiniteScroll ) { if ( ! this . infiniteScroll ( ) ) {
this . list ? . requestStatus $ ? . pipe ( filter ( status = > status === 'loading' ) ) . subscribe ( ( ) = > { this . list ( ) ? . requestStatus $ ? . pipe ( filter ( status = > status === 'loading' ) ) . subscribe ( ( ) = > {
this . data = [ ] ; this . data = [ ] ;
this . cdr . markForCheck ( ) ; this . cdr . markForCheck ( ) ;
} ) ; } ) ;
Fahri Gedik
9 months ago