Añadir detalle a las sucursales

Introducción

En este tutorial veremos como se añade un formulario de detalle a las sucursales que permita obtener un resumen de las cuentas que pertenecen a dicha sucursal, el titular de la cuenta, el balance de dichas cuentas y el capital que posee la sucursal.

Crear formulario de detalle

Procedemos a crear el formulario de detalle para visualizar los detalles. Esta vez, se creará un formulario detalle que contiene campos y una tabla, similar al siguiente mockup.

tutorial_o_web_30.png

Ejecutamos el siguiente comando, situándonos primero dentro de la carpeta src/app/main/branches

npx ng g component --skip-tests branches-detail

branches.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OntimizeWebModule } from 'ontimize-web-ngx';
import { BranchesRoutingModule } from './branches-routing.module';
import { BranchesHomeComponent } from './branches-home/branches-home.component';
import { BranchesDetailComponent } from './branches-detail/branches-detail.component';


@NgModule({
  declarations: [
    BranchesHomeComponent,
    BranchesDetailComponent
  ],
  imports: [
    CommonModule,
    OntimizeWebModule,
    BranchesRoutingModule
  ]
})
export class BranchesModule { }

branches-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BranchesHomeComponent } from './branches-home/branches-home.component';
import { BranchesDetailComponent } from './branches-detail/branches-detail.component';

const routes: Routes = [{
  path: '',
  component: BranchesHomeComponent
},
{
  path: ":OFFICEID",
  component: BranchesDetailComponent
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BranchesRoutingModule { }

branches-detail.component.html

<o-form service="branches" entity="branch" keys="OFFICEID" header-actions="R;U;D" show-header-navigation="no">
    <o-column title="{{ 'BRANCH_INFORMATION' | oTranslate }}">
        <div fxLayout="row" fxLayoutGap="8px">
            <o-text-input fxFlex="15" attr="OFFICEID" sql-type="STRING" enabled="no" required="yes"></o-text-input>
            <o-text-input fxFlex="85" attr="NAME" required="yes"></o-text-input>
        </div>
        <div fxLayout="row" fxLayoutGap="8px">
            <o-text-input fxFlex="15" attr="PHONE" step="0" grouping="no"></o-text-input>
            <o-date-input fxFlex="15" attr="STARTDATE"></o-date-input>
            <o-text-input fxFlex="70" attr="ADDRESS"></o-text-input>
        </div>
    </o-column>
    <o-row title="{{ 'CUSTOMERS_INFORMATION' | oTranslate }}">
        <o-table fxFlex attr="customerAccountTable" service="customers" entity="vCustomerAccount" parent-keys="OFFICEID"
            columns="ID;NAME;SURNAME;CUSTOMERID" visible-columns="ID;NAME;SURNAME" insert-button="no" keys="CUSTOMERID"
            query-rows="5">
            <o-table-column attr="ID" title="ID"></o-table-column>
            <o-table-column attr="NAME" title="NAME"></o-table-column>
            <o-table-column attr="SURNAME" title="SURNAME"></o-table-column>
        </o-table>
    </o-row>
</o-form>

La <o-table> muestra por defecto un contenido mínimo de 400px. Como queremos que esta sea una altura menor debemos modificar el fichero branches-detail.component.css del componente. Sin embargo, para afectar al componente <o-table>, tiene que evitar la encapsulación de componentes que usa Angular, por lo que se le añade al fichero branches-detail.component.ts la opción de ViewEncapsulation.None

branches-detail.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-branches-detail',
  templateUrl: './branches-detail.component.html',
  styleUrls: ['./branches-detail.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class BranchesDetailComponent {

}

Al eliminar la encapsulación de Angular, todo lo que se ponga en el CSS afectaría a todos los elementos que sean cargados a posteriori, por lo que tenemos que particularizar el CSS con el selector del componente

branches-detail.component.css

app-branches-detail .o-table .o-table-container {
  min-height: 350px;
}

en.json

{
  ...
  "BRANCH_INFORMATION":"Branch information",
  "CUSTOMERS_INFORMATION":"Branch customers information",
  "BALANCE":"Balance"
}

es.json

{
  ...
  "BRANCH_INFORMATION":"Información de la sucursal",
  "CUSTOMERS_INFORMATION":"Clientes de la sucursal",
  "BALANCE":"Balance"
}

Crear un formulario de insercción

En este formulario, eliminaremos la tabla de las cuentas y clientes asociados. Creamos el formulario con el siguiente comando:

npx ng g component --skip-tests branches-new

branches.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OntimizeWebModule } from 'ontimize-web-ngx';
import { BranchesRoutingModule } from './branches-routing.module';
import { BranchesHomeComponent } from './branches-home/branches-home.component';
import { BranchesDetailComponent } from './branches-detail/branches-detail.component';
import { BranchesNewComponent } from './branches-new/branches-new.component';


@NgModule({
  declarations: [
    BranchesHomeComponent,
    BranchesDetailComponent,
    BranchesNewComponent
  ],
  imports: [
    CommonModule,
    OntimizeWebModule,
    BranchesRoutingModule
  ]
})
export class BranchesModule { }

branches-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BranchesHomeComponent } from './branches-home/branches-home.component';
import { BranchesDetailComponent } from './branches-detail/branches-detail.component';
import { BranchesNewComponent } from './branches-new/branches-new.component';

const routes: Routes = [{
  path: '',
  component: BranchesHomeComponent
},
{
  path: "new",
  component: BranchesNewComponent
},
{
  path: ':OFFICEID',
  component: BranchesDetailComponent
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BranchesRoutingModule { }

branches-new.component.html

<o-form attr="branchesNew" service="branches" entity="branch" keys="OFFICEID">
    <o-column title="{{ 'BRANCH_INFORMATION' | oTranslate }}">
        <div fxLayout="row" fxLayoutGap="8px">
            <o-text-input fxFlex="15" class="input-padding" attr="OFFICEID" sql-type="STRING" enabled="yes"
                required="yes"></o-text-input>
            <o-text-input fxFlex="85" attr="NAME" required="yes"></o-text-input>
        </div>
        <div fxLayout="row" fxLayoutGap="8px">
            <o-text-input fxFlex="15" attr="PHONE" class="input-padding" step="0" grouping="no"></o-text-input>
            <o-date-input fxFlex="15" attr="STARTDATE" class="input-padding"></o-date-input>
            <o-text-input fxFlex="70" attr="ADDRESS"></o-text-input>
        </div>
    </o-column>
</o-form>

arrow_back Tutorial anterior Próximo tutorial arrow_forward