carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/dispatch-dropdown/pipes/dispatch-search-filter.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IDispatchDropdownOption } from '../interfaces';
+
+@Pipe({
+  name: 'dispatchSearchFilter',
+})
+export class DispatchSearchFilterPipe implements PipeTransform {
+  transform(
+    options: IDispatchDropdownOption[] | null | undefined,
+    searchValue?: string,
+    hasPagination?: boolean,
+    optionLabel?: string,
+  ): IDispatchDropdownOption[] {
+    if (!options) return [];
+
+    if (hasPagination) return options;
+
+    if (!searchValue) return options;
+
+    return options.filter((option) =>
+      option[optionLabel ?? 'name']
+        ?.toLowerCase()
+        .includes(searchValue.toLowerCase()),
+    );
+  }
+}

package/projects/carriera-intern-components/src/app/components/dispatch-location/dispatch-location.component.html

@@ -0,0 +1,76 @@
+<cai-dispatch-dropdown
+  #dispatchDropdown
+  [hasNoRemoveButton]="true"
+  [isLocked]="false"
+  [data]="locationData()"
+  [options]="options"
+  [config]="config"
+  [hideDropdownMenu]="hideDropdownMenu()"
+  [optionTemplateRight]="rightOptionTemplate"
+  [contentTemplate]="contentTemplate"
+  [isEditable]="isEditable()"
+  (onSearch)="handleSearch($event)"
+  (onSelectionChange)="handleAddressSelect($event)"
+  (onToggleDropdown)="handleToggleDropdown($event)"
+  (onBlur)="handleBlur()"
+>
+</cai-dispatch-dropdown>
+
+<ng-template #contentTemplate let-data>
+  @let city = data?.city;
+  @let stateShortName = data?.stateShortName;
+
+  @let fullAddress =
+    city && stateShortName
+      ? city + ", " + stateShortName
+      : city || stateShortName;
+
+  <div
+    class="content-wrapper"
+    [ngbTooltip]="isEditable() ? 'Update Location' : null"
+    [tooltipClass]="'input-tooltip tooltip-m-t-4'"
+    [container]="'body'"
+    [autoClose]="true"
+    [openDelay]="600"
+    [placement]="'bottom'"
+  >
+    <div class="content-container">
+      <div class="address-text-container">
+        <div class="address-text" [innerHTML]="highlightedLocationString()">
+          {{ fullAddress }}
+        </div>
+      </div>
+      <div class="status-text">
+        <span class="last-status-text">
+          {{ lastStatusData() | lastStatusFormat }}
+        </span>
+        <span class="parking-name-text">
+          {{ parkingName() }}
+        </span>
+      </div>
+    </div>
+    @if (showParkingIcon()) {
+      <div class="parking-icon-container">
+        <svg-icon name="cai-parking" class="parking-icon"></svg-icon>
+      </div>
+    }
+  </div>
+</ng-template>
+
+<ng-template #rightOptionTemplate let-option>
+  @if (option?.parkingAddress?.length) {
+    <div
+      class="parking-icon-container"
+      [ngbTooltip]="option?.parkingAddress?.[0]?.name"
+      [tooltipClass]="
+        'input-tooltip tooltip-m-t-4 tooltip-bg-white-700 tooltip-text-black-500'
+      "
+      [container]="'body'"
+      [autoClose]="true"
+      [openDelay]="600"
+      [placement]="'bottom'"
+    >
+      <svg-icon name="cai-parking" class="parking-icon"></svg-icon>
+    </div>
+  }
+</ng-template>

package/projects/carriera-intern-components/src/app/components/dispatch-location/dispatch-location.component.scss

@@ -0,0 +1,141 @@
+@use "variables" as *;
+
+$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
+
+:host {
+  &:hover {
+    .address-text-container {
+      margin-bottom: -2px;
+    }
+    .status-text {
+      height: 14px;
+      opacity: 1;
+    }
+  }
+}
+.content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 26px;
+
+  .parking-icon-container {
+    width: 26px;
+    min-width: 26px;
+    height: 26px;
+    margin-left: 2px;
+
+    .parking-icon {
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    &:hover {
+      .parking-icon {
+        color: $color-black-200;
+      }
+    }
+  }
+
+  &:has(.parking-icon-container:hover) {
+    .parking-name-text {
+      display: block;
+    }
+    .last-status-text {
+      display: none;
+    }
+  }
+}
+
+.parking-name-text {
+  display: none;
+  &::selection {
+    background-color: $color-black-100-20 !important;
+  }
+}
+
+.last-status-text {
+  &::selection {
+    background-color: $color-black-100-20 !important;
+  }
+}
+
+.content-container {
+  padding-left: 6px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.status-text {
+  color: $color-black-100;
+  &::selection {
+    background-color: $color-black-100-20 !important;
+  }
+  font-size: 11px;
+  line-height: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  height: 0px;
+  opacity: 0;
+
+  transition:
+    height 0.1s $bezier,
+    opacity 0.1s $bezier;
+}
+.address-text-container {
+  overflow-y: visible;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0px;
+  transition: margin-bottom 0.1s $bezier;
+}
+.address-text {
+  color: $color-black-500;
+  &::selection {
+    background-color: $color-black-100-20;
+  }
+  font-size: 14px;
+  line-height: 18px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.parking-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+
+  padding: 2px;
+  width: 18px;
+  height: 18px;
+
+  &:hover {
+    .parking-icon {
+      color: $color-white-500;
+    }
+  }
+
+  .parking-icon {
+    color: $color-black-100;
+
+    transition: color 0.1s $bezier;
+
+    svg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 14px;
+      height: 14px;
+    }
+  }
+}

package/projects/carriera-intern-components/src/app/components/dispatch-location/dispatch-location.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DispatchLocationComponent } from './dispatch-location.component';
+
+describe('DispatchLocationComponent', () => {
+  let component: DispatchLocationComponent;
+  let fixture: ComponentFixture<DispatchLocationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DispatchLocationComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DispatchLocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/carriera-intern-components/src/app/components/dispatch-location/dispatch-location.component.ts

@@ -0,0 +1,268 @@
+// Angular
+import {
+  Component,
+  computed,
+  effect,
+  Input,
+  input,
+  OnDestroy,
+  OnInit,
+  output,
+  signal,
+  ViewChild,
+} from '@angular/core';
+
+// RXJS
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  of,
+  Subject,
+  takeUntil,
+  tap,
+} from 'rxjs';
+
+// Components
+import { DispatchDropdownComponent } from '../dispatch-dropdown/dispatch-dropdown.component';
+import { SvgIconComponent } from 'angular-svg-icon';
+
+// Interfaces
+import { IDispatchDropdownConfig } from '../dispatch-dropdown/interfaces';
+import { ILastStatusData } from './interfaces';
+
+// Pipes
+import { LastStatusFormatPipe } from './pipes/last-status-format.pipe';
+
+// Models
+import {
+  AddressData,
+  AddressEntity,
+} from '../input-address/models/address-data.model';
+import { AutocompleteSearchLayer } from '../input-address/models/sent-address-data.model';
+import { AddressList } from '../input-address/models/address-list.model';
+
+// Enums
+import { InputAddressLayersStringEnum } from '../input-address/enums/input-address-layers-string.enum';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'cai-dispatch-location',
+  templateUrl: './dispatch-location.component.html',
+  styleUrl: './dispatch-location.component.scss',
+  imports: [
+    NgbTooltip,
+    // Components
+    DispatchDropdownComponent,
+    SvgIconComponent,
+
+    // Pipes
+    LastStatusFormatPipe,
+  ],
+})
+export class DispatchLocationComponent implements OnInit, OnDestroy {
+  @ViewChild('dispatchDropdown') dispatchDropdown!: DispatchDropdownComponent;
+
+  id = input<string>('');
+  locationData = input<AddressEntity | null>(null);
+  highlightedLocationString = input<string>('');
+  lastStatusData = input<ILastStatusData | null>(null);
+  isParking = input<boolean>(false);
+  isEditable = input<boolean>(false);
+  parkingName = input<string>('');
+
+  showParkingIcon = computed(() => this.isParking() && !!this.parkingName());
+
+  @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,
+      };
+
+      this.selectedAddress.emit(this.currentAddressData!);
+    }
+  }
+
+  @Input() public set receivedAddressList(
+    value: { addresses?: string[] } | null,
+  ) {
+    if (value?.addresses) {
+      let uniqueIdCounter = 0;
+      let parkingAddressesList: any = [];
+
+      this.addressList = value.addresses.map((item: string) => {
+        // Remove ', US' from the end of the name if present
+        const formattedName = item.endsWith(', US')
+          ? item.slice(0, -4).trim()
+          : item;
+
+        const parkingAddress = this._parkingList?.length
+          ? this.filterParkingByCity(item)
+          : null;
+
+        if (parkingAddress?.length)
+          parkingAddressesList.push({
+            name: item,
+            formattedName,
+            id: uniqueIdCounter++,
+            parkingAddress,
+          });
+        return {
+          name: item,
+          formattedName,
+          id: uniqueIdCounter++,
+        };
+      });
+
+      // Combine parking addresses and regular addresses without deduplication
+      this.addressList = [...parkingAddressesList, ...this.addressList];
+      this.options = this.addressList;
+      this.isLoading.set(false);
+    }
+  }
+
+  @Input() public set parkingList(value: any[]) {
+    this._parkingList = value;
+  }
+
+  // Outputs
+  selectedAddress = output<any>();
+  sentAddressData = output<any>();
+  sentAddressValue = output<any>();
+  onClear = output();
+  onToggleDropdown = output<boolean>();
+  onBlur = output();
+
+  // Public Properties
+  public config: IDispatchDropdownConfig = {
+    hasNoAdd: true,
+    hasNoAddNew: true,
+    placeholder: '',
+    hasPagination: true,
+    optionLabel: 'formattedName',
+  };
+
+  public options: AddressList[] = [];
+  public addressList: AddressList[] = [];
+  public currentAddressData: AddressData | null = null;
+  public isParkingAddressSelected: boolean = false;
+  public isLoading = signal<boolean>(false);
+  public hideDropdownMenu = signal<boolean>(true);
+
+  // Private Properties
+  private _parkingList: {
+    name: string | null;
+    address: AddressEntity;
+  }[] = [];
+  private searchLayers: AutocompleteSearchLayer[] = [
+    InputAddressLayersStringEnum.LOCALITY,
+  ];
+  private destroy$ = new Subject<void>();
+  private searchSubject$ = new Subject<string>();
+
+  // Lifecycle Hooks
+  ngOnInit(): void {
+    this.initSearchListener();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  // Private Methods
+  private initSearchListener(): void {
+    this.searchSubject$
+      .pipe(
+        distinctUntilChanged(),
+        takeUntil(this.destroy$),
+        tap((term) => {
+          if (!term) {
+            this.isLoading.set(false);
+            this.addressList = [];
+            this.options = [];
+            return;
+          }
+        }),
+        filter((term: string) => {
+          if (term?.length >= 3) {
+            this.isLoading.set(true);
+            this.hideDropdownMenu.set(false);
+          } else {
+            this.hideDropdownMenu.set(true);
+          }
+          return term?.length >= 3;
+        }),
+        debounceTime(300),
+        tap((query: string) => {
+          const params = {
+            query: query,
+            searchLayers: this.searchLayers,
+            closedBorder: false,
+          };
+
+          this.sentAddressData.emit(params);
+        }),
+        catchError((error) => {
+          this.isLoading.set(false);
+          return of(null);
+        }),
+      )
+      .subscribe();
+  }
+
+  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}`;
+        return formattedAddress === formattedSearchString;
+      })
+      .map((parking: any) => ({
+        ...parking,
+        address: {
+          ...parking.address,
+          isParking: true,
+        },
+      }));
+
+    return isParking;
+  }
+
+  public focus(): void {
+    this.dispatchDropdown.handleClick();
+  }
+
+  // Public Methods
+  handleSearch(event: string) {
+    this.searchSubject$.next(event);
+  }
+
+  handleAddressSelect(selectedOption: any) {
+    this.isParkingAddressSelected = false;
+    const address = selectedOption;
+
+    if (address?.parkingAddress?.length) {
+      this.sentAddressValue.emit(address?.parkingAddress[0]?.address?.address);
+      this.isParkingAddressSelected = true;
+      return;
+    }
+
+    this.sentAddressValue.emit(address?.name);
+  }
+
+  handleToggleDropdown(event: boolean) {
+    this.hideDropdownMenu.set(event);
+    this.onToggleDropdown.emit(event);
+  }
+
+  handleBlur() {
+    this.onBlur.emit();
+  }
+}