Make the data "object oriented"

[Zasco]

Make it so that the tree views, form fields and YAML output are updated when the metadata is and not "oninput" or other interaction triggered events.

[Zasco]

This would fix instances where the metadata is changed, but the UI is not.

[noah-severyn]

This would fix instances where the metadata is changed, but the UI is not.

Then it would make sense to call ParseYaml() as an event in the code mirror pane, instead of a button? I do also want to be careful here that we're not sending invalid yaml to the rest of the program, for example if the user is in the middle of editing and the syntax in the current state is not valid. Currently, whatever you type in the code pane will be passed to the yamlData object when ParseYaml() is called. That's how I do a significant amount of testing. In my mind what we/I need to do is a better job of ensuring everything gets updated in sync.

To me OO means classes. How does that help for this program? Or did you have something else in mind?

[Zasco]

Then it would make sense to call ParseYaml() as an event in the code mirror pane, instead of a button?

Locally I did so that it is called everytime the code mirror is changed. I added .on('change', editor => {ParseYaml()}); on https://github.com/noah-severyn/SC4PackMan/blob/main/wwwroot/js/site.js#L14. I'm not sure in that case if it makes sense to keep the button.

I do also want to be careful here that we're not sending invalid yaml to the rest of the program, for example if the user is in the middle of editing and the syntax in the current state is not valid. Currently, whatever you type in the code pane will be passed to the yamlData object when ParseYaml() is called.

Then it's only a matter of validating it before passing it.

In my mind what we/I need to do is a better job of ensuring everything gets updated in sync.

Here's roughly how I see it:

form.onchange() {metadata.update()} codemirror.onchange() {metadata.update()} metadata.update() {treeview.update(); form.update(); codemirror.update()}

instead of:

form.onchange() {codemirror.update()} codemirror.update() {ParseYaml()} ParseYaml() {treeview.update}

I'll try something and show you.

To me OO means classes. How does that help for this program? Or did you have something else in mind?

I did not mean classes, that's why I put "object oriented" in brackets. I simply meant to have objects hold the metadata and update the UI on "object change" instead of "UI change".

[noah-severyn]

form.onchange() {metadata.update()} codemirror.onchange() {metadata.update()} metadata.update() {treeview.update(); form.update(); codemirror.update()}

Ah ok. This makes perfect sense. We do just need a better, more combined/defined function to update data. I think I'm beginning to run into some of these problems now where certain parts are not all updating when certain interactions are happening. I can take a stab at this once I'm finished with my current branch.