diff --git a/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts b/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts index cf0e52b4..6985577b 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/currency/currency.component.ts @@ -201,11 +201,17 @@ export class CurrencyComponent implements OnInit, OnDestroy { const propName = this.pConn$?.getStateProps().value; let value = event?.target?.value; value = value?.substring(1); - if (this.currSep === ',') { - value = value.replace(/,/g, ''); - } else { + // replacing thousand seperator with empty string as not required in api call + if (this.currSep === '.') { value = value?.replace(/\./g, ''); - value = value?.replace(/,/g, '.'); + } else { + const regExp = new RegExp(String.raw`${this.currSep}`, 'g'); + value = value.replace(regExp, ''); + } + // replacing decimal seperator with '.' + if (this.currDec !== '.') { + const regExp = new RegExp(String.raw`${this.currDec}`, 'g'); + value = value.replace(regExp, '.'); } handleEvent(actionsApi, 'changeNblur', propName, value); } diff --git a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts index 861dab3e..4c183cb7 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts @@ -196,11 +196,19 @@ export class DecimalComponent implements OnInit, OnDestroy { const actionsApi = this.pConn$?.getActionsApi(); const propName = this.pConn$?.getStateProps().value; let value = event?.target?.value; - if (this.currSep === ',') { - value = value.replace(/,/g, ''); - } else { - value = value?.replace(/\./g, ''); - value = value?.replace(/,/g, '.'); + // replacing thousand seperator with empty string as not required in api call + if (this.configProps$.showGroupSeparators) { + if (this.currSep === '.') { + value = value?.replace(/\./g, ''); + } else { + const regExp = new RegExp(String.raw`${this.currSep}`, 'g'); + value = value.replace(regExp, ''); + } + } + // replacing decimal seperator with '.' + if (this.currDec !== '.') { + const regExp = new RegExp(String.raw`${this.currDec}`, 'g'); + value = value.replace(regExp, '.'); } handleEvent(actionsApi, 'changeNblur', propName, value); } diff --git a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html index 1db733ae..1ee43d9b 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html +++ b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.html @@ -29,7 +29,6 @@ (change)="fieldOnChange()" (blur)="fieldOnBlur($event)" [readonly]="bReadonly$" - [value]="value$" /> {{ getErrorMessage() }} diff --git a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts index f42d8892..517dc12d 100644 --- a/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/field/percentage/percentage.component.ts @@ -121,6 +121,7 @@ export class PercentageComponent implements OnInit, OnDestroy { const nValue: any = this.configProps$.value; if (nValue) { this.value$ = nValue; + this.fieldControl.setValue(nValue); } this.helperText = this.configProps$.helperText; this.placeholder = this.configProps$.placeholder || ''; @@ -187,11 +188,19 @@ export class PercentageComponent implements OnInit, OnDestroy { fieldOnBlur(event: any) { let value = event?.target?.value; value = value ? value.replace(/%/g, '') : ''; - if (this.currSep === '.') { - value = value?.replace(/\./g, ''); - value = value?.replace(/,/g, '.'); - } else { - value = value.replace(/,/g, ''); + // replacing thousand seperator with empty string as not required in api call + if (this.configProps$.showGroupSeparators) { + if (this.currSep === '.') { + value = value?.replace(/\./g, ''); + } else { + const regExp = new RegExp(String.raw`${this.currSep}`, 'g'); + value = value.replace(regExp, ''); + } + } + // replacing decimal seperator with '.' + if (this.currDec !== '.') { + const regExp = new RegExp(String.raw`${this.currDec}`, 'g'); + value = value.replace(regExp, '.'); } handleEvent(this.actionsApi, 'changeNblur', this.propName, value); } diff --git a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.html b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.html index 78e24b2d..6486c315 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.html +++ b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.html @@ -1,5 +1,8 @@
+

+ {{ label }} {{ getResultsText() }} +

Search diff --git a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss index ec8e8317..3f590816 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss +++ b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.scss @@ -165,3 +165,14 @@ tr.mat-mdc-row { background-color: transparent; align-items: center; } + +.results-count { + opacity: 0.7; + font-size: 0.8rem; + font-weight: bold; + margin-inline-start: 0.625rem; +} + +.label { + margin: 8px; +} diff --git a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.ts b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.ts index f0badbf2..0fa38fcc 100644 --- a/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.ts +++ b/packages/angular-sdk-components/src/lib/_components/template/list-view/list-view.component.ts @@ -1,4 +1,3 @@ -/* eslint-disable max-classes-per-file */ import { Component, OnInit, Input, ViewChild, forwardRef, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatDatepickerModule } from '@angular/material/datepicker'; @@ -29,6 +28,8 @@ declare const window: any; const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' }; interface ListViewProps { + inheritedProps: any; + title: string | undefined; // If any, enter additional props that only exist on this component globalSearch?: boolean; referenceList?: any; @@ -42,6 +43,7 @@ interface ListViewProps { grouping: string | boolean; value: any; readonlyContextList: any; + label?: string; } export class Group { @@ -159,6 +161,7 @@ export class ListViewComponent implements OnInit, OnDestroy { xRayApis = PCore.getDebugger().getXRayRuntime(); xRayUid = this.xRayApis.startXRay(); checkBoxValue: string; + label?: string = ''; constructor( private psService: ProgressSpinnerService, @@ -192,6 +195,18 @@ export class ListViewComponent implements OnInit, OnDestroy { this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' }); this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' }); + let title = this.configProps$?.title || this.configProps$?.label || 'List'; + const inheritedProps = this.configProps$?.inheritedProps; + if (title === 'List' && inheritedProps) { + for (const inheritedProp of inheritedProps) { + if (inheritedProp?.prop === 'label') { + title = inheritedProp?.value; + break; + } + } + } + this.label = title; + this.searchIcon$ = this.utils.getImageSrc('search', this.utils.getSDKStaticContentUrl()); setTimeout(() => { PCore.getPubSubUtils().subscribe( @@ -1380,6 +1395,11 @@ export class ListViewComponent implements OnInit, OnDestroy { return listFields; } + getResultsText() { + const recordsCount = this.repeatList$?.paginator?.length || 0; + return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`; + } + getField(fieldDefs, columnId) { const fieldsMap = this.getFieldsMap(fieldDefs); return fieldsMap.get(columnId); diff --git a/projects/angular-test-app/tests/e2e/DigV2/LandingPages/InlineDashboard.spec.js b/projects/angular-test-app/tests/e2e/DigV2/LandingPages/InlineDashboard.spec.js index bcea5150..effc3b1b 100644 --- a/projects/angular-test-app/tests/e2e/DigV2/LandingPages/InlineDashboard.spec.js +++ b/projects/angular-test-app/tests/e2e/DigV2/LandingPages/InlineDashboard.spec.js @@ -49,11 +49,11 @@ test.describe('E2E test', () => { await expect(inlineDashboardTitle).toBeVisible(); /** Testing Complex Fields list presence */ - const complexFieldsList = page.locator('span:has-text("Complex Fields - List")'); + const complexFieldsList = page.locator('h3:has-text("Complex Fields - List")'); await expect(complexFieldsList).toBeVisible(); /** Testing My Work List presence */ - const myworkList = page.locator('span:has-text("My Work List")'); + const myworkList = page.locator('h3:has-text("My Work List")'); await expect(myworkList).toBeVisible(); await expect(page.getByRole('button', { name: ' Case ID ' })).toBeVisible();