@orion-front/docs

Appearance

Отправка типизированных значений из HTTP-действия ​

Используйте method: "http" с модальным editor, если перед запросом POST, PUT или PATCH пользователь должен ввести значения. Поместите действие в panelActions[].actions[] панели или в поддерживаемую группу действий строки. Панель читает type каждого поля и выводит соответствующий элемент управления. Поэтому поле Boolean отображается как чекбокс. После выбора пользователя в тело JSON попадает true или false, а не строка. Существующий null сохраняется и отображается неопределённым состоянием чекбокса, пока пользователь его не изменит. Если атрибут не пришёл из строки и для него нет defaultValue, он может отсутствовать в теле запроса. Когда маршрут требует строго логическое значение, задайте логический defaultValue для отсутствующего атрибута. Существующий null всё равно сохранится, поэтому его должен проверять маршрут: текущий редактор не применяет required.

Полная конфигурация для режима локальных тестовых данных ​

Следующий самостоятельный фрагмент Table использует понятные читателю ID и сокращённый редактор, чтобы в одном примере были видны обе ветви выбора тела запроса. Он основан на встроенном выполняемом примере, но не копирует его буквально. Встроенный пример использует ID панели local-attribute-renderer-forms-action-input, ID действий с окончаниями -http и -http-configured-body, а полный редактор экспортируется как localAttributeRendererHttpInputEditor.

Чтобы запустить встроенный пример из чистого состояния, задайте NUXT_PUBLIC_API_PREFIX=/local-api и NUXT_LOCAL_FIXTURE_API_ENABLED=true в apps/panel/.env.local, выполните pnpm -C apps/panel dev, войдите с любыми непустыми учётными данными и откройте ссылку на пример ниже. Маршрут /attribute-renderer/http-action существует только в этом режиме. В рабочей конфигурации замените его на маршрут из контракта API вашего приложения.

json
{
  "id": "typed-http-actions",
  "type": "table",
  "request": { "metaTypeName": "LocalAttributeRendererForm" },
  "panelActions": [
    {
      "id": "http-actions",
      "renderType": "inline_buttons",
      "actions": [
        {
          "id": "typed-http-submit",
          "method": "http",
          "label": "HTTP: типизированные поля",
          "request": {
            "method": "POST",
            "url": "/attribute-renderer/http-action",
            "body": {
              "configuredOnly": "editor-must-replace-this-body"
            }
          },
          "editor": {
            "mode": "modal",
            "fields": [
              {
                "attribute": "enabled",
                "label": "Активен",
                "type": "Boolean",
                "defaultValue": true
              },
              {
                "attribute": "jsonValue",
                "label": "JSON",
                "type": "Json",
                "defaultValue": { "value": 10, "unit": "kg" }
              },
              {
                "attribute": "readonlyNote",
                "type": "String",
                "readonly": true,
                "defaultValue": "local fixture"
              },
              {
                "attribute": "hiddenToken",
                "type": "String",
                "hidden": true,
                "defaultValue": "fixture-hidden"
              }
            ]
          }
        },
        {
          "id": "configured-http-submit",
          "method": "http",
          "label": "HTTP: настроенное body",
          "request": {
            "method": "POST",
            "url": "/attribute-renderer/http-action",
            "body": { "mode": "configured-body" }
          }
        }
      ]
    }
  ]
}

Откройте первое действие. Панель копирует в форму доступные значения строки и применяет defaultValue, только если значение атрибута равно undefined. Поэтому существующие false, null, 0 и пустая строка сохраняются. Когда пользователь нажимает Применить, элементы управления записывают в объект формы типизированные значения. HTTP-действие передаёт неглубокую копию этого объекта в $fetchApi, который сериализует её как JSON. Отправленная форма становится полным телом запроса, поэтому значение configuredOnly в запрос не попадает.

Откройте второе действие, чтобы проверить другую ветвь. У него нет редактора, поэтому HTTP-действие отправляет настроенное request.body без изменений. Данные редактора и настроенное тело запроса никогда не объединяются.

HTTP-действие ждёт ответ маршрута API. После успешного ответа панель показывает уведомление, закрывает открытое модальное окно и запрашивает актуальные данные текущей панели. При ошибке она показывает сообщение API и оставляет модальное окно доступным: исправьте значения и снова нажмите Применить.

Поддерживаемые поля и ограничения ​

request.method принимает GET, POST, PUT, PATCH или DELETE, а request.url задаёт целевой маршрут. Типизированный редактор нужен, когда маршрут ожидает тело запроса, обычно для POST, PUT или PATCH.

В модальном окне поддерживаются layout: "row", hidden, readonly, listOfValue, comment и regEx. Скрытые и доступные только для чтения значения остаются в отправляемой форме — так конфигурация может передать фиксированные контекстные поля. Этот редактор HTTP-действия не поддерживает editor.tabs и выбор объекта для типа Object. Пока выбор объекта не реализован, передавайте его идентификатор через скалярное поле.

Открыть пример типизированных полей HTTP-действия

В примере откройте вкладку Action input. Действие HTTP: типизированные поля проверяет оба состояния чекбокса, сохранность JSON, скрытые и доступные только для чтения значения, а также замену настроенного тела данными редактора. Действие HTTP: настроенное body проверяет отправку тела без редактора.

Точные ссылки на параметры ​

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