Пользователь видит отображение конкретного кол-ва ивентов и может переходить между страницами, потому то так удобнее просматривать большие объёмы ивентов.

[Egor-ScrumMaster]

Описание

Создание пагинатора.
Макеты -

Критерии приёмки

• Пользователь видит отображение ограниченного количества ивентов на странице
  Декстоп, таблет, мобилка 12

• Пользователь может переключаться по страничкам, расположение согласно макетам.
  ! на мобилке снизу по середине под ивентами над заголовком, а так же при условии нахождения на 2 или следующих страницах, пагинатор появляется сверху (про сверху подумать).

• Отображается только то количество страниц, которое кратно количеству ивентов.

• Пользователь видит, какая страница сейчас у него активна( подсвечивается активная страница). Подсветка номера страницы происходит при навигации на нее и сбивается при переключении страницы.

• При нахождении на дальних страница отображается текущая, по две соседние с каждой стороны, 1 страница, три точки от неё до двух соседних от текущей, 3 точки в конце, если есть следующие страницы за двумя соседними.

• При переходе на следующую страницу идёт прокрутка новой страницы до начала фильтров.

Дополнительная информация

Добавьте информацию о User Story которую вы считаете важной

Ссылки на дочерние задачи и задачи-баги

• [!NOTE] Дочерняя задача

Оценка

Оцените User Story в сторипоинтах

[il12]

Техническая проработка:

Бэкэнд:

• плагин mongoose-aggregate-paginate-v2

API

• эндпоинт запроса на ивенты с пагинацией (главная) POST api/events/find/pagination

• эндпоинт запроса на ивенты с пагинацией (страна) POST api/events/country/{countryName}/pagination

• эндпоинт запроса на ивенты с пагинацией (город) POST api/events/city/{cityName}/pagination

• формат тела запроса:

{
    //current query format
    "query": {
          "searchLine": string,
          "city": string,
          "country": string,
          "tags": [
              string
          ],
          "startDate": number,
          "endDate": number
    },
    //pagination options
    "options": {
        //requested page
        "page": number,
        //events per page
        "limit": number
    }
}

• Формат тела ответа:

{
    //events array
    "docs": Event[],
    //total matching events count
    "totalDocs": number,
    //used events per page number
    "limit": number,
    //current page number
    "page": number,
    //total number of pages for matching events 
    "totalPages": number,
    //is previous page exists (i.e. false for page 1)
    "hasPrevPage": boolean,
    //is next page exists (i.e. false for last page)
    "hasNextPage": boolean,
    //previous page number
    "prevPage": number,
    //next page number
    "nextPage": number,
}

[ElenaArtamoshkina]

Секция с набросками как может выглядеть пагинатор, комменты приложила в фигме на макете
https://www.figma.com/design/13t1lYLJS4Oe7ZQWEfqqlx/Afisha-Backup?node-id=4733-22977&t=uVs7fn1fuowvw6p2-4

[toprogramm]

https://www.figma.com/design/13t1lYLJS4Oe7ZQWEfqqlx/Afisha-Backup?node-id=8409-33028&t=ttblXHwuGff5PejX-4