mapbender/data-manager

Mapbender数据管理器

安装次数: 6,728

依赖项: 0

建议者: 0

安全性: 0

星标: 3

关注者: 20

分支: 1

开放性问题: 3

语言:JavaScript


README

此存储库已弃用。其功能将集成到mapbender digitizer存储库的2.0版本中,代码已移植到develop分支。请在那里提出任何更改。

旧描述:Mapbender数据管理器元素

在Mapbender应用程序中列出和编辑数据库表内容。

数据列表以(HTML)表格形式显示。可以自定义表单编辑或创建单个条目。

设计用于侧边栏。

数据组织到“方案”中,以支持具有不同数据和表单结构的多张表。

如果定义了多个方案,数据管理器将显示下拉菜单以允许方案切换。

每个方案分别定义了数据如何列出以及用于编辑和创建条目的表单结构。

有关空间数据集成,请参阅Digitizer

有关数据库连接/表选择,请参阅数据源文档

连接和表配置可以直接嵌入到数据管理器方案配置中,或引用放入Symfony容器参数的现有全局配置。

配置表格项列表

每个方案配置包含一个键为table的对象,其结构如下

配置表单

每个方案配置包含一个键为formItems的(可能嵌套的)对象列表,定义了创建或编辑条目时显示的表单的内容和结构。请注意,即使禁用编辑,此表单也将仅作为详细显示工具使用。

此外,方案中的popup对象控制弹出窗口本身的属性。它支持以下值

表单输入字段

表单输入字段有多种类型,由type值控制。所有输入共享一组常见的配置选项

输入字段type可以是以下之一

许多输入的常见自定义可以通过 attr 对象来实现。例如,将 "input" 类型限制为仅允许数字,可以通过覆盖其 HTML 类型属性来实现;所有输入都可以设置为必填或只读。

<...>
formItems:
  - type: input
    name: strictly_formatted_column
    title: Strict input pattern demo
    attr:
        pattern: '\w{2}\d{3,}'
        placeholder: Two letters followed by at least three digits
        required: true
  - type: input
    name: numeric_column
    title: Numbers only
    attr:
      type: number
      min: 10
      max: 200
      step: 10
      required: true
  - type: textArea
    name: text_column
    title: Very large text area
    attr:
      rows: 10

选择输入选项格式

类型 "radioGroup" 和 "select" 需要在 options 键下提供对象列表来指定可用的选择。选项对象包含

<...>
formItems:
  - type: select
    options:
      # Allow user to explicitly (re)select ~nothing in particular
      - label: ''
        value: ''
      - label: First option text   # displayed
        value: v1   # value in database column
      - label: Second option text (disabled)
        value: v2
        attr:
          disabled: true
      - label: Third option text
        value: v3

选择(不是 radioGroup 项)可以另指定 sqlconnection(Doctrine DBAL 连接名称)来动态生成选项。 sql 应该生成 labelvalue 别名以提高清晰度。如果它没有这样做,则每行的第一列用作选项标签,最后一列用作提交值。

静态 option 定义和 sql 也可以结合使用。

<...>
formItems:
  - type: select
    options:
      # Allow user to explicitly (re)select ~nothing in particular
      - label: ''
        value: ''
      - label: Static option a
        value: a
    sql: SELECT CONCAT("label_prefix", ': ', "name") AS label, "id" AS value FROM "some_table"
    connection: name_of_some_connection

如果定义了 sql 但省略了 connection,则使用 "default" DBAL 连接进行查询。

文件上传

通过 type: file 表单项上传的文件将存储在服务器的文件系统中。映射的数据库列仅存储文件路径作为字符串。

上传的默认存储路径由 Mapbender 确定,但可以在 "dataStore" / "featureType" 级别进行重新配置,针对每个数据库列单独配置。这是通过 "dataStore" / "featureType" 配置中的 files 对象来完成的。

例如。

schemes:
  items_with_customized_upload_location:
    dataStore:
        connection: dm_connection_name
        table: items_with_file_attachments
        ## Customization per column here
        files:
          - field: attachment_path_column
            path: /var/mapbender-attachments/dm/items_with_customized_upload_location/attachment_path_column

相对 path(无前导斜杠)的起点是 web 服务器文档根。

对于图像附件,可以链接一个 type: img 项,该项将自动显示当前附件的预览。

<...>
formItems:
    - type: file
      title: Attached image
      name: img_path_column
      attr:
        accept: 'image/*'
    - type: image
      name: img_path_column   # Link to input established by matching "name" value
      src: attachment-placeholder.png

结构/杂项表单元素

类型 "tabs"

可以通过在 formItems 列表中插入一个具有 type: tabs 的对象,并将一个或多个标签规范分配给它来组织复杂表单对话框,这些规范由 title(显示在标签上的文本)和 children(标签内容)组成。

<...>
popup:
  title: 'Multi-tab form dialog'
formItems:
  - type: tabs
    children:
      - title: 'First tab'
        children:
          # First tab form item specifications
          - type: input
            title: Input in first tab
            <...>
      - title: 'Second tab'
        children:
          # First tab form item specifications
          - type: input
            title: Input in second tab

杂项容器标签 "div"、"span"、"p"

插入 HTML <div><span><p> 标签。可以指定 text(编码,首先插入)和 children(要插入的更多项的列表)。支持通过 attr 对象和自定义 cssClass 添加自由形式的 HTML 属性。

<...>
formItems:
  - type: p
    text: This is an introductory paragraph.
  # Arrange inputs in Bootstrap grid row + columns
  - type: div
    cssClass: row
    children:
      - type: input
        title: Input in left column
        cssClass: col-xs-4 col-4
      - type: input
        title: Input in middle column
        cssClass: col-xs-4 col-4
      - type: input
        title: Input in right column
        cssClass: col-xs-4 col-4

类型 "html"

插入自定义 HTML 内容(不进行转义),包装在一个额外的 div 中。可以指定添加到包含 div 上的 attrcssClass

<...>
formItems:
  - type: html
    html: 'This will <strong>not</strong> go through any HTML escaping.'
    cssClass: added-on-wrapping-div

类型 "breakLine"

插入一个单独的 HTML <hr> 元素。支持通过 attr 对象和自定义 cssClass 添加自由形式的 HTML 属性。

配置访问权限

每个模式也可以限制用户可以执行的可能交互

示例配置

schemes:
  a_demo_schema:
    label: Demo   # displayed in schema selector, if multiple schemes configured
    dataStore:
      connection: dm_connection_name
      table: dm_items
      uniqueId: id
    allowEdit:    true    # Can edit existing items
    allowCreate:  true    # Can create new items from scratch
    allowDelete:  false   # Can not delete anything
    allowRefresh: true    # Enable item refresh button
    table:
      columns:
      - data: id
        title: ID
      - data: name
        title: Item name
    popup:
      title: 'Edit dialog title'
      width: 50vw   # half screen width
    formItems:
    - type: p
      text: This is a non-interactive introductory paragraph.
    - type: input
      name: name
      infoText: This will show up in a tooltip next to the label.
      title: Item name
      attr:
        placeholder: 'Entry required'
        required: true
    - type: textArea
      name: description
      title: Longer description text
      attr:
        rows: 4
    - type: radioGroup
      title: Choose one
      name: choice_column_1
      options:
        - label: Option 1
          value: v1
        - label: Option 2
          value: v2
      value: v2   # Pre-select second option by default for new items
    - type: select
      title: Select at least one (multiple choice)
      attr:
        required: required
        multiple: multiple
      name: choice_column_2
      options:
        - label: Option 1
          value: v1
        - label: Option 2 (disabled)
          value: v2
          attr:
            disabled: disabled
        - label: Option 3
          value: v3
      value: v1,v3   # use comma-separated values for default multi-select value