generator-zionapps/generators/app/angular/table-view/templates/components/item-table/item-table.component.ts

Angular 9 Code Generator

import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core';
import { MatPaginator } from '@angular/material';
import { Store } from '@ngrx/store';
import { INgRxCoreMeta, NgRxCorePlatformSelectors } from '@zionapps/ngrx-core';<% if (ngRxSubStoreLocation) { %>
import { <%= pascalCase(singularDomainName) %>, <%= pascalCase(pluralDomainName) %>Actions, <%= pascalCase(singularDomainName) %>Selectors } from '<%= ngRxSubStoreLocation %>';<% } else { %>
import { <%= pascalCase(pluralDomainName) %>Actions } from '../../../../store/<%= paramCase(pluralDomainName) %>/<%= paramCase(pluralDomainName) %>.actions';
import { <%= pascalCase(singularDomainName) %> } from '../../../../store/<%= paramCase(pluralDomainName) %>/<%= paramCase(pluralDomainName) %>.domain';
import { <%= pascalCase(singularDomainName) %>Selectors } from '../../../../store/<%= paramCase(pluralDomainName) %>/<%= paramCase(pluralDomainName) %>.selectors';<% } %>

@Component({
  selector: 'app-<%= paramCase(pluralDomainName) %>-responsive-table',
  templateUrl: './<%= paramCase(pluralDomainName) %>-responsive-table.component.html',
  styleUrls: ['./<%= paramCase(pluralDomainName) %>-responsive-table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class <%= pascalCase(pluralDomainName) %>ResponsiveTableComponent implements OnChanges {
  @Input() hasAccess: boolean;
  @Input() pageSizeOptions: number[];
  @Input() paginator: MatPaginator;
  @Output() edit<%= pascalCase(singularDomainName) %> = new EventEmitter<<%= pascalCase(singularDomainName) %>>();
  @Output() view<%= pascalCase(singularDomainName) %> = new EventEmitter<<%= pascalCase(singularDomainName) %>>();<% if (avatarImageUrl !== '') { %>
  avatarImageUrl = '<%= avatarImageUrl %>';<% } %>
  columns = [
    { header: 'Id', property: 'id' },
    { header: 'Title', property: 'title' },
    { header: 'Category', property: 'category' },
  ];
  <%= camelCase(pluralDomainName) %>$ = this.store$.select(<%= pascalCase(singularDomainName) %>Selectors.All);<% if (fallbackAvatarUrl !== '') { %>
  fallbackAvatarUrl = '<%= fallbackAvatarUrl %>';<% } %>
  mobileView$ = this.store$.select(NgRxCorePlatformSelectors.BreakPointMediumOrSmaller);
  readonly meta: INgRxCoreMeta;

  constructor(private store$: Store<any>) {
    this.meta = { source: '<%= pascalCase(pluralDomainName) %>ResponsiveTableComponent' };
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.hasAccess) {
      this.handleAccessChanges(changes.hasAccess);
    }
  }

  onEdit<%= pascalCase(singularDomainName) %>(<%= camelCase(singularDomainName) %>: <%= pascalCase(singularDomainName) %>) {
    this.edit<%= pascalCase(singularDomainName) %>.emit(<%= camelCase(singularDomainName) %>);
  }

  onRowClick(<%= camelCase(singularDomainName) %>: <%= pascalCase(singularDomainName) %>) {
    this.view<%= pascalCase(singularDomainName) %>.emit(<%= camelCase(singularDomainName) %>);
  }

  private handleAccessChanges(change: SimpleChange): void {
    const { currentValue, previousValue } = change;
    if (!previousValue && currentValue) {
      this.store$.dispatch(<%= pascalCase(pluralDomainName) %>Actions.FetchAllRemoteRequest());
    }
  }
}