Digiterra Form

Form constructor

Install

quasar ext add digiterra-form

Quasar CLI will retrieve it from NPM and install the extension.

Prompts

If your app extension uses prompts, explain them here, otherwise remove this section.

Uninstall

quasar ext remove digiterra-form

Example

<d-form :formData="formData" />

formData: {
  attributes: {},
  name: 'testForm',
  template: 'card',
  actions: [
    {
      event: 'created',
      name: 'prefill',
      props: {
        entity: 'articles',
        query: ARTICLE_QUERY,
        variables: {
          id: 1
        }
      }
    }
  ],
  children: [
    {
      name: 'group1',
      type: 'group',
      attributes: {
        label: 'Группа 1'
      },
      children: [
        {
          name: 'title',
          type: 'textInput',
          actions: [
            {
              event: 'input',
              name: 'test'
            }
          ],
          attributes: {
            label: 'Тектстовое поле1',
            rules: [{ type: 'hasValue' }, { type: 'minChar', value: 3 }]
          }
        },
        {
          name: 'input1',
          type: 'textInput',
          attributes: {
            label: 'Тектстовое поле2'
          }
        },
        {
          name: 'group3',
          type: 'group',
          attributes: {
            label: 'Группа 3'
          },
          children: [
            {
              name: 'input2',
              type: 'select',
              options: {
                type: 'fixed',
                values: [
                  {
                    label: 'Google',
                    value: 'Google',
                    description: 'Search engine',
                    category: '1'
                  },
                  {
                    label: 'Проверка 2 метка',
                    value: 'Проверка 2',
                    description: 'Social media',
                    category: '1'
                  },
                  {
                    label: 'Twitter',
                    value: 'Twitter',
                    description: 'Quick updates',
                    category: '2'
                  },
                  {
                    label: 'Apple',
                    value: 'Apple',
                    description: 'iStuff',
                    category: '2'
                  },
                  {
                    label: 'Oracle',
                    value: 'Oracle',
                    disable: true,
                    description: 'Databases',
                    category: '3'
                  }
                ]
              },
              attributes: {
                label: 'Тектстовое поле5',
                dense: true
              }
            },
            {
              name: 'fieldSix',
              type: 'textInput',
              attributes: {
                label: 'Тектстовое поле6'
              }
            }
          ]
        }
      ]
    },
    {
      name: 'group2',
      type: 'group',
      attributes: {
        label: 'Группа 2'
      },
      children: [
        {
          name: 'fieldThree',
          type: 'textInput',
          attributes: {
            label: 'Тектстовое поле3'
          }
        },
        {
          name: 'fieldFour',
          type: 'textInput',
          attributes: {
            label: 'Тектстовое поле4'
          }
        }
      ]
    },
    {
      name: 'buttonOne',
      type: 'button',
      actionsGroup: true,
      actions: [
        {
          event: 'click',
          name: 'entityMutate',
          props: {
            entity: 'articles',
            query: ARTICLE_CREATE_MUTATION,
            messages: {
              success: 'Статья успешно создана',
              fail: 'Ошибка при создании статьи'
            }
          }
        }
      ],
      attributes: {
        flat: true,
        color: 'primary',
        label: 'Создать'
      }
    },
    {
      name: 'buttonTwo',
      type: 'button',
      actionsGroup: true,
      actions: [
        {
          event: 'click',
          name: 'entityMutate',
          props: {
            entity: 'articles',
            query: ARTICLE_UPDATE_MUTATION,
            messages: {
              success: 'Статья успешно обновлена',
              fail: 'Ошибка при обновлении статьи'
            }
          }
        }
      ],
      attributes: {
        flat: true,
        color: 'primary',
        label: 'Обновить'
      }
    }
  ]
}