From 29fcf23dd3b72a4e9cd85c684b1aaf179dbc4a5e Mon Sep 17 00:00:00 2001 From: rodribp Date: Sat, 14 Feb 2026 18:10:40 -0600 Subject: [PATCH] feat: Address chunking issue #6289 --- ...address-formatting-selector.component.html | 13 +++++ .../address-formatting-selector.component.ts | 36 +++++++++++++ .../services/address-formatting.service.ts | 46 ++++++++++++++++ .../address-text/address-text.component.html | 9 ++-- .../address-text/address-text.component.ts | 23 +++++++- .../global-footer.component.html | 4 ++ .../truncate/truncate.component.html | 6 ++- .../components/truncate/truncate.component.ts | 20 ++++++- .../app/shared/pipes/address-chunk.pipe.ts | 53 +++++++++++++++++++ frontend/src/app/shared/shared.module.ts | 8 +++ 10 files changed, 209 insertions(+), 9 deletions(-) create mode 100644 frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html create mode 100644 frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts create mode 100644 frontend/src/app/services/address-formatting.service.ts create mode 100644 frontend/src/app/shared/pipes/address-chunk.pipe.ts diff --git a/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html new file mode 100644 index 000000000..431aa0392 --- /dev/null +++ b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.html @@ -0,0 +1,13 @@ +
+ +
\ No newline at end of file diff --git a/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts new file mode 100644 index 000000000..7fc1c4a07 --- /dev/null +++ b/frontend/src/app/components/address-formatting-selector/address-formatting-selector.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { AddressFormattingService, FormattingMode } from '@app/services/address-formatting.service'; +import { Subscription } from 'rxjs'; + +@Component({ + selector: 'app-address-formatting-selector', + templateUrl: './address-formatting-selector.component.html', + styles: [], + standalone: false, +}) +export class AddressFormattingSelectorComponent implements OnInit, OnDestroy { + form: FormGroup; + private formattingStateSubscription: Subscription; + + constructor( + private fb: FormBuilder, + private formattingService: AddressFormattingService + ) {} + + ngOnInit(): void { + this.form = this.fb.group({ + mode: [this.formattingService.mode] + }); + + this.formattingStateSubscription = this.form.get('mode').valueChanges.subscribe((mode: FormattingMode) => { + this.formattingService.setMode(mode); + }); + } + + ngOnDestroy(): void { + if (this.formattingStateSubscription) { + this.formattingStateSubscription.unsubscribe(); + } + } +} \ No newline at end of file diff --git a/frontend/src/app/services/address-formatting.service.ts b/frontend/src/app/services/address-formatting.service.ts new file mode 100644 index 000000000..9cb7b5422 --- /dev/null +++ b/frontend/src/app/services/address-formatting.service.ts @@ -0,0 +1,46 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { StorageService } from './storage.service'; + +export type FormattingMode = 'off' | 'color' | 'spacing' | 'copy'; + +@Injectable({ + providedIn: 'root' +}) +export class AddressFormattingService { + private readonly STORAGE_KEY = 'address-formatting-mode'; + + private modeSubject = new BehaviorSubject(this.getInitialState()); + mode$ = this.modeSubject.asObservable(); + + constructor(private storageService: StorageService) {} + + get mode(): FormattingMode { + return this.modeSubject.value; + } + + setMode(mode: FormattingMode) { + this.modeSubject.next(mode); + this.storageService.setValue(this.STORAGE_KEY, mode); + } + + get useColors(): boolean { + return this.mode !== 'off'; + } + + get useSpacing(): boolean { + return this.mode === 'spacing' || this.mode === 'copy'; + } + + get showCopyButton(): boolean { + return this.mode === 'copy'; + } + + private getInitialState(): FormattingMode { + const saved = this.storageService.getValue(this.STORAGE_KEY); + if (saved === 'color' || saved === 'spacing' || saved === 'copy') { + return saved as FormattingMode; + } + return 'off'; + } +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/address-text/address-text.component.html b/frontend/src/app/shared/components/address-text/address-text.component.html index ae8643349..a87d92c25 100644 --- a/frontend/src/app/shared/components/address-text/address-text.component.html +++ b/frontend/src/app/shared/components/address-text/address-text.component.html @@ -11,7 +11,10 @@ } @else { - - - +
+ + + + +
} \ No newline at end of file diff --git a/frontend/src/app/shared/components/address-text/address-text.component.ts b/frontend/src/app/shared/components/address-text/address-text.component.ts index 65ae3006a..42fe4ef46 100644 --- a/frontend/src/app/shared/components/address-text/address-text.component.ts +++ b/frontend/src/app/shared/components/address-text/address-text.component.ts @@ -1,5 +1,7 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; import { AddressMatch, AddressTypeInfo } from '@app/shared/address-utils'; +import { AddressFormattingService } from '@app/services/address-formatting.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-address-text', @@ -11,7 +13,7 @@ export class AddressTextComponent { @Input() address: string; @Input() info: AddressTypeInfo | null; @Input() similarity: { score: number, match: AddressMatch, group: number } | null; - + private formattingStateSubscription: Subscription; min = Math.min; groupColors: string[] = [ @@ -20,4 +22,21 @@ export class AddressTextComponent { 'var(--info)', 'white', ]; + + constructor( + public formattingService: AddressFormattingService, + private cd: ChangeDetectorRef + ) {} + + ngOnInit() { + this.formattingStateSubscription = this.formattingService.mode$.subscribe(() => { + this.cd.markForCheck(); + }); + } + + ngOnDestroy() { + if (this.formattingStateSubscription) { + this.formattingStateSubscription.unsubscribe(); + } + } } diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index 026c0ab47..eb2b196e9 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -40,6 +40,9 @@ } +
+ +