Project

General

Profile

Feature #10120

Form mit Vue

Added by Marc Egger about 2 months ago. Updated about 2 months ago.

Status:
Priorize
Priority:
Normal
Assignee:
Target version:
Start date:
13.02.2020
Due date:
% Done:

0%

Estimated time:
Discuss:

Description

QFQ Frontend das fuer die Formulare verantwortlich is, mit Vue neu schreiben.

Hier koennen Ideen zu diesem moeglichen Projekt gesammelt werden.

  • Die Kommunikation zwischen Vue und Backend sollte auschliesslich ueber API stattfinden. Das Frontend entscheidet sich, ein Formular zu rendern und holt dann die noetigen Daten zu dem Formular via REST vom Backend
  • Pro Formular gibt es eine JSON struktur die sowohl fuer die Beschreibung des Formulars als auch fuer dessen Inhalte genutzt wird. (dies setzt voraus, dass Formulare nicht mehr in der Datenbank sondern in Dateien gespeichert werden)
    • Beispielsweise existiert das Feld "value" wie bisher. Dieses enthaelt weiterhin die SQL query, die von dem Backend interpretiert wird. Zusaetlzlich enthaelt das JSON Formularelement aber auch noch das Attribut "currentValue", dieses enthaelt dann den Inhalt, der tatsaechlich im Formularelement steht und dem Benutzer angezeigt wird. Beim Submitten eines Formulars wird dann auch das "currentValue" in der gleichen JSON Struktur uebergeben.
  • JSON struktur:
{
  "name" : "personFormular",
  "title" : "Person editieren",
  "sqlAfter" : : "{{INSERT ... }}",
  "..." : "...",
  "..." : "...",
  "formElements" : [
    {
      "name" : "vormane",
      "label" : "Vorname",
      "type" : "text",
      "value" : "{{SELECT p.vorname FROM p AS PERSON where ... }}",
      "sqlAfter" : "..." 
      "currentValue" : "Marc" 
      "..." : "...",
      "..." : "...",
    }]
}
  • der name von Formular und Formularelementen dient als eindeutige referenz, bzw. als eindeutige ID. Die namen muessen also weiterhin eindeutig bleiben.
  • das Backend sendet nur die JSON felder mir, die das Frontend benoetigt. Beispielsweise sendet das Backend das "value" feld nicht mit, aber das "currentValue" berechnet er und sendet es in dieser Struktur mit.
  • das Absenden eines Formulars wird wahrscheinlich auch gleich per REST api und nicht mehr ueber POST passieren, damit man ueberall mit der JSON struktur arbeiten kann.
  • Das Parameter Feld wird aufgeloest und die moeglichen Parameter werden direkt attribute des Felds
  • Das Vue Frontend enthaelt das Formular als JSON mit den fuer das Frontend relevanten Attributen.
  • Fuer jeden Typen eines Formularelements wird ein Component von Vue gerendert
  • Die JSON daten zu einem Formularelement werden direkt an das Component weitergereicht.
    • So koennen zwischen Backend und Formularelementen "parameter" definiert werden, ohne dass man am rest vom Code etwas anpassen muss.

History

#1 Updated by Marc Egger about 2 months ago

  • Description updated (diff)

#2 Updated by Marc Egger about 2 months ago

  • Status changed from New to Priorize

Also available in: Atom PDF