new changes in product details

docker-compose.yaml

@@ -2,6 +2,6 @@ name: isbe-catalog-ui
 
 services:
   catalog-ui:
-    image: in2workspace/bae-frontend:v0.0.4
+    image: in2workspace/bae-frontend:v0.0.5
     container_name: isbe-catalog-ui
     restart: always

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bae-frontend",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.routes.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
-import { ProductDetailsComponent } from './pages/product-details/product-details.component';
 import { SearchCatalogComponent } from './pages/search-catalog/search-catalog.component';
 import { CatalogsComponent } from './pages/catalogs/catalogs.component';
 import { UserProfileComponent } from './pages/user-profile/user-profile.component';
@@ -27,10 +26,7 @@ export const routes: Routes = [
     canActivate: [AuthGuard],
     data: { roles: [], is_isbe: environment.ISBE_CATALOGUE }
   },
-  { path: 'search/:id', component: ProductDetailsComponent,
-    canActivate: [AuthGuard],
-    data: { roles: [], is_isbe: environment.ISBE_CATALOGUE }
-   },
+
   { path: 'org-details/:id', component: OrganizationDetailsComponent },
 
   { path: 'search/catalogue/:id', component: SearchCatalogComponent ,

src/app/pages/product-details/product-details.component.spec.ts

@@ -9,22 +9,31 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MarkdownModule } from 'ngx-markdown';
 import { oidcSecurityServiceMock } from 'src/testing/mocks/oidc-security.service.mock';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { ApiServiceService } from 'src/app/services/product-service.service';
 
 describe('ProductDetailsComponent', () => {
   let component: ProductDetailsComponent;
   let fixture: ComponentFixture<ProductDetailsComponent>;
+  const mockApi = {
+    getProductSpecification: jest.fn(),
+    getProductPrice: jest.fn(),
+  };
 
   beforeEach(async () => {
+    mockApi.getProductSpecification.mockReset();
+    mockApi.getProductPrice.mockReset();
+
     await TestBed.configureTestingModule({
       providers: [
         { provide: ActivatedRoute, useValue: { snapshot: { paramMap: convertToParamMap({ id: '123' }) } } },
         { provide: OidcSecurityService, useValue: oidcSecurityServiceMock },
+        { provide: ApiServiceService, useValue: mockApi }
       ],
       imports: [HttpClientTestingModule, TranslateModule.forRoot(), MarkdownModule.forRoot()],
       schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(ProductDetailsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -33,4 +42,116 @@ describe('ProductDetailsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should default category to none and return placeholder image when productOff is empty', () => {
+    component.productOff = undefined as any;
+    component.ngOnInit();
+    expect(component.category).toBe('none');
+    expect(component.getProductImage()).toContain('placehold.co');
+  });
+
+  it('should slice categories when more than 5 and set checkMoreCats true', () => {
+    component.productOff = {
+      category: [{ name: 'c1' }, { name: 'c2' }, { name: 'c3' }, { name: 'c4' }, { name: 'c5' }, { name: 'c6' }]
+    } as any;
+    component.ngOnInit();
+    expect(component.category).toBe('c1');
+    expect(component.categories?.length).toBe(4);
+    expect(component.categoriesMore?.length).toBe(2);
+    expect(component.checkMoreCats).toBe(true);
+  });
+
+  it('should select "Profile Picture" attachment when present', () => {
+    component.productOff = {
+      attachment: [
+        { name: 'Profile Picture', url: 'profile-url' },
+        { attachmentType: 'Picture', url: 'pic-url' }
+      ]
+    } as any;
+    component.ngOnInit();
+    expect(component.images.length).toBe(1);
+    expect(component.getProductImage()).toBe('profile-url');
+  });
+
+  it('should fallback to Picture attachments when no profile picture', () => {
+    component.productOff = {
+      attachment: [
+        { attachmentType: 'Picture', url: 'pic-url' }
+      ]
+    } as any;
+    component.ngOnInit();
+    expect(component.images.length).toBe(1);
+    expect(component.getProductImage()).toBe('pic-url');
+  });
+
+  it('loadMoreCategories should toggle flags appropriately', () => {
+    component.productOff = {
+      category: [{ name: 'c1' }, { name: 'c2' }, { name: 'c3' }, { name: 'c4' }, { name: 'c5' }, { name: 'c6' }]
+    } as any;
+    component.ngOnInit();
+    expect(component.checkMoreCats).toBe(true);
+    component.loadMoreCategories();
+    expect(component.loadMoreCats).toBe(true);
+    expect(component.checkMoreCats).toBe(false);
+    expect(component.closeCats).toBe(true);
+  });
+
+  it('closeCategories should reset flags and slice categories, toggling loadMoreCats', () => {
+    component.productOff = {
+      category: [{ name: 'c1' }, { name: 'c2' }, { name: 'c3' }, { name: 'c4' }, { name: 'c5' }, { name: 'c6' }]
+    } as any;
+    component.ngOnInit();
+    component.loadMoreCats = true;
+    component.closeCategories();
+    expect(component.closeCats).toBe(false);
+    expect(component.checkMoreCats).toBe(true);
+    expect(component.categories?.length).toBe(4);
+    expect(component.loadMoreCats).toBe(false);
+  });
+
+  it('hideModal should emit close and reset flags', () => {
+    let emitted = false;
+    component.closeModal.subscribe(() => emitted = true);
+    component.loadMoreCats = true;
+    component.checkMoreCats = false;
+    component.hideModal();
+    expect(emitted).toBe(true);
+    expect(component.loadMoreCats).toBe(false);
+    expect(component.checkMoreCats).toBe(true);
+  });
+
+  it('should set checkCustom true when api price returns custom', async () => {
+    component.productOff = {
+      productSpecification: { id: 'spec1' },
+      productOfferingPrice: [{ id: 'price1' }]
+    } as any;
+
+    mockApi.getProductSpecification.mockResolvedValue({});
+    mockApi.getProductPrice.mockResolvedValue({ priceType: 'custom' });
+
+    component.ngOnInit();
+    await fixture.whenStable();
+
+    await Promise.resolve();
+
+    expect(mockApi.getProductSpecification).toHaveBeenCalledWith('spec1');
+    expect(mockApi.getProductPrice).toHaveBeenCalledWith('price1');
+    expect(component.checkCustom).toBe(true);
+  });
+
+  it('should filter out compliance and certification characteristics when prodSpec provided before ngOnInit', () => {
+    component.prodSpec = {
+      productSpecCharacteristic: [
+        { name: 'Compliance:VC' },
+        { name: 'Compliance:SelfAtt' },
+        { name: 'SomeChar' },
+        { name: 'CertA' }
+      ]
+    } as any;
+    component.ngOnInit();
+    expect(component.prodChars.find((c:any) => c.name === 'SomeChar')).toBeTruthy();
+    expect(component.prodChars.find((c:any) => c.name === 'Compliance:VC')).toBeUndefined();
+    expect(component.prodChars.find((c:any) => c.name === 'Compliance:SelfAtt')).toBeUndefined();
+  });
+
 });