Template Editor

[FlatBallFlyer]

This issue has been moved from the core IDMU Project. Template Editor Design Thoughts

A single page web app that provides an editor for JSON "Template" documents:

• I'm thinking Bootstrap + Angular but I'm open to other frameworks
• Draft Swagger
• Json Schema for Template
• Json Schema for Config --options--
• To run the Docker Image of the Rest project

docker run -d -p 9080:9080 -p 9443:9443 --name idmu flatballflyer/idmu:4.0.0.Beta1

• Sample config.json
• Or get it with this curl command from the Docker image

curl localhost:9080/idmu/Config

• A Sample template with all directive types can be seen here:
• Or get it with this curl command from the Docker image

curl localhost:9080/idmu/Template/system.sample.

• Sample Template Groups can be found in the templates sub-folders in this structure:
  src/test/resources/performance
• To get a list of currently cached template groups use this command

curl localhost:9080/idmu/Group/

• To get a template group use this command

curl localhost:9080/idmu/Group/GroupName

I would like the UI to provide the ability to load a config and template group from either the local file system or from the HTTP GET //host/idmu/Group/groupName, and have the ability to both "download" the json to a local file and update the cached templates with the HTTP PUT/POST //host/idmu/Group.
The config json (which provides options for all enumerated values) should also be loaded either from a local file, or from the HTTP GET //host/idmu/Config rest call.

The general design would have a top level Template Group that is an accordion of Templates that fills the full display with (new) and (delete) Template buttons. The accordion member title is the Template ID as group.name.variant.

Each template should be laid out as 2 rows, with the first row containing 2 panels for Template Attributes (left) and Directives (right), with a full-width second row for the Template Content text area that uses all remaining vertical space on the display.

The Directives pane should be a sortable accordion of Directives, with a "Pick a New Directive Type" selector to add new directives, and a (delete) button to delete a directive.
The Attributes / Directives Row should be "hideable" with a carrot indicator on the right side of the accordion title, with a default of hidden.
In addition to the Content Text area, the following fields should be a re-sizable text area.

• The Enrich directive Command attribute
• The Parse directive Static Data attribute

Numeric values should all have pick lists as defined in the options.json
All other attributes can use default text / checkbox input types.

See https://github.com/FlatBallFlyer/IBM-Data-Merge-Utility/tree/master/WebContent/images for VERY rough wire frames.

Validation rules to be supported (beyond what is specified in the json schema)

• All templates in the group must have the same “Group” ID
• Template Group and Name are (a-z1-9) only, no whitespace or special characters (espically a “.”)

Bonus Features

• Merge Feature: When editing a template, a merge test button that has a pop-up to prompt for a payload and parameters and makes a merge call (host:port/Merge/templateName) and displays the response. The template group should be saved to the server cache prior to the merge call.
• Highlight text in the Content that is “wrapped” by the open/close wrapper values, and automatically update all wrappers when the wrapper open/close values are edited.
• Content tool bar with (addTag) and (addBookmark) buttons that provide popups for tag and bookmark attributes and place the wrapped text in the content area at the current cursor.
  • For Tag attributes/markup see https://github.com/FlatBallFlyer/IBM-Data-Merge-Utility/blob/master/src/main/java/com/ibm/util/merge/template/content/TagSegment.java
  • For Bookmark attributes/markup See https://github.com/FlatBallFlyer/IBM-Data-Merge-Utility/blob/master/src/main/java/com/ibm/util/merge/template/content/BookmarkSegment.java
• Make the “wrapped” bookmark content highlight clickable and navigate to the referenced default template in the accordion.
• Upgrade the bookmark click to allow in-line viewing of the sub-template content within the Content text area, with left-right navigation to view “template variants”
• Provide context aware, color coding, autocomplete, full function content editors for JSON / XML template content types.
• Add “minify” and “prettify” buttons to the Content Tool bar for JSON / XML content types