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

Aprenda a criar o componente e os recursos para a página personalizada. Nesta lição, você prepara os recursos necessários e cria o caminho de navegação para a página.

Procedimento

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

Como o componente personalizado que você gerou (create-reservation) precisa usar utilitários e bibliotecas d IBM, mova o componente para o app-customization.impl.ts arquivo seguindo as etapas abaixo.

Edite o arquivo src-custom/app/features/ext-search.module.ts com as seguintes alterações.
- Exclua a instrução import {CreateReservationComponent}.
- Exclua CreateReservationComponent da matriz declarations .
O código resultante fica assim:
```
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.
A rota verifica o valor resourceIddata.id para determinar se o usuário tem permissão para visualizar esta página.

No Console de Aplicativos, crie o recurso personalizado que você definiu na etapa anterior. (id: 'CUSINV0001')
Para obter mais informações sobre como criar um recurso personalizado, consulte a “Etapa 1” em Criando permissões de recurso para páginas e ações personalizadas. Certifique-se de definir o ID do recurso como CUSINV0001.
Atualize seus grupos de usuários personalizados 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 a compilação bem-sucedida do módulo, acesse o Order Hub e clique no menu de overflow para visualizar a ação recém-adicionada.
Clique em Criar reserva.
Se a configuração foi bem-sucedida, uma nova página será exibida com o texto “create-reservation works!” (a criação da reserva funcionou!)
Crie um arquivo custom-constants.ts no diretório src-custom/app/features/create-reservation.

Adicione o seguinte código.

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 que suportem a exibição de um breadcrumb e da caixa de entrada quando um usuário navega 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.

Adicione um rastro de navegação e um 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>

Adicione as seguintes chaves de tradução ao arquivo src-custom/assets/custom/i18n/en.json.

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

Adicione as seguintes alterações ao 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 o Order Hub e recarregue o quadro.

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

O que fazer depois

Implemente sua personalização. Para obter mais informações, consulte Preparando-se para implantar personalizações para aplicativos existentes.