Criando o componente e os recursos para a página customizada

Saiba como criar o componente e os recursos para a página customizada Nesta lição, você prepara os recursos necessários e cria a trilha de navegação para a página.

Procedimento

Abra um terminal e acesse o diretório devtoolkit_docker/orderhub-code/buc-app-inventory/packages/inventory-search-results/src-custom/app/features .
Execute o comando a seguir para criar um novo componente.
```
ng g c create-reservation
```
O comando gera automaticamente o componente customizado e atualiza o arquivo packages/inventory-search-results/src-custom/app/features/ext-search.module.ts ..

Como o componente customizado gerado (create-reservation) precisa usar utilitários e bibliotecas da IBM , mova o componente para o arquivo app-customization.impl.ts concluindo as etapas a seguir.

Editar o arquivo src-custom/app/features/ext-search.module.ts com as mudanças a seguir.
- Exclua a instrução import {CreateReservationComponent} .
- Exclui CreateReservationComponent da matriz declarations.
O código resultante é semelhante a este:
```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

Edite o arquivo src-custom/app/app-customization.impl.ts com o seguinte 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];
}

O código adiciona o CreateReservationComponent à matriz de componentes e adiciona uma rota personalizada para navegar até a nova página Criar reserva.
O data.id na rota verifica esse valor resourceId para determinar se o usuário tem permissões para visualizar essa página.

No Application Console, crie o recurso customizado definido na etapa anterior. (id: 'CUSINV0001')
Para obter mais informações sobre como criar um recurso customizado, consulte "Etapa 1" em Criando permissões de recurso para páginas e ações customizadas. Assegure-se de configurar o ID do Recurso para CUSINV0001.
Atualize seus grupos de usuários customizados para conceder permissão para visualizar a página Criar reserva . Para obter mais informações, consulte Definindo permissões de recursos para o Order Hub.
Após o módulo ser compilado com sucesso, acesse Order Hub e clique no menu overflow para visualizar a ação recém-incluída.
clique em Criar reserva.
Se a configuração foi bem-sucedida, uma nova página será exibida com o texto "create-reservation works!"
Crie um arquivo custom-constants.ts no diretório src-custom/app/features/create-reservation ..

Inclua o código a seguir.

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

Edite o arquivo src-custom/app/app-customization.impl.ts com o seguinte código.

Atualize a matriz de importações para incluir módulos para suportar a exibição de uma trilha de navegação e a caixa de entrada quando um usuário navegar para a página Criar reserva .
```
static readonly imports = [
	RouterModule.forChild(customRoutes),
       BucCommonComponentsModule,
       BucFeatureComponentsModule,
       BucIconsModule,
       SharedModule];
```

Importe os módulos correspondentes:

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

Abra o arquivo src-custom/app/features/create-reservation/create-reservation.component.html ..

Inclua uma trilha de navegação e texto do 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>

Inclua as chaves de conversão a seguir no arquivo src-custom/assets/custom/i18n/en.json

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

Inclua as seguintes mudanças no arquivo 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();
  }

}

Volte para Order Hub e recarregue o quadro.

Acesse a página Criar reserva para verificar se a trilha de navegação é exibida: