Komponente und Ressourcen für die angepasste Seite erstellen

Hier erfahren Sie, wie Sie die Komponente und Ressourcen für die angepasste Seite erstellen. In dieser Lerneinheit bereiten Sie die benötigten Ressourcen vor und erstellen den Navigationspfad für die Seite.

Vorgehensweise

Öffnen Sie ein Terminal und wechseln Sie zum Verzeichnis devtoolkit_docker/orderhub-code/buc-app-inventory/packages/inventory-search-results/src-custom/app/features .
Führen Sie den folgenden Befehl aus, um eine neue Komponente zu erstellen.
```
ng g c create-reservation
```
Der Befehl generiert automatisch die angepasste Komponente und aktualisiert die Datei packages/inventory-search-results/src-custom/app/features/ext-search.module.ts .

Da die angepasste Komponente, die Sie generiert haben (create-reservation), IBM Dienstprogramme und Bibliotheken verwenden muss, verschieben Sie die Komponente in die Datei app-customization.impl.ts , indem Sie die folgenden Schritte ausführen.

Bearbeiten Sie die Datei src-custom/app/features/ext-search.module.ts mit den folgenden Änderungen:
- Löschen Sie die Anweisung import {CreateReservationComponent} .
- Löschen CreateReservationComponent von demdeclarations -Array.
Der resultierende Code sieht wie folgt aus:
```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

Bearbeiten Sie die Datei src-custom/app/app-customization.impl.ts mit dem folgenden Code.

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

Der Code fügt die CreateReservationComponent zum Komponenten-Array und fügt eine benutzerdefinierte Route hinzu, um zum neuen Reservierung erstellen Seite.
Die data.id in der Route überprüft diesen Wert für resourceId , um festzustellen, ob der Benutzer berechtigt ist, diese Seite anzuzeigen.

Erstellen Sie in der Anwendungskonsole die angepasste Ressource, die Sie im vorherigen Schritt definiert haben. (id: 'CUSINV0001')
Weitere Informationen zum Erstellen einer angepassten Ressource finden Sie unter "Schritt 1" im Abschnitt Ressourcenberechtigungen für angepasste Seiten und Aktionen erstellen. Stellen Sie sicher, dass die Ressourcen-ID auf CUSINV0001gesetzt ist.
Aktualisieren Sie Ihre angepassten Benutzergruppen, um die Berechtigung zum Anzeigen der Seite Reservierung erstellen zu erteilen. Weitere Informationen finden Sie unter Ressourcenberechtigungen für Order Hub definieren.
Nachdem das Modul erfolgreich kompiliert wurde, wechseln Sie zu Order Hub und klicken auf das Überlaufmenü, um die neu hinzugefügte Aktion anzuzeigen.
Klicken Sie auf Reservierung erstellen.
Wenn das Setup erfolgreich war, wird eine neue Seite mit dem Text "create-reservation works!" angezeigt.
Erstellen Sie eine Datei custom-constants.ts im Verzeichnis src-custom/app/features/create-reservation .

Fügen Sie den folgenden Code hinzu.

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

Bearbeiten Sie die Datei src-custom/app/app-customization.impl.ts mit dem folgenden Code.

Aktualisieren Sie das Importarray, um Module einzuschließen, die die Anzeige eines Breadcrumb und des Eingabefelds unterstützen, wenn ein Benutzer zur Seite Reservierung erstellen navigiert.
```
static readonly imports = [
	RouterModule.forChild(customRoutes),
       BucCommonComponentsModule,
       BucFeatureComponentsModule,
       BucIconsModule,
       SharedModule];
```

Importieren Sie die entsprechenden Module:

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

Öffnen Sie die Datei src-custom/app/features/create-reservation/create-reservation.component.html .

Navigationspfad und Titeltext hinzufügen:


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

Fügen Sie die folgenden Übersetzungsschlüssel zur Datei src-custom/assets/custom/i18n/en.json hinzu.

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

Fügen Sie die folgenden Änderungen zur Datei src-custom/app/features/create-reservation/create-reservation.component.ts hinzu.

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();
  }

}

Gehen Sie zurück zu Order Hub und laden Sie den Rahmen erneut.

Rufen Sie die Seite Reservierung erstellen auf, um zu überprüfen, ob der Navigationspfad angezeigt wird: