From bf11dc8d1bcbb1eb41a013ab5b67fbe2e5e712d3 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Tue, 27 Feb 2024 08:26:06 -0800 Subject: [PATCH] Enhancement: better monetary field with currency code (#5858) --- docs/usage.md | 2 +- src-ui/messages.xlf | 48 +++++++------ src-ui/src/app/app.module.ts | 2 + .../input/monetary/monetary.component.html | 27 ++++++++ .../input/monetary/monetary.component.scss | 11 +++ .../input/monetary/monetary.component.spec.ts | 59 ++++++++++++++++ .../input/monetary/monetary.component.ts | 59 ++++++++++++++++ .../document-detail.component.html | 6 +- ...lter_customfieldinstance_value_monetary.py | 19 ++++++ src/documents/models.py | 2 +- src/documents/serialisers.py | 15 ++++- src/documents/tests/test_api_custom_fields.py | 67 +++++++++++++++++-- src/locale/en_US/LC_MESSAGES/django.po | 4 +- 13 files changed, 283 insertions(+), 38 deletions(-) create mode 100644 src-ui/src/app/components/common/input/monetary/monetary.component.html create mode 100644 src-ui/src/app/components/common/input/monetary/monetary.component.scss create mode 100644 src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts create mode 100644 src-ui/src/app/components/common/input/monetary/monetary.component.ts create mode 100644 src/documents/migrations/1045_alter_customfieldinstance_value_monetary.py diff --git a/docs/usage.md b/docs/usage.md index b39616844..b1b8c4cd1 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -407,7 +407,7 @@ The following custom field types are supported: - `URL`: a valid url - `Integer`: integer number e.g. 12 - `Number`: float number e.g. 12.3456 -- `Monetary`: float number with exactly two decimals, e.g. 12.30 +- `Monetary`: [ISO 4217 currency code](https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes) and a number with exactly two decimals, e.g. USD12.30 - `Document Link`: reference(s) to other document(s) displayed as links, automatically creates a symmetrical link in reverse ## Share Links diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf index b102e9567..ca23684f8 100644 --- a/src-ui/messages.xlf +++ b/src-ui/messages.xlf @@ -447,7 +447,7 @@ src/app/components/document-detail/document-detail.component.html - 315 + 313 @@ -506,7 +506,7 @@ src/app/components/document-detail/document-detail.component.html - 307 + 305 src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html @@ -632,7 +632,7 @@ src/app/components/document-detail/document-detail.component.html - 324 + 322 src/app/components/document-list/document-list.component.html @@ -962,7 +962,7 @@ src/app/components/document-detail/document-detail.component.html - 283 + 281 src/app/components/document-list/bulk-editor/bulk-editor.component.html @@ -3815,6 +3815,10 @@ src/app/components/common/input/file/file.component.html 21 + + src/app/components/common/input/monetary/monetary.component.html + 9 + src/app/components/common/input/number/number.component.html 9 @@ -4824,14 +4828,14 @@ Content src/app/components/document-detail/document-detail.component.html - 190 + 188 Metadata src/app/components/document-detail/document-detail.component.html - 199 + 197 src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts @@ -4842,112 +4846,112 @@ Date modified src/app/components/document-detail/document-detail.component.html - 206 + 204 Date added src/app/components/document-detail/document-detail.component.html - 210 + 208 Media filename src/app/components/document-detail/document-detail.component.html - 214 + 212 Original filename src/app/components/document-detail/document-detail.component.html - 218 + 216 Original MD5 checksum src/app/components/document-detail/document-detail.component.html - 222 + 220 Original file size src/app/components/document-detail/document-detail.component.html - 226 + 224 Original mime type src/app/components/document-detail/document-detail.component.html - 230 + 228 Archive MD5 checksum src/app/components/document-detail/document-detail.component.html - 235 + 233 Archive file size src/app/components/document-detail/document-detail.component.html - 241 + 239 Original document metadata src/app/components/document-detail/document-detail.component.html - 250 + 248 Archived document metadata src/app/components/document-detail/document-detail.component.html - 253 + 251 Preview src/app/components/document-detail/document-detail.component.html - 260 + 258 Notes src/app/components/document-detail/document-detail.component.html - 272,275 + 270,273 Save & next src/app/components/document-detail/document-detail.component.html - 309 + 307 Save & close src/app/components/document-detail/document-detail.component.html - 312 + 310 Enter Password src/app/components/document-detail/document-detail.component.html - 363 + 361 diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index f23dcc2c3..69213846f 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -113,6 +113,7 @@ import { ConfigComponent } from './components/admin/config/config.component' import { FileComponent } from './components/common/input/file/file.component' import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons' import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component' +import { MonetaryComponent } from './components/common/input/monetary/monetary.component' import { archive, arrowCounterclockwise, @@ -443,6 +444,7 @@ function initializeApp(settings: SettingsService) { ConfigComponent, FileComponent, ConfirmButtonComponent, + MonetaryComponent, ], imports: [ BrowserModule, diff --git a/src-ui/src/app/components/common/input/monetary/monetary.component.html b/src-ui/src/app/components/common/input/monetary/monetary.component.html new file mode 100644 index 000000000..ff3d7b9b5 --- /dev/null +++ b/src-ui/src/app/components/common/input/monetary/monetary.component.html @@ -0,0 +1,27 @@ +
+
+
+ @if (title) { + + } + @if (removable) { + + } +
+
+
+ {{monetaryValue | currency: currencyCode }} + + +
+
+ {{error}} +
+ @if (hint) { + {{hint}} + } +
+
+
diff --git a/src-ui/src/app/components/common/input/monetary/monetary.component.scss b/src-ui/src/app/components/common/input/monetary/monetary.component.scss new file mode 100644 index 000000000..f4fe1fabb --- /dev/null +++ b/src-ui/src/app/components/common/input/monetary/monetary.component.scss @@ -0,0 +1,11 @@ +.input-group-text { + font-size: inherit; +} + +.text-muted:focus-within { + color: var(--bs-body-color) !important; +} + +.mw-60 { + max-width: 60px; +} diff --git a/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts b/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts new file mode 100644 index 000000000..0a8608a1b --- /dev/null +++ b/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts @@ -0,0 +1,59 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' +import { + FormsModule, + NG_VALUE_ACCESSOR, + ReactiveFormsModule, +} from '@angular/forms' +import { HttpClientTestingModule } from '@angular/common/http/testing' +import { CurrencyPipe } from '@angular/common' +import { MonetaryComponent } from './monetary.component' + +describe('MonetaryComponent', () => { + let component: MonetaryComponent + let fixture: ComponentFixture + let input: HTMLInputElement + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [MonetaryComponent], + providers: [CurrencyPipe], + imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule], + }).compileComponents() + + fixture = TestBed.createComponent(MonetaryComponent) + fixture.debugElement.injector.get(NG_VALUE_ACCESSOR) + component = fixture.componentInstance + fixture.detectChanges() + input = component.inputField.nativeElement + }) + + it('should set the currency code correctly', () => { + expect(component.currencyCode).toEqual('USD') // default + component.currencyCode = 'EUR' + expect(component.currencyCode).toEqual('EUR') + + component.value = 'G123.4' + jest + .spyOn(document, 'activeElement', 'get') + .mockReturnValue(component.currencyField.nativeElement) + expect(component.currencyCode).toEqual('G') + }) + + it('should parse monetary value only when out of focus', () => { + component.monetaryValue = 10.5 + jest.spyOn(document, 'activeElement', 'get').mockReturnValue(null) + expect(component.monetaryValue).toEqual('10.50') + + component.value = 'GBP123.4' + jest + .spyOn(document, 'activeElement', 'get') + .mockReturnValue(component.inputField.nativeElement) + expect(component.monetaryValue).toEqual('123.4') + }) + + it('should report value including currency code and monetary value', () => { + component.currencyCode = 'EUR' + component.monetaryValue = 10.5 + expect(component.value).toEqual('EUR10.50') + }) +}) diff --git a/src-ui/src/app/components/common/input/monetary/monetary.component.ts b/src-ui/src/app/components/common/input/monetary/monetary.component.ts new file mode 100644 index 000000000..a7957b4c3 --- /dev/null +++ b/src-ui/src/app/components/common/input/monetary/monetary.component.ts @@ -0,0 +1,59 @@ +import { + Component, + DEFAULT_CURRENCY_CODE, + ElementRef, + forwardRef, + Inject, + ViewChild, +} from '@angular/core' +import { NG_VALUE_ACCESSOR } from '@angular/forms' +import { AbstractInputComponent } from '../abstract-input' + +@Component({ + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MonetaryComponent), + multi: true, + }, + ], + selector: 'pngx-input-monetary', + templateUrl: './monetary.component.html', + styleUrls: ['./monetary.component.scss'], +}) +export class MonetaryComponent extends AbstractInputComponent { + @ViewChild('currencyField') + currencyField: ElementRef + + constructor( + @Inject(DEFAULT_CURRENCY_CODE) public defaultCurrencyCode: string + ) { + super() + } + + get currencyCode(): string { + const focused = document.activeElement === this.currencyField?.nativeElement + if (focused && this.value) return this.value.match(/^([A-Z]{0,3})/)?.[0] + return ( + this.value + ?.toString() + .toUpperCase() + .match(/^([A-Z]{1,3})/)?.[0] ?? this.defaultCurrencyCode + ) + } + + set currencyCode(value: string) { + this.value = value + this.monetaryValue?.toString() + } + + get monetaryValue(): string { + if (!this.value) return null + const focused = document.activeElement === this.inputField?.nativeElement + const val = parseFloat(this.value.toString().replace(/[^0-9.,]+/g, '')) + return focused ? val.toString() : val.toFixed(2) + } + + set monetaryValue(value: number) { + this.value = this.currencyCode + value.toFixed(2) + } +} diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html index a3890f961..79cc58f53 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.html +++ b/src-ui/src/app/components/document-detail/document-detail.component.html @@ -142,14 +142,12 @@ [error]="getCustomFieldError(i)"> } @case (CustomFieldDataType.Monetary) { - + [error]="getCustomFieldError(i)"> } @case (CustomFieldDataType.Boolean) {