Customize UI with conditions

marketplace-service/src/main/java/com/axonivy/market/repository/ProductRepository.java

@@ -27,6 +27,6 @@ public interface ProductRepository extends MongoRepository<Product, String> {
   @Query("{ $or: [ { 'names.?1': { $regex: ?0, $options: 'i' } }, { 'shortDescriptions.?1': { $regex: ?0, $options: 'i' } } ] }")
   Page<Product> searchByNameOrShortDescriptionRegex(String keyword, String language, Pageable unifiedPageabe);
 
-  @Query("{ $and: [ { $or: [ { 'names.?': { $regex: ?0, $options: 'i' } } ] }")
-  Page<Product> searchByNameAndType(String search, String type, String language, Pageable unifiedPageable);
+  @Query("{ $and: [{ $or: [ { 'names.en': { $regex: ?0 , $options: 'i' } }] },{ 'type': 'connector' }]}")
+  Page<Product> searchByNameAndType(String search, Pageable unifiedPageable);
 }

marketplace-service/src/main/java/com/axonivy/market/service/impl/ProductServiceImpl.java

@@ -115,7 +115,7 @@ public Page<Product> findProductsInDesigner(String search, Pageable pageable) {
         if (StringUtils.isBlank(search)) {
           result = productRepository.findByType(TypeOption.CONNECTORS.getCode(), searchPageable);
         } else {
-          result = productRepository.searchByNameAndType(search, TypeOption.CONNECTORS.getCode(), Language.EN.getValue(), searchPageable);
+          result = productRepository.searchByNameAndType(search, searchPageable);
     }
     return result;
   }

marketplace-ui/src/app/modules/product/product-card/product-card.component.html

@@ -1,28 +1,42 @@
-<div class="card product-card w-100">
+<div
+  class="card product-card w-100"
+  [style.height]="!isRestClientCard ? '250px' : '164px'">
   <div class="d-flex justify-content-between align-items-start">
     <img
       class="card-img-top rounded"
       width="70"
       height="70"
       [ngSrc]="product | logo"
-      [alt]="product.names | multilingualism: languageService.selectedLanguage()" />
-    <div
-      class="card__tag lh-md px-2 py-1"
-      [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
-      {{ 'common.filter.value.' + product.type | translate }}
-    </div>
+      [alt]="
+        product.names | multilingualism: languageService.selectedLanguage()
+      " />
+
+    @if (!isRestClientCard) {
+      <div
+        class="card__tag lh-md px-2 py-1"
+        [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
+        {{ 'common.filter.value.' + product.type | translate }}
+      </div>
+    }
+    @if (isRestClientCard) {
+      <div
+        class="card__tag lh-md px-2 py-1 text-capitalize"
+        [ngClass]="themeService.isDarkMode() ? 'text-dark' : 'text-light'">
+        {{ product.tags[0] }}
+      </div>
+    }
   </div>
   <div>
     <h5 class="card__title text-primary">
-      {{
-        product.names | multilingualism: languageService.selectedLanguage()
-      }}
+      {{ product.names | multilingualism: languageService.selectedLanguage() }}
     </h5>
-    <p class="card__description text-secondary">
-      {{
-        product.shortDescriptions
-          | multilingualism: languageService.selectedLanguage()
-      }}
-    </p>
+    @if (!isRestClientCard) {
+      <p class="card__description text-secondary">
+        {{
+          product.shortDescriptions
+            | multilingualism: languageService.selectedLanguage()
+        }}
+      </p>
+    }
   </div>
 </div>

marketplace-ui/src/app/modules/product/product-card/product-card.component.spec.ts

@@ -1,9 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { MOCK_EMPTY_DE_VALUES_AND_NO_LOGO_URL_PRODUCTS, MOCK_PRODUCTS } from '../../../shared/mocks/mock-data';
+import {
+  MOCK_EMPTY_DE_VALUES_AND_NO_LOGO_URL_PRODUCTS,
+  MOCK_PRODUCTS
+} from '../../../shared/mocks/mock-data';
 import { ProductCardComponent } from './product-card.component';
 import { Product } from '../../../shared/models/product.model';
 import { Language } from '../../../shared/enums/language.enum';
+import { ProductService } from '../product.service';
+import { ProductComponent } from '../product.component';
 
 const products = MOCK_PRODUCTS._embedded.products as Product[];
 const noDeNameAndNoLogoUrlProducts =
@@ -16,7 +21,7 @@ describe('ProductCardComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ProductCardComponent, TranslateModule.forRoot()],
-      providers: [TranslateService]
+      providers: [TranslateService, ProductService, ProductComponent]
     }).compileComponents();
 
     fixture = TestBed.createComponent(ProductCardComponent);

marketplace-ui/src/app/modules/product/product-card/product-card.component.ts

@@ -6,17 +6,26 @@ import { ThemeService } from '../../../core/services/theme/theme.service';
 import { Product } from '../../../shared/models/product.model';
 import { ProductLogoPipe } from '../../../shared/pipes/logo.pipe';
 import { MultilingualismPipe } from '../../../shared/pipes/multilingualism.pipe';
+import { ProductComponent } from '../product.component';
 
 @Component({
   selector: 'app-product-card',
   standalone: true,
-  imports: [CommonModule, ProductLogoPipe, MultilingualismPipe, TranslateModule, NgOptimizedImage],
+  imports: [
+    CommonModule,
+    ProductLogoPipe,
+    MultilingualismPipe,
+    TranslateModule,
+    NgOptimizedImage
+  ],
   templateUrl: './product-card.component.html',
   styleUrl: './product-card.component.scss'
 })
 export class ProductCardComponent {
   themeService = inject(ThemeService);
   languageService = inject(LanguageService);
 
+  isRestClientCard = inject(ProductComponent).isRestClient();
+
   @Input() product!: Product;
 }

marketplace-ui/src/app/modules/product/product.component.ts

@@ -27,7 +27,7 @@ import { Page } from '../../shared/models/apis/page.model';
 import { Language } from '../../shared/enums/language.enum';
 import { ProductDetail } from '../../shared/models/product-detail.model';
 import { LanguageService } from '../../core/services/language/language.service';
-import { CookieManagementService } from '../../cookie.management.service';
+import { RoutingQueryParamService } from '../../shared/services/routing.query.param.service';
 
 const SEARCH_DEBOUNCE_TIME = 500;
 
@@ -66,20 +66,24 @@ export class ProductComponent implements AfterViewInit, OnDestroy {
 
   responseLink!: Link;
   responsePage!: Page;
-  isRestClient = signal(false);
+  isRestClient: WritableSignal<boolean> = signal(false);
+  isDesignerEnvironment = inject(RoutingQueryParamService).isDesignerEnv();
 
   productService = inject(ProductService);
   themeService = inject(ThemeService);
   translateService = inject(TranslateService);
   languageService = inject(LanguageService);
-  cookieService = inject(CookieManagementService);
-
+  route = inject(ActivatedRoute);
   router = inject(Router);
   @ViewChild('observer', { static: true }) observerElement!: ElementRef;
 
   constructor() {
-    this.isRestClient.set(this.cookieService.isResultsOnly());
-    console.log(this.isRestClient());
+    this.route.queryParams.subscribe(params => {
+      if ('resultsOnly' in params && this.isDesignerEnvironment) {
+        this.isRestClient.set(true);
+      }
+    });
+
     if (this.isRestClient()) {
       this.loadProductInDesigner();
       this.subscriptions.push(
@@ -190,10 +194,11 @@ export class ProductComponent implements AfterViewInit, OnDestroy {
     const observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         if (entry.isIntersecting && this.hasMore()) {
-          this.criteria.nextPageHref = this.responseLink?.next?.href;
           if (this.isRestClient()) {
+            this.designerCriteria.nextPageHref = this.responseLink?.next?.href;
             this.loadProductInDesigner();
           } else {
+            this.criteria.nextPageHref = this.responseLink?.next?.href;
             this.loadProductItems();
           }
         }

marketplace-ui/src/assets/scss/custom-style.scss

@@ -255,7 +255,6 @@ p {
 }
 
 .card {
-  height: 250px;
   padding: 20px;
   margin: 0 32px 8px 0;
   gap: 20px;