Использование программного компонента#

Взаимодействие с серверной частью#

Следующие компоненты OneWork предоставляют REST API, их OpenAPI спецификацию можно просмотреть с помощью Swagger в разделе «Справочники API»:

ssd-core-data
ssd-role-manager
ssd-ui-admin
ssd-transaction-manager

Реализация единого UI инструментов Works#

OneWork предоставляет компонент бокового меню, который позволяет создавать единый интерфейс навигации для инструментов Works.

Установка компонента#

Получите код веб-компонента одним из следующих способов:
1. Как npm-пакет:
```
npm install @ssd/side-menu --registry=${REGISTRY_URL}
```
2. Как bundle файл в дистрибутиве: pl/sidemenu.bundle.js.
Добавьте в разметку тег для подключения кода веб-компонента:
```
<script src="sidemenu.bundle.js"></script>
```

Встройте веб-компонент в разметку тегом:

<div style="position: fixed; top: 0; left: 0; bottom: 0; width: 300px; z-index: 1;">
    <side-menu></side-menu>
</div>

Передайте следующие атрибуты при помощи метода setAttribute или укажите их непосредственно в теге:

mode — режим работы: works или separate. В режиме works показывается базовая структура меню, и с ней объединяются пункты меню из атрибута children-items. В режиме separate показываются только пункты из атрибута children-items.

children-items — массив пунктов меню. Элемент массива состоит из полей:

Элемент	Тип	Описание
`key`	string	уникальный в рамках меню ключ
`label`	string	название пункта меню, которое будет видеть пользователь
`icon`	string	название иконки (необязательный, иконки используются из библиотеки `antd`)
`link`	string	ссылка на ресурс (необязательный)
`children`	array	массив внутренних пунктов меню, элемент массива имеет структуру, аналогичную `children-items`

open-keys — массив ключей (string), которые должны быть открыты.
selected-keys — массив ключей (string), которые должны быть выделены.
ssd-ui-admin-url — базовый URL для сервиса ssd-ui-admin (string).
tool-key - код инструмента (string). Значения приведены в разделе Базовая структура меню в режиме works.
project-uri — часть URL инструмента, содержащая код организации и код проектной области, однозначно определяющая контекст проекта совместно с кодом инструмента tool-key. Например, для Gitlab:
- если url = http://srv.ws.test-env:3000/RMSHK/RMSHK_GOSIS/erp-marketplace, то project-uri = RMSHK/RMSHK_GOSIS;
- если url = http://srv.ws.test-env:3000/groups/RMSHK/RMSHK_GOSIS, то project-uri = RMSHK/RMSHK_GOSIS.

В режиме works необходимо задать значения следующих атрибутов:

children-items
open-keys
selected-keys
ssd-ui-admin-url
tool-key
project-uri

В режиме works при смене контекста проекта внутри инструмента новое значение должно быть передано в атрибут project-uri веб-компонента.

В режиме separate необходимо задать значения следующих атрибутов:

children-items
open-keys
selected-keys

Если в инструменте произошел переход вне контекста проекта (актуально для Gitlab), то единое меню должно либо быть скрыто, либо переведено в режим separate. В последнем случае инструмент полностью отвечает за содержимое меню.

Задайте единые размеры и цвета для всех инструментов:
- ширина: 300 px, прокрутка появляется внутри этой ширины без отступа от правого края (стилизованная под MacOS);
- фон: Белый #FFFFFF
- фон под открытыми пунктами второго и следующих уровней: #FAFAFA

Базовая структура меню в режиме works#

Свойство link элементов базового меню формируется динамически на основе контекста проекта и данных из бекэнда OneWork.

Некоторые пункты базового меню могут быть недоступны в зависимости от контекста проекта.

Описание работы меню в режиме works#

В режиме works выполняется объединение по ключу key корневых элементов атрибута children-items с базовой структурой меню. Если элемент с таким ключом найден в базовой структуре меню (на любом уровне), то его свойства label, icon, link и children перезаписываются (если заданы в корневом элементе).

Например, следующее значение атрибута children-items добавит дочерние пункты меню к базовому пункту Конвейер → Сборка:

[
  {
    key: 'continuousIntegration__Сборка',
    label: 'Сборка',
    children: [
      {
        key: 'continuousIntegration__Сборка__ItemOne',
        label: 'Дочерний пункт 1',
        link: '/x/y/z/1'
      },
      {
        key: 'continuousIntegration__Сборка__ItemTwo',
        label: 'Дочерний пункт 2',
        children: [
          {
            key: 'continuousIntegration__Сборка__ItemTwo__1',
            label: 'Дочерний пункт 2.1',
            link: '/x/y/z/2/1'
          },-
          {
            key: 'continuousIntegration__Сборка__ItemTwo__2',
            label: 'Дочерний пункт 2.2',
            link: '/x/y/z/2/2'
          }
        ]
      }
    ]
  }
]