Подключение Цифрового профиля

С чего начать?

Для использования технологии "Цифровых профилей" необходимо установить версию Q.Palette не ниже 6.5.14.

В jenkinsfile добавьте строку pipelineParameters.put("digital_profile_is_need_build", "true")

Подключение

В вашем проекте в папке "ИМЯ_ПАПКИ" выполните команду:
```
ng g app pbc-config --minimal
```
Отредактируйте файл angular.json в соответствии с примером ниже:

"pbc-config": {
  "projectType": "application",
  "schematics": {},
  "root": "projects/pbc-config",
  "sourceRoot": "projects/pbc-config/src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "ngx-build-plus:browser",
      "options": {
        "outputPath": "dist/pbc-config",
        "index": "",
        "main": "projects/pbc-config/src/main.ts",
        "tsConfig": "projects/pbc-config/tsconfig.app.json",
        "extractLicenses": false,
        "namedChunks": false,
        "outputHashing": "none",
        "preserveSymlinks": true,
        "singleBundle": true,
        "vendorChunk": true,
        "sourceMap": false
      },
      "configurations": {
        "production": {
          "buildOptimizer": true,
          "optimization": true
        },
        "development": {
          "buildOptimizer": true,
          "optimization": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "builder": "ngx-build-plus:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "pbc-config:build:production"
        },
        "development": {
          "browserTarget": "pbc-config:build:development"
        }
      },
      "defaultConfiguration": "development",
      "options": {
        "singleBundle": true
      }
    }
  }
}

Отредактируйте файл Dockerfile-pbcui.txt, добавив следующий код:

COPY PBC/YOUR_APP_NAME/dist/pbc-config/ app/files/YOUR_APP_NAME/assets/pbc-config/

Команда должна:

Скопировать результат сборки pbc-config из папки dist в папку assets в Docker-контейнере.

Важно! Это должно быть сделано последней операцией копирования, иначе другие команды могут перезаписать pbc-config в assets.

Настройте package.json

Добавьте следующие команды в ваш файл package.json:

"serve:pbc-config": "ng serve pbc-config --live-reload=false --port=4220",
"prod-qdp": "ng build pbc-config && ng build --configuration production-qdp"

При развертывании в пайплайне для команды prod добавьте && npm run build-configs, итоговый вид будет примерно таким:

"prod": "ng build --configuration production && npm run build-widgets && npm run build-configs"

Удалите лишние файлы

Структура проекта должна быть примерно следующей:

Структура проекта

Пример конфигурации

// tsconfig.app.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app"
  },
  "files": [
    "src/main.ts"
  ]
}

// main.ts
import { qPbcConfigBootstrap } from "@diasoft/qpalette-core";
import * as configs from './configs';
 
qPbcConfigBootstrap({ configs });

// configs.ts
export * as searchbox from './searchbox/searchbox';

// searchbox.ts
export * from './projects/main';

Конфигурация Search Box с поддержкой environment

// projects/main.ts
import { environment } from "../../../../../src/environments/environment";
 
export const projects = {
  // Конфигурация Search Box с поддержкой environment
}

Использование в прикладном проекте с Цифровым Профилем

Если вы все сделали правильно, то последним шагом перед проверкой работы Цифрового профиля будет добавление следующего кода в ваш searchbox:

public searchBoxEndpoint = {
  service: 'YOUR_SERVICE',
  component: 'YOUR_COMPONENT',
  businessObject: 'YOUR_BUSINESS_OBJECT'
};

Пример использования в шаблоне

<div class="q-layout q-c-stretch">
  <div class="q-layout-row">
    <span class="q-layout-block">
      <span class="p-float-label">
        <q-search-box
          [qSearchBoxEndpoint]="searchBoxEndpoint" 
          formControlName="demo1" 
          field="name"
          inputId="demo1">
          <label for="demo1">Label</label>
        </q-search-box>
      </span>
    </span>
  </div>
</div>

Для проверки работоспособности можно настроить заголовок диалогового окна:

export const projects = {
  "widgetTitle": "Проекты 123",
  ...
}

Локальная разработка

Для локальной разработки выполните команду:

npm run serve:pbc-config

И настройте проксирование:

/api/YOUR_SERVICE/YOUR_COMPONENT/config/main.js

http://localhost:4220/main.js (opens in a new tab)

Миграция на SingleBundle Работа цифрового профиля в RUN-time