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á los recursos que necesite y creará la indicación de ruta para la página.

Procedimiento

  1. Abra un terminal y vaya al directorio devtoolkit_docker/orderhub-code/buc-app-inventory/packages/inventory-search-results/src-custom/app/features .
  2. Ejecute el mandato siguiente para crear un componente nuevo.
    ng g c create-reservation

    El mandato genera automáticamente el componente personalizado y actualiza el archivo packages/inventory-search-results/src-custom/app/features/ext-search.module.ts .

  3. Dado que el componente personalizado que ha generado (create-reservation) necesita utilizar programas de utilidad y bibliotecas de IBM , mueva el componente al archivo app-customization.impl.ts realizando los pasos siguientes.
    1. Edite el archivo src-custom/app/features/ext-search.module.ts con los cambios siguientes.
      • Suprima la sentencia import {CreateReservationComponent} .
      • Borrar CreateReservationComponent desde eldeclarations formación.
      El código resultante tiene este aspecto:
      import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
  ],
  imports: [
    CommonModule
  ]
})
export class ExtSearchModule { }
    2. Edite el archivo src-custom/app/app-customization.impl.ts con el código siguiente.
      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 agrega una ruta personalizada para navegar al nuevo Crear reserva página.
      • El data.id de la ruta comprueba este valor de resourceId para determinar si el usuario tiene permisos para ver esta página.
  4. En Application Console, cree el recurso personalizado que ha definido en el paso anterior. (id: 'CUSINV0001')
    Para obtener más información sobre cómo crear un recurso personalizado, consulte "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.
    Captura de pantalla del Gestor de aplicaciones de canal con una nueva entidad para la página Crear reserva
  5. Actualice los grupos de usuarios personalizados para otorgar permiso para ver la página Crear reserva . Para obtener más información, consulte Definición de permisos de recursos para Order Hub.
    Captura de pantalla del módulo de permisos de Order Hub con una nueva entidad para la página Crear reserva
  6. Después de que el módulo se compile correctamente, vaya a Order Hub y pulse el menú de desbordamiento para ver la acción recién añadida.
    Captura de pantalla del menú de desbordamiento abierto y el botón Crear reserva resaltado con un recuadro rojo
  7. Pulse Crear reserva.
    Si la configuración se ha realizado correctamente, se muestra una nueva página con el texto "create-reservation works!"
  8. Cree un archivo custom-constants.ts en el directorio src-custom/app/features/create-reservation .
  9. 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';
  }
  10. Edite el archivo src-custom/app/app-customization.impl.ts con el código siguiente.
    • Actualice la matriz de importaciones para incluir módulos para dar soporte a la visualización de un rastro de navegación y el recuadro de entrada cuando un usuario navega a la página Crear reserva .
      static readonly imports = [
	RouterModule.forChild(customRoutes),
       BucCommonComponentsModule,
       BucFeatureComponentsModule,
       BucIconsModule,
       SharedModule];
    • Importe los módulos correspondientes:
      import { BucCommonComponentsModule, BucFeatureComponentsModule, BucIconsModule } from '@buc/common-components';
import { SharedModule } from '@buc/inventory-shared';
  11. Abra el archivo src-custom/app/features/create-reservation/create-reservation.component.html .
  12. Añadir una indicación de ruta y 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>
  13. Añada las siguientes claves de conversión al archivo src-custom/assets/custom/i18n/en.json .
    {
    "custom": {
    "LABEL_CREATE_RESERVATION":"Create reservation",
    "SUCCESS_RESERVATION":"Reservation successful",
    "ERROR_RESERVATION":"Reservation failed:"
    }
  }
  14. Añada los cambios siguientes en el 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();
  }

}
  15. Vuelva a Order Hub y vuelva a cargar el bastidor.
    Vaya a la página Crear reserva para verificar que se muestra la indicación de ruta:
    Indicación de ruta