Crear formularios de sucursales y cuentas

Sucursales

Crear el módulo de sucursales

Nos situamos dentro de la carpeta main, ejecutamos el comando para crear el módulo de sucursales y modificamos los ficheros para declarar este módulo dentro de la aplicación:

npx ng g module --routing branches

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';


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

main-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from 'ontimize-web-ngx';

import { MainComponent } from './main.component';

export const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [AuthGuardService],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
      { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) },
      { path: 'employees', loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule) },
      { path: 'branches', loadChildren: () => import('./branches/branches.module').then(m => m.BranchesModule) }
    ]
  }
];

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

Crear el formulario de sucursales

Una vez definido el módulo de sucursales, definiremos el formulario principal de la sucursal, para replicar el siguiente mockup. Nos situamos dentro de la capeta branches creada en el paso anterior, y ejecutamos el comando:

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

tutorial_o_web_20.png

branches-home.component.html

<o-form-layout-manager attr="branchesHome" title="{{'BRANCHES' | oTranslate }}" separator=" " mode="dialog" label-columns="NAME">
    <o-table attr="branchesTable" service="branches" entity="branch" keys="OFFICEID"
        columns="NAME;ADDRESS;STARTDATE;PHONE;OFFICEID" visible-columns="NAME;ADDRESS;STARTDATE;PHONE" query-rows="15">
        <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column>
    </o-table>
</o-form-layout-manager>

branches-routing.module.ts

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

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

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

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';


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

app.menu.config.ts

import { MenuRootItem } from 'ontimize-web-ngx';

export const MENU_CONFIG: MenuRootItem[] = [
  { id: 'home', name: 'HOME', icon: 'home', route: '/main/home' },
  { id: 'customers', name: 'CUSTOMERS', icon: 'people', route: '/main/customers' },
  { id: 'employees', name: 'EMPLOYEES', icon: 'business_center', route: '/main/employees' },
  { id: 'branches', name: 'BRANCHES', icon: 'account_balance', route: '/main/branches' },
  { id: 'logout', name: 'LOGOUT', route: '/login', icon: 'power_settings_new', confirm: 'yes' }
];

en.json

{
...
"BRANCHES": "Branches"
}

es.json

{
...
"BRANCHES": "Sucursales"
}

tutorial_o_web_21.png

Cuentas

De la misma manera que se ha creado el módulo y el formulario para las sucursales, crearemos otro módulo, esta vez para las cuentas.

Crear el módulo de cuentas

Nos situamos en el directorio src/app/main y ejecutamos el comando:

npx ng g module --routing accounts

accounts.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OntimizeWebModule } from 'ontimize-web-ngx';
import { AccountsRoutingModule } from './accounts-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    OntimizeWebModule,
    AccountsRoutingModule
  ]
})
export class AccountsModule { }

main-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from 'ontimize-web-ngx';

import { MainComponent } from './main.component';

export const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [AuthGuardService],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
      { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) },
      { path: 'employees', loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule) },
      { path: 'branches', loadChildren: () => import('./branches/branches.module').then(m => m.BranchesModule) },
      { path: 'accounts', loadChildren: () => import('./accounts/accounts.module').then(m => m.AccountsModule) }
    ]
  }
];

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

Crear el formulario de cuentas

Para crear el formulario, nos situamos dentro de la carpeta accounts que hemos creado en el punto anterior y ejecutamos el siguiente comando:

npx ng g component --skip-tests accounts-home

Adaptaremos el componente para realizar un formulario similar a este mockup

tutorial_o_web_22.png

accounts-home.component.html

<o-form-layout-manager attr="accountsHome" title="{{'ACCOUNTS' | oTranslate }}" separator=" " mode="dialog" label-columns="ANID">
    <o-table attr="accountsTable" service="branches" entity="account" keys="ACCOUNTID"
        columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
        visible-columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP"
        query-rows="20">
        <o-table-column attr="ACCOUNTID" title="ACCOUNTID" width="120px"></o-table-column>
        <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=","></o-table-column>
        <o-table-column attr="ENTITYID" title="ENTITYID" width="120px"></o-table-column>
        <o-table-column attr="OFFICEID" title="OFFICEID" width="120px"></o-table-column>
        <o-table-column attr="CDID" title="CDID" width="75px"></o-table-column>
    </o-table>
</o-form-layout-manager>

accounts-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccountsHomeComponent } from './accounts-home/accounts-home.component';

const routes: Routes = [{
  path: '',
  component: AccountsHomeComponent
}];

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

accounts.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OntimizeWebModule } from 'ontimize-web-ngx';
import { AccountsRoutingModule } from './accounts-routing.module';
import { AccountsHomeComponent } from './accounts-home/accounts-home.component';


@NgModule({
  declarations: [
    AccountsHomeComponent
  ],
  imports: [
    CommonModule,
    OntimizeWebModule,
    AccountsRoutingModule
  ]
})
export class AccountsModule { }

app.menu.config.ts

import { MenuRootItem } from 'ontimize-web-ngx';

export const MENU_CONFIG: MenuRootItem[] = [
  { id: 'home', name: 'HOME', icon: 'home', route: '/main/home' },
  { id: 'customers', name: 'CUSTOMERS', icon: 'people', route: '/main/customers' },
  { id: 'employees', name: 'EMPLOYEES', icon: 'business_center', route: '/main/employees' },
  { id: 'branches', name: 'BRANCHES', icon: 'account_balance', route: '/main/branches' },
  { id: 'accounts', name: 'ACCOUNTS', icon: 'credit_card', route: '/main/accounts' },
  { id: 'logout', name: 'LOGOUT', route: '/login', icon: 'power_settings_new', confirm: 'yes' }
];

en.json

{
  ...
  "ACCOUNTS": "Accounts",
  "ENTITYID": "Entity",
  "CDID": "CD",
  "ANID": "Account",
  "ENDDATE": "End date",
  "INTERESRATE": "% Interest",
  "ACCOUNTTYP": "Account type"
}

es.json

{
  ...
  "ACCOUNTS": "Cuentas",
  "ACCOUNTID": "Id.",
  "ENTITYID": "Entidad",
  "CDID": "DC",
  "ANID": "Cuenta",
  "ENDDATE": "Fecha fin",
  "INTERESRATE": "% interés",
  "ACCOUNTTYP": "Tipo de cuenta"
}

tutorial_o_web_23.png

arrow_back Tutorial anterior Próximo tutorial arrow_forward