Frontend: Functional sidebar -> open the different pages

[Keyshal-211]

@PaulBredl is this same as routing stuff, that I showed you last time, that after clicking on buttons different page is open

[PaulBredl]

@Keyshal-211 We're not doing the routing stuff for now, but this issue should still be done.

This is how I would do it: All Panels (GUIEditor, TextEditor) define a property "mode" which is either

• "file" -> for editing the config file, the default page
• "schema"-> for editing the schema
• "settings" -> for editing the settings

Both the GUI editor and the text editor should change their data depending on the current mode:

• if in file mode, the "currentData" from the dataStore should be used and the "currentSchema" from the schemaStore, like it currently is, so nothing to change here
• if in the schema mode, the "currentSchema" from the schemaStore should be used as the data -> because we want to edit the schema in this mode, as schema the json meta schema (frontend/meta-configurator/resources/json-schema/schema.json) should be used, -> will not correctly be displayed yet, but don't worry about that
• if the the settings mode, we need a new settingsStore in the store package. Here both the settingsData and a settingsSchema should be defined so we can edit the settings with both our panels. For now, the settingsSchema could just have one dummy example property.

Do you think you could do this until Thursday? This would be nice to show I think. Otherwise I can do it. We can also have a call if you have questions. It is possible that the code has to be adapted on multiple locations to make it work properly.

[PaulBredl]

Felix and me thought that the following solution might be best:

1. We implement three different stores (for settings, config data and schema) that all have the same interface, i.e., the same properties and functions. They all store the actual data and the schema of the data.
2. The "App.vue" gets renamed to a more accurate name, e.g: "CompleteEditorComponent.vue", gets moved to the components folder, and gets a property for the current store to use, e.g. in in the settings page, the settings store will we passed here as the store property.
3. Three views for the different pages will be created: ConfigView, SchemaView, SettingsView. They all just have the "CompleteEditorComponent" as a child and pass their corresponding store to it.
4. These pages can be used for routing (like @Keyuri implemented before)
5. The ConfigView will be used as default page in "main.ts" (instead of App)
6. We still have to determine how we can preserve the state when switching pages (or reloading)