Implementation of search and integration with external API in Angular 18

Let's move on to creating a form for searching for tickets and accommodation.

Let's see an example on the website - travel.alfabank.ru

The following fields are presented there:

• origin - from where;
• destination - where;
• direct - direct route;
• currency - currency;
• departure_at - date of departure/departure/check-in;
• return_at - date of return/eviction.

When searching for air tickets, all fields will be displayed, and in the case of selecting a hotel, only part of them.

It is impossible to book accommodation in different places (this is such an inflexible system, although this is provided in airbnb).

Let's create a section src/search in which we will store everything related to search.

Let's add a couple of interfaces:

export interface SearchDestination {
  readonly [key: string]: unknown;
  readonly id: string;
  readonly type: string;
  readonly code: string;
  readonly name: string;
  readonly country_name: string;
  readonly city_name: string;
  readonly value: string; // ???
}

export interface SearchFieldOptions {
  readonly [key: string]: unknown;
  readonly id: string;
  readonly label: string;
  readonly name?: string;
  readonly placeholder?: string;
}

export type SearchFormOptions<T> = {
  readonly [P in keyof T]: SearchFieldOptions;
};

export function getSearchQueryParams(
  form: Readonly<Record<string, string | number | boolean | Record<string, unknown>>>,
): Record<string, unknown> {
  const params: Record<string, unknown> = {};

  for (const [key, value] of Object.entries(form)) {
    if (!!value && typeof value === 'object') {
      params[key] = 'value' in value ? value['value'] : undefined;
    } else {
      params[key] = value;
    }
  }

  return params;
}

• SearchDestination - describes the destination.
  • type is a country, city or airport
  • name - name
• SearchFieldOptions - parameters that can be set when configuring the form.
• SearchFormOptions - generated type
• getSearchQueryParams is a small utility for bringing queryParams to the required form.

Let's start implementing the form by searching for air tickets, since this includes the entire set of fields.

Create the avia section:

mkdir src/app/search/avia
mkdir src/app/search/avia/common
mkdir src/app/search/avia/common/lib
echo >src/app/search/avia/common/index.ts

Add interfaces:

import { castQueryParams } from '@baf/core';

export interface SearchDeclination {
  readonly vi: string;
  readonly tv: string;
  readonly su: string;
  readonly ro: string;
  readonly pr: string;
  readonly da: string;
}

export interface SearchCityOrAirportDTO {
  readonly id: string;
  readonly type: string;
  readonly code: string;
  readonly name: string;
  readonly country_code: string;
  readonly country_name: string;
  readonly city_name?: string;
  readonly state_code: string | null;
  readonly coordinates: {
    readonly lon: number;
    readonly lat: number;
  };
  readonly index_strings: unknown[];
  readonly weight: number;
  readonly cases: SearchDeclination | null;
  readonly country_cases: SearchDeclination | null;
  readonly main_airport_name: string | null;
}

export interface SearchFlightOptions {
  readonly [key: string]: unknown;

  readonly currency: string;
  readonly origin: string;
  readonly destination: string;
  readonly departure_at: string;
  readonly return_at?: string;
  readonly one_way?: string;
  readonly direct?: boolean;
  readonly unique?: boolean;
  readonly limit?: number;
  readonly page?: number;
  readonly soring?: string;

  readonly token: string;
}

export interface SearchFlight {
  readonly origin: string;
  readonly destination: string;
  readonly origin_airport: string;
  readonly destination_airport: string;
  readonly price: number;
  readonly airline: string;
  readonly flight_number: string;
  readonly departure_at: string;
  readonly return_at: string;
  readonly transfers: number;
  readonly return_transfers: number;
  readonly duration: number;
  readonly duration_to: number;
  readonly duration_back: number;
  readonly link: string;
}

export interface SearchFlightResponse {
  readonly success: boolean;
  readonly data: SearchFlight[];
  readonly currency: string;
}

export interface SearchAviaLine {
  readonly origin: string;
  readonly originName: string;
  readonly destination: string;
  readonly destinationName: string;
  readonly duration: number;
  readonly departureAt: string;
  readonly arriveAt: string;
  readonly transfers: number;
}

export function getSearchFlightOptions(queryParams: Record<string, unknown>, token: string, currency: string): SearchFlightOptions {
  const { from, to, direct, startDate, endDate } = castQueryParams(queryParams);

  if (
    typeof from !== 'string' ||
    typeof to !== 'string' ||
    (typeof direct !== 'boolean' && typeof direct !== 'undefined') ||
    typeof startDate !== 'string' ||
    (typeof endDate !== 'string' && typeof endDate !== 'undefined')
  ) {
    throw new Error('Invalid search flight options');
  }

  return {
    origin: from,
    destination: to,
    direct,
    currency: currency.toLowerCase(),
    departure_at: startDate,
    return_at: endDate,
    token,
    sorting: 'price',
  };
}

• SearchDeclination - declination of a place name (mostly needed only in Russian);
• SearchCityOrAirportDTO - information about the city or airport;
• SearchFlightOptions - search options;
• SearchFlightResponse - suitable flights;
• SearchAviaLine - one direction;
• getSearchFlightOptions - a function that checks the passed parameters.

Now let’s define the form itself:

import { FormControl, FormGroup, Validators } from '@angular/forms';

import type { FormFor } from '@baf/core';
import type { SearchDestination } from '@baf/search/common';

export interface SearchAviaForm {
  readonly from: string | SearchDestination;
  readonly to: string | SearchDestination;
  readonly startDate: string;
  readonly endDate: string;
  readonly passengers: number;
}

export type SearchAviaFormGroup = FormGroup<FormFor<SearchAviaForm>>;

export const initialSearchAviaFormGroup: SearchAviaFormGroup = new FormGroup({
  from: new FormControl<string | SearchDestination>('', {
    nonNullable: true,
    validators: [Validators.required],
  }),
  to: new FormControl<string | SearchDestination>('', {
    nonNullable: true,
    validators: [Validators.required],
  }),
  startDate: new FormControl<string>('', {
    nonNullable: true,
    validators: [Validators.required],
  }),
  endDate: new FormControl<string>('', {
    nonNullable: true,
    validators: [],
  }),
  passengers: new FormControl<number>(1, {
    nonNullable: true,
    validators: [Validators.required, Validators.min(1), Validators.max(20)],
  }),
});

• SearchAviaForm - list of fields;
• SearchAviaFormGroup - angular reactive form;
• initialSearchAviaFormGroup - initial state.

And also, let’s define filters:

import { FormControl, FormGroup } from '@angular/forms';

import type { FormFor } from '@baf/core';

export interface SearchAviaFilters {
  readonly baggage: boolean;
  readonly direct: boolean;
}

export type SearchAviaFiltersGroup = FormGroup<FormFor<SearchAviaFilters>>;

export const initialSearchAviaFiltersGroup: SearchAviaFiltersGroup = new FormGroup({
  baggage: new FormControl(false, { nonNullable: true, validators: [] }),
  direct: new FormControl(false, { nonNullable: true, validators: [] }),
});

SearchAviaFilters - available values;
SearchAviaFiltersGroup - angular reactive form;
initialSearchAviaFiltersGroup - initial state.

Add a search/avia/services section, which will contain services for accessing the external API:

mkdir src/app/search/avia/services
mkdir src/app/search/avia/services/lib
echo >src/app/search/avia/services/index.ts

Implementation:

import { HttpClient } from '@angular/common/http';
import { DEFAULT_CURRENCY_CODE, inject, Injectable, TransferState } from '@angular/core';
import type { Observable } from 'rxjs';
import { map } from 'rxjs';

import type { Environment } from '@baf/core';
import { castParams, ENV_DEFAULT, ENV_KEY } from '@baf/core';
import type { SearchFlight, SearchFlightResponse } from '@baf/search/avia/common';
import { getSearchFlightOptions } from '@baf/search/avia/common';

@Injectable()
export class SearchAviaService {
  private readonly httpClient = inject(HttpClient);
  private readonly environment = inject(TransferState).get<Environment>(ENV_KEY, ENV_DEFAULT);
  private readonly currency = inject(DEFAULT_CURRENCY_CODE);

  findFlights(queryParams: Record<string, unknown>): Observable<SearchFlight[]> {
    const params = castParams(getSearchFlightOptions(queryParams, this.environment.aviasalesToken, this.currency));

    return this.httpClient.get<SearchFlightResponse>('/api/aviasales/v3/prices_for_dates', { params }).pipe(map(({ data }) => data));
  }
}

SearchAviaService contains only one method - findFlights:

• getSearchFlightOptions - converting parameters into request format;
• castParams - removes unnecessary and empty properties.

Proski setting

For local development you need to configure a proxy.

Install dotenv:

yarn add -D dotenv

Then in main.server.ts by connecting env:

import { bootstrapApplication } from '@angular/platform-browser';
import dotenv from 'dotenv';

import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

dotenv.config();

const bootstrap = () => bootstrapApplication(AppComponent, config);

export default bootstrap;

Create proxy.config.json:

{
  "/api/autocomplete": {
    "target": "https://autocomplete.travelpayouts.com",
    "secure": false,
    "pathRewrite": {
      "^/api/autocomplete": ""
    },
    "changeOrigin": true
  },
  "/api/aviasales": {
    "target": "https://api.travelpayouts.com",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  },
  "/api/hotels": {
    "target": "https://engine.hotellook.com/api/v2",
    "secure": false,
    "pathRewrite": {
      "^/api/hotels": ""
    },
    "changeOrigin": true
  }
}

In angular.json we will write proxyConfig:

{
  ...,
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "src/proxy.conf.json"
    }
  }
}

In app.config.server.ts we will connect envs:

export const config = mergeApplicationConfig(envConfig, appConfig, serverConfig);

In the root of the project we will add .env with the following tokens:

AVIASALES_TOKEN=YourTokenForTravelPayouts
HOTELLOOK_TOKEN=YourTokenForTravelPayouts

Let's launch and test.

You can display variables in the console.

For production I added a proxy based on the node server
server.ts:

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

import bootstrap from './src/main.server';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
  const locale = serverDistFolder.split('/').at(-1) ?? '';
  const browserDistFolder = resolve(serverDistFolder, '../../browser', locale);
  const indexHtml = join(serverDistFolder, 'index.server.html');

  const commonEngine = new CommonEngine();

  // Note: Don't use in production! For tutorial only...
  server.use(
    '/api/autocomplete',
    createProxyMiddleware({
      target: 'https://autocomplete.travelpayouts.com',
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/api/autocomplete': '',
      },
    }),
  );
  server.use(
    '/api/aviasales',
    createProxyMiddleware({
      target: 'https://api.travelpayouts.com/aviasales',
      secure: false,
      pathRewrite: {
        '^/api/aviasales': '',
      },
      changeOrigin: true,
    }),
  );
  server.use(
    '/api/hotels',
    createProxyMiddleware({
      target: 'https://engine.hotellook.com/api/v2',
      secure: false,
      pathRewrite: {
        '^/api/hotels': '',
      },
      changeOrigin: true,
    }),
  );

  server.set('view engine', 'html');
  server.set('views', browserDistFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });

  // Serve static files from /browser
  server.get(
    '**',
    express.static(browserDistFolder, {
      maxAge: '1y',
      index: 'index.html',
    }),
  );

  // All regular routes use the Angular engine
  server.get('**', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;

    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

run();

As you can see from the example, I'm using http-proxy-middleware.

Form fields

Since all forms are similar, let's create common components to implement them.

Generating fields:

mkdir src/app/search/ui
mkdir src/app/search/ui/fields
mkdir src/app/search/ui/fields/lib
echo >src/app/search/ui/fields/index.ts

We will need the following controls:

• date - выбор даты;
• destination - выбор места;
• passengers - указание количества пассажиров.

Также 2 специальных компонента:

• group - группировка полей;
• reverse - смена откуда и куда.

Создание SearchDate

Запустим команду:

yarn ng g c search-date

В разметку добавим datepicker:

<baf-datepicker [control]="control()" [options]="options()"></baf-datepicker>

Немного стилей:

@use 'src/stylesheets/device' as device;

:host {
  width: 100%;

  &.is-hide {
    display: none;
  }

  &.is-start-date.is-valid {
    border-right: 1px solid var(--md-sys-color-background);
  }

  @include device.media-web() {
    &.is-hide {
      display: flex;
      flex-grow: 1;
    }

    &.is-start-date,
    &.is-start-date.is-valid {
      border-left: 1px solid var(--md-sys-color-background);
      border-right: 1px solid var(--md-sys-color-background);
    }

    &.is-end-date {
      border-right: 1px solid var(--md-sys-color-background);
    }
  }
}

• is-hide - скрываем на мобильном устройстве обратную дату, и показываем ее если выбрано значение;
• is-start-date/is-end-date - скругления у полей.

Реализация самого компонента достаточно тривиальна.

import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
import type { FormControl } from '@angular/forms';

import { camelCaseToHumanize, ExtraClassService } from '@baf/core';
import type { SearchFieldOptions } from '@baf/search/common';
import type { DatepickerOptions } from '@baf/ui/datepicker';
import { DatepickerComponent } from '@baf/ui/datepicker';

export interface SearchDateOptions extends SearchFieldOptions {
  readonly startDate?: FormControl<string>;
}

@Component({
  selector: 'baf-search-date',
  standalone: true,
  imports: [DatepickerComponent],
  templateUrl: './search-date.component.html',
  styleUrl: './search-date.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ExtraClassService],
})
export class SearchDateComponent {
  private readonly extraClassService = inject(ExtraClassService);

  readonly control = input.required<FormControl<string>, FormControl<string>>({
    transform: (value) => {
      this.extraClassService.register('valid', value.valueChanges, () => {
        this.extraClassService.patch('is-valid', value.valid);
      });

      return value;
    },
  });

  readonly options = input.required<DatepickerOptions, SearchDateOptions>({
    transform: (value) => {
      this.extraClassService.update('options', value.id ? `is-${camelCaseToHumanize(value.id)}` : '');

      if (value.startDate) {
        this.extraClassService.register('invalid', value.startDate.valueChanges, () => {
          this.extraClassService.patch('is-hide', !!value.startDate?.invalid);
        });
      }

      return {
        ...value,
        mask: '00.00.0000',
        maskTo: (val: string) => {
          const [year, month, day] = val.split('-');

          return `${day}.${month}.${year}`;
        },
        maskForm: (val: string) => {
          const [day, month, year] = val.split('.');

          return `${year}-${month}-${day}`;
        },
      };
    },
  });
}

Отмечу, что ExtraClassService используется только для того, чтобы не прибегать к HostBinding. Я все экспериментирую с автоматизацией стилизации. Но видимо, это не самое удачное решение.

• control - контрол формы;
• options - список настроек.

Создание SearchDestination

Создадим место назначения:

yarn ng g c search-destination

Шаблон:

<baf-autocomplete [control]="control()" [options]="options()" [data]="data$"></baf-autocomplete>

Немного стилей:

@use 'src/stylesheets/device' as device;

:host {
  width: 100%;

  &.is-from {
    border-bottom: 1px solid var(--md-sys-color-background);
  }

  @include device.media-web() {
    &.is-from {
      border-bottom: none;
    }
  }
}

Реализация компонента сложнее даты:

import type { OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { FormControl } from '@angular/forms';
import { BehaviorSubject, debounceTime, EMPTY, of, switchMap, tap } from 'rxjs';

import { ExtraClassService, toClass } from '@baf/core';
import type { SearchDestination, SearchFieldOptions } from '@baf/search/common';
import type { AutocompleteOptions } from '@baf/ui/autocomplete';
import { AutocompleteComponent } from '@baf/ui/autocomplete';
import { InputComponent } from '@baf/ui/input';

import { SearchDestinationService } from './search-destination.service';

export interface SearchDestinationOptions extends SearchFieldOptions {
  readonly types?: string[];
  readonly key?: string;
}

@Component({
  selector: 'baf-search-destination',
  standalone: true,
  imports: [InputComponent, AutocompleteComponent],
  templateUrl: './search-destination.component.html',
  styleUrl: './search-destination.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ExtraClassService, SearchDestinationService],
})
export class SearchDestinationComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);
  private readonly searchDestinationService = inject(SearchDestinationService);
  private readonly extraClassService = inject(ExtraClassService);

  readonly control = input.required<FormControl<string | SearchDestination>>();
  readonly options = input.required<AutocompleteOptions & SearchDestinationOptions, SearchDestinationOptions>({
    transform: (options) => {
      this.extraClassService.update('options', toClass(options.id));

      return {
        ...options,
        key: options.key ?? 'code',
        displayFn: (item: SearchDestination) => {
          return `${item.name}, ${item.code}<br>${item.country_name}, ${item.city_name ?? item.name}`;
        },
        inputDisplayFn: (item: SearchDestination | string) => {
          if (!item) {
            return '';
          }
          if (typeof item === 'string') {
            return item;
          }

          return `${item.name}, ${item.code}`;
        },
      };
    },
  });

  readonly data$ = new BehaviorSubject<SearchDestination[]>([]);

  ngOnInit(): void {
    this.control()
      .valueChanges.pipe(
        debounceTime(300),
        switchMap((query) => {
          if (!query) {
            return of([]);
          }

          if (typeof query !== 'string') {
            return EMPTY;
          }

          return this.searchDestinationService.findDestination(query, this.options().key, this.options().types);
        }),
        tap((response) => this.data$.next(response.slice(0, 6))),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe();
  }
}

Также имеем два инпута: control и options. Однако, есть реактивное свойство - data$, который представляет собой массив мест назначения, полученный из API.

Добавим SearchDestinationService:

import { HttpClient } from '@angular/common/http';
import { inject, Injectable, LOCALE_ID } from '@angular/core';
import type { Observable } from 'rxjs';
import { map } from 'rxjs';

import type { SearchDestination } from '@baf/search/common';

@Injectable()
export class SearchDestinationService {
  private readonly httpClient = inject(HttpClient);
  private readonly localeId = inject(LOCALE_ID);

  findDestination(term: string, key: string, types?: string[]): Observable<SearchDestination[]> {
    const withTypes = types?.length ? `&${types.map((type) => `types[]=${type}`).join('&')}` : '';

    return this.httpClient.get<SearchDestination[]>(`/api/autocomplete/places2?locale=${this.localeId}${withTypes}&term=${term}`).pipe(
      map((result) =>
        result.map((item) => ({
          ...item,
          value: item[key as 'code' | 'name'],
        })),
      ),
    );
  }
}

Сервис имеет всего один метод - findDestination, который возвращает список городов или аэропортов.

Если посмотреть реализацию, то можно увидеть, что при вводе названия вызывается findDestination:

ngOnInit(): void {
    this.control()
      .valueChanges.pipe(
        debounceTime(300),
        switchMap((query) => {
          if (!query) {
            return of([]);
          }

          if (typeof query !== 'string') {
            return EMPTY;
          }

          return this.searchDestinationService.findDestination(query, this.options().key, this.options().types);
        }),
        tap((response) => this.data$.next(response.slice(0, 6))),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe();
  }

Важно, для работы API сначала нужно настроить прокси, так как используемое мной API будет резать запросы по CORS. Как это обойти расскажу ниже.

Создание SearchReverse

Добавим смену места.

Для этого создадим новый компонент:

yarn ng g c search-reverse

В шаблоне выведем кнопку с иконкой:

<button baf-icon-button type="button" (click)="onReverse()" i18n-aria-label="Search Field|Swap" aria-label="Swap"><baf-sync-alt /></button>

Немного стилей:

@use 'src/stylesheets/device' as device;

:host {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;

  @include device.media-web() {
    position: relative;
    top: initial;
    right: initial;

    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    display: flex;
    border-left: 1px solid var(--md-sys-color-background);
    border-right: 1px solid var(--md-sys-color-background);

    button {
      display: flex;
      align-items: center;
      height: 3rem;
    }
  }
}

button {
  line-height: 1;
}

Реализация очень тривиальна:

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import type { FormGroup } from '@angular/forms';

import { IconButtonComponent } from '@baf/ui/buttons';
import { SyncAltComponent } from '@baf/ui/icons';

@Component({
  selector: 'baf-search-reverse',
  standalone: true,
  imports: [SyncAltComponent, IconButtonComponent],
  templateUrl: './search-reverse.component.html',
  styleUrl: './search-reverse.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchReverseComponent {
  readonly form = input.required<FormGroup>();

  onReverse(): void {
    const { from, to } = this.form().getRawValue();

    if (from && to) {
      this.form().patchValue({ from: to, to: from }, { emitEvent: false });
    }
  }
}

Просто при клике меняем места назначения.

Создание SearchPassengers

Контрол для количества пассажиров:

yarn ng g c search-passengers

Макет:

<baf-input-control>
  <label baf-label [attr.for]="options().id">{{ options().label }}</label>
  <input [id]="options().id" baf-input type="number" [formControl]="control()" [placeholder]="options().placeholder ?? ''" />
</baf-input-control>

Логика:

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import type { FormControl } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import type { SearchFieldOptions } from '@baf/search/common';
import { InputComponent, InputControlComponent } from '@baf/ui/input';
import { LabelComponent } from '@baf/ui/label';

export type SearchPassengersOptions = SearchFieldOptions;

@Component({
  selector: 'baf-search-passengers',
  standalone: true,
  imports: [ReactiveFormsModule, InputComponent, InputControlComponent, LabelComponent],
  templateUrl: './search-passengers.component.html',
  styleUrl: './search-passengers.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchPassengersComponent {
  readonly control = input.required<FormControl<number | undefined>>();
  readonly options = input.required<SearchPassengersOptions>();
}

Создание SearchGroup

yarn ng g c search-group

Суть всего компонента в получении mode и задания соответствующего класса:

import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';

import { ExtraClassService, toClass } from '@baf/core';

export type SearchGroupType = 'destination' | 'date' | 'line' | 'submit' | 'single' | undefined;

@Component({
  selector: 'baf-search-group',
  standalone: true,
  imports: [],
  template: '<ng-content/>',
  styleUrl: './search-group.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ExtraClassService],
})
export class SearchGroupComponent {
  private readonly extraClassService = inject(ExtraClassService);

  readonly mode = input<SearchGroupType, SearchGroupType>(undefined, {
    transform: (value) => {
      this.extraClassService.update('mode', toClass(value));

      return value;
    },
  });
}

Сами стили:

@use 'src/stylesheets/device' as device;

:host {
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;

  &.is-date {
    flex-direction: row;
  }

  &.is-single {
    flex-grow: 100;
  }

  &.is-line {
    flex-direction: row;
    gap: 1rem;
  }

  @include device.media-web() {
    flex-direction: row;

    &.is-line {
      gap: 0;
    }
    &.is-submit {
      gap: 0;
      margin-left: 1rem;
    }
  }
}

Создание формы поиска

После того как были созданы все поля, можно реализовать форму.

mkdir src/app/search/ui/form
mkdir src/app/search/ui/form/lib
echo >src/app/search/ui/form/index.ts

Запустим команду:

yarn ng g c search-group

В шаблон вставим содержимое:

<form [formGroup]="form()" (ngSubmit)="onSubmit()">
  <ng-content />
  <baf-search-group mode="submit">
    <button baf-button bafMode="primary" bafWidth="max" type="submit" i18n="Search Form|Find">Find</button>
  </baf-search-group>
</form>

Немного стилей:

@use 'src/stylesheets/device' as device;

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @include device.media-web() {
    flex-direction: row;
    gap: 0;
  }
}

Сама форма:

import type { OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { tap } from 'rxjs';

import type { PathValues } from '@baf/core';
import { castQueryParams, getRoute } from '@baf/core';
import { getSearchQueryParams } from '@baf/search/common';
import { SearchGroupComponent } from '@baf/search/ui/fields';
import { ButtonComponent } from '@baf/ui/buttons';

@Component({
  selector: 'baf-search-form',
  standalone: true,
  imports: [SearchGroupComponent, ButtonComponent, ReactiveFormsModule],
  templateUrl: './search-form.component.html',
  styleUrl: './search-form.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFormComponent implements OnInit {
  private readonly router = inject(Router);
  private readonly activatedRoute = inject(ActivatedRoute);
  private readonly destroyRef = inject(DestroyRef);

  readonly form = input.required<FormGroup>();
  readonly redirectTo = input.required<PathValues>();
  readonly submitted = output();

  ngOnInit(): void {
    this.activatedRoute.queryParams
      .pipe(
        tap((queryParams) => {
          const formData = castQueryParams(queryParams, Object.keys(this.form().controls));
          if (Object.keys(formData).length) {
            this.form().patchValue(formData);
          }
        }),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe();
  }

  onSubmit(): void {
    this.form().markAllAsTouched();

    if (this.form().invalid) {
      return;
    }
    this.submitted.emit();

    // Note: Auto redirect
    void this.router.navigate(getRoute(this.redirectTo()), {
      queryParams: getSearchQueryParams({ ...this.activatedRoute.snapshot.queryParams, ...this.form().getRawValue() }),
    });
  }
}

Форма добавляет общий метод отправки и после инициализации компонента заполняется данными.

• form - angular reactive form;
• redirectTo - редирект на результаты;
• submitted - событие перехода.

    this.activatedRoute.queryParams
      .pipe(
        tap((queryParams) => {
          const formData = castQueryParams(queryParams, Object.keys(this.form().controls));
          if (Object.keys(formData).length) {
            this.form().patchValue(formData);
          }
        }),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe();

После клика произойдет перенаправление на указанный путь:

 this.form().markAllAsTouched();

if (this.form().invalid) {
  return;
}
this.submitted.emit();

// Note: Auto redirect
void this.router.navigate(getRoute(this.redirectTo()), {
  queryParams: getSearchQueryParams({ 
    ...this.activatedRoute.snapshot.queryParams, 
    ...this.form().getRawValue() 
  }),
});

Фильтры

Последним шагом добавим форму фильтров:

mkdir src/app/search/ui/filters
mkdir src/app/search/ui/filters/lib
echo >src/app/search/ui/filters/index.ts

Запустим команду:

yarn ng g c search-filters

Шаблон:

<baf-card>
  <ng-content />
  <button type="button" baf-button bafMode="primary" bafSize="medium" bafWidth="max" i18n="Search Filters|Apply" (click)="onApply()">
    Apply
  </button>
  <button type="button" baf-button bafMode="tertiary" bafSize="medium" bafWidth="max" i18n="Search Filters|Reset" (click)="onReset()">
    Reset
  </button>
</baf-card>

Немного стилей:

@use 'src/stylesheets/device' as device;

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @include device.media-web() {
    flex-direction: row;
    gap: 0;
  }
}

Логика схожа с работой ранее созданной формы:

import type { OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, output } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import type { FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { tap } from 'rxjs';

import type { PathValues } from '@baf/core';
import { castQueryParams, getRoute } from '@baf/core';
import { getSearchQueryParams } from '@baf/search/common';
import { SearchGroupComponent } from '@baf/search/ui/fields';
import { ButtonComponent } from '@baf/ui/buttons';

@Component({
  selector: 'baf-search-form',
  standalone: true,
  imports: [SearchGroupComponent, ButtonComponent, ReactiveFormsModule],
  templateUrl: './search-form.component.html',
  styleUrl: './search-form.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFormComponent implements OnInit {
  private readonly router = inject(Router);
  private readonly activatedRoute = inject(ActivatedRoute);
  private readonly destroyRef = inject(DestroyRef);

  readonly form = input.required<FormGroup>();
  readonly redirectTo = input.required<PathValues>();
  readonly submitted = output();

  ngOnInit(): void {
    this.activatedRoute.queryParams
      .pipe(
        tap((queryParams) => {
          const formData = castQueryParams(queryParams, Object.keys(this.form().controls));
          if (Object.keys(formData).length) {
            this.form().patchValue(formData);
          }
        }),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe();
  }

  onSubmit(): void {
    this.form().markAllAsTouched();

    if (this.form().invalid) {
      return;
    }
    this.submitted.emit();

    // Note: Auto redirect
    void this.router.navigate(getRoute(this.redirectTo()), {
      queryParams: getSearchQueryParams({ ...this.activatedRoute.snapshot.queryParams, ...this.form().getRawValue() }),
    });
  }
}

При изменении любого значения идет редирект:

onApply(): void {
  void this.router.navigate([], {
    queryParams: {
      ...this.activatedRoute.snapshot.queryParams,
      refresh: new Date().toISOString(),
    },
  });
}

refresh - это костыль. Используется как изменение в пути и запуска релоада страницы.

Сброс обнуляет все выбранные фильтры:

onReset(): void {
  this.form().reset();
}

Форма поиска авиабилетов

Перейдем к созданию формы поиска авиабилетов.

mkdir src/app/search/avia/ui
mkdir src/app/search/avia/ui/form
mkdir src/app/search/avia/ui/form/lib
echo >src/app/search/avia/ui/form/index.ts

Добавим компонент:

yarn ng g c search-avia-form

Опишем форму SearchAviaFormComponent:

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { PATHS } from '@baf/core';
import type { SearchAviaForm } from '@baf/search/avia/common';
import { initialSearchAviaFormGroup } from '@baf/search/avia/common';
import type { SearchFormOptions } from '@baf/search/common';
import {
  SearchDateComponent,
  SearchDestinationComponent,
  SearchGroupComponent,
  SearchPassengersComponent,
  SearchReverseComponent,
} from '@baf/search/ui/fields';
import { SearchFormComponent } from '@baf/search/ui/form';
import { ButtonComponent } from '@baf/ui/buttons';

@Component({
  selector: 'baf-search-avia-form',
  standalone: true,
  imports: [
    SearchFormComponent,
    SearchGroupComponent,
    SearchDestinationComponent,
    SearchReverseComponent,
    SearchDateComponent,
    SearchPassengersComponent,
    ButtonComponent,
  ],
  templateUrl: './search-avia-form.component.html',
  styleUrl: './search-avia-form.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchAviaFormComponent {
  readonly form = initialSearchAviaFormGroup;
  readonly redirectTo = PATHS.searchAvia;
  readonly name = 'city_name';

  readonly options: SearchFormOptions<SearchAviaForm> = {
    from: { label: $localize`:Search Field:Where from`, id: 'from', types: ['city', 'airport'] },
    to: { label: $localize`:Search Field:Where to`, id: 'to', types: ['city', 'airport'] },
    startDate: { label: $localize`:Search Field:When`, id: 'startDate' },
    endDate: { label: $localize`:Search Field:When back`, id: 'endDate', startDate: this.form.controls.startDate },
    passengers: { label: $localize`:Search Field:Passengers`, id: 'passengers' },
  };
}

Вывдем все:

<baf-search-form [redirectTo]="redirectTo" [form]="form">
  <baf-search-group mode="destination">
    <baf-search-destination [control]="form.controls.from" [options]="options.from" />
    <baf-search-reverse [form]="form" />
    <baf-search-destination [control]="form.controls.to" [options]="options.to" />
  </baf-search-group>
  <baf-search-group mode="line">
    <baf-search-group mode="date">
      <baf-search-date [control]="form.controls.startDate" [options]="options.startDate" />
      <baf-search-date [control]="form.controls.endDate" [options]="options.endDate" />
    </baf-search-group>
    <baf-search-passengers [control]="form.controls.passengers" [options]="options.passengers" />
  </baf-search-group>
</baf-search-form>

Как можно заметить, вся бизнес логика скрыта в дочерних компонентах.

SearchAviaFormComponent представляет собой конфиг формы.

Форма фильтров билетов

По аналогии создадим фильтры авиабилетов.

mkdir src/app/search/avia/ui/filters
mkdir src/app/search/avia/ui/filters/lib
echo >src/app/search/avia/ui/filters/index.ts

Запустим команду:

yarn ng g c search-filters-avia

Зададим требуемые настройки:

import { ChangeDetectionStrategy, Component } from '@angular/core';

import type { SearchAviaFilters } from '@baf/search/avia/common';
import { initialSearchAviaFiltersGroup } from '@baf/search/avia/common';
import type { SearchFormOptions } from '@baf/search/common';
import { SearchFiltersComponent } from '@baf/search/ui/filters';

import { FilterBaggageComponent } from './filter-baggage/filter-baggage.component';
import { FilterDirectComponent } from './filter-direct/filter-direct.component';

@Component({
  selector: 'baf-search-filters-avia',
  standalone: true,
  imports: [SearchFiltersComponent, FilterBaggageComponent, FilterDirectComponent],
  templateUrl: './search-filters-avia.component.html',
  styleUrl: './search-filters-avia.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFiltersAviaComponent {
  readonly form = initialSearchAviaFiltersGroup;

  readonly options: SearchFormOptions<SearchAviaFilters> = {
    baggage: { label: $localize`:Search Filter:Baggage`, id: 'baggage', name: 'baggage' },
    direct: { label: $localize`:Search Filter:Direct`, id: 'direct', name: 'direct' },
  };
}

И шаблон:

<baf-search-filters [form]="form">
  <baf-filter-baggage [control]="form.controls.baggage" [options]="options.baggage" />
  <baf-filter-direct [control]="form.controls.direct" [options]="options.direct"/>
</baf-search-filters>

Из примера видно, что выводятся просто фильтры списком. Как и в случае с основной формой, вся логика вынесена в дочерние компоненты.

Пример фильтра:

<baf-checkbox [control]="control()" [options]="options()">{{ options().label }}</baf-checkbox>

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import type { FormControl } from '@angular/forms';

import { ExtractChangesDirective } from '@baf/core';
import type { SearchFieldOptions } from '@baf/search/common';
import { CheckboxComponent } from '@baf/ui/checkbox';

export type FilterDirectOptions = SearchFieldOptions;

@Component({
  selector: 'baf-filter-direct',
  standalone: true,
  imports: [CheckboxComponent],
  templateUrl: './filter-direct.component.html',
  styleUrl: './filter-direct.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  hostDirectives: [
    {
      directive: ExtractChangesDirective,
      inputs: ['control'],
    },
  ],
})
export class FilterDirectComponent {
  readonly control = input.required<FormControl<boolean>>();
  readonly options = input.required<FilterDirectOptions>();
}

Подключение формы

Теперь можно вывести форму на главной странице:

export const homeRoutes: Routes = [
  {
    path: PATHS.homeAvia,
    title: $localize`:Home Title:Buy & Fly - Flights with 10% cashback`,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('@baf/search/avia/ui/form').then((m) => m.SearchAviaFormComponent),
        outlet: 'form',
      },
    ],
  },
  // ...
]

Подключим http в app.config.ts:

    provideHttpClient(withFetch(),
    withInterceptors(httpInterceptors)),
    provideClientHydration(),
    provideCurrency('RUB'), 

Запустим проект:

Форма поиска отелей

Создадим форму для бронирования отелей:

mkdir src/app/search/hotels
mkdir src/app/search/hotels/common
mkdir src/app/search/hotels/common/lib
echo >src/app/search/hotels/common/index.ts

Опишем интерфейсы.

search-hotel.interface.ts:

export interface SearchLocation {
  readonly cityName: string;
  readonly fullName: string;
  readonly countryCode: string;
  readonly countryName: string;
  readonly iata: string[];
  readonly id: string;
  readonly hotelsCount: string;
  readonly location: {
    readonly lat: string;
    readonly lon: string;
  };
  readonly _score: number;
}

export interface SearchHotelInfo {
  readonly label: string;
  readonly locationName: string;
  readonly locationId: string;
  readonly id: string;
  readonly fullName: string;
  readonly location: {
    readonly lat: string;
    readonly lon: string;
  };
}

export interface SearchHotelsResponse {
  readonly results: {
    readonly locations: SearchLocation[];
    readonly hotels: SearchHotelInfo[];
  };
  readonly status: string;
}

export interface SearchHotelDto {
  readonly locationId: number;
  readonly hotelId: number;
  readonly priceFrom: number;
  readonly priceAvg: number;
  readonly pricePercentile: Record<string, number>;
  readonly stars: number;
  readonly hotelName: string;
  readonly location: {
    readonly name: string;
    readonly country: string;
    readonly state: null | string;
    readonly geo: {
      readonly lat: number;
      readonly lon: number;
    };
  };
}

export interface SearchHotelDetails {
  readonly id: number;
  readonly cityId: number;
  readonly stars: number;
  readonly pricefrom: number;
  readonly rating: number;
  readonly popularity: number;
  readonly propertyType: number;
  readonly checkIn: string;
  readonly checkOut: string;
  readonly distance: number;
  readonly photoCount: number;
  readonly photos: {
    readonly url: string;
    readonly width: number;
    readonly height: number;
  }[];
  readonly photosByRoomType: Record<string, number>;
  readonly yearOpened: number;
  readonly yearRenovated: null | number;
  readonly cntRooms: number;
  readonly cntSuites: null | number;
  readonly cntFloors: number;
  readonly facilities: number[];
  readonly shortFacilities: string[];
  readonly location: {
    readonly lon: number;
    readonly lat: number;
  };
  readonly name: Record<string, string>;
  readonly address: Record<string, string>;
  readonly link: string;
  readonly poi_distance: unknown;
}

export interface SearchHotelsDetailsResponse {
  readonly pois: unknown[];
  readonly hotels: SearchHotelDetails[];
  readonly status: string;
}

export interface SearchHotel extends SearchHotelDto {
  readonly photos: {
    readonly url: string;
    readonly width: number;
    readonly height: number;
  }[];
}

• SearchLocation - информация о местоположении;
• SearchHotelInfo - информация об отеле;
• SearchHotelsResponse - список отелей;
• SearchHotelDto - DTO;
• SearchHotelDetails - расширенная информация
• SearchHotelsDetailsResponse - список отелей
• SearchHotel - информация об отеле;

search-hotel.filters.ts:

import { FormControl, FormGroup } from '@angular/forms';

import type { FormFor } from '@baf/core';

export interface SearchHotelFilters {
  readonly breakfast: boolean;
  readonly freeCancellation: boolean;
  readonly fiveStars: boolean;
}

export type SearchHotelFiltersGroup = FormGroup<FormFor<SearchHotelFilters>>;

export const initialSearchHotelFiltersGroup: SearchHotelFiltersGroup = new FormGroup({
  breakfast: new FormControl(false, { nonNullable: true, validators: [] }),
  fiveStars: new FormControl(false, { nonNullable: true, validators: [] }),
  freeCancellation: new FormControl(false, { nonNullable: true, validators: [] }),
});

• SearchHotelFilters - доступные параметры для фильтрации
• SearchHotelFiltersGroup - angular reactive form
• initialSearchHotelFiltersGroup - начальное состояние

search-hotel.form.ts:

import { FormControl, FormGroup, Validators } from '@angular/forms';

import type { FormFor } from '@baf/core';
import type { SearchDestination } from '@baf/search/common';

export interface SearchHotelForm {
  readonly city: string | SearchDestination;
  readonly startDate: string;
  readonly endDate: string;
  readonly passengers: number | undefined;
}

export type SearchHotelFormGroup = FormGroup<FormFor<SearchHotelForm>>;

export const initialSearchHotelFormGroup: SearchHotelFormGroup = new FormGroup({
  city: new FormControl<string | SearchDestination>('', {
    nonNullable: true,
    validators: [Validators.required],
  }),
  startDate: new FormControl<string>('', {
    nonNullable: true,
    validators: [Validators.required],
  }),
  endDate: new FormControl<string>('', {
    nonNullable: true,
    validators: [],
  }),
  passengers: new FormControl<number | undefined>(undefined, {
    nonNullable: true,
    validators: [Validators.required, Validators.min(1), Validators.max(20)],
  }),
});

search-hotel.options.ts:

import { castQueryParams } from '@baf/core';

export interface SearchHotelsInfoOptions {
  readonly [key: string]: unknown;

  readonly query: string;
  readonly lang: string;
  readonly limit: number;
  readonly lookFor: string;
}

export function getSearchHotelsInfoOptions(queryParams: Record<string, unknown>, lang: string): SearchHotelsInfoOptions {
  const { city } = castQueryParams(queryParams);

  if (typeof city !== 'string') {
    throw new Error('Invalid search flight options');
  }

  const limit = !isNaN(Number(queryParams['limit'])) ? Number(queryParams['limit']) : 20;

  return {
    query: city,
    lang: lang.toLowerCase(),
    lookFor: 'hotel',
    limit,
  };
}

export interface SearchHotelsOptions {
  readonly [key: string]: unknown;

  readonly location: string;
  readonly limit: number;
  readonly currency: string;
  readonly token: string;
}

export function getSearchHotelsOptions(queryParams: Record<string, unknown>, token: string, currency: string): SearchHotelsOptions {
  const { city, startDate, endDate } = castQueryParams(queryParams);

  if (typeof city !== 'string' || typeof startDate !== 'string' || typeof endDate !== 'string') {
    throw new Error('Invalid search flight options');
  }

  const limit = !isNaN(Number(queryParams['limit'])) ? Number(queryParams['limit']) : 20;

  return {
    location: city,
    checkIn: startDate,
    checkOut: endDate,
    currency: currency.toLowerCase(),
    limit,
    token,
  };
}

• SearchHotelsOptions, SearchHotelsInfoOptions - информация об отеле;
• getSearchHotelsOptions, getSearchHotelsInfoOptions - формирование опций для внешнего API.

Создадим сервисы:

mkdir src/app/search/hotels/services
mkdir src/app/search/hotels/services/lib
echo >src/app/search/hotels/services/index.ts

Реализация:

import { HttpClient } from '@angular/common/http';
import { DEFAULT_CURRENCY_CODE, inject, Injectable, LOCALE_ID, TransferState } from '@angular/core';
import type { Observable } from 'rxjs';
import { map } from 'rxjs';

import type { Environment } from '@baf/core';
import { castParams, ENV_DEFAULT, ENV_KEY } from '@baf/core';
import type {
  SearchHotel,
  SearchHotelDetails,
  SearchHotelDto,
  SearchHotelInfo,
  SearchHotelsDetailsResponse,
  SearchHotelsResponse,
} from '@baf/search/hotels/common';
import { getSearchHotelsInfoOptions, getSearchHotelsOptions } from '@baf/search/hotels/common';

@Injectable()
export class SearchHotelService {
  private readonly httpClient = inject(HttpClient);
  private readonly environment = inject(TransferState).get<Environment>(ENV_KEY, ENV_DEFAULT);
  private readonly localeId = inject(LOCALE_ID);
  private readonly currency = inject(DEFAULT_CURRENCY_CODE);

  findHotels(queryParams: Record<string, unknown>): Observable<SearchHotel[]> {
    const params = castParams(getSearchHotelsOptions(queryParams, this.environment.hotellookToken, this.currency));

    return this.httpClient.get<SearchHotelDto[]>('/api/hotels/cache.json', { params }).pipe(
      map((response) => {
        // На фронте так делать не нужно. Должен быть бэк, где будет собираться данные и кешироваться.
        // Это только для примера.
        return response.map((hotel) => ({
          ...hotel,
          photos: [
            {
              url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_0/320/240.auto`,
              width: 320,
              height: 240,
            },
            {
              url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_1/320/240.auto`,
              width: 320,
              height: 240,
            },
            {
              url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_2/320/240.auto`,
              width: 320,
              height: 240,
            },
            {
              url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_3/320/240.auto`,
              width: 320,
              height: 240,
            },
            {
              url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_4/320/240.auto`,
              width: 320,
              height: 240,
            },
            {
              url: `https://photo.hotellook.com/image_v2/limit/h${hotel.hotelId}_5/320/240.auto`,
              width: 320,
              height: 240,
            },
          ],
        }));
      }),
    );
  }

  findHotelsInfo(queryParams: Record<string, unknown>): Observable<SearchHotelInfo[]> {
    const params = castParams(getSearchHotelsInfoOptions(queryParams, this.localeId));

    return this.httpClient.get<SearchHotelsResponse>('/api/hotels/lookup.json', { params }).pipe(map(({ results }) => results.hotels));
  }

  getHotelsDetails(locationId: number): Observable<SearchHotelDetails[]> {
    const params = {
      locationId,
      token: this.environment.hotellookToken,
    };

    return this.httpClient.get<SearchHotelsDetailsResponse>('/api/hotels/static/hotels.json', { params }).pipe(map(({ hotels }) => hotels));
  }
}

• findHotels - получение списка отелей по заданным параметрам;
• findHotelsInfo, getHotelsDetails - не используется в проекте, осталось как часть легаси.

Добавим раздел:

mkdir src/app/search/hotels/ui
mkdir src/app/search/hotels/ui/forms
mkdir src/app/search/hotels/ui/forms/lib
echo >src/app/search/hotels/ui/forms/index.ts

Сгененируем компонент и изменим его:

<baf-search-form [redirectTo]="redirectTo" [form]="form">
  <baf-search-group mode="single">
    <baf-search-destination [control]="form.controls.city" [options]="options.city" />
  </baf-search-group>
  <baf-search-group mode="line">
    <baf-search-group mode="date">
      <baf-search-date [control]="form.controls.startDate" [options]="options.startDate" />
      <baf-search-date [control]="form.controls.endDate" [options]="options.endDate" />
    </baf-search-group>
    <baf-search-passengers [control]="form.controls.passengers" [options]="options.passengers" />
  </baf-search-group>
</baf-search-form>

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { PATHS } from '@baf/core';
import type { SearchFormOptions } from '@baf/search/common';
import type { SearchHotelForm } from '@baf/search/hotels/common';
import { initialSearchHotelFormGroup } from '@baf/search/hotels/common';
import {
  SearchDateComponent,
  SearchDestinationComponent,
  SearchGroupComponent,
  SearchPassengersComponent,
  SearchReverseComponent,
} from '@baf/search/ui/fields';
import { SearchFormComponent } from '@baf/search/ui/form';
import { ButtonComponent } from '@baf/ui/buttons';

@Component({
  selector: 'baf-search-hotel-form',
  standalone: true,
  imports: [
    SearchFormComponent,
    SearchGroupComponent,
    SearchDestinationComponent,
    SearchReverseComponent,
    SearchDateComponent,
    SearchPassengersComponent,
    ButtonComponent,
  ],
  templateUrl: './search-hotel-form.component.html',
  styleUrl: './search-hotel-form.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchHotelFormComponent {
  readonly form = initialSearchHotelFormGroup;
  readonly redirectTo = PATHS.searchHotel;

  readonly options: SearchFormOptions<SearchHotelForm> = {
    city: { label: $localize`:Search Field:City`, id: 'city', types: ['city'], key: 'name' },
    startDate: { label: $localize`:Search Field:When`, id: 'startDate' },
    endDate: { label: $localize`:Search Field:When back`, id: 'endDate', startDate: this.form.controls.startDate },
    passengers: { label: $localize`:Search Field:Guests`, id: 'passengers' },
  };
}

Внимательный читатель заметит, что реализация полностью продублирована из формы поиска авиабилетов.

Реализуем форму фильтров:

mkdir src/app/search/hotels/ui/filters
mkdir src/app/search/hotels/ui/filters/lib
echo >src/app/search/hotels/ui/filters/index.ts

Разметка:

<baf-search-filters [form]="form">
  <baf-filter-breakfast [control]="form.controls.breakfast" [options]="options.breakfast"></baf-filter-breakfast>
  <baf-filter-five-stars [control]="form.controls.fiveStars" [options]="options.fiveStars"></baf-filter-five-stars>
  <baf-filter-free-cancellation
    [control]="form.controls.freeCancellation"
    [options]="options.freeCancellation"
  ></baf-filter-free-cancellation>
</baf-search-filters>

Логика:

import { ChangeDetectionStrategy, Component } from '@angular/core';

import type { SearchFormOptions } from '@baf/search/common';
import type { SearchHotelFilters } from '@baf/search/hotels/common';
import { initialSearchHotelFiltersGroup } from '@baf/search/hotels/common';
import { SearchFiltersComponent } from '@baf/search/ui/filters';

import { FilterBreakfastComponent } from './filter-breakfast/filter-breakfast.component';
import { FilterFiveStarsComponent } from './filter-five-stars/filter-five-stars.component';
import { FilterFreeCancellationComponent } from './filter-free-cancellation/filter-free-cancellation.component';

@Component({
  selector: 'baf-search-filters-hotels',
  standalone: true,
  imports: [SearchFiltersComponent, FilterBreakfastComponent, FilterFreeCancellationComponent, FilterFiveStarsComponent],
  templateUrl: './search-filters-hotels.component.html',
  styleUrl: './search-filters-hotels.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchFiltersHotelsComponent {
  readonly form = initialSearchHotelFiltersGroup;

  readonly options: SearchFormOptions<SearchHotelFilters> = {
    breakfast: { label: $localize`:Search Filter:Breakfast`, id: 'breakfast', name: 'breakfast' },
    fiveStars: { label: $localize`:Search Filter:Five Stars`, id: 'fiveStars', name: 'fiveStars' },
    freeCancellation: { label: $localize`:Search Filter:Free Cancellation`, id: 'freeCancellation', name: 'freeCancellation' },
  };
}

Выведем на странице:

  {
    path: PATHS.homeHotels,
    title: $localize`:Home Title:Buy & Fly - Hotels with 10% cashback`,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('@baf/search/hotels/ui/form').then((m) => m.SearchHotelFormComponent),
        outlet: 'form',
      },
    ],
  },

Запустим проект:

Форма поиска Ж/Д билетов

Продублируем все для поиска ж/д билетов и включим.

 {
    path: PATHS.homeRailways,
    title: $localize`:Home Title:Buy & Fly - Railways with 5% cashback`,
    loadComponent: () => import('@baf/home/page').then((m) => m.HomePageComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('@baf/search/railways/ui/form').then((m) => m.SearchRailwayFormComponent),
        outlet: 'form',
      },
    ],
  },

Запустим проект:

Локализация

Для добавления русского языка добавим переводы:

В angular.json:

{
  "i18n": {
    "sourceLocale": "en-US",
    "locales": {
      "ru": {
        "translation": "src/i18n/messages.xlf",
        "baseHref": ""
      }
    }
  }
}

Запустим команду:

yarn ng extract-i18n --out-file=src/i18n/source.xlf

Заполним файл:
src/i18n/messages.xlf

Создание страниц поиска

Добавим страницу поиска:

mkdir src/app/search/page
mkdir src/app/search/page/lib
echo >src/app/search/page//index.ts

Создадим компонент search-page:

yarn ng g c search-page

Шаблон:

<baf-container>
  <div class="form">
    <router-outlet name="form" />
  </div>
  <div class="row">
    <div class="column">
      <router-outlet name="filters" />
    </div>
    <div class="column">
      <router-outlet name="results" />
      <router-outlet name="map" />
    </div>
  </div>
  <router-outlet />
</baf-container>

Немного стилей:

@use 'src/stylesheets/device' as device;

.row {
  display: flex;
  flex-direction: column-reverse;

  @include device.media-tablet-up() {
    flex-direction: row;
  }
}

.column {
  @include device.media-tablet-up() {
    &:first-child {
      width: 33.333%;
      padding-right: 0.5rem;
    }
    &:last-child {
      width: 66.667%;
      padding-left: 0.5rem;
    }
  }
  @include device.media-web() {
    &:first-child {
      width: 25%;
    }
    &:last-child {
      width: 75%;
    }
  }
}

.form {
  margin: 1rem 0;
}

Компонент:

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { ContainerComponent } from '@baf/ui/container';

@Component({
  selector: 'baf-search-page',
  standalone: true,
  imports: [RouterOutlet, ContainerComponent],
  templateUrl: './search-page.component.html',
  styleUrl: './search-page.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchPageComponent {}

Как можно увидеть из макета, на странице выводится вложенные компоненты из роутинга:

{
  path: PATHS.search,
  loadChildren: () => import('./routes/search.routes').then((m) => m.searchRoutes),
},

И роуты:

import type { Routes } from '@angular/router';

import { PATHS, withChildNavigation } from '@baf/core';

export const searchRoutes: Routes = [
  {
    path: PATHS.searchAvia,
    title: $localize`:Search Page:Search for cheap flights`,
    loadComponent: () => import('@baf/search/page').then((m) => m.SearchPageComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('@baf/search/avia/ui/form').then((m) => m.SearchAviaFormComponent),
        outlet: 'form',
      },
      {
        path: '',
        loadComponent: () => import('@baf/search/avia/ui/results').then((m) => m.SearchResultsAviaComponent),
        outlet: 'results',
      },
      {
        path: '',
        loadComponent: () => import('@baf/search/avia/ui/filters').then((m) => m.SearchFiltersAviaComponent),
        outlet: 'filters',
      },
    ],
  },
  {
    path: PATHS.searchHotel,
    title: $localize`:Search Page:Search for cheap hotels`,
    loadComponent: () => import('@baf/search/page').then((m) => m.SearchPageComponent),
    children: [
      {
        path: '',
        loadComponent: () => import('@baf/search/hotels/ui/form').then((m) => m.SearchHotelFormComponent),
        outlet: 'form',
      },
      {
        path: '',
        loadComponent: () => import('@baf/search/hotels/ui/results').then((m) => m.SearchHotelsResultComponent),
        outlet: 'results',
      },
      {
        path: '',
        loadComponent: () => import('@baf/search/hotels/ui/filters').then((m) => m.SearchFiltersHotelsComponent),
        outlet: 'filters',
      },
    ],
  },
  {
    path: PATHS.searchTour,
    title: $localize`:Search Page:Search for cheap tours`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
  {
    path: PATHS.searchRailway,
    title: $localize`:Search Page:Search for cheap railways`,
    loadComponent: () => import('@baf/development/page').then((m) => m.DevelopmentPageComponent),
  },
].map(withChildNavigation(PATHS.search));

Резюме

В ходе цикла статей было реализовано приложение для поиска авиабилетов, а также бронирования отелей.

Я описал весь процесс создания, начиная с генерации приложения, заканчивая интеграция со сторонним API.

Демо можно посмотреть здесь - buy-and-fly.fafn.ru/

Спасибо, что дочитали до конца.

Ссылки

Все исходники находятся на github, в репозитории - github.com/Fafnur/buy-and-fly

Демо можно посмотреть здесь - buy-and-fly.fafn.ru/

Мои группы: telegram, medium, vk, x.com, linkedin, site

The above is the detailed content of Implementation of search and integration with external API in Angular 18. For more information, please follow other related articles on the PHP Chinese website!