feat: P002271-6620-export-function (#92)

* feat: service to export data * fix: lint error fix * feat: add encodeParam, edit createTranslateLoader * feat: write unit test * fix: some minor fixes * fix: localized date in expected data * fix: use attr.aria-label to avoid cant bind since it isn't a known property * fix: renaming, fix some other tests * fix: sort imports --------- Co-authored-by: kim.tran <[email protected]>
onecx · Jan 31, 2024 · 3c2c766 · 3c2c766
1 parent aeef8b0
commit 3c2c766
Show file tree

Hide file tree

Showing 16 changed files with 449 additions and 33 deletions.
diff --git a/libs/portal-integration-angular/src/index.ts b/libs/portal-integration-angular/src/index.ts
@@ -70,6 +70,7 @@ export * from './lib/services/initialize-module-guard.service'
 export * from './lib/services/userprofile-api.service'
 export * from './lib/services/portal-dialog.service'
 export * from './lib/services/user.service'
+export * from './lib/services/export-data.service'
 
 // pipes
 export * from './lib/core/pipes/dynamic.pipe'

diff --git a/...-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html b/...-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html
@@ -85,7 +85,7 @@
                 pButton
                 class="p-button-rounded p-button-text mb-1 mr-2"
                 title="{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}"
-                ariaLabel="{{ (viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate }}"
+                [attr.aria-label]="(viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW') | translate"
                 (click)="onViewRow(item)"
                 *ocxIfPermission="viewPermission"
               ></button>
@@ -98,7 +98,7 @@
                 icon="pi pi-pencil"
                 pButton
                 title="{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}"
-                ariaLabel="{{ (editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate }}"
+                [attr.aria-label]="(editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT') | translate"
                 (click)="onEditRow(item)"
                 *ocxIfPermission="editPermission"
               ></button>
@@ -111,7 +111,7 @@
                 class="p-button-rounded p-button-text p-button-danger mb-1 mr-2"
                 pButton
                 title="{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}"
-                ariaLabel="{{ (deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate }}"
+                [attr.aria-label]="(deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE') | translate"
                 (click)="onDeleteRow(item)"
                 *ocxIfPermission="deletePermission"
               ></button>
@@ -125,7 +125,7 @@
                 [icon]="action.icon || ''"
                 (click)="action.callback(item)"
                 [title]="action.labelKey ? (action.labelKey | translate) : ''"
-                [ariaLabel]="action.labelKey ? (action.labelKey | translate) : ''"
+                [attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
                 [disabled]="action.disabled"
               ></button>
             </ng-container>

diff --git a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html b/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html
@@ -91,7 +91,7 @@
               pButton
               class="p-button-rounded p-button-text"
               title="{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}"
-              ariaLabel="{{ 'OCX_DATA_TABLE.ACTIONS.VIEW' | translate }}"
+              [attr.aria-label]="'OCX_DATA_TABLE.ACTIONS.VIEW' | translate"
               icon="pi pi-eye"
               (click)="onViewRow(rowObject)"
             ></button>
@@ -103,7 +103,7 @@
               pButton
               class="p-button-rounded p-button-text"
               title="{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}"
-              ariaLabel="{{ 'OCX_DATA_TABLE.ACTIONS.EDIT' | translate }}"      
+              [attr.aria-label]="'OCX_DATA_TABLE.ACTIONS.EDIT' | translate"      
               icon="pi pi-pencil"
               (click)="onEditRow(rowObject)"
             ></button>
@@ -115,7 +115,7 @@
               pButton
               class="p-button-rounded p-button-text p-button-danger"
               title="{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}"
-              ariaLabel="{{ 'OCX_DATA_TABLE.ACTIONS.DELETE' | translate }}"
+              [attr.aria-label]="'OCX_DATA_TABLE.ACTIONS.DELETE' | translate"
               icon="pi pi-trash"
               (click)="onDeleteRow(rowObject)"
             ></button>
@@ -129,7 +129,7 @@
               [icon]="action.icon || ''"
               (click)="action.callback(rowObject)"
               [title]="action.labelKey ? (action.labelKey | translate) : ''"
-              [ariaLabel]="action.labelKey ? (action.labelKey | translate) : ''"
+              [attr.aria-label]="action.labelKey ? (action.labelKey | translate) : ''"
               [disabled]="action.disabled"
             ></button>
           </ng-container>

diff --git a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.spec.ts
@@ -1,14 +1,15 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { DiagramComponent } from './diagram.component'
 import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { TranslateService } from '@ngx-translate/core'
+import 'jest-canvas-mock'
 import { TranslateTestingModule } from 'ngx-translate-testing'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { ChartModule } from 'primeng/chart'
 import { MessageModule } from 'primeng/message'
-import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
 import { DiagramHarness, TestbedHarnessEnvironment } from '../../../../../testing'
-import { TranslateService } from '@ngx-translate/core'
+import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
 import { DiagramType } from '../../../model/diagram-type'
+import { DiagramComponent } from './diagram.component'
 
 describe('DiagramComponent', () => {
   let translateService: TranslateService

diff --git a/...r/src/lib/core/components/group-by-count-diagram/group-by-count-diagram.component.spec.ts b/...r/src/lib/core/components/group-by-count-diagram/group-by-count-diagram.component.spec.ts
@@ -1,17 +1,18 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { GroupByCountDiagramComponent } from './group-by-count-diagram.component'
+import { HarnessLoader } from '@angular/cdk/testing'
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { TranslateService } from '@ngx-translate/core'
+import 'jest-canvas-mock'
 import { TranslateTestingModule } from 'ngx-translate-testing'
-import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
-import { ColumnType } from '../../../model/column-type.model'
-import { MessageModule } from 'primeng/message'
 import { ChartModule } from 'primeng/chart'
-import { DiagramComponent } from '../diagram/diagram.component'
+import { MessageModule } from 'primeng/message'
 import { firstValueFrom, of } from 'rxjs'
-import { HarnessLoader } from '@angular/cdk/testing'
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
-import { TranslateService } from '@ngx-translate/core'
 import { DiagramHarness } from '../../../../../testing'
+import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
+import { ColumnType } from '../../../model/column-type.model'
+import { DiagramComponent } from '../diagram/diagram.component'
+import { GroupByCountDiagramComponent } from './group-by-count-diagram.component'
 
 describe('GroupByCountDiagramComponent', () => {
   let translateService: TranslateService

diff --git a/...-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts b/...-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts
@@ -70,7 +70,8 @@ export class InteractiveDataViewComponent implements OnInit {
   @Output() deleteItem = new EventEmitter<RowListGridData>()
   @Output() viewItem = new EventEmitter<RowListGridData>()
   @Output() editItem = new EventEmitter<RowListGridData>()
-  @Output() dataViewLayoutChange: EventEmitter<any> = new EventEmitter()
+  @Output() dataViewLayoutChange = new EventEmitter<'grid' | 'list' | 'table'>()
+  @Output() displayedColumnsChange = new EventEmitter<DataTableColumn[]>()
   displayedColumns: DataTableColumn[] = []
   selectedGroupKey = ''
   isDeleteItemObserved: boolean | undefined
@@ -135,6 +136,7 @@ export class InteractiveDataViewComponent implements OnInit {
         column.predefinedGroupKeys?.includes(this.defaultGroupKey)
       )
     }
+    this.displayedColumnsChange.emit(this.displayedColumns)
     if (!this.groupSelectionNoGroupSelectedKey) {
       this.groupSelectionNoGroupSelectedKey = 'OCX_INTERACTIVE_DATA_VIEW.NO_GROUP_SELECTED'
     }
@@ -188,6 +190,7 @@ export class InteractiveDataViewComponent implements OnInit {
   onColumnGroupSelectionChange(event: GroupSelectionChangedEvent) {
     this.displayedColumns = event.activeColumns
     this.selectedGroupKey = event.groupKey
+    this.displayedColumnsChange.emit(this.displayedColumns)
   }
 
   registerEventListenerForDataView() {
@@ -220,5 +223,6 @@ export class InteractiveDataViewComponent implements OnInit {
   onColumnSelectionChange(event: ColumnSelectionChangedEvent) {
     this.displayedColumns = event.activeColumns
     this.selectedGroupKey = this.customGroupKey
+    this.displayedColumnsChange.emit(this.displayedColumns)
   }
 }
diff --git a/...portal-integration-angular/src/lib/core/components/portal-header/header.component.spec.ts b/...portal-integration-angular/src/lib/core/components/portal-header/header.component.spec.ts
@@ -9,6 +9,7 @@ import { ActivatedRoute, RouterModule } from '@angular/router'
 import { IfBreakpointDirective } from '../../directives/if-breakpoint.directive'
 import { TooltipModule } from 'primeng/tooltip'
 import { TranslateTestingModule } from 'ngx-translate-testing'
+import { PortalCoreModule } from '../../portal-core.module'
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent
@@ -17,7 +18,13 @@ describe('HeaderComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [HeaderComponent, UserAvatarComponent, IfBreakpointDirective],
-      imports: [HttpClientTestingModule, RouterModule, TooltipModule, TranslateTestingModule.withTranslations({}),],
+      imports: [
+        HttpClientTestingModule,
+        RouterModule,
+        TooltipModule,
+        TranslateTestingModule.withTranslations({}),
+        PortalCoreModule,
+      ],
       providers: [
         { provide: AUTH_SERVICE, useClass: MockAuthService },
         ConfigurationService,

diff --git a/...gration-angular/src/lib/core/components/portal-viewport/portal-viewport.component.spec.ts b/...gration-angular/src/lib/core/components/portal-viewport/portal-viewport.component.spec.ts
@@ -23,6 +23,7 @@ import { TranslateTestingModule } from 'ngx-translate-testing'
 import { AppStateService } from '../../../services/app-state.service'
 import { AUTH_SERVICE } from '../../../api/injection-tokens'
 import { MockAuthService } from '../../../mock-auth/mock-auth.service'
+import { PortalCoreModule } from '../../portal-core.module'
 
 describe('PortalViewportComponent', () => {
   const origAddEventListener = window.addEventListener
@@ -74,6 +75,7 @@ describe('PortalViewportComponent', () => {
         RouterModule,
         TooltipModule,
         TranslateTestingModule.withTranslations({}),
+        PortalCoreModule,
       ],
       providers: [
         ConfigurationService,

diff --git a/...al-integration-angular/src/lib/core/components/search-header/search-header.component.html b/...al-integration-angular/src/lib/core/components/search-header/search-header.component.html
@@ -17,7 +17,7 @@
           (onClick)="onResetClicked()"
           label="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}"
           icon="pi pi-eraser"
-          ariaLabel="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}"
+          [attr.aria-label]="'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate"
           title="{{ 'OCX_SEARCH_HEADER.RESET_BUTTON_TEXT' | translate }}"
         >
         </p-button>
@@ -27,7 +27,7 @@
           (onClick)="onSearchClicked()"
           label="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate }}"
           icon="pi pi-search"
-          ariaLabel="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate }}"
+          [attr.aria-label]="'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate"
           title="{{ 'OCX_SEARCH_HEADER.SEARCH_BUTTON_TEXT' | translate }}"
         >
         </p-button>

diff --git a/...integration-angular/src/lib/core/components/search-header/search-header.component.spec.ts b/...integration-angular/src/lib/core/components/search-header/search-header.component.spec.ts
@@ -8,6 +8,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { ButtonModule } from 'primeng/button'
 import { BreadcrumbModule } from 'primeng/breadcrumb'
 import { AppStateService } from '../../../services/app-state.service'
+import { PortalCoreModule } from '../../portal-core.module'
 
 describe('SearchHeaderComponent', () => {
   const origAddEventListener = window.addEventListener
@@ -44,6 +45,7 @@ describe('SearchHeaderComponent', () => {
         HttpClientTestingModule,
         ButtonModule,
         BreadcrumbModule,
+        PortalCoreModule
       ],
       providers: [ConfigurationService, AppStateService],
     }).compileComponents()

diff --git a/libs/portal-integration-angular/src/lib/core/portal-core.module.ts b/libs/portal-integration-angular/src/lib/core/portal-core.module.ts
@@ -171,7 +171,6 @@ export class PortalMissingTranslationHandler implements MissingTranslationHandle
     {
       provide: LOCALE_ID,
       useFactory: (userService: UserService) => {
-        console.log('Using locale: ' + userService.lang$.getValue())
         return userService.lang$.getValue()
       },
       deps: [UserService],

diff --git a/libs/portal-integration-angular/src/lib/core/utils/dateutils.ts b/libs/portal-integration-angular/src/lib/core/utils/dateutils.ts
@@ -1,11 +1,10 @@
-import { TranslateService } from '@ngx-translate/core'
-import { Injectable } from '@angular/core'
+import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 
 @Injectable({
   providedIn: 'root',
 })
 export class DateUtils {
-  constructor(private translateService: TranslateService) {}
+  constructor(@Inject(LOCALE_ID) protected locale: string) {}
 
   options: Intl.DateTimeFormatOptions = {
     month: 'short',
@@ -18,9 +17,7 @@ export class DateUtils {
 
   localizedDate(date: string | number | Date | undefined): string {
     return date
-      ? new Intl.DateTimeFormat(this.translateService.getBrowserLang(), this.options).format(
-          date instanceof Date ? date : new Date(date)
-        )
+      ? new Intl.DateTimeFormat(this.locale, this.options).format(date instanceof Date ? date : new Date(date))
       : ''
   }
 }