carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input-address/input-address.component.ts

@@ -0,0 +1,509 @@
+// Angular
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  input,
+  OnDestroy,
+  OnInit,
+  output,
+  Self,
+  signal,
+  ViewChild,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormControl,
+  FormsModule,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+
+// RXJS
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  of,
+  Subject,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs';
+
+// Models
+import { CaiInputConfig } from '../input/models';
+
+// Components
+import { InputComponent } from '../input/input.component';
+import { AddressData } from './models/address-data.model';
+import { AutocompleteSearchLayer } from './models/sent-address-data.model';
+import { InputAddressLayersStringEnum } from './enums/input-address-layers-string.enum';
+import { AddressList } from './models/address-list.model';
+import { InputAddressTypeStringEnum } from './enums/input-address-type-string.enum';
+
+@Component({
+  selector: 'cai-input-address',
+  templateUrl: './input-address.component.html',
+  styleUrl: './input-address.component.scss',
+  imports: [
+    // Modules
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    // Components
+    InputComponent,
+  ],
+})
+export class InputAddressComponent
+  implements OnInit, ControlValueAccessor, OnDestroy, OnChanges
+{
+  @ViewChild(InputComponent) inputComponent!: InputComponent;
+
+  private destroy$ = new Subject<void>();
+  private controlSubscription$ = new Subject<void>();
+  private baseConfig: CaiInputConfig = {
+    type: 'text',
+    dropdown: true,
+    dropdownAutocomplete: true,
+    search: true,
+    textTransform: 'capitalize',
+    icon: 'cai-address',
+    optionLabel: 'name',
+    optionValue: 'name',
+    isAddress: true,
+    useOutsideSearch: true,
+  };
+
+  id = input<string>('');
+  config = input<CaiInputConfig>({});
+  type = input<string>('');
+  required = input<boolean>(false);
+  isInTable = input<boolean>(false);
+  isFormLoaded = input<boolean>(false);
+
+  @Input() public set activeAddress(value: AddressList | null) {
+    if (value) {
+      this._activeAddress = value;
+      let isValid = true;
+      if (this.searchLayers?.[0] === InputAddressLayersStringEnum.ADDRESS) {
+        const address = value?.address;
+        if (address) isValid = this.checkAddressValidation(address);
+      }
+
+      if (!value || !isValid) {
+        this.getSuperControl?.setErrors({
+          ...this.getSuperControl?.errors,
+          invalid: true,
+        });
+      } else {
+        const currentErrors = { ...this.getSuperControl?.errors };
+        delete currentErrors['invalid'];
+        this.getSuperControl?.setErrors(
+          Object.keys(currentErrors).length > 0 ? currentErrors : null,
+        );
+      }
+    }
+  }
+
+  @Input() public set receivedAddressData(value: AddressData | null) {
+    if (value) {
+      this.currentAddressData = {
+        address: value.address!,
+        valid: value.address && value.longLat ? true : false,
+        longLat: value.longLat,
+        isParking: this.isParkingAddressSelected,
+      };
+
+      if (this.currentAddressData!.valid) {
+        const currentErrors = { ...this.getSuperControl?.errors };
+        delete currentErrors['invalid'];
+        this.getSuperControl?.setErrors(
+          Object.keys(currentErrors).length > 0 ? currentErrors : null,
+        );
+      }
+
+      this.selectedAddress.emit(this.currentAddressData!);
+    }
+  }
+
+  @Input() public set receivedAddressList(
+    value: { addresses: string[] } | null,
+  ) {
+    this._receivedAddressList = value;
+
+    if (value?.addresses) {
+      let parkingAddressesList: any = [];
+      this.addressList = value.addresses.map((item: string, indx: number) => {
+        const parkingAddress = this._parkingList?.length
+          ? this.filterParkingByCity(item)
+          : null;
+
+        if (parkingAddress?.length)
+          parkingAddressesList.push({
+            name: item,
+            id: indx,
+            parkingAddress,
+          });
+        return {
+          name: item,
+          id: indx,
+        };
+      });
+
+      this.addressList = [...parkingAddressesList, ...this.addressList];
+    }
+  }
+
+  @Input() public set parkingList(value: any[]) {
+    this._parkingList = value;
+  }
+
+  selectedAddress = output<any>();
+  sentAddressData = output<any>();
+  sentAddressValue = output<any>();
+  onClear = output();
+
+  public _receivedAddressList: { addresses: string[] } | null = null;
+  public _activeAddress: AddressList | null = null;
+
+  //Address data
+  private searchLayers!: AutocompleteSearchLayer[];
+  public currentAddressData: AddressData | null = null;
+
+  public addressList: AddressList[] = [];
+  public allowValidation: boolean = false;
+  public requestSent: boolean = false;
+  public closedBorder: boolean = false;
+  public chosenFromDropdown: boolean = false;
+  public _parkingList: any[] = [];
+  public isParkingAddressSelected: boolean = false;
+
+  public inputConfig = signal<CaiInputConfig>({});
+  public isLoading = signal<boolean>(false);
+
+  constructor(
+    @Self() public superControl: NgControl,
+    private ref: ChangeDetectorRef,
+  ) {
+    this.superControl.valueAccessor = this;
+  }
+
+  writeValue(_: any): void {}
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  get getSuperControl() {
+    return this.superControl?.control as FormControl;
+  }
+
+  ngOnInit(): void {
+    this.initializeAddressInput();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['isFormLoaded']?.currentValue) {
+      this.initChangesListener();
+    }
+  }
+
+  private initializeAddressInput(): void {
+    if (this.type()) {
+      this.checkSearchLayers(this.type());
+    }
+
+    this.baseConfig.required = this.required();
+
+    if (this.isInTable()) {
+      this.baseConfig.icon = null;
+      this.baseConfig.inTable = true;
+    }
+
+    this.inputConfig.set({
+      ...this.baseConfig,
+      ...this.config(),
+    });
+
+    this.initChangesListener();
+  }
+
+  private getSearchLayers(value: string): AutocompleteSearchLayer[] {
+    let searchLayers: AutocompleteSearchLayer[] = [];
+    switch (value) {
+      case InputAddressTypeStringEnum.LONG_ADDRESS:
+        searchLayers = [AutocompleteSearchLayer.Address];
+        break;
+      case InputAddressTypeStringEnum.SHORT_ADDRESS:
+        searchLayers = [AutocompleteSearchLayer.Locality];
+        break;
+      case InputAddressTypeStringEnum.CITY_STATE_ZIP:
+        searchLayers = [
+          AutocompleteSearchLayer.Locality,
+          AutocompleteSearchLayer.PostalCode,
+        ];
+        break;
+      case InputAddressTypeStringEnum.STREET_CITY_STATE_ZIP:
+        searchLayers = [
+          AutocompleteSearchLayer.Street,
+          AutocompleteSearchLayer.Locality,
+          AutocompleteSearchLayer.PostalCode,
+        ];
+        break;
+    }
+    return searchLayers;
+  }
+
+  private getBaseConfigName(value: string): string {
+    switch (value) {
+      case InputAddressTypeStringEnum.LONG_ADDRESS:
+        return 'Address, City, State Zip';
+      case InputAddressTypeStringEnum.SHORT_ADDRESS:
+        return 'County, State';
+      case InputAddressTypeStringEnum.CITY_STATE_ZIP:
+        return 'City, State Zip';
+      case InputAddressTypeStringEnum.STREET_CITY_STATE_ZIP:
+        return 'Street, City, State Zip';
+    }
+    return '';
+  }
+
+  private checkSearchLayers(value: string): void {
+    this.searchLayers = this.getSearchLayers(value);
+
+    this.baseConfig.name = this.getBaseConfigName(value);
+  }
+
+  private filterParkingByCity(searchString: string): any {
+    const formattedSearchString = searchString.trim().replace(/\s*,\s*/g, ', ');
+
+    const isParking = this._parkingList.filter((parking: any) => {
+      const { city, stateShortName, country } = parking.address || {};
+      const formattedAddress = `${city}, ${stateShortName}, ${country}`;
+      if (formattedAddress === formattedSearchString)
+        parking.address.isParking = true;
+      return formattedAddress === formattedSearchString;
+    });
+
+    return isParking;
+  }
+
+  private checkAddressValidation(address: string): boolean {
+    const streetNum = /\d/;
+
+    return streetNum.test(address) ? true : false;
+  }
+
+  public onBlur(): void {
+    if (this.getSuperControl?.value?.length < 3) {
+      this.getSuperControl?.setValue('');
+    }
+  }
+
+  public hideValidation() {
+    return (
+      this.isLoading() ||
+      (this.getSuperControl?.value && this.getSuperControl?.value?.length < 3)
+    );
+  }
+
+  public initChangesListener(): void {
+    const control = this.getSuperControl;
+
+    if (!control || !control.valueChanges) {
+      return;
+    }
+
+    // Unsubscribe from previous form control subscription
+    this.controlSubscription$.next();
+
+    control.valueChanges
+      .pipe(
+        distinctUntilChanged(),
+        takeUntil(this.controlSubscription$),
+        takeUntil(this.destroy$),
+        tap((term) => {
+          if (!term) {
+            this.isLoading.set(false);
+            this.addressList = [];
+            this.allowValidation = true;
+            return;
+          }
+
+          // If user is typing after selecting from dropdown, clear the selection immediately
+          // This ensures validation happens on the FIRST keystroke, not the second
+          if (!this.allowValidation) {
+            // First keystroke after dropdown selection - clear the active address
+            this._activeAddress = null;
+            this.requestSent = false;
+            const addressData = {
+              address: {},
+              valid: false,
+              longLat: {},
+            };
+            this.selectedAddress.emit(addressData);
+            this.allowValidation = true;
+          } else {
+            // Subsequent keystrokes - continue clearing if needed
+            this.requestSent = false;
+            this._activeAddress = null;
+            const addressData = {
+              address: {},
+              valid: false,
+              longLat: {},
+            };
+            this.selectedAddress.emit(addressData);
+          }
+        }),
+        filter((term: string) => {
+          if (term?.length >= 3) this.isLoading.set(true);
+          return term?.length >= 3;
+        }),
+        debounceTime(500),
+        switchMap((query: string) => {
+          const params = {
+            query: query,
+            searchLayers: this.searchLayers,
+            closedBorder: this.closedBorder,
+          };
+
+          this.sentAddressData.emit(params);
+
+          return of(this.receivedAddressList).pipe(
+            catchError((error) => {
+              return of([]);
+            }),
+          );
+        }),
+        catchError((error) => {
+          return of(null);
+        }),
+      )
+      .subscribe({
+        next: (result) => {
+          let isValid = true;
+          if (this.searchLayers?.[0] === InputAddressLayersStringEnum.ADDRESS) {
+            const address = this._activeAddress?.address;
+            if (address) isValid = this.checkAddressValidation(address);
+          }
+
+          if (!this._activeAddress || !isValid) {
+            this.getSuperControl?.setErrors({
+              ...this.getSuperControl?.errors,
+              invalid: true,
+            });
+          } else {
+            const currentErrors = { ...this.getSuperControl?.errors };
+            delete currentErrors['invalid'];
+            this.getSuperControl?.setErrors(
+              Object.keys(currentErrors).length > 0 ? currentErrors : null,
+            );
+          }
+
+          this.isLoading.set(false);
+          this.ref.detectChanges();
+        },
+      });
+  }
+
+  public onSelectDropdown(name: string | null): void {
+    const address = this.addressList.find((item) => item.name === name);
+    this._activeAddress = address
+      ? { ...address, address: address?.name }
+      : null;
+
+    this.isParkingAddressSelected = this._activeAddress?.parkingAddress?.length
+      ? true
+      : false;
+
+    if (address?.name) {
+      if (this.searchLayers?.[0] === InputAddressLayersStringEnum.ADDRESS) {
+        const isValid = this.checkAddressValidation(address.name);
+        this.isLoading.set(false);
+
+        if (isValid) {
+          this.getAddressData(address.name);
+          this.getSuperControl?.setValue(address.name);
+          const currentErrors = { ...this.getSuperControl?.errors };
+          delete currentErrors['invalid'];
+          this.getSuperControl?.setErrors(
+            Object.keys(currentErrors).length > 0 ? currentErrors : null,
+          );
+          // Disable validation after valid selection - re-enables on next user input
+          this.allowValidation = false;
+        } else {
+          this.getSuperControl?.setErrors({
+            ...this.getSuperControl?.errors,
+            invalid: true,
+          });
+        }
+      } else {
+        this.getAddressData(address.name);
+        this.getSuperControl?.setValue(address.name);
+        const currentErrors = { ...this.getSuperControl?.errors };
+        delete currentErrors['invalid'];
+        this.getSuperControl?.setErrors(
+          Object.keys(currentErrors).length > 0 ? currentErrors : null,
+        );
+        // Disable validation after valid selection - re-enables on next user input
+        this.allowValidation = false;
+      }
+    } else {
+      this.onClearInputEvent();
+      this.currentAddressData = null;
+      this.addressList = [];
+    }
+  }
+
+  public onClearInputEvent(): void {
+    this.isLoading.set(false);
+    this.currentAddressData = null;
+    this.addressList = [];
+    this.getSuperControl?.setValue(null);
+    this._activeAddress = null;
+    this.chosenFromDropdown = false;
+    if (this.config()?.required) {
+      setTimeout(() => {
+        this.getSuperControl?.setErrors({
+          ...this.getSuperControl?.errors,
+          required: true,
+        });
+      }, 300);
+    }
+    const addressData = {
+      address: {},
+      valid: false,
+      longLat: {},
+    };
+    this.selectedAddress.emit(addressData);
+  }
+
+  public getAddressData(address: string): void {
+    this.requestSent = true;
+
+    this.sentAddressValue.emit(address);
+  }
+
+  public emitOnClear(): void {
+    this.onClear.emit();
+  }
+
+  ngOnDestroy(): void {
+    this.controlSubscription$.next();
+    this.controlSubscription$.complete();
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/projects/carriera-intern-components/src/app/components/input-address/models/address-data.model.ts

@@ -0,0 +1,22 @@
+// models
+import { LongLat } from './long-lat.model';
+
+export interface AddressEntity {
+  city?: string | null;
+  state?: string | null;
+  county?: string | null;
+  address?: string | null;
+  street?: string | null;
+  streetNumber?: string | null;
+  country?: string | null;
+  zipCode?: string | null;
+  stateShortName?: string | null;
+  addressUnit?: string | null;
+}
+
+export interface AddressData {
+  address?: AddressEntity;
+  longLat?: LongLat | null;
+  valid?: boolean;
+  isParking?: boolean;
+}

package/projects/carriera-intern-components/src/app/components/input-address/models/address-list.model.ts

@@ -0,0 +1,6 @@
+export interface AddressList {
+  id?: number;
+  name?: string;
+  address?: string;
+  parkingAddress?: any;
+}

package/projects/carriera-intern-components/src/app/components/input-address/models/long-lat.model.ts

@@ -0,0 +1,4 @@
+export interface LongLat {
+  latitude?: number;
+  longitude?: number;
+}

package/projects/carriera-intern-components/src/app/components/input-address/models/sent-address-data.model.ts

@@ -0,0 +1,25 @@
+export const AutocompleteSearchLayer = {
+  Venue: 'Venue',
+  Address: 'Address',
+  Street: 'Street',
+  Neighbourhood: 'Neighbourhood',
+  Borough: 'Borough',
+  LocalAdmin: 'LocalAdmin',
+  Locality: 'Locality',
+  County: 'County',
+  MacroCounty: 'MacroCounty',
+  Region: 'Region',
+  MacroRegion: 'MacroRegion',
+  Country: 'Country',
+  Coarse: 'Coarse',
+  PostalCode: 'PostalCode',
+} as const;
+
+export type AutocompleteSearchLayer =
+  (typeof AutocompleteSearchLayer)[keyof typeof AutocompleteSearchLayer];
+
+export interface SentAddressData {
+  query: string;
+  searchLayers: AutocompleteSearchLayer[];
+  closedBorder: boolean;
+}