Pop-up Variable Editors

[dselman]

Providing a modal pop-up to edit variables would be useful as it would constrain users from entering bad data. The variables could be rendered as links in the contract text, and clicking on a variable should open the appropriate pop-up. See designs from @Michael-Grover.

• String variable: unconstrained text input
• String variable with regex in model: constrain text input based on a regex
• Integer/Long variable: whole numbers only (including negative numbers)
• Float/Double variable: floating point numbers only (including negative numbers)
• Numeric variable with range validation: constrain numeric variable based on upper and lower range
• DataTime variable: calendar pop up (allowing user to enter Date, Time or DateTime), along with a timezone
• Monetary Amount
• Temporal Duration
• Temporal Period
• Boolean variable: a drop down with true/false (or similar)
• Anything else : unconstrained text input

Describe the solution you'd like

We should ensure that we don't duplicate the logic in the concerto-ui React form component, which can create React forms for Concerto types. The pop-ups will want to delegate to concerto-ui to ensure consistency.

Note that the concept of Variable is defined by the Contract Editor via a plugin, here:
https://github.com/accordproject/web-components/blob/master/packages/ui-contract-editor/src/components/Variable/index.js

When variables are clicked we should open a modal to edit them. Conceptually this is similar to how links are handled in the base markdown editor, so that can be used as a reference. We will want any code that handles variables to be in the contract-editor.
https://github.com/accordproject/web-components/blob/master/packages/ui-markdown-editor/src/FormattingToolbar/index.js#L51

[jeromesimeon]

I'm wondering how much of this could leverage the form generation for Concerto in https://github.com/accordproject/concerto-ui

It would be great to be able to reuse as much of it as possible.

[Michael-Grover]

Here are some relevant mockups. I like @jeromesimeon 's idea of using the existing form generation so we don't have to reinvent anything. Maybe to start we stick the forms into a modal that appears upon clicking the variable, and improve from there?

[Michael-Grover]

Add format option at bottom of monetary amount form, date time form, to choose what format you want the form to render itself as in the template instantiation

[jolanglinais]

Related to accordproject/cicero-ui#225