Войти

Настройка области просмотра

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

В настройках динамических разделов добавим параметр templateName. В качестве значения укажем контрол ViewConfiguration/listEditorPopup:StackBodyTemplate.

<item id="Базовый_шаблон"
      rightMode="1">
      <templateConfig>
      {
          "templateName": "ViewConfiguration/listEditorPopup:StackBodyTemplate"
          ...
      }
     </templateConfig>
</item>

Рассмотрим более подробно контрол ViewConfiguration/listEditorPopup:StackBodyTemplate.

Схематично его можно разделить на следующие области:

  • Переключатель предустановленных стилей настроек (StyleSelector),
  • Выбор устройства, позволяет изменить размер области просмотра (DeviceSelector),
  • Кнопка, открывающая настройки (SettingsButton),
  • Предварительный просмотр (Preview).

Рассмотрим более подробно каждую область.

Переключатель предустановленных стилей

Каждый шаблон редактора настроек содержит переключатель, позволяющий выбрать один из предустановленных стилей настроек.

Конфигурация стилей хранится на сервисе параметров для каждого созданного динамического шаблона в следующем виде:

[
    {
        template1: {
            tile: {
                desktop: {
                    styles: {
                        style1: {
                            name: 'Стиль 1',
                            config: {
                            }
                        },
                        style2: { ... },
                        ...
                    }
                },
                mobile: {
                    styles: {
                        style1: {
                            name: 'Стиль 1',
                            config: {
                            }
                        },
                        style2: { ... },
                        ...
                    }
                }
            },
            table: {
                styles: {
                    style1: {
                        name: 'Стиль 1',
                        config: {
                        }
                    },
                    style2: { ... },
                    ...
                }
            },
            card: {
                styles: {
                    style1: {
                        name: 'Стиль 1',
                        config: {
                        }
                    },
                    style2: { ... },
                    ...
                }
           }
        }
    }
]

Полный формат конфигурации доступен по ссылке.

Переключатель устройства

Для вкладки "плитка" присутствует возможность изменить размер области просмотра для детальной настройки адаптивной версии каталога. Для этого предусмотрен "переключатель устройств":

"Переключатель устройств" выводится безусловно для вкладки "плитка", дополнительных настроек не требуется.

Кнопка, открывающая настройки

На каждой вкладке редактора присутствует кнопка, вызывающая панель настроек каталога.

Кнопка выводится безусловно для всех вкладок редактора, дополнительных настроек не требуется.

Настройка предварительного просмотра

Интерфейс редактора настроек каталога предусматривает возможность "на лету" просматривать изменения, выполненные при помощи редактора.

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

При реализации контрола предварительного просмотра для редакторов на вкладках "Плитка" и "Список" следует выполнить следующие условия:

  1. Использовать виджеты из интерфейсного модуля Controls-widget.
  2. Контрол может отображать каталог в режиме витрины, плитки и дерева с узлами.
  3. Проваливание в разделы должно быть отключено.
  4. Контрол должен принимать следующие контентные опции:
    • viewOptions, в которую будут переданы все настройки из редактора в соответствии с выбранной вкладкой. Формат опции либо ITableConfig или ITileConfig.
    • viewMode, которая задает режим отображения каталога (при значении tile - плитка, при значении table - таблица).

При реализации контрола предварительного просмотра для редактора на вкладке "Карточка" следует учитывать, что он должен принимать контентную опцию viewOptions, в которую будут переданы все настройки из редактора в формате ICardConfig.

Настроим вывод контролов предварительного просмотра в шаблоне редактора каталога. Для этого в настройках динамических разделов, добавим параметр templateOptions.

В опции viewTemplate укажем контрол, который будет отображаться для вкладок "Плитка" и "Список". В опции cardViewTemplate укажем контрол, который будет отображаться для вкладки "Карточка".

<templateConfig>
    {
        "templateName": "ViewConfiguration/listEditorPopup:StackBodyTemplate",
        "templateOptions": {
            "viewTemplate": "MyModule/catalog:View",
            "cardViewTemplate": "MyModule/card:View",
            ...
        }
    }
</templateConfig>

Панель настроек каталога

При нажатии на кнопку "Настройки" в области меню будет отображён контрол "панель настроек каталога".

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

Рассмотрим подробно процесс создания и настройки "панели настроек каталога".

Сперва создадим сам контрол и опишем источники данных для получения дополнительных полей, доступных клиентам и дополнительных полей, доступных пользователям.

this._accountFieldsSource = new Memory({
    keyProperty: 'id',
    data: IFields[]
});
this._clientFieldsSource = new Memory({
    keyProperty: 'id',
    data: IFields[]
});

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

protected _openFieldsDialogCallback(fieldsConfig: IFieldsConfig, changeCallback: TChangeFieldsCallback, userType: CrudEntityKey): void {
    Confirmation.openPopup({
        message: 'Окно расширенного редактирования полей',
        details: 'Изменить список полей',
        type: 'ok'
    }).then(() => {
        // В аргументе userType функция получает тип пользователя - client или account
        // fieldsConfig = ….
        changeCallback(fieldsConfig);
    });
};

Разместим в шаблоне платформенный контрол ViewConfiguration/listEditorPopup:StackEditorTemplate, который в зависимости от выбранной вкладки отобразит соответствующий набор редакторов. Подробно о том, какие редакторы отображаются в панели настроек каталога, написано в статье Комплексные редакторы каталога.

Укажем его контентные опции:

  • accountFieldsSource - источник данных для получения дополнительных полей, доступных сотрудникам.
  • clientFieldsSource - источник данных для получения дополнительных полей, доступных клиентам.
  • openFieldsDialogCallback - функция, которая вызывается при нажатии на кнопку открытия окна расширенного выбора из меню редактора полей.
  • multiSelectAccessibilityProperty - имя свойства из источника данных, которое отвечает за доступность чекбоксов у записей в редакторе полей.

Итоговый шаблон контрола панели настроек будет выглядеть следующим образом:

<ViewConfiguration.listEditorPopup:StackEditorTemplate 
    scope="{{_options}}"
    accountFieldsSource="{{_accountFieldsSource}}"
    clientFieldsSource="{{_clientFieldsSource}}"
    openFieldsDialogCallback="{{_openFieldsDialogCallback}}"/>

Настроим вывод контрола панели настроек в шаблоне редактора каталога. Для этого в настройках динамических разделов, добавим параметр templateOptions.

В опции editorTemplate укажем путь к созданному контролу панели настроек.

<templateConfig>
    {
        "templateName": "ViewConfiguration/listEditorPopup:StackBodyTemplate",
        "templateOptions": {
            ...,
            "editorTemplate": "MyModule/EditorView",
        },
    }
</templateConfig>
© 2023 Тензор. Все права защищены.