MARP-831 Handle Feedback

axonivy-market · Aug 16, 2024 · 64a8da6 · 64a8da6
1 parent 4c83d36
commit 64a8da6
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 32 deletions.
diff --git a/...ct-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html b/...ct-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.html
@@ -12,6 +12,4 @@
       (itemSelected)="onSortChange($event)">
     </app-common-dropdown>
   </div>
-
-
 </div>
diff --git a/...duct-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts b/...duct-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.ts
@@ -6,6 +6,8 @@ import { ProductFeedbackService } from '../product-feedback.service';
 import { LanguageService } from '../../../../../../core/services/language/language.service';
 import { CommonDropdownComponent } from '../../../../../../shared/components/common-dropdown/common-dropdown.component';
 import { CommonUtils } from '../../../../../../shared/utils/common.utils';
+import { ItemDropdown } from '../../../../../../shared/models/item-dropdown.model';
+import { FeedbackSortType } from '../../../../../../shared/enums/feedback-sort-type';
 
 @Component({
   selector: 'app-feedback-filter',
@@ -15,6 +17,7 @@ import { CommonUtils } from '../../../../../../shared/utils/common.utils';
   styleUrl: './feedback-filter.component.scss'
 })
 export class FeedbackFilterComponent {
+  protected readonly LABEL_KEY = LABEL_KEY;
   feedbackSortTypes = FEEDBACK_SORT_TYPES;
 
   @Output() sortChange = new EventEmitter<string>();
@@ -23,10 +26,9 @@ export class FeedbackFilterComponent {
   languageService = inject(LanguageService);
   selectedSortTypeLabel: string = CommonUtils.getLabel(FEEDBACK_SORT_TYPES[0].value,FEEDBACK_SORT_TYPES);
 
-  onSortChange(event: any): void {
+  onSortChange(event: ItemDropdown<FeedbackSortType>): void {
     this.selectedSortTypeLabel = CommonUtils.getLabel(event.value, FEEDBACK_SORT_TYPES);
     this.sortChange.emit(event.sortFn);
   }
 
-  protected readonly LABEL_KEY = LABEL_KEY;
 }
diff --git a/...l-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.ts b/...l-feedback/product-star-rating-panel/add-feedback-dialog/add-feedback-dialog.component.ts
@@ -69,5 +69,4 @@ export class AddFeedbackDialogComponent {
     this.feedback.rating = newRate;
   }
 
-  protected readonly feedbackSortTypes = FEEDBACK_SORT_TYPES;
 }
diff --git a/...t/product-detail/product-detail-version-action/product-detail-version-action.component.ts b/...t/product-detail/product-detail-version-action/product-detail-version-action.component.ts
@@ -10,15 +10,14 @@ import {
   WritableSignal
 } from '@angular/core';
 import { ThemeService } from '../../../../core/services/theme/theme.service';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ProductService } from '../../product.service';
 import { Artifact } from '../../../../shared/models/vesion-artifact.model';
 import { Tooltip } from 'bootstrap';
 import { ProductDetailService } from '../product-detail.service';
 import { RoutingQueryParamService } from '../../../../shared/services/routing.query.param.service';
-import { SORT_TYPES } from '../../../../shared/constants/common.constant';
 import { CommonDropdownComponent } from '../../../../shared/components/common-dropdown/common-dropdown.component';
 import { LanguageService } from '../../../../core/services/language/language.service';
 

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -115,7 +115,7 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
           <div class="dropdown-row flex-row align-items-center w-100">
             <div
               class="dropdown-container position-relative d-flex align-items-center w-100">
-              <div  id="tab-group-dropdown2" class="flex-grow-1 w-100" >
+              <div id="tab-group-dropdown" class="flex-grow-1 w-100" >
                 <app-common-dropdown
                   [items]="detailTabsForDropdown"
                   [selectedItem]="selectedTabLabel | translate"

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
@@ -17,7 +17,7 @@ import { CommonModule } from '@angular/common';
 import { ProductDetailInformationTabComponent } from './product-detail-information-tab/product-detail-information-tab.component';
 import { ProductDetailVersionActionComponent } from './product-detail-version-action/product-detail-version-action.component';
 import { ProductDetailMavenContentComponent } from './product-detail-maven-content/product-detail-maven-content.component';
-import { LABEL_KEY, PRODUCT_DETAIL_TABS, SORT_TYPES } from '../../../shared/constants/common.constant';
+import { LABEL_KEY, PRODUCT_DETAIL_TABS } from '../../../shared/constants/common.constant';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { LanguageService } from '../../../core/services/language/language.service';
 import { MultilingualismPipe } from '../../../shared/pipes/multilingualism.pipe';
@@ -34,6 +34,7 @@ import { ProductStarRatingService } from './product-detail-feedback/product-star
 import { RoutingQueryParamService } from '../../../shared/services/routing.query.param.service';
 import { CommonDropdownComponent } from '../../../shared/components/common-dropdown/common-dropdown.component';
 import { CommonUtils } from '../../../shared/utils/common.utils';
+import { ItemDropdown } from '../../../shared/models/item-dropdown.model';
 
 export interface DetailTab {
   activeClass: string;
@@ -199,7 +200,7 @@ export class ProductDetailComponent {
 
   onTabChange(event: string) {
     this.setActiveTab(event);
-    this.selectedTabLabel = event;
+    this.selectedTabLabel = CommonUtils.getLabel(event, PRODUCT_DETAIL_TABS);
     this.isTabDropdownShown.update(value => !value);
     this.onTabDropdownShown();
   }
@@ -281,7 +282,7 @@ export class ProductDetailComponent {
     });
   }
 
-  getNotEmptyTabs(): DetailTab[] {
+  getNotEmptyTabs(): ItemDropdown[] {
     return this.detailTabsForDropdown.filter(tab => this.getContent(tab.value));
   }
 

diff --git a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.html b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.html
@@ -6,7 +6,7 @@
     <!-- Filter type -->
     <div class="filter-container__button d-none d-md-flex">
       @for (type of types; track $index) {
-      <div (click)="onSelectType(type.value)" class="filter-type border" [ngClass]="{
+      <div (click)="onSelectType(type)" class="filter-type border" [ngClass]="{
             'border-light text-light': themeService.isDarkMode(),
             'border-dark text-dark': !themeService.isDarkMode(),
             'bg-light text-dark':
@@ -27,7 +27,7 @@
         [labelKey]="LABEL_KEY"
         buttonClass="form-select border-primary filter-type--select w-auto"
         ariaLabel="sort"
-        (itemSelected)="onSelectType($event.value)">
+        (itemSelected)="onSelectType($event)">
       </app-common-dropdown>
     </div>
 

diff --git a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.ts b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.ts
@@ -9,6 +9,7 @@ import { SortOption } from '../../../shared/enums/sort-option.enum';
 import { LanguageService } from '../../../core/services/language/language.service';
 import { CommonDropdownComponent } from '../../../shared/components/common-dropdown/common-dropdown.component';
 import { CommonUtils } from '../../../shared/utils/common.utils';
+import { ItemDropdown } from '../../../shared/models/item-dropdown.model';
 
 @Component({
   selector: 'app-product-filter',
@@ -18,8 +19,9 @@ import { CommonUtils } from '../../../shared/utils/common.utils';
   styleUrl: './product-filter.component.scss'
 })
 export class ProductFilterComponent {
+  protected readonly LABEL_KEY = LABEL_KEY;
   @Output() searchChange = new EventEmitter<string>();
-  @Output() filterChange = new EventEmitter<TypeOption>();
+  @Output() filterChange = new EventEmitter<ItemDropdown<TypeOption>>();
   @Output() sortChange = new EventEmitter<SortOption>();
 
   selectedTypeLabel: string = CommonUtils.getLabel(FILTER_TYPES[0].value, FILTER_TYPES);
@@ -32,8 +34,8 @@ export class ProductFilterComponent {
   translateService = inject(TranslateService);
   languageService = inject(LanguageService);
 
-  onSelectType(type: TypeOption) {
-    this.selectedTypeLabel = CommonUtils.getLabel(type , this.types);
+  onSelectType(type: ItemDropdown<TypeOption>) {
+    this.selectedTypeLabel = CommonUtils.getLabel(type.value , this.types);
     this.filterChange.emit(type);
   }
 
@@ -46,5 +48,4 @@ export class ProductFilterComponent {
     this.selectedSortLabel = CommonUtils.getLabel(sort, this.sorts);
   }
 
-  protected readonly LABEL_KEY = LABEL_KEY;
 }
diff --git a/marketplace-ui/src/app/modules/product/product.component.html b/marketplace-ui/src/app/modules/product/product.component.html
@@ -47,4 +47,4 @@ <h4 [lang]="languageService.selectedLanguage()" class="text-secondary">
   }
 
   <div #observer class="observer"></div>
-</div>
+</div>
diff --git a/marketplace-ui/src/app/modules/product/product.component.ts b/marketplace-ui/src/app/modules/product/product.component.ts
@@ -33,6 +33,7 @@ import {
   DEFAULT_PAGEABLE_IN_REST_CLIENT,
   DESIGNER_COOKIE_VARIABLE
 } from '../../shared/constants/common.constant';
+import { ItemDropdown } from '../../shared/models/item-dropdown.model';
 
 const SEARCH_DEBOUNCE_TIME = 500;
 
@@ -117,11 +118,11 @@ export class ProductComponent implements AfterViewInit, OnDestroy {
     this.router.navigate(['', productId]);
   }
 
-  onFilterChange(selectedType: TypeOption) {
+  onFilterChange(selectedType: ItemDropdown<TypeOption>) {
     this.criteria = {
       ...this.criteria,
       nextPageHref: '',
-      type: selectedType
+      type: selectedType.value
     };
     this.loadProductItems(true);
   }

diff --git a/marketplace-ui/src/app/shared/components/common-dropdown/common-dropdown.component.ts b/marketplace-ui/src/app/shared/components/common-dropdown/common-dropdown.component.ts
@@ -39,11 +39,7 @@ export class CommonDropdownComponent {
 
   @HostListener('document:click', ['$event'])
   handleClickOutside(event: MouseEvent) {
-    if (
-      !this.elementRef.nativeElement
-        .querySelector('.dropdown')
-        .contains(event.target) &&
-      this.isDropdownOpen) {
+    if (!this.elementRef.nativeElement.querySelector('.dropdown').contains(event.target) && this.isDropdownOpen) {
       this.isDropdownOpen = !this.isDropdownOpen;
     }
   }

diff --git a/marketplace-ui/src/app/shared/constants/common.constant.ts b/marketplace-ui/src/app/shared/constants/common.constant.ts
@@ -5,6 +5,7 @@ import { SortOption } from '../enums/sort-option.enum';
 import { NavItem } from '../models/nav-item.model';
 import { DetailTab } from '../../modules/product/product-detail/product-detail.component';
 import { Pageable } from '../models/apis/pageable.model';
+import { ItemDropdown } from '../models/item-dropdown.model';
 
 export const NAV_ITEMS: NavItem[] = [
   {
@@ -81,7 +82,7 @@ export const LANGUAGES = [
   }
 ];
 
-export const FILTER_TYPES = [
+export const FILTER_TYPES: ItemDropdown<TypeOption>[] = [
   {
     value: TypeOption.All_TYPES,
     label: 'common.filter.value.allTypes'
@@ -100,7 +101,7 @@ export const FILTER_TYPES = [
   }
 ];
 
-export const SORT_TYPES = [
+export const SORT_TYPES: ItemDropdown<SortOption>[] = [
   {
     value: SortOption.STANDARD,
     label: 'common.sort.value.standard'
@@ -119,7 +120,7 @@ export const SORT_TYPES = [
   }
 ];
 
-export const PRODUCT_DETAIL_TABS: DetailTab[] = [
+export const PRODUCT_DETAIL_TABS: ItemDropdown[] = [
   {
     activeClass: "activeTab === 'description'",
     tabId: 'description-tab',
@@ -146,7 +147,7 @@ export const PRODUCT_DETAIL_TABS: DetailTab[] = [
   }
 ];
 
-export const FEEDBACK_SORT_TYPES = [
+export const FEEDBACK_SORT_TYPES: ItemDropdown<FeedbackSortType>[] = [
   {
     value: FeedbackSortType.NEWEST,
     label: 'common.sort.value.newest',

diff --git a/marketplace-ui/src/app/shared/models/item-dropdown.model.ts b/marketplace-ui/src/app/shared/models/item-dropdown.model.ts
@@ -0,0 +1,7 @@
+export interface ItemDropdown<T extends string = string> {
+  activeClass?: string,
+  tabId?: string,
+  value: T;
+  label: string;
+  sortFn?: string;
+}
diff --git a/marketplace-ui/src/app/shared/utils/common.utils.ts b/marketplace-ui/src/app/shared/utils/common.utils.ts
@@ -1,8 +1,10 @@
+import { ItemDropdown } from '../models/item-dropdown.model';
+
 export class CommonUtils {
 
-  static getLabel(value: string, options: any): string {
-    const currentLabel = options.find((option: { value: string, label: string; }) => option.value === value)?.label;
-    return currentLabel || options[0].label;
+  static getLabel<T extends string>(value: string, options: ItemDropdown<T>[]): string {
+    const currentLabel = options.find((option: ItemDropdown<T>) => option.value === value)?.label;
+    return currentLabel ?? options[0].label;
   }
 
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,4 @@ @@
           (itemSelected)="onSortChange($event)">
         </app-common-dropdown>
       </div>
     </div>