Base class events fail to execute with extended class table interaction.

[st-clair-clarke]

Hi,

I created an AbstractMomentumTable class and extend it for creation of other tables. Bear in mind that styles and template in the abstract class are not inherited when extended, only the relevant controller codes.

In the abstract class I have the following editInit() implementation

My editIni() method popup a dialog as shown below:

editInit( event ) {

import {
  ChangeDetectorRef, Component, EventEmitter, HostBinding, Injector, Input,
  OnInit, Output
} from '@angular/core'
import { FormBuilder } from '@angular/forms'
import { MatDialog } from '@angular/material'
import produce from 'immer'
import * as _ from 'lodash'
import { PimClerkingService } from '../../../../clerking/clerking.service'
import { PimSharedService } from '../../../shared.service'
import { IEventData } from '../../../shared.util'

@Component(
    {
      selector: 'pim-abstract-momentum-table',
      template: `
        <p>
          base-momentum-table works!
        </p>
      `,
      styles: []
    } )
export abstract class PimAbstractMomentumTableComponent implements OnInit {
  @HostBinding( 'style.color' ) protected color: string = 'yellow'
  @Input() protected addTooltip: string = 'Add tooltip'
  @Input() protected collection: Array<any> = []
  @Input() protected columns: Array<Object> = []
  @Input() protected deleteTooltip: string = 'Delete tooltip'
  @Input() protected dialogHeight: string = '200'
  @Input() protected dialogRefComponent
  @Input() protected dialogRefComponentOptions: Array<string>
  @Input() protected dialogWidth: string = '400px'
  @Input() protected expandable = false
  @Input() protected expandMultiple = false
  @Input() protected instance: string = 'none'
  @Input() protected klass: any
  @Input() protected paginator = false
  @Input() protected selectable = true
  @Input() protected selectionHandler = true
  @Input() protected sortField: string = ''
  @Input() protected sortOrderr = 1
  @Input() protected title: string = 'Title'
  @Output() protected eventData = new EventEmitter<IEventData>()
  private _observed
  private dialogData
  protected cdr: ChangeDetectorRef
  protected clerkingSrvc: PimClerkingService
  protected data
  protected dialog: MatDialog
  protected emptyMsg: string = 'loading...'
  protected fb: FormBuilder
  protected rowSelectedIndex: number
  protected selectedRows
  protected sharedSrvc: PimSharedService
  public dialogRef
  
  constructor( injector: Injector ) {
    this.cdr = injector.get( ChangeDetectorRef )
    this.clerkingSrvc = injector.get( PimClerkingService )
    this.dialog = injector.get( MatDialog )
    this.fb = injector.get( FormBuilder )
    this.sharedSrvc = injector.get( PimSharedService )
    this.data = this.sharedSrvc.data
  }

//
  ngOnInit() {
  }
  
  changeSort( event ) {
    console.log( 'sort', event )
  };
  
  rowClick( event ) {
    console.log( 'click', event )
  }
  
  rowSelect( event ) {
    console.log( 'select', event )
  }
  
  rowUnselect( event ) {
    console.log( 'unselect', event )
  }
  
  onSelectionChange( event ) {
    console.log( 'selectionChange', event )
  }
  
  flagHeaderClick( col ) {
    console.log( 'flagHeaderClick ==>', col )
  }
  
  flagClicked( event, row ) {
    console.log( 'flagClicked ==>', row )
  }
  
  rowExpanded( event ) {
    console.log( 'expanded', event )
  }
  
  rowCollapse( event ) {
    console.log( 'collapse', event )
  }
  
  editInit( event ) {
    let eData = event.data
    this.selectedRows = eData
    this.rowSelectedIndex = this.collection.findIndex( k => k == eData )
    
    this.dialogRef = this.dialog.open( this.dialogRefComponent, {
      width: this.dialogWidth,
      height: this.dialogHeight,
      data: { dialogData: eData, options: this.dialogRefComponentOptions }
    } )
    
    this.dialogRef
        .componentInstance
        .eventData
        .subscribe( ( ev: IEventData ) => {
          this.dialogData = ev.data
      
          if ( ev.options ) {
            switch ( ev.options[ 'cmd' ] ) {
              case 'CLOSE_MEDIATOR_DIALOG':
                this.dialogRef.close()
                break
            }
          }
        } )
    
    this.dialogRef.afterClosed()
        .subscribe( ( selection: string ) => {
         
          switch ( selection ) {
            case 'save':
             
              const currentState = produce( this.collection, draft => {
                draft[ this.rowSelectedIndex ] = this.dialogData
                this.cdr.markForCheck()
              } )
          
              Object.assign( this.collection, currentState )
              this.eventData.emit(
                  {
                    data: this.collection,
                    options: { rowSelectedIndex: this.rowSelectedIndex }
                  } )
              break
        
            case 'delete':
              this.deleteSelectedRows()
              break
          }
        } )
  }
  
  editComplete( event ) {
    console.log( 'edit complete', event )
  }
  
  edit( event ) {
    console.log( 'Edit', event )
  }
  
  editCancel( event ) {
    console.log( 'edit cancel', event )
  }
  
  valueChange( event ) {
    console.log( 'valueChange', event )
  }
  
  onFilter( val ) {
    console.log( 'filter change', val )
    if ( !val.length ) {
      this.emptyMsg = 'No data found'
    }
    else {
      this.emptyMsg = ''
    }
  }
  
  tableReload() {
    console.log( 'reload logic' )
    //this.collection.push( new this.klass() )
  }
  
  onPage( val ) {
    console.log( 'pagechange', val )
  }
  
  deleteSelectedRows() {
    
    _.pull( this.collection, this.dialogData )
    console.log('deleteSelectedRows()')
    console.log(this.collection)
    console.log(this.dialogData)
    
  }
}

import { Component, Injector, OnInit } from '@angular/core'
import {
  Cough, ICough
} from '../../../../../core/clerking/rs/cough/cough.model'
import { PimMediatorDialogComponent } from '../../../../../shared/components/mediator/mediator-dialog/mediator-dialog.component'
import {
  IMediator, Mediator
} from '../../../../../shared/components/mediator/mediator.model'
import { PimAbstractMomentumTableComponent } from '../../../../../shared/ui/3rd-party/abstract-momentum-table/abstract-momentum-table.component'

@Component(
    {
      selector: 'pim-cough-momentum-table',
      template: `
        <m-table
            [value] = 'collection'
            [sortField] = 'sortField'
            [sortOrder] = 'sortOrder'
            (onSort) = 'changeSort($event)'
            (onRowClick) = 'rowClick($event)'
            [selectable] = 'selectable'
            [selectionMode] = 'multiple'
            [selectionHandler] = 'selectionHandler'
            (onRowSelect) = 'rowSelect($event)'
            (onRowUnselect) = 'rowUnselect($event)'
            (selectionChange) = 'onSelectionChange($event)'
            [(selection)] = 'selectedRows'
            [expandable] = 'expandable'
            [expandMultiple] = 'expandMultiple'
            (onRowExpand) = 'rowExpanded($event)'
            (onRowCollapse) = 'rowCollapse($event)'
            (onEditComplete) = 'editComplete($event)'
            (onEditInit) = 'editInit($event)'
            (onEdit) = 'edit($event)'
            (onEditCancel) = 'editCancel($event)'
            (valueChange) = 'valueChange($event)'
            (onFilter) = 'onFilter($event)'
            (onReload) = 'tableReload()'
            (onPage) = 'onPage($event)'>

          <m-header
              [title] = "title"
              [globalSearch] = "true"
              [colSetting] = "true"
              [reload] = "true"
              [export] = "true">
          </m-header>
          <m-footer
              *ngIf = 'paginator'
              [paginator] = 'paginator'></m-footer>

          <m-column
              *ngFor = 'let col of columns'
              [editable] = 'col.editable'
              [sortable] = 'col.sortable'
              [field] = 'col.field'
              [header] = 'col.header'></m-column>

          <ng-template mTemplate = "emptyTable">
            {{emptyMsg}}
          </ng-template>
        </m-table>
      
      `,
      styles: [ `
                  :host {
                    --table-height: 200px;
                    --column-padding: 0 28px;
                    --first-column-padding: 0 0 0 24px;
                    --last-column-padding: 0 24px 0 0;

                    --row-height: 47px;
                    --table-header-height: 40px;
                    /*--table-footer-height: 51px;*/

                    /*--card-footer-height: 64px;*/
                    --card-footer-height: 56px;
                  }
      
                ` ]
    } )
export class PimCoughMomentumTableComponent extends PimAbstractMomentumTableComponent implements OnInit {
  protected columns = [
    {
      header: 'Mediator *', field: 'mediator', editable: 'editable',
      sortable: true
    },
    {
      header: 'Alleviator', field: 'alleviator', editable: 'editable',
      sortable: true
    },
    {
      header: 'Exacerbator', field: 'exacerbator', editable: 'editable',
      sortable: true
    },
    {
      header: 'Precipitant', field: 'precipitant', editable: 'editable',
      sortable: true
    }
  ]
  protected cough: ICough = new Cough()
  protected mediator: IMediator = new Mediator()
  protected dialogRefComponent = PimMediatorDialogComponent
  protected klass = Cough
  protected selectedRows
  
  constructor( injector: Injector ) {
    super( injector )
  }
  
  rowSelect( event ) {
    console.log( 'select', event )
    super.rowSelect(event)
  }
  
  ngOnInit() {
    super.ngOnInit()
    this.collection.push( this.mediator )
    let currentRowSelectedIndex = -1
    let previousRowSelectedIndex = -1
    
    this.eventData.subscribe( evd => {
      let data = evd.data
      currentRowSelectedIndex = evd.options.rowSelectedIndex
     
      if ( currentRowSelectedIndex !== previousRowSelectedIndex ) {
        this.collection.push( new Mediator() )
      }
  
      console.log({previousRowSelectedIndex, currentRowSelectedIndex, })
      if ( currentRowSelectedIndex == previousRowSelectedIndex ) {
        console.log(this.collection)
        this.collection = data
        console.log(this.collection)
      }
      
      previousRowSelectedIndex = currentRowSelectedIndex
      
      console.log( 'selectedRows', this.selectedRows )
      
    } )
  }
  
}

However, once this occurs, most of the other events do not fire.

Any help will be appreciated.

Cheers