Сделать анонсы закрываемыми

[eugene-serb]

Описание

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

Гипотеза решения

Должен появиться композабл, который принимает оригинальный массив с анонсами, а также, при хуке onMounted стучится в localStorage, берет оттуда информацию по анонсам и объединяет с оригинальным списком анонсов, на основании которых появляется список анонсов с отключёнными пользователем анонсами.

При складывании и взятии списка анонсов из localStorage данные должны проходить процесс сериализации и десериализации.

Изменения в компонентах.

1. Компонент анонса AAnnouncement. Должен содержать слот для сообщения, а также кнопку крестика, если поле closable анонса истинно. По нажатии на кнопку крестика, анонс должен закрываться, но сам компонент только эмитит событие close. Логика закрытия находится в родительском компоненте. После закрытия анонса и перезагрузки страницы, анонс не должен появиться вновь.
2. Компонент списка анонсов MAnnouncement. В этом компоненте будет подключаться композабл.

Интерфейсы

Анонс в рамках задачи изменяется, и теперь имеет следующий интерфейс:

interface Announcement {
  id: string; // Уникальный идентификатор анонса.
  enabled: boolean; // Включён ли анонс.
  message: string; // Сообщение текстом или в формате HTML.
  closable?: boolean; // Можно ли анонс закрывать нажимая на кнопку крестика.
  routes?: string[]; // Паттерны regex маршрутов, по которым надо показывать анонс.
  excludeRoutes?: string[]; // Паттерны regex, по которым не надо показывать анонс.
}

В localeStorage достаточно хранить объект со следующим интерфейсом:

interface AnnouncementSavedData {
  id: string; // Уникальный идентификатор анонса.
  enabled: boolean; // Включён ли анонс.
}