Лукап

Директива «Лукап» - это строка поиска с расширенными возможностями. Данная директива позволяет выполнять поиск необходимых значений, которые предоставляются внешним модулем. Эти значения допустимо вводить в поле для ввода, тогда подходящие результаты отображаются в виде выпадающего списка. Для расширенного поиска по параметрам доступно открытие (виджета) модального окна.

Интерфейс поиска реализуется в виде специализированного виджета, который подгружается в интерфейс продукта и использует директиву лукап в виде js-бандла по сети (по аналогии с всеми другими интерфейсами, объединенными в рамках рутового приложения Q.Palette).

Пример лукапа

ФИО

Директива лукап работает в связке с компонентом PrimeNg p-autoComplete (opens in a new tab).

Как работает лукап

Лукап состоит из двух основных элементов - это строка поиска и подключаемый виджет. Поиск внутри поисковый строки, а именно выдача поисковых результатов работает за счет виджета. Поисковый запрос из лукап отправялется в виджет, который ищет данные и возвращает результат обратно в лукап для показа юзеру.

Виджет загружается при инициализации лукапа, до момента загрузки поиск в лукапе недоступен.

Подключение лукапа

Начинаем с подключения p-autoComplete для этого в прикладной модуль импортриуем модуль из primeNgAutoCompleteModuleи устанавливаем в шаблон.

<p-autoComplete
  field="fullName"
  inputId="float-input"
  [formControl]="lookupBaseControl"
>
</p-autoComplete>

Следующим шагом импортируем модульQLookupModuleи дорабатываем ранее интегрированный компонент. По итогу получаем следующий код:

В примере вышеqLookupDisplayMode="modal"параметр отвечает за метод отображения подключаемого виджета и показывает его в диалоговом окне.

Создание виджета

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

Будет хорошей практикой хранить все виджеты проекта в папкеsrc/app/widgets

Сборка

Сборка запускается командой:npm run build:widget-customers-lookup

В папкеdist/widgets/customers-lookupпоявится сборка для нового виджета с входным файлом main.js.

Подключение виджета

<p-autoComplete
  ...
  [qLookWidgetEndpoint]="endpoint"
  ...
>
</p-autoComplete>

public endpoint: QEndpoint = {
  service: 'dqpaletteui',
  component: 'widget-customers-lookup',
  caption: 'Index Page',
  route: ''
};

Методы лукапа

DevMode

ВключениеqLookupDebugпомогает отлаживать работу лукапа в связке с виджетом, когда включенqLookupDisplayMode, чтобы не открывать постоянно виджет, он будет отрисован под полем лукапа.

<p-autoComplete
  ...
  [qLookupDebug]="true"
  [qLookupDisplayMode]=""modal""
  ...
>
</p-autoComplete>
 
public qLookupPrimaryValue = [{id: 3}];

Место размещение виджета

[qLookupDisplayMode]="'modal'"указывает на открытие виджета в диалоговом окне.

<p-autoComplete
  ...
  [qLookupDisplayMode]=""modal""
  ...
>
</p-autoComplete>

Размещение виджета вHTMLElement. Для этого включим режим[qLookupDisplayMode]="'container'"и укажем шаблонную переменную элемента для отрисовки виджета.

<p-autoComplete
  ...
  [qLookupDisplayMode]=""container""
  [qLookupWidgetElement]="componentContainer"
  ...
>
</p-autoComplete>
<div #componentContainer></div>

И пример для размещения виджета вViewContainerRef. Для этого включим режим[qLookupDisplayMode]="'container'"и укажем шаблонную переменную элемента для отрисовки виджета.

<p-autoComplete
  ...
  [qLookupDisplayMode]=""container""
  [qLookupWidgetElementRef]="componentContainerRef"
  ...
>
</p-autoComplete>
<div #componentContainer></div>

Предустановленные значения

<p-autoComplete
  ...
  [qLookupPrimaryValue]="qLookupPrimaryValue"
  ...
>
</p-autoComplete>
 
public qLookupPrimaryValue = [{id: 3}];

Поиск по значению

qLookupPrimaryValueможет отправлять значения также и при дальнейшей работе компонента.

<p-autoComplete
  ...
  [qLookupPrimaryValue]="qLookupPrimaryValue"
  ...
>
</p-autoComplete>
 
public qLookupPrimaryValue: unknown[];
setValue(): void {
  this.qLookupPrimaryValue = [{id: 3}];
}

Мультиселект

Мультиселект работает средствами компонентаp-autoComplete. Директива отслеживает включение свойства и добавляет логику обмена данных с виджетом.

<p-autoComplete
  ...
  [multiple]="false"
  ...
>
</p-autoComplete>

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