MARP-831 Handle Feedback

axonivy-market · Aug 16, 2024 · e64e7e8 · e64e7e8
1 parent 77c2cf3
commit e64e7e8
Show file tree

Hide file tree

Showing 12 changed files with 25 additions and 93 deletions.
diff --git a/...ct-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.scss b/...ct-detail-feedback/product-feedbacks-panel/feedback-filter/feedback-filter.component.scss
@@ -1,20 +1,3 @@
-select {
-  border-radius: 10px;
-  font-size: 14px;
-  line-height: 120%;
-  font-weight: 400;
-  padding: 10px 15px 10px auto;
-  height: 37px;
-  opacity: 0.8;
-  border: 1px solid;
-  cursor: pointer;
-  option {
-    padding: 10px;
-    font-weight: 400;
-    font-size: 14px;
-  }
-}
-
 p {
   margin-right: 20px;
 }

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
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, inject, Output } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { FEEDBACK_SORT_TYPES, LABEL_KEY } from '../../../../../../shared/constants/common.constant';
+import { FEEDBACK_SORT_TYPES } from '../../../../../../shared/constants/common.constant';
 import { FormsModule } from '@angular/forms';
 import { ProductFeedbackService } from '../product-feedback.service';
 import { LanguageService } from '../../../../../../core/services/language/language.service';
@@ -17,14 +17,13 @@ import { FeedbackSortType } from '../../../../../../shared/enums/feedback-sort-t
   styleUrl: './feedback-filter.component.scss'
 })
 export class FeedbackFilterComponent {
-  protected readonly LABEL_KEY = LABEL_KEY;
   feedbackSortTypes = FEEDBACK_SORT_TYPES;
 
   @Output() sortChange = new EventEmitter<string>();
 
   productFeedbackService = inject(ProductFeedbackService);
   languageService = inject(LanguageService);
-  selectedSortTypeLabel: string = CommonUtils.getLabel(FEEDBACK_SORT_TYPES[0].value,FEEDBACK_SORT_TYPES);
+  selectedSortTypeLabel: string = CommonUtils.getLabel(FEEDBACK_SORT_TYPES[0].value, FEEDBACK_SORT_TYPES);
 
   onSortChange(event: ItemDropdown<FeedbackSortType>): void {
     this.selectedSortTypeLabel = CommonUtils.getLabel(event.value, FEEDBACK_SORT_TYPES);

diff --git a/...product-detail/product-detail-version-action/product-detail-version-action.component.scss b/...product-detail/product-detail-version-action/product-detail-version-action.component.scss
@@ -69,9 +69,11 @@
   line-height: 14.52px;
   text-align: left;
 }
-.border__dropdown {
+
+::ng-deep .border__dropdown {
   border: 0.5px solid var(--ivy-secondary-border-color);
 }
+
 .btn {
   padding: 12px 32px;
   gap: 10px;

diff --git a/...duct-detail/product-detail-version-action/product-detail-version-action.component.spec.ts b/...duct-detail/product-detail-version-action/product-detail-version-action.component.spec.ts
@@ -4,7 +4,6 @@ import { ProductDetailVersionActionComponent } from './product-detail-version-ac
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ProductService } from '../../product.service';
 import { provideHttpClient } from '@angular/common/http';
-import { Artifact } from '../../../../shared/models/vesion-artifact.model';
 import { ElementRef } from '@angular/core';
 import { ItemDropdown } from '../../../../shared/models/item-dropdown.model';
 
@@ -84,7 +83,7 @@ describe('ProductVersionActionComponent', () => {
   });
 
   it('should call sendRequestToProductDetailVersionAPI and update versions and versionMap', () => {
-    const { mockArtifct1, mockArtifct2 } = mockApiWithExpectedResponse();
+    const { mockArtifact1, mockArtifact2 } = mockApiWithExpectedResponse();
 
     component.getVersionWithArtifact();
 
@@ -97,8 +96,8 @@ describe('ProductVersionActionComponent', () => {
     );
 
     expect(component.versions()).toEqual(['Version 1.0', 'Version 2.0']);
-    expect(component.versionMap.get('Version 1.0')).toEqual([mockArtifct1]);
-    expect(component.versionMap.get('Version 2.0')).toEqual([mockArtifct2]);
+    expect(component.versionMap.get('Version 1.0')).toEqual([mockArtifact1]);
+    expect(component.versionMap.get('Version 2.0')).toEqual([mockArtifact2]);
     expect(component.selectedVersion()).toBe('Version 1.0');
   });
 
@@ -135,12 +134,12 @@ describe('ProductVersionActionComponent', () => {
   });
 
   function mockApiWithExpectedResponse() {
-    const mockArtifct1 = {
+    const mockArtifact1 = {
       name: 'Example Artifact1',
       downloadUrl: 'https://example.com/download',
       isProductArtifact: true, label: 'Example Artifact1',
     } as ItemDropdown;
-    const mockArtifct2 = {
+    const mockArtifact2 = {
       name: 'Example Artifact2',
       downloadUrl: 'https://example.com/download',
       label: 'Example Artifact2',
@@ -149,48 +148,20 @@ describe('ProductVersionActionComponent', () => {
     const mockData = [
       {
         version: '1.0',
-        artifactsByVersion: [mockArtifct1]
+        artifactsByVersion: [mockArtifact1]
       },
       {
         version: '2.0',
-        artifactsByVersion: [mockArtifct2]
+        artifactsByVersion: [mockArtifact2]
       }
     ];
 
     productServiceMock.sendRequestToProductDetailVersionAPI.and.returnValue(
       of(mockData)
     );
-    return { mockArtifct1, mockArtifct2 };
+    return { mockArtifact1: mockArtifact1, mockArtifact2: mockArtifact2 };
   }
 
-  it('should toggle isVersionsDropDownShow on calling onShowVersions', () => {
-    const initialState = component.isVersionsDropDownShow();
-
-    component.onShowVersions();
-    expect(component.isVersionsDropDownShow()).toBe(!initialState);
-
-    component.onShowVersions();
-    expect(component.isVersionsDropDownShow()).toBe(initialState);
-  });
-
-  it('should not call onShowVersions if dropdown is not shown', () => {
-    spyOn(component, 'isVersionsDropDownShow').and.returnValue(false);
-    spyOn(component, 'onShowVersions');
-    elementRef = TestBed.inject(ElementRef) as unknown as MockElementRef;
-
-    const outsideEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window
-    });
-
-    elementRef.nativeElement.contains.and.returnValue(false);
-
-    document.dispatchEvent(outsideEvent);
-
-    expect(component.onShowVersions).not.toHaveBeenCalled();
-  });
-
   it('should open a new tab with the selected artifact URL', () => {
     const mockWindowOpen = jasmine.createSpy('windowOpen').and.returnValue({
       blur: jasmine.createSpy('blur')

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
@@ -2,7 +2,6 @@ import {
   AfterViewInit,
   Component, computed,
   ElementRef, EventEmitter,
-  HostListener,
   inject,
   Input,
   model, Output, Signal,
@@ -45,7 +44,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
   artifacts: WritableSignal<ItemDropdown[]> = signal([]);
   isDevVersionsDisplayed = signal(false);
   isDropDownDisplayed = signal(false);
-  isVersionsDropDownShow = signal(false);
   isDesignerEnvironment = signal(false);
   isInvalidInstallationEnvironment = signal(false);
   designerVersion = '';
@@ -73,10 +71,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
 
   }
 
-  onShowVersions() {
-    this.isVersionsDropDownShow.set(!this.isVersionsDropDownShow());
-  }
-
   getInstallationTooltipText() {
     return `<p class="text-primary">Please open the
         <a href="https://market.axonivy.com" class="ivy__link">Axon Ivy Market</a>
@@ -160,16 +154,6 @@ export class ProductDetailVersionActionComponent implements AfterViewInit {
     window.focus();
   }
 
-  @HostListener('document:click', ['$event'])
-  handleClickOutside(event: MouseEvent) {
-    if (
-      !this.elementRef.nativeElement.contains(event.target) &&
-      this.isVersionsDropDownShow()
-    ) {
-      this.onShowVersions();
-    }
-  }
-
   onUpdateInstallationCount() {
     this.productService
       .sendRequestToUpdateInstallationCount(this.productId)

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 } from '../../../shared/constants/common.constant';
+import { 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';
@@ -280,5 +280,4 @@ export class ProductDetailComponent {
     return this.detailTabsForDropdown.filter(tab => this.getContent(tab.value));
   }
 
-  protected readonly LABEL_KEY = LABEL_KEY;
 }
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
@@ -40,7 +40,7 @@ <h4 [lang]="languageService.selectedLanguage()" class="sort-container__label tex
         <app-common-dropdown
           [items]="sorts"
           [selectedItem]="selectedSortLabel | translate"
-          buttonClass="form-select border-primary sort-type text-primary"
+          buttonClass="form-select border-primary text-primary"
           ariaLabel="sort"
           (itemSelected)="onSortChange($event.value)">
         </app-common-dropdown>

diff --git a/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.scss b/marketplace-ui/src/app/modules/product/product-filter/product-filter.component.scss
@@ -34,10 +34,6 @@ $rowHeight: 37px;
   cursor: pointer;
 }
 
-.sort-type {
-  cursor: pointer;
-}
-
 .sort-container__label {
   line-height: 25.2px;
 }
@@ -87,5 +83,3 @@ $rowHeight: 37px;
     font-size: 1rem;
   }
 }
-
-
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
@@ -3,7 +3,7 @@ import { Component, EventEmitter, inject, Output } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ThemeService } from '../../../core/services/theme/theme.service';
-import { FILTER_TYPES, LABEL_KEY, SORT_TYPES } from '../../../shared/constants/common.constant';
+import { FILTER_TYPES, SORT_TYPES } from '../../../shared/constants/common.constant';
 import { TypeOption } from '../../../shared/enums/type-option.enum';
 import { SortOption } from '../../../shared/enums/sort-option.enum';
 import { LanguageService } from '../../../core/services/language/language.service';
@@ -19,7 +19,6 @@ import { ItemDropdown } from '../../../shared/models/item-dropdown.model';
   styleUrl: './product-filter.component.scss'
 })
 export class ProductFilterComponent {
-  protected readonly LABEL_KEY = LABEL_KEY;
   @Output() searchChange = new EventEmitter<string>();
   @Output() filterChange = new EventEmitter<ItemDropdown<TypeOption>>();
   @Output() sortChange = new EventEmitter<SortOption>();

diff --git a/marketplace-ui/src/app/shared/components/common-dropdown/common-dropdown.component.html b/marketplace-ui/src/app/shared/components/common-dropdown/common-dropdown.component.html
@@ -6,9 +6,11 @@
     {{ selectedItem }}
   </button>
   <div class="dropdown-menu menu-bar" [class.show]="isDropdownOpen">
-    <div class="dropdown-item item-bar text-primary" *ngFor="let item of items" (click)="onSelect(item)"
-      [ngClass]="{'active': isActiveItem(item , selectedItem)}">
-      {{ item.label   | translate }}
-    </div>
+    @for (item of items; track $index) {
+      <div class="dropdown-item item-bar text-primary" (click)="onSelect(item)"
+        [ngClass]="{'active': isActiveItem(item , selectedItem)}">
+        {{ item.label | translate }}
+      </div>
+    }
   </div>
 </div>
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
@@ -1,13 +1,13 @@
 import { Component, ElementRef, EventEmitter, HostListener, inject, Input, Output } from '@angular/core';
-import { NgClass, NgForOf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ItemDropdown } from '../../models/item-dropdown.model';
+import { NAV_ITEMS } from '../../constants/common.constant';
 
 @Component({
   selector: 'app-common-dropdown',
   standalone: true,
   imports: [
-    NgForOf,
     NgClass,
     TranslateModule
   ],
@@ -43,4 +43,5 @@ export class CommonDropdownComponent <T extends string> {
       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
@@ -186,5 +186,3 @@ export const DEFAULT_PAGEABLE_IN_REST_CLIENT: Pageable = {
   page: 0,
   size: 40
 };
-
-export const LABEL_KEY: string = 'label';