Crear una nueva cuenta e insertar un cliente

Introducción

En este tutorial, permitiremos que se pueda crear una nueva cuenta asociada al cliente actual.

Modificar el formulario para la nueva opción

En este caso, modificaremos el formulario existente para incluir un botón que permita añadir una nueva cuenta e insertar ese cliente. Será necesario tanto modificar el html para el botón, como el ts para pasarle los datos a un nuevo componente

customers-detail.component.html

<o-form #form attr="customerDetail" service="customers" entity="customer" keys="CUSTOMERID" header-actions="R;I;U;D"
    show-header-navigation="no" class="fill-form">
    <o-text-input attr="CUSTOMERID" sql-type="INTEGER" enabled="no"></o-text-input>
    <div fxFlex fxLayout="row" fxLayoutGap="8px">
        <div>
            <o-image id="CUSTOMER_PHOTO" attr="PHOTO" empty-image="assets/images/no-image.png"
                sql-type="OTHER"></o-image>
        </div>
        <mat-tab-group fxFlex>
            <mat-tab label="{{ 'CUSTOMER_PERSONAL_INFORMATION' | oTranslate }}">
                <div fxLayout="row" fxLayoutGap="8px">
                    <o-text-input fxFlex="40" attr="NAME" required="yes"></o-text-input>
                    <o-text-input fxFlex="40" attr="SURNAME" required="yes"></o-text-input>
                    <o-date-input fxFlex="20" attr="STARTDATE"></o-date-input>
                </div>
                <div fxLayout="row" fxLayoutGap="8px">
                    <o-nif-input fxFlex="40" attr="ID" required="yes"></o-nif-input>
                    <o-integer-input fxFlex="40" attr="PHONE" step="0" thousand-separator=" "></o-integer-input>
                    <o-combo fxFlex="20" attr="CUSTOMERTYPEID" service="customers" entity="customerType"
                        keys="CUSTOMERTYPEID" columns="CUSTOMERTYPEID;DESCRIPTION" visible-columns="DESCRIPTION"
                        value-column="CUSTOMERTYPEID"></o-combo>
                </div>
                <o-email-input attr="EMAIL"></o-email-input>
                <o-text-input attr="ADDRESS"></o-text-input>
                <div fxLayout="row" fxLayoutGap="8px">
                    <o-real-input fxFlex="50" attr="LONGITUDE" decimal-separator="," max-decimal-digits="10"
                        min-decimal-digits="0"></o-real-input>
                    <o-real-input fxFlex="50" attr="LATITUDE" decimal-separator="," max-decimal-digits="10"
                        min-decimal-digits="0"></o-real-input>
                </div>
                <o-textarea-input attr="COMMENTS"></o-textarea-input>
            </mat-tab>
            <mat-tab label="{{ 'ACCOUNTS' | oTranslate }}">
                <o-table #accountCustomerTable attr="accountsTable" service="customers" entity="vCustomerAccount"
                    keys="ACCOUNTID" parent-keys="CUSTOMERID" insert-button="no" refresh-button="yes"
                    detail-mode="dblclick" delete-button="no" query-rows="20"
                    columns="CUSTOMERID;ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
                    visible-columns="ACCOUNTNUMBER;STARTDATE;ENDDATE;INTERESRATE;INTERESRATE_MONTHLY;ACCOUNTTYP">
                    <o-table-button attr="openAccount" (onClick)="openAccountDetailSelected()"
                        label="{{ 'OPEN_ACCOUNT_SELECTED' | oTranslate }}" icon="credit_card"></o-table-button>
                    <o-table-button attr="createAccount" (onClick)="createNewAccount()"
                        label="{{ 'CREATE_ACCOUNT' | oTranslate }}" icon="add_card"></o-table-button>
                    <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
                    <o-table-column attr="ENDDATE" title="ENDDATE" type="date" format="LL"></o-table-column>
                    <o-table-column attr="INTERESRATE" title="INTERESRATE" type="percentage" width="150px"
                        decimal-separator="," content-align="center"></o-table-column>
                    <o-table-column attr="ACCOUNTNUMBER" title="ACCOUNTNUMBER" content-align="center">
                        <app-account-number-render></app-account-number-render>
                    </o-table-column>
                    <o-table-column-calculated attr="INTERESRATE_MONTHLY" title="INTERESRATE_MONTHLY"
                        [operation-function]="intRateMonthly" type="percentage" decimal-separator=","
                        content-align="center">
                    </o-table-column-calculated>
                </o-table>
            </mat-tab>
        </mat-tab-group>
    </div>
</o-form>

customers-detail.component.ts

import { Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { OFormComponent, OTableComponent } from 'ontimize-web-ngx';
import { intRateMonthlyFunction } from 'src/app/shared/shared.module';
import { AddAccountComponent } from './add-account/add-account.component';

@Component({
  selector: 'app-customers-detail',
  templateUrl: './customers-detail.component.html',
  styleUrls: ['./customers-detail.component.css']
})
export class CustomersDetailComponent {

  @ViewChild('accountCustomerTable') accountTable: OTableComponent;
  @ViewChild('form') form: OFormComponent;
  public intRateMonthly = intRateMonthlyFunction;

  constructor(
    private router: Router,
    public dialog: MatDialog
  ) { }

  public openAccountDetailSelected() {
    let selected = this.accountTable.getSelectedItems();
    if (selected.length === 1) {
      let accountId = selected[0]['ACCOUNTID'];
      let customerId = selected[0]['CUSTOMERID'];
      this.router.navigate(['main/customers/' + customerId + '/' + accountId], { queryParams: { isdetail: true } });
    }
  }

  public createNewAccount() {
    let customerId = this.form.getFieldValue('CUSTOMERID');
    let date = new Date().getTime();
    this.dialog.open(AddAccountComponent, {
      data: {
        CUSTOMERID: customerId,
        STARTDATE: date
      }, disableClose: false
    })
  }

}

Creación del nuevo componente

Crearemos el nuevo componente para crear una nueva cuenta. Para ello ejecutamos el siguiente comando dentro de la carpeta customers-detail

npx ng g c --skip-tests add-account

add-account.component.html

<div mat-dialog-content>
    <o-form #form (onFormModeChange)="forceInsertMode($event)" (onInsert)="closeDialog($event)" service="branches"
        entity="account" show-header="yes" after-insert-mode="new" undo-button="no" ignore-default-navigation="yes">
        <o-combo attr="OFFICEID" label="OFFICEID" service="branches" entity="branch" value-column="OFFICEID"
            columns="OFFICEID;NAME" visible-columns="NAME" read-only="no" required="yes"></o-combo>
        <o-integer-input oHidden attr="CUSTOMERID"></o-integer-input>
        <o-date-input attr="STARTDATE"></o-date-input>
    </o-form>
</div>

add-account.component.ts

import { Component, Inject, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { OFormComponent } from 'ontimize-web-ngx';

@Component({
  selector: 'app-add-account',
  templateUrl: './add-account.component.html',
  styleUrls: ['./add-account.component.css']
})
export class AddAccountComponent {

  @ViewChild('form') form: OFormComponent;
  public dialog: MatDialogModule;
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<AddAccountComponent>
  ) { }

  public forceInsertMode(event: any) {
    if (event != OFormComponent.Mode().INSERT) {
      this.form.setInsertMode();
      this.form.setFieldValues(this.data)
    }
  }

  public closeDialog(event: any) {
    this.dialogRef.close();
  }

}

Añadimos este nuevo componente al array de declaraciones del módulo de cliente.

customers.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OntimizeWebModule } from 'ontimize-web-ngx';
import { CustomersRoutingModule } from './customers-routing.module';
import { CustomersHomeComponent } from './customers-home/customers-home.component';
import { CustomersDetailComponent } from './customers-detail/customers-detail.component';
import { CustomersNewComponent } from './customers-new/customers-new.component';
import { SharedModule } from 'src/app/shared/shared.module';
import { AddAccountComponent } from './customers-detail/add-account/add-account.component';


@NgModule({
  declarations: [
    CustomersHomeComponent,
    CustomersDetailComponent,
    CustomersNewComponent,
    AddAccountComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    OntimizeWebModule,
    CustomersRoutingModule
  ]
})
export class CustomersModule { }

Por último añadimos las nuevas traducciones

en.json

{
  ...
  "CREATE_ACCOUNT": "Create account"
}

es.json

{
  ...
  "CREATE_ACCOUNT": "Crear cuenta"
}

arrow_back Tutorial anterior Próximo tutorial arrow_forward