Подключение библиотеки Комментарии

Описание библиотеки

Библиотека Комментарии предоставляет функциональность работы с комментариями в вашем приложении:

• добавление комментария к объекту,
• просмотр комментария,
• редактирование комментария,
• удаление комментария,
• установка признака решения комментария.

Библиотека поставляется в виде двух компонентов:

• qpuidcomments — библиотека для подключения к бэкенд-сервису. Содержит серверную логику, модель данных и миграции базы данных.
• qpuid-comments — библиотека для подключения к UI-сервису. Содержит пользовательские компоненты и клиентскую логику для работы с комментариями.

Для использования функциональности комментариев необходимо подключить и настроить обе библиотеки в соответствующих сервисах.

Подключение qpuidcomments к бэкенд-сервису

Чтобы подключить библиотеку qpuidcomments, выполните следующие шаги:

1. Подключите библиотеку в service/pom.xml

<dependency>
    <groupId>ru.diasoft.micro</groupId>
    <artifactId>qpuidcomments</artifactId>
    <version>26082103</version>
    <classifier>archlib</classifier>
</dependency>

2. Настройте в конфигурации application-production.yml источник данных о пользователях

Источник задаётся параметром userSource, адреса сервисов-источников — параметрами url.

Библиотека определяет источник автоматически — по сервису, который развёрнут в том же namespace (на том же стенде), что и ваш сервис. Если подходящий сервис не найден, используется значение по умолчанию — MDPEMPLOYEE.

Указывать эти параметры не нужно, если:

• вы работаете с MDPEMPLOYEE;
• вы работаете с другим источником (например, MDPUSERS), и этот сервис развёрнут в вашем namespace.

Заполнять параметры требуется только в одном случае — если нужно обратиться к сервису, отличному от развёрнутого в вашем namespace. В этом случае укажите нужный источник в параметре userSource и адрес сервиса в соответствующем параметре url.

Например:

qpuidcomments:
  userSource: ${USER_SOURCE:MDPEMPLOYEE}
  mdpemployee:
    url: ${MDPEMPLOYEE_URL:https://mdpemployee.qwork.qrunner.diasoft.ru}
  mdpusers:
    url: ${MDPUSERS_URL:https://mdpusers.qpalette.qrundigital.diasoft.ru}
  qpartparticipant:
    url: ${QPARTPARTICIPANT_URL:https://qpartparticipant.qcrm.qrundigital.diasoft.ru}

3. Настройте плагин libraries-db-extractor-plugin в database/pom.xml, указав библиотеку qpuidcomments в секции dbArtifactsConfig для извлечения ее миграций базы данных.

Например:

<plugin>
    <groupId>ru.diasoft.micro.plugin</groupId>
    <artifactId>libraries-db-extractor-plugin</artifactId>
    <version>25082201</version>
    <executions>
        <execution>
            <id>libraries-db-extractor</id>
            <phase>generate-resources</phase>
            <goals>
                <goal>extract</goal>
            </goals>
            <configuration>
                <sourcePomFile>${project.parent.basedir}/service/pom.xml</sourcePomFile>
                <dbArtifactsConfig>
                    <qpuidcomments/>
                </dbArtifactsConfig>
            </configuration>
        </execution>
    </executions>
</plugin>

4. Добавьте в файл database/src/main/resources/rootChangeLog.xml конфигурацию includeAll для подключения changelog'ов

<includeAll
    path="classpath:qpuidcomments/1.00.01"
    relativeToChangelogFile="true"/>

Подключение qpuid-comments к UI-сервису

Для подключения qpuid-comments в ваш ui-сервис выполните действия:

1. Установите совместимую версию библиотеки:

• для проектов на QPalette 7:

{
  "dependencies": {
    "@diasoft/qpuid-comments": "0.0.56"
  }
}

• для проектов на QPalette 8:

{
  "dependencies": {
    "@diasoft/qpuid-comments": "latest"
  }
}

После изменения зависимостей выполните:

npm install

2. Импортируйте standalone-компоненты библиотеки

import {
  CommentModeBtnComponent,
  CommentOverlayComponent
} from '@diasoft/qpuid-comments';

Добавьте их в imports компонента:

@Component({
  standalone: true,
  imports: [
    CommentModeBtnComponent,
    CommentOverlayComponent
  ],
  // ...
})
export class ExampleComponent {
}

Для NgModule standalone-компоненты также добавляются в imports.

3. Объявите состояние комментариев

import { signal } from '@angular/core';
 
public readonly isCommentMode = signal(false);
public readonly isShowComments = signal(true);

Здесь:

• isCommentMode определяет включение/выключение режима комментирования
• isShowComments определяет видимость уже существующих комментариев

4. Подключите переключатель режима комментариев

<qpuid-comments-comment-mode-btn
  [objectId]="objectId" // id объекта, к которому относится комментарий
  [(isCommentMode)]="isCommentMode"
  [serviceName]="commentsServiceName" // имя бэкенд-сервиса
  [urlName]="commentsUrlName"
></qpuid-comments-comment-mode-btn>

5. Подключите overlay-panel комментариев

@if (isCommentMode() || isShowComments()) {
  <qpuid-comments-comment-overlay
    [objectId]="objectId"
    [isCommentMode]="isCommentMode()"
    [(isShowComment)]="isShowComments"
    [serviceName]="commentsServiceName"
    [urlName]="commentsUrlName"
  ></qpuid-comments-comment-overlay>
}

Контейнер, внутри которого размещён overlay, должен иметь подходящее позиционирование и размеры, поскольку overlay библиотеки использует абсолютное позиционирование.