Merge pull request #1072 from catenax-ng/feature/#630-extended-part-d…

…etail-view

chore(parts): 630 create extended part detailed View

CHANGELOG.md

@@ -23,6 +23,9 @@ _**For better traceability add the corresponding GitHub issue number in each cha
 ### Removed
 - Shedlock, resilence4j, templateResolver as not used anymore
 
+### Added
+- #630 Added Parts extended detailed view
+
 ## [10.7.0 - 18.03.2024]
 
 ### Added

docs/src/docs/user/user-manual.adoc

@@ -271,6 +271,23 @@ Detailed information on the IDs for the manufactured part/batch.
 
 Information about the identifiers at the customer for the respective part/batch.
 
+==== Traction battery code data
+
+If the asset has the "traction battery code" aspect model, an additional section underneath will be displayed.
+In this section there are detailed information about the traction battery and a table with its subcomponents
+
+==== Creation of a quality incident from detailed view
+
+By clicking on the "announcement" icon you can create a quality incident from the detailed view, containing the part information in the currently opened detailed view. If this
+functionality is disabled, a tooltip will provide information explaining the reason. You can trigger the tooltip by hovering above the button.
+
+==== Publish asset from detailed view
+
+By clicking on the "publish" icon, you can publish the currently opened part from the detailed view. If the icon is disabled,
+a tooltip will provide information explaining the reason. You can trigger the tooltip by hovering above the button
+
+
+
 == Other parts
 
 List view of the supplied/delivered parts and batches (Supplier parts / Customer parts).

frontend/cypress/support/step_definitions/admin-contracts.ts

@@ -1,5 +1,5 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
-import { AdminPage, AdminViewTab } from '../../integration/pages/AdminPage';
+import {Then, When} from '@badeball/cypress-cucumber-preprocessor';
+import {AdminPage, AdminViewTab} from '../../integration/pages/AdminPage';
 
 let currentContractId: string;
 
@@ -8,13 +8,13 @@ When('navigate to administration view tab {string}', (tabName: AdminViewTab) =>
   const header = AdminPage.getHeaderOfTabView(tabName);
   switch (tabName) {
     case AdminViewTab.BPN_CONFIGURATION_VIEW:
-      header.contains('BPN - EDC Konfiguration').should('be.visible');
+      header.contains('BPN - EDC Konfiguration').should('be.visible') || header.contains('BPN - EDC configuration').should('be.visible');
       break;
     case AdminViewTab.IMPORT_VIEW:
-      header.contains('Trace-X Datenimport').should('be.visible');
+      header.contains('Trace-X Datenimport').should('be.visible') || header.contains('Trace-X Data import').should('be.visible');
       break;
     case AdminViewTab.CONTRACT_VIEW:
-      header.contains('Verträge').should('be.visible');
+      header.contains('Verträge').should('be.visible') || header.contains('Contracts').should('be.visible');
       break;
     default: {
       throw new Error(`The View Tab header ${ tabName } did not load or is not existing`);

frontend/src/app/modules/core/layout/header/user-navigation/user-menu.component.scss

@@ -49,6 +49,7 @@
   right: -5px;
   transition: opacity;
   border-radius: 16px;
+  z-index: 101;
 }
 
 .user-menu-items {

frontend/src/app/modules/page/admin/presentation/admin.component.scss

@@ -26,7 +26,7 @@
   position: relative;
   transition: all 0.5s;
   max-height: 80vh;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .sidenav--expanded {

frontend/src/app/modules/page/other-parts/other-parts.module.ts

@@ -22,23 +22,23 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { getI18nPageProvider } from '@core/i18n';
-import { PartDetailsModule } from '@shared/modules/part-details/partDetails.module';
+import { SupplierPartsComponent } from '@page/other-parts/presentation/supplier-parts/supplier-parts.component';
+import { PartsDetailModule } from '@page/parts/detail/parts-detail.module';
 import { FormatPartSemanticDataModelToCamelCasePipe } from '@shared/pipes/format-part-semantic-data-model-to-camelcase.pipe';
+import { BomLifecycleSettingsService } from '@shared/service/bom-lifecycle-settings.service';
 import { SharedModule } from '@shared/shared.module';
 import { TemplateModule } from '@shared/template.module';
+import { AngularSplitModule } from 'angular-split';
 import { OtherPartsFacade } from './core/other-parts.facade';
 import { OtherPartsService } from './core/other-parts.service';
 import { OtherPartsState } from './core/other-parts.state';
 import { OtherPartsRoutingModule } from './other-parts.routing';
-import { OtherPartsComponent } from './presentation/other-parts.component';
-import { SupplierPartsComponent } from '@page/other-parts/presentation/supplier-parts/supplier-parts.component';
 import { CustomerPartsComponent } from './presentation/customer-parts/customer-parts.component';
-import { AngularSplitModule } from 'angular-split';
-import { BomLifecycleSettingsService } from '@shared/service/bom-lifecycle-settings.service';
+import { OtherPartsComponent } from './presentation/other-parts.component';
 
 @NgModule({
   declarations: [ OtherPartsComponent, SupplierPartsComponent, CustomerPartsComponent ],
-  imports: [ CommonModule, TemplateModule, SharedModule, OtherPartsRoutingModule, PartDetailsModule, AngularSplitModule ],
+  imports: [ CommonModule, TemplateModule, SharedModule, OtherPartsRoutingModule, PartsDetailModule, AngularSplitModule ],
   providers: [
     OtherPartsState,
     OtherPartsFacade,

frontend/src/app/modules/page/other-parts/other-parts.routing.ts

@@ -22,6 +22,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { OtherPartsComponent } from '@page/other-parts/presentation/other-parts.component';
+import { PartsDetailComponent } from '@page/parts/detail/parts-detail.component';
 import { I18NEXT_NAMESPACE_RESOLVER } from 'angular-i18next';
 
 export /** @type {*} */
@@ -33,6 +34,13 @@ const PARTS_ROUTING: Routes = [
     data: { i18nextNamespaces: [ 'page.otherParts', 'partDetail' ] },
     resolve: { i18next: I18NEXT_NAMESPACE_RESOLVER },
   },
+  {
+    path: ':partId',
+    pathMatch: 'full',
+    component: PartsDetailComponent,
+    data: { i18nextNamespaces: [ 'page.otherParts', 'partDetail' ] },
+    resolve: { i18next: I18NEXT_NAMESPACE_RESOLVER },
+  },
 ];
 
 @NgModule({

frontend/src/app/modules/page/other-parts/presentation/customer-parts/customer-parts.component.ts

@@ -18,21 +18,22 @@
  ********************************************************************************/
 
 
-import { Component, Input, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { Pagination } from '@core/model/pagination.model';
-import { OtherPartsFacade } from '@page/other-parts/core/other-parts.facade';
-import { MainAspectType } from '@page/parts/model/mainAspectType.enum';
-import { AssetAsBuiltFilter, AssetAsPlannedFilter, Part } from '@page/parts/model/parts.model';
-import { TableType } from '@shared/components/multi-select-autocomplete/table-type.model';
-import { PartsTableComponent } from '@shared/components/parts-table/parts-table.component';
-import { TableSortingUtil } from '@shared/components/table/table-sorting.util';
-import { TableEventConfig, TableHeaderSort } from '@shared/components/table/table.model';
-import { toAssetFilter, toGlobalSearchAssetFilter } from '@shared/helper/filter-helper';
-import { setMultiSorting } from '@shared/helper/table-helper';
-import { View } from '@shared/model/view.model';
-import { PartDetailsFacade } from '@shared/modules/part-details/core/partDetails.facade';
-import { StaticIdService } from '@shared/service/staticId.service';
-import { Observable } from 'rxjs';
+import {Component, Input, OnDestroy, OnInit, QueryList, ViewChildren} from '@angular/core';
+import {ActivatedRoute, Params, Router} from '@angular/router';
+import {Pagination} from '@core/model/pagination.model';
+import {OtherPartsFacade} from '@page/other-parts/core/other-parts.facade';
+import {MainAspectType} from '@page/parts/model/mainAspectType.enum';
+import {AssetAsBuiltFilter, AssetAsPlannedFilter, Part} from '@page/parts/model/parts.model';
+import {TableType} from '@shared/components/multi-select-autocomplete/table-type.model';
+import {PartsTableComponent} from '@shared/components/parts-table/parts-table.component';
+import {TableSortingUtil} from '@shared/components/table/table-sorting.util';
+import {TableEventConfig, TableHeaderSort} from '@shared/components/table/table.model';
+import {containsAtleastOneFilterEntry, toAssetFilter, toGlobalSearchAssetFilter} from '@shared/helper/filter-helper';
+import {setMultiSorting} from '@shared/helper/table-helper';
+import {View} from '@shared/model/view.model';
+import {PartDetailsFacade} from '@shared/modules/part-details/core/partDetails.facade';
+import {StaticIdService} from '@shared/service/staticId.service';
+import {Observable} from 'rxjs';
 
 
 @Component({
@@ -47,8 +48,8 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
 
   public readonly customerTabLabelId = this.staticIdService.generateId('OtherParts.customerTabLabel');
 
-  public tableCustomerAsBuiltSortList: TableHeaderSort[];
-  public tableCustomerAsPlannedSortList: TableHeaderSort[];
+  public tableCustomerAsBuiltSortList: TableHeaderSort[] = [];
+  public tableCustomerAsPlannedSortList: TableHeaderSort[] = [];
 
   private ctrlKeyState = false;
 
@@ -58,10 +59,15 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
   assetAsBuiltFilter: AssetAsBuiltFilter;
   assetsAsPlannedFilter: AssetAsPlannedFilter;
 
+  public currentPartTablePage = {AS_BUILT_CUSTOMER_PAGE: 0, AS_PLANNED_CUSTOMER_PAGE: 0}
+
+
   constructor(
     private readonly otherPartsFacade: OtherPartsFacade,
     private readonly partDetailsFacade: PartDetailsFacade,
     private readonly staticIdService: StaticIdService,
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
   ) {
 
     window.addEventListener('keydown', (event) => {
@@ -73,6 +79,8 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
   }
 
   public ngOnInit(): void {
+    this.route.queryParams.subscribe(params => this.setupPageByUrlParams(params));
+
     if (this.bomLifecycle === MainAspectType.AS_BUILT) {
       this.customerPartsAsBuilt$ = this.otherPartsFacade.customerPartsAsBuilt$;
       this.tableCustomerAsBuiltSortList = [];
@@ -97,10 +105,10 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
   filterActivated(isAsBuilt: boolean, assetFilter: any): void {
     if (isAsBuilt) {
       this.assetAsBuiltFilter = assetFilter;
-      this.otherPartsFacade.setCustomerPartsAsBuilt(0, 50, [], toAssetFilter(this.assetAsBuiltFilter, true));
+      this.otherPartsFacade.setCustomerPartsAsBuilt(this.currentPartTablePage['AS_BUILT_CUSTOMER_PAGE'] ?? 0, 50, [], toAssetFilter(this.assetAsBuiltFilter, true));
     } else {
       this.assetsAsPlannedFilter = assetFilter;
-      this.otherPartsFacade.setCustomerPartsAsPlanned(0, 50, [], toAssetFilter(this.assetsAsPlannedFilter, false));
+      this.otherPartsFacade.setCustomerPartsAsPlanned(this.currentPartTablePage['AS_PLANNED_CUSTOMER_PAGE'] ?? 0, 50, [], toAssetFilter(this.assetsAsPlannedFilter, false));
     }
   }
 
@@ -110,17 +118,23 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
 
   public onSelectItem(event: Record<string, unknown>): void {
     this.partDetailsFacade.selectedPart = event as unknown as Part;
+    let tableData = {};
+    for(let component of this.partsTableComponents) {
+      tableData[component.tableType+"_PAGE"] = component.pageIndex;
+    }
+    this.router.navigate([`otherParts/${event?.id}`], {queryParams: tableData})
   }
 
   public onAsBuiltTableConfigChange({ page, pageSize, sorting }: TableEventConfig): void {
     this.setTableSortingList(sorting, MainAspectType.AS_BUILT);
+    this.currentPartTablePage['AS_BUILT_CUSTOMER_PAGE'] = page;
 
     let pageSizeValue = 50;
     if (pageSize !== 0) {
       pageSizeValue = pageSize;
     }
 
-    if (this.assetAsBuiltFilter) {
+    if (this.assetAsBuiltFilter && containsAtleastOneFilterEntry(this.assetAsBuiltFilter)) {
       this.otherPartsFacade.setCustomerPartsAsBuilt(0, pageSizeValue, this.tableCustomerAsBuiltSortList, toAssetFilter(this.assetAsBuiltFilter, true));
     } else {
       this.otherPartsFacade.setCustomerPartsAsBuilt(page, pageSizeValue, this.tableCustomerAsBuiltSortList);
@@ -129,13 +143,14 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
 
   public onAsPlannedTableConfigChange({ page, pageSize, sorting }: TableEventConfig): void {
     this.setTableSortingList(sorting, MainAspectType.AS_PLANNED);
+    this.currentPartTablePage['AS_PLANNED_CUSTOMER_PAGE'] = page;
 
     let pageSizeValue = 50;
     if (pageSize !== 0) {
       pageSizeValue = pageSize;
     }
 
-    if (this.assetsAsPlannedFilter) {
+    if (this.assetsAsPlannedFilter && containsAtleastOneFilterEntry(this.assetsAsPlannedFilter)) {
       this.otherPartsFacade.setCustomerPartsAsPlanned(0, pageSizeValue, this.tableCustomerAsPlannedSortList, toAssetFilter(this.assetsAsPlannedFilter, true));
     } else {
       this.otherPartsFacade.setCustomerPartsAsPlanned(page, pageSizeValue, this.tableCustomerAsPlannedSortList);
@@ -147,6 +162,14 @@ export class CustomerPartsComponent implements OnInit, OnDestroy {
     TableSortingUtil.setTableSortingList(sorting, tableSortList, this.ctrlKeyState);
   }
 
+  private setupPageByUrlParams(params: Params ) {
+    if(!params) {
+      return;
+    }
+    this.onAsBuiltTableConfigChange({page: params['AS_BUILT_CUSTOMER_PAGE'], pageSize: 50, sorting: null});
+    this.onAsPlannedTableConfigChange({page: params['AS_PLANNED_CUSTOMER_PAGE'], pageSize: 50, sorting: null});
+  }
+
   protected readonly MainAspectType = MainAspectType;
   protected readonly TableType = TableType;
 }

frontend/src/app/modules/page/other-parts/presentation/other-parts.component.html

@@ -108,7 +108,4 @@
       </mat-tab-group>
     </as-split-area>
   </as-split>
-
-  <app-part-detail [showRelation]="false"
-                   [showStartInvestigation]="showStartInvestigationArray[selectedTab]"></app-part-detail>
 </div>