Creación del componente y los recursos para la página personalizada

Aprenda a crear el componente y los recursos para la página personalizada. En esta lección, prepararás los recursos que necesitas y crearás la ruta de navegación para la página.

Procedimiento

Abre un terminal y ve al directorio devtoolkit_docker/orderhub-code/buc-app-inventory/packages/inventory-search-results/src-custom/app/features.
Ejecute el siguiente comando para crear un nuevo componente.
```
ng g c create-reservation
```
El comando genera automáticamente el componente personalizado y actualiza el archivo packages/inventory-search-results/src-custom/app/features/ext-search.module.ts.

Dado que el componente personalizado que ha generado (create-reservation) necesita utilizar utilidades y bibliotecas de IBM, mueva el componente al app-customization.impl.ts archivo siguiendo los pasos que se indican a continuación.

Edita el archivo src-custom/app/features/ext-search.module.ts con los siguientes cambios.
- Elimine la instrucción « {CreateReservationComponent} ».
- Elimine CreateReservationComponent de la declarations matriz.
El código resultante tiene este aspecto:
```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule
  ]
})
export class ExtSearchModule { }
```

Edita el archivo src-custom/app/app-customization.impl.ts con el siguiente código.

import { RouterModule, Routes } from '@angular/router';
import { InventoryModuleUrlGuardServiceFn } from '@buc/inventory-shared';
import { BucCommonClassesConnectorResourcePermissionsGuard } from '@buc/svc-angular';
import { CreateReservationComponent } from './features/create-reservation/create-reservation.component';

export const customRoutes: Routes = [
   {
    canActivate: [InventoryModuleUrlGuardServiceFn, BucCommonClassesConnectorResourcePermissionsGuard],
    path: 'create-reservation',
    component: CreateReservationComponent,
    data: {
      id: 'CUSINV0001' // New resourceId to control permissions
    }
  }
];
export class AppCustomizationImpl {
    static readonly components = [CreateReservationComponent];
    static readonly providers = [];
    static readonly imports = [RouterModule.forChild(customRoutes)];
    static readonly exports = [RouterModule];
}

El código añade el CreateReservationComponent a la matriz de componentes y añade una ruta personalizada para navegar a la nueva página Crear reserva.
La ruta comprueba este valor resourceIddata.id para determinar si el usuario tiene permisos para ver esta página.

En la consola de aplicaciones, cree el recurso personalizado que definió en el paso anterior. (id: 'CUSINV0001')
Para obtener más información sobre cómo crear un recurso personalizado, consulta el «Paso 1» en Creación de permisos de recursos para páginas y acciones personalizadas. Asegúrese de establecer el ID de recurso en CUSINV0001.
Actualiza tus grupos de usuarios personalizados para conceder permiso para ver la página Crear reserva. Para obtener más información, consulte Definición de permisos de recursos para Order Hub.
Una vez que el módulo se haya compilado correctamente, vaya a Order Hub y haga clic en el menú desplegable para ver la acción recién añadida.
Haga clic en Crear reserva.
Si la configuración se ha realizado correctamente, aparecerá una nueva página con el texto «¡create-reservation funciona!»
Cree un archivo custom-constants.ts en el directorio src-custom/app/features/create-reservation.

Añada el código siguiente.

export class CustomConstants {
    static readonly ACTION_CREATE_RESERVATION = 'createReservation';
    static readonly ROUTE_CREATE_RESERVATION = '/buc-app-inventory/inventory-search-results/inventory/create-reservation';
    static readonly ACTION_IDS_CREATE_RESERVATION = 'create';
  }

Edita el archivo src-custom/app/app-customization.impl.ts con el siguiente código.

Actualiza la matriz de importaciones para incluir módulos que permitan mostrar una ruta de navegación y el cuadro de entrada cuando un usuario navega a la página Crear reserva.

static readonly imports = [
	RouterModule.forChild(customRoutes),
       BucCommonComponentsModule,
       BucFeatureComponentsModule,
       BucIconsModule,
       SharedModule];

Importa los módulos correspondientes:

import { BucCommonComponentsModule, BucFeatureComponentsModule, BucIconsModule } from '@buc/common-components';
import { SharedModule } from '@buc/inventory-shared';

Abre el archivo src-custom/app/features/create-reservation/create-reservation.component.html.

Añadir una ruta de navegación y un texto de título:


<div class="screen-loading" *ngIf="!initialized">
    <buc-loading [isActive]="!initialized"></buc-loading>
  </div>
  
  <ng-container *ngIf="initialized">
    <div class="screen-header">
      <!-- Bread crumb  -->
      <buc-page-header *ngIf="breadCrumbList" class="screen-breadcrumb" [breadcrumbList]="breadCrumbList" [headerOrder]="['breadcrumb']">
      </buc-page-header>
    </div>
  
    <div class="screen">
        <div class="cds--row">
          <div class="cds--col">
            <!-- Reservation form  -->
          
          </div>
        </div>
      <div class="cds--row">
              <div class="cds--col">
            <!-- Reservation table -->
      
          </div>
        </div>
      </div>
      <div class="screen-footer">
     <!-- Cancel Save buttons footer -->
    
      </div>
    </ng-container>

Añade las siguientes claves de traducción al archivo src-custom/assets/custom/i18n/en.json.

{
    "custom": {
    "LABEL_CREATE_RESERVATION":"Create reservation",
    "SUCCESS_RESERVATION":"Reservation successful",
    "ERROR_RESERVATION":"Reservation failed:"
    }
  }

Añade los siguientes cambios al archivo src-custom/app/features/create-reservation/create-reservation.component.ts.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PostReservationRequest } from '@buc/common-components';
import { BreadcrumbService } from '@buc/inventory-shared';
import { TranslateService } from '@ngx-translate/core';
import { CustomConstants } from './custom-constants';

@Component({
  selector: 'buc-create-reservation',
  templateUrl: './create-reservation.component.html',
  styleUrls: ['./create-reservation.component.scss']
})
export class CreateReservationComponent implements OnInit {
  public initialized: boolean = false;
  public breadCrumbList = []; // breadCrumb list
  public placeholder = '';
  private nlsMap: any = {
    'custom.LABEL_CREATE_RESERVATION': '',
    'custom.LABEL_RESERVATION_EXPIRY': '',
    'custom.ERROR_INVALID_EXPIRY': ''
  };

  constructor(
    private breadcrumbSvc: BreadcrumbService,
    private translateSvc: TranslateService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this._initTranslations();
    this._initBC();
    this.initialized = true;

  }

  /** Fetch translations for the page */
  private async _initTranslations() {
    const keys = Object.keys(this.nlsMap);
    const json = await this.translateSvc.get(keys).toPromise();
    keys.forEach(k => this.nlsMap[k] = json[k]);
  }

  /** Initialize breadcrumbs */
  private _initBC() {
    this.breadcrumbSvc.updateLast(this.nlsMap['custom.LABEL_CREATE_RESERVATION'], CustomConstants.ROUTE_CREATE_RESERVATION);
    this.breadCrumbList = this.breadcrumbSvc.get();
  }

}

Vuelve al Centro de pedidos y vuelve a cargar el marco.

Vaya a la página Crear reserva para comprobar que se muestra la ruta de navegación:

Qué hacer a continuación

Implemente su personalización. Para obtener más información, consulte Preparación para implementar personalizaciones en aplicaciones existentes.