feat: add icon to autocomplete

src/app/home/components/search/search.component.html

@@ -3,6 +3,8 @@
     <form [formGroup]="tripForm" (ngSubmit)="onSubmit()" class="search-form">
       <div class="search-group start-city">
         <p-autoComplete
+          appAutocompleteIcon
+          [icon]="'pi-circle-off'"
           id="startCity"
           formControlName="startCity"
           [suggestions]="filteredCities"
@@ -14,6 +16,8 @@
 
       <div class="search-group end-city">
         <p-autoComplete
+          appAutocompleteIcon
+          [icon]="'pi-circle-on'"
           id="endCity"
           formControlName="endCity"
           [suggestions]="filteredCities"
@@ -23,14 +27,6 @@
         ></p-autoComplete>
       </div>
 
-      <!-- <div class="search-group">
-            <p-calendar 
-              id="dateTime"
-              formControlName="dateTime"
-              placeholder="Select date and time"
-            ></p-calendar>
-          </div> -->
-
       <button pButton type="submit" label="Search" [disabled]="!tripForm.valid" class="submit-btn"></button>
     </form>
   </div>

src/app/home/components/search/search.component.scss

@@ -1,25 +1,3 @@
-// @import 'variables';
-
-// .search-form {
-//     display:flex;
-//     flex-direction:row;
-//     gap: 10px;
-//     justify-content:center;
-
-//     .search-inputs-container{
-//         display:flex;
-//         flex-direction:row;
-//         gap:10px;
-//     }
-
-// }
-
-// .pi-circle-off,
-// .pi-circle-on {
-//     color: $dark-color;
-//     text-shadow: 0 0 4px rgb(16, 2, 170);
-// }
-
 @import 'variables';
 
 .search-container {
@@ -39,40 +17,4 @@
 
 .search-group {
   position: relative;
-
-  // .search-group.end-city .p-autocomplete input::placeholder {
-  //     padding-left: 20px;
-  // }
-}
-
-.search-group::before {
-  content: '';
-
-  position: absolute;
-  z-index: 1;
-  top: 50%;
-  left: 3px;
-  transform: translateY(-50%);
-
-  display: inline-block;
-
-  width: 8px;
-  height: 8px;
-
-  border-radius: 50%;
-}
-
-.search-group.start-city::before {
-  content: '';
-
-  width: 8px;
-  height: 8px;
-
-  background-color: #fff;
-  border: 2px solid $dark-color;
-  border-radius: 50%;
-}
-
-.search-group.end-city::before {
-  background-color: $dark-color;
 }

src/app/home/components/search/search.component.ts

@@ -9,6 +9,11 @@ import { IconFieldModule } from 'primeng/iconfield';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { InputIconModule } from 'primeng/inputicon';
+import { firstValueFrom } from 'rxjs';
+
+import { Station } from '@/app/api/models/stations';
+import { StationsService } from '@/app/api/stationsService/stations.service';
+import { AutocompleteIconDirective } from '@/app/shared/directives/autocompleteIcon/autocomplete-icon.directive';
 
 @Component({
   selector: 'app-search',
@@ -22,6 +27,7 @@ import { InputIconModule } from 'primeng/inputicon';
     InputGroupAddonModule,
     FloatLabelModule,
     ReactiveFormsModule,
+    AutocompleteIconDirective,
     CalendarModule,
   ],
   templateUrl: './search.component.html',
@@ -30,22 +36,27 @@ import { InputIconModule } from 'primeng/inputicon';
 })
 export class SearchComponent implements OnInit {
   public tripForm!: FormGroup;
-  public cities: string[] = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'];
   public filteredCities: string[] = [];
   public minDate: Date = new Date();
   private fb: FormBuilder = inject(FormBuilder);
+  public stationsService = inject(StationsService);
+  public stations: Station[] = [];
 
   public ngOnInit(): void {
     this.tripForm = this.fb.group({
       startCity: ['', Validators.required.bind(this)],
       endCity: ['', Validators.required.bind(this)],
-      dateTime: ['', Validators.required.bind(this)],
+    });
+    firstValueFrom(this.stationsService.getStations()).then((stations) => {
+      this.stations = stations;
     });
   }
 
   public filterCity(event: AutoCompleteCompleteEvent): void {
     const query = event.query.toLowerCase();
-    this.filteredCities = this.cities.filter((city) => city.toLowerCase().includes(query));
+    this.filteredCities = this.stations
+      .filter(({ city }) => city.toLowerCase().includes(query))
+      .map(({ city }) => city);
   }
 
   public onSubmit(): void {}

src/app/shared/directives/autocompleteIcon/autocomplete-icon.directive.ts

@@ -0,0 +1,26 @@
+import { AfterViewInit, Directive, ElementRef, inject, Input } from '@angular/core';
+
+import { AutoComplete } from 'primeng/autocomplete';
+
+@Directive({
+  selector: '[appAutocompleteIcon]',
+  standalone: true,
+})
+export class AutocompleteIconDirective implements AfterViewInit {
+  private autoComplete = inject(AutoComplete);
+  @Input() public icon = '';
+
+  public ngAfterViewInit(): void {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const inputWrapper = (this.autoComplete.el as ElementRef<HTMLElement>).nativeElement.firstChild;
+    if (!(inputWrapper instanceof HTMLDivElement)) {
+      return;
+    }
+    const searchIcon = document.createElement('i');
+    searchIcon.classList.add('pi', this.icon);
+    searchIcon.style.left = '.75rem';
+    searchIcon.style.color = 'blue';
+    inputWrapper.appendChild(searchIcon);
+    inputWrapper.classList.add('p-input-icon-left');
+  }
+}