Skip to content
This repository has been archived by the owner on Mar 15, 2023. It is now read-only.

profcomff/toolbar-element

Repository files navigation

navbar-element

Данный микросервис отвечает за навигационные панели в приложении. В него включены как основная панель, так и верхняя. При разработке микросервис запускается на порте 9001.

Основна панель

Основная панель отвечает за переключение между остальными микросервисами приложения. Код панели пишется в файле NavbarMain.vue. Так как приложение должно работатб, как на мобильных устройствах, так и десктопе, мы используем 2 различных макета NavbarDesktop.vue и NavbarMobile.vue. Однако вся логика сервиса прописывается в NavbarMain, а в макеты передаётся только с помощью props. Сделано это для того, чтобы поведение навбаров было одинаковым независимо от макета, а также чтобы избежать дублирования кода.

Верхняя панель

Данная панель выступает в роли вспомогательной, в отдельных микросервисах. Есть несколько размеченных наборов кнопок, которые активируются в зависимости от значения pageId. Каждой странице в приложении присвоено своё значение pageId и при монтировке страницы оно передаётся с помощью события "сhange-page".

Использование в сервисе

Для изменения навбара из вашего сервиса нужно отправить JS событие change-header-layout с типом навбара и настройками. Пример события:

let changeHeaderLayoutEvent = new CustomEvent('change-header-layout', {
    detail: {
        layoutName: 'calendar',
        text: 'Твой физфак!',
        groupInfo: this.groupInfo,
        disabled: false,
        menu: [
            {
                name: 'Изменить группу',
                action: () => {
                    this.loaded = false;
                    this.groupId = undefined;
                    this.groupInfo = { number: '' };
                    this.timetable = [];
                    localStorage.removeItem('timetable-group-id');
                    localStorage.removeItem('timetable-group-info');
                    localStorage.removeItem('timetable-cache');
                    this.$router.push('/timetable/init');
                },
            },
        ],
    },
});
document.dispatchEvent(changeHeaderLayoutEvent);

Варианты использования

Доступные варианты навбаров:

Image Layout name Params
plain plain text – текст, menu – элементы меню (см. дальше)
back back text – текст, menu – элементы меню (см. дальше)
calendar calendar groupInfo – информация о группе, для которой показывается расписание (необязательный), disabled – включены ли кнопки, text – текст вместо даты, если кнопки выключены, menu – элементы меню (см. дальше)

Кнопки меню

Все навбары поддерживают выпадающее меню под тремя точками. Для их использования надо передать массив элементов в формате:

{
    menu: [
        {
            name: "Изменить группу",
            action: () => {...},
        },
    ]
}

name – текст на кнопке action – функция без параметров, которая будет выполнена при нажатии на кнопку

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

Project setup

yarn install

Compiles and hot-reloads for development

yarn start

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.