Архитектура¶
Компоненты¶
Фронтенд построен из веб-компонентов. Они определены в файлах Javascript в директории src.
Как правило, каждый файл определяет один компонент, начиная с
class GrampsjsSomeElement extends LitElement
customElements.define('grampsjs-some-element', GrampsjsSomeElement)`
grampsjs-some-element, который может быть использован в других местах.
Главная точка входа, включенная в index.html, — это элемент gramps-js, определенный в GrampsJs.js. Это содержит определение всех отдельных страниц (которые просто соответствуют элементам, которые отображаются или скрываются в зависимости от маршрута/URL), меню и маршрутизацию.
Компоненты в директории src/views обычно соответствуют компонентам на всю страницу, которые получают данные с бэкенда (например, представление списка людей), в то время как компоненты в src/components обычно являются меньшими строительными блоками, используемыми внутри представлений, которые получают свои данные из атрибутов, предоставленных родительским элементом. Однако это разделение не является строгим.
Поток данных¶
Данные обмениваются с Backend/API через методы apiGet, apiPut и apiPost в src/api.js, которые автоматически заботятся об аутентификации.
Данные передаются от родительских компонентов к дочерним компонентам через свойства (см. например документацию Lit).
Когда данные необходимо передать от дочернего к родительскому компоненту, используются пользовательские события, которые могут быть вызваны с помощью функции fireEvent в src/api.js и прослушаны с использованием синтаксиса @ от Lit (документация).
Аутентификация¶
Токен обновления и токен аутентификации хранятся в локальном хранилище браузера. Каждый раз, когда выполняется вызов API и токен истекает, хранящийся токен обновления используется для получения нового токена доступа, и вызов API повторяется.
Область авторизации пользователя, которая хранится в утверждениях токена доступа, получается с помощью функции getPermissions и используется в верхнем уровне элемента GrampsJs для установки логических свойств canAdd, canEdit, canManageUsers, которые передаются вниз к дочерним элементам для реализации функциональности, специфичной для авторизации.