Manage script for entities (FE)

[zeppaman]

User story

Let the user manage script into the editor. One tab in the schema editor allows you to edit js.

task

1. add one horizontal tab like the others in "entity-details"
2. into this tab add another tablist. This tab list is vertical. You have one tab for each event (postsave, presave, etc..)
3. each tab has one monaco editor component. Language is javascript. We start with only one tab. The label is "PresaveScript"
4. the value of javascript bind with the field "PresaveScript" into schema json

note

This task is an intermediate version of the final result. In the end, we will manage multiple events and multiple scripts. That's why we need more than one tab. Once this task is completed and the api part will be ready we will extend this feature.

hints

Inside entity-details.tpl.html you should find template that insert tabs and tab body. One of the tab added will contain another tab control https://vuetifyjs.com/en/components/tabs

You can find an example of Monaco editor usage in the 'detail-edit' component:

The Vue wrapper component used for Monaco editor is this one: https://github.com/egoist/vue-monaco

[zeppaman]

@chan18 I cannot assign to you. can you take it?

[zeppaman]

@marcuson please add your comment. My intent is to proceed step by step on this to preserve backward compatibility during the job.

[marcuson]

@zeppaman all seems clear to me and the 'entity-details' page you mentioned in a previous comment is a good example to start. @chan18 if you have some questions feel free to ask 😄

[zeppaman]

@RaffaelloDeBacci you originally worked on this task, but we need to complete for the release soon, so we moved to @chan18. I do not see any progress on the branch. If you have done something please commit and share with chan what you have done (this may save time).

[chan18]

@zeppaman just started working on this.

[zeppaman]

@chan18 do you need any help on this task?