📌 Тестовое задание: Middle Angular Developer

Добро пожаловать! Цель этого задания — кратко оценить ваши реальные навыки разработки на Typescript с использованием Angular, RxJs и сопутствующих технологий, а также умение эффективно ориентироваться в существующем коде и развивать его.

На выполнение (без учета первоначального знакомства с приложением и его сборки) отводится примерно 1 час. В случае, если вы не успеете выполнить всё запланированное, не страшно — пожалуйста, приоритезируйте задачи, укажите, что бы вы сделали дополнительно, если бы хватило времени.

---

✏ Исходные данные и контекст

Мы предоставляем вам пустое Angular приложение. Версия фреймворка 14.

✏ Ваша задача

Разработать простое приложение для просмотра и управления списком фильмов (Movies List), которое продемонстрирует понимание основных концепций Angular.

📚 Задача 1. Базовый функционал (Components, Services)

Создай сервис MoviesService, который будет имитировать работу с API (используй RxJS BehaviorSubject или ReplaySubject для хранения состояния списка фильмов в памяти).

Сервис должен иметь методы:

• getMovies(searchName: string) - возвращает Observable со списком фильмов, отфильтрованного по переданному тексту
• addMovie(name: string) - добавляет новый фильм (со статусом "не онлайн")
• updateMovie(movie: Movie) - обновляет фильм (например, меняет статус "онлайн")
• deleteMovie(id: number) - удаляет фильм

Создай интерфейс Movie:

• id - уникальный идентификатор
• name - наименование
• isOnline - признак "онлайн"

---

📚 Задача 2. Change Detection (Проверка понимания стратегий)

Реализуй дочерний компонент MovieComponent, который будет:

• Принимать фильм через @Input() и отвечать за отображение одного фильм (наименование и статус)
• Для этого компонента явно установи стратегию ChangeDetection OnPush

---

📚 Задача 3. RxJS (Операторы, подписки, реактивность)

Создай компонент MoviesListComponent, который будет:

• Отображать список фильмов
• Иметь кнопку для добавления нового фильма (через диалог или inline-форму)
• Для каждого фильма отображать чекбокс для изменения статуса "онлайн" и кнопку удаления
• Иметь кнопку, которая будет менять у всех фильмов статус на "онлайн"

Создай текстовое поле ввода для фильтрации, со следующими условиями:

• Задержка перед запросом 500ms
• Не отправляем повторно один и тот же запрос
• Удаляем все пробелы в начале и в конце сроки
• Если длина введенного значения в input меньше 3 символов запрос не отправляется

---

📚 Задача 4. Projection (Content Projection) (опционально, по желанию)

Создай компонент-обертку CardComponent, который будет стилизован как карточка (с рамкой, тенью, заголовком).

Используй для проекции:

• Заголовка карточки (селектор card-header).
• Основного контента (селектор card-body).
• Футера карточки с кнопками действий (селектор card-actions).

Пример использования в шаблоне:

<app-card>
  <div card-header>{{ movie.name }}</div>
  <div card-body>Онлайн: {{ movie.isOnline }}</div>
  <div card-actions>
      <button (click)="delete()">Удалить</button>
  </div>
</app-card>

Использовать данный компонент в компоненте MovieComponent