From 3b72a951197da07177f9dc5e0b6c8fec9d00431d Mon Sep 17 00:00:00 2001 From: nntthuy-axonivy Date: Mon, 29 Jul 2024 18:29:10 +0700 Subject: [PATCH] Customize UI with conditions --- .../market/repository/ProductRepository.java | 4 +- .../service/impl/ProductServiceImpl.java | 2 +- .../product-card/product-card.component.html | 46 ++++++++++++------- .../product-card.component.spec.ts | 9 +++- .../product-card/product-card.component.ts | 11 ++++- .../app/modules/product/product.component.ts | 19 +++++--- .../src/assets/scss/custom-style.scss | 1 - 7 files changed, 62 insertions(+), 30 deletions(-) diff --git a/marketplace-service/src/main/java/com/axonivy/market/repository/ProductRepository.java b/marketplace-service/src/main/java/com/axonivy/market/repository/ProductRepository.java index 74130b845..5ffb23b6e 100644 --- a/marketplace-service/src/main/java/com/axonivy/market/repository/ProductRepository.java +++ b/marketplace-service/src/main/java/com/axonivy/market/repository/ProductRepository.java @@ -27,6 +27,6 @@ public interface ProductRepository extends MongoRepository { @Query("{ $or: [ { 'names.?1': { $regex: ?0, $options: 'i' } }, { 'shortDescriptions.?1': { $regex: ?0, $options: 'i' } } ] }") Page searchByNameOrShortDescriptionRegex(String keyword, String language, Pageable unifiedPageabe); - @Query("{ $and: [ { $or: [ { 'names.?': { $regex: ?0, $options: 'i' } } ] }") - Page searchByNameAndType(String search, String type, String language, Pageable unifiedPageable); + @Query("{ $and: [{ $or: [ { 'names.en': { $regex: ?0 , $options: 'i' } }] },{ 'type': 'connector' }]}") + Page searchByNameAndType(String search, Pageable unifiedPageable); } diff --git a/marketplace-service/src/main/java/com/axonivy/market/service/impl/ProductServiceImpl.java b/marketplace-service/src/main/java/com/axonivy/market/service/impl/ProductServiceImpl.java index d40f0a0f8..937c699a0 100644 --- a/marketplace-service/src/main/java/com/axonivy/market/service/impl/ProductServiceImpl.java +++ b/marketplace-service/src/main/java/com/axonivy/market/service/impl/ProductServiceImpl.java @@ -115,7 +115,7 @@ public Page 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; } diff --git a/marketplace-ui/src/app/modules/product/product-card/product-card.component.html b/marketplace-ui/src/app/modules/product/product-card/product-card.component.html index e5da67672..f9a8263c2 100644 --- a/marketplace-ui/src/app/modules/product/product-card/product-card.component.html +++ b/marketplace-ui/src/app/modules/product/product-card/product-card.component.html @@ -1,28 +1,42 @@ -
+
-
- {{ 'common.filter.value.' + product.type | translate }} -
+ [alt]=" + product.names | multilingualism: languageService.selectedLanguage() + " /> + + @if (!isRestClientCard) { +
+ {{ 'common.filter.value.' + product.type | translate }} +
+ } + @if (isRestClientCard) { +
+ {{ product.tags[0] }} +
+ }
- {{ - product.names | multilingualism: languageService.selectedLanguage() - }} + {{ product.names | multilingualism: languageService.selectedLanguage() }}
-

- {{ - product.shortDescriptions - | multilingualism: languageService.selectedLanguage() - }} -

+ @if (!isRestClientCard) { +

+ {{ + product.shortDescriptions + | multilingualism: languageService.selectedLanguage() + }} +

+ }
diff --git a/marketplace-ui/src/app/modules/product/product-card/product-card.component.spec.ts b/marketplace-ui/src/app/modules/product/product-card/product-card.component.spec.ts index bcd05bc71..36611616c 100644 --- a/marketplace-ui/src/app/modules/product/product-card/product-card.component.spec.ts +++ b/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); diff --git a/marketplace-ui/src/app/modules/product/product-card/product-card.component.ts b/marketplace-ui/src/app/modules/product/product-card/product-card.component.ts index f8e404cb1..e8887b865 100644 --- a/marketplace-ui/src/app/modules/product/product-card/product-card.component.ts +++ b/marketplace-ui/src/app/modules/product/product-card/product-card.component.ts @@ -6,11 +6,18 @@ 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' }) @@ -18,5 +25,7 @@ export class ProductCardComponent { themeService = inject(ThemeService); languageService = inject(LanguageService); + isRestClientCard = inject(ProductComponent).isRestClient(); + @Input() product!: Product; } diff --git a/marketplace-ui/src/app/modules/product/product.component.ts b/marketplace-ui/src/app/modules/product/product.component.ts index 83a416523..e788869e3 100644 --- a/marketplace-ui/src/app/modules/product/product.component.ts +++ b/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 = 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(); } } diff --git a/marketplace-ui/src/assets/scss/custom-style.scss b/marketplace-ui/src/assets/scss/custom-style.scss index 353b3313e..bd64efaf1 100644 --- a/marketplace-ui/src/assets/scss/custom-style.scss +++ b/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;