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

Angular 9 Code Generator

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Store } from '@ngrx/store';
import { NgRxCoreAngularAlertActions, NgRxCoreAngularNavActions } from '@zionapps/ngrx-angular';
import { getIdPropertyValue } from '@zionapps/core';
import { INgRxCoreMeta } from '@zionapps/ngrx-core';
import { Subscription } from 'rxjs/Subscription';<% if (ngRxSubStoreLocation === '@zionapps/ngrx-management') { %>
import { ManagementUserSelectors, <%= pascalCase(singularDomainName) %>, <%= pascalCase(pluralDomainName) %>Actions, <%= pascalCase(singularDomainName) %>Selectors } from '@zionapps/ngrx-management';<% } else if (ngRxSubStoreLocation) { %>
import { ManagementUserSelectors } from '@zionapps/ngrx-management';
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';<% } %>
import { <%= pascalCase(singularDomainName) %>FormComponent } from './<%= paramCase(singularDomainName) %>-form/<%= paramCase(singularDomainName) %>-form.component';

@Component({
  selector: 'app-<%= paramCase(singularDomainName) %>-edit',
  templateUrl: './<%= paramCase(singularDomainName) %>-edit.component.html',
  styleUrls: ['./<%= paramCase(singularDomainName) %>-edit.component.scss'],
})
export class <%= pascalCase(singularDomainName) %>EditComponent implements OnInit, OnDestroy {
  @ViewChild('form') formComponent: <%= pascalCase(singularDomainName) %>FormComponent;
  currentId: number;
  <%= camelCase(singularDomainName) %>$ = this.store$.select(<%= pascalCase(singularDomainName) %>Selectors.Current);
  hasAccess$ = this.store$.select(ManagementUserSelectors.HasAccess);
  isNew = true;
  title: string;
  readonly meta: INgRxCoreMeta;
  private paramsSubscription: Subscription;
  private queryParamsSubscription: Subscription;
  private returnUrl: string;

  constructor(private route: ActivatedRoute, private store$: Store<any>) {
    this.meta = { source: '<%= pascalCase(singularDomainName) %>EditComponent' };
  }

  ngOnInit(): void {
    this.paramsSubscription = this.route.params.subscribe((params: Params) => {
      this.currentId = +params['id'];
      if (this.currentId) {
        this.isNew = false;
        this.title = 'Edit <%= titleCase(singularDomainName) %>';
      } else {
        this.title = 'Add <%= titleCase(singularDomainName) %>';
      }
    });
    this.queryParamsSubscription = this.route.queryParams.subscribe((params: Params) => {
      this.returnUrl = params['returnUrl'] || '/<%= paramCase(componentName) %>';
    });
  }

  ngOnDestroy(): void {
    this.store$.dispatch(<%= pascalCase(pluralDomainName) %>Actions.ClearCurrentId());
    if (this.paramsSubscription) {
      this.paramsSubscription.unsubscribe();
    }
    if (this.queryParamsSubscription) {
      this.queryParamsSubscription.unsubscribe();
    }
  }

  onDeleteRequest(<%= camelCase(singularDomainName) %>: <%= pascalCase(singularDomainName) %>): void {
    const id = getIdPropertyValue(<%= camelCase(singularDomainName) %>, 'id');
    if (id) {
      this.store$.dispatch(NgRxCoreAngularAlertActions.ShowConfirm({
        cancelText: 'No',
        buttonText: 'Yes',
        handler: (willDelete: boolean) => {
          if (willDelete) {
            this.store$.dispatch(<%= pascalCase(pluralDomainName) %>Actions.DeleteOneRemoteRequest(id, this.meta));
          }
        },
        message: 'Are you sure you want to delete this <%= lowerCase(sentenceCase(singularDomainName)) %>? This action cannot be undone.',
        title: 'Confirm Deleting <%= titleCase(singularDomainName) %>',
      }, this.meta));
    } else {
      this.store$.dispatch(NgRxCoreAngularAlertActions.ShowAlert({
        buttonText: 'Ok',
        message: 'An unknown error occurred. The <%= lowerCase(sentenceCase(singularDomainName)) %> could not be removed',
        title: '<%= titleCase(singularDomainName) %> Error',
      }, this.meta));
    }
  }

  onGoBack(): void {
    this.store$.dispatch(NgRxCoreAngularNavActions.NavigateByUrlRequest(this.returnUrl, this.meta));
  }

  onRightButtonClick(): void {
    this.onSaveRequest(this.formComponent.form.getRawValue());
  }

  onSaveRequest(<%= camelCase(singularDomainName) %>: <%= pascalCase(singularDomainName) %>): void {
    if (<%= camelCase(singularDomainName) %>) {
      const id = getIdPropertyValue(<%= camelCase(singularDomainName) %>, 'id');
      if (!id) {
        this.store$.dispatch(<%= pascalCase(pluralDomainName) %>Actions.CreateOneRemoteRequest(<%= camelCase(singularDomainName) %>, this.meta));
      } else {
        this.store$.dispatch(<%= pascalCase(pluralDomainName) %>Actions.UpdateOneRemoteRequest(<%= camelCase(singularDomainName) %>, this.meta));
      }
    } else {
      this.store$.dispatch(NgRxCoreAngularAlertActions.ShowAlert({
        buttonText: 'Ok',
        message: 'An unknown error occurred. The <%= lowerCase(sentenceCase(singularDomainName)) %> could not be saved',
        title: '<%= titleCase(singularDomainName) %> Error',
      }, this.meta));
    }
  }
}