Кастомизация User Manager

User Manager это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.

Jet приложение и внутренние модули

User Manager построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.

Компоненты

Интерфейс User Manager разбит по частям (компонентам). Каждый компонент, это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.

Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.

views
  roles
  users
  audit.js
  details.js
  ...

Модели/Сервисы

В моделях User Manager описана логика для работы с основными сущностями (users/roles/rules), с окнами и индикатором прогресса. В Webix Jet модели называются сервисами.

Исходный код для моделей (сервисов Jet) находятся в папке sources/models.

models
  Local.js
  Operations.js
  Backend.js
  Prompt.js
  Progress.js

Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:

$$('um').getService('operations').addUser(obj);

Кастомизация компонентов

При кастомизации компонента вы можете:

• переопределить метод config(), чтобы изменить UI
• переопределить метод init(), чтобы изменить UI и поведение компонента
• переопределить любой существующий метод, но делайте это с осторожностью
• добавлять и вызывать свои методы

Чтобы определить, какой компонент отвечает за нужную часть интерфейса, обратитесь к карте классов.

Для начала создайте класс и наследуйте его от класса по умолчанию или от userManager.views.JetView:

class CustomToolbar extends userManager.views["users/toolbar"] {
  config(){
    // получаем JSON объект с конфигурацией
    const ui = super.config();
    // изменения конкретного компонента
    ui.height = 60;
    return ui;
  }
  init() {
    // вызываем логику по умолчанию 
    super.init();
    // а это уже пользовательский метод
    this.doSomething();
  }
  doSomething(){
    // делаем что-то при инициализации
  }
}

Затем переопределите компонент (класс) по умолчанию с помощью свойства override:

webix.ui({
    view: 'usermanager',
    url: 'https://docs.webix.com/usermanager-backend/',
    override: new Map([[userManager.views['users/toolbar'], CustomToolbar]]),
});

Как добавить столбец в сетку пользователей

Чтобы добавить столбец в сетку пользователей, необходимо изменить её JSON конфигурацию:

class UserGrid extends userManager.views["users/grid"] {
  config() {
    const grid = super.config();
 
    const formatDate = webix.Date.dateToStr("%M %d, %Y %H:%i:%s");
    // добавляем столбец "last visited"
    const newColumn = {
      id: "visited",
      header: "Last seen",
      fillspace: 2,
      template(obj, type, value, column, index) {
        // парсим дату формата ISO 8601 и применяем форматирование
        let date = new Date(value);
        return formatDate(date);
      },
    };
 
    grid.columns.push(newColumn);
 
    return grid;
  }
}

Related sample:  User Manager: Adding an Extra Column

Рекомендации

Скрытие компонентов

Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вместо этого вы можете скрывать компоненты.

class CustomToolbar extends userManager.views["users/toolbar"] {
  init(view) {
    // логика по умолчанию 
    super.init(view)
    // прячем тогл-контрол "Role Matrix"
    view.queryView("toggle", "all")[0].hide(); 
  }
}

Доступ к экземплярам компонентов

Внутри Jet-компонента получить экземпляр компонента можно двумя способами.

Метод $$(id) у JetView работает для внутреннего компонента, у которого задана настройка localId:

init() {
    // исходная логика
    super.init();
    // получаем экземпляр компонента с localId = "list" 
    const form = this.$$("list");
}

Если localId не задан, используйте queryView:

init(view) {
    // исходная логика
    super.init();
    // получаем экземпляр списка
    const list = view.queryView("list");
}

Проверка компактного режима

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

const compact = this.getParam('compact', true);

Получение свойств состояния

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

const state = this.app.getState();
// или 
const state = this.getParam("state");

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

Кастомизация сервисов Jet

При кастомизации сервиса вы можете:

• добавлять и вызывать свои методы
• переопределить любой существующий метод, но делайте это с осторожностью

Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:

class MyBackend extends userManager.services.Backend {
  users() {
    // клиентские данные
    return webix.promise.resolve(users);
  }
}

Затем переопределите класс по умолчанию вашим с помощью свойства override:

webix.ui({
    view: 'usermanager',
    override: new Map([[userManager.services.Backend, MyBackend]]),
});

Related sample:  User Manager: Local Data

Больше информации о сервисе Backend в User Manager читайте в этой статье.

Обратная совместимость

User Manager - это гибкий компонент: вы можете менять в нём практически всё. Однако помните о следующем:

• Внутренняя логика модулей User Manager может меняться в последующих релизах.
• Мы сделаем всё, чтобы оставить сигнатуры методов без изменений, но в случае необходимости возможны критические изменения.

Наверх