Create a Component

A Component is in charge to render template and executes somes actions like form handling

Here is a basic exemple of Component:

import AbstractComponent from "../../Plasma/Abstract/AbstractComponent";

export default class MyComponent extends AbstractComponent {

    constructor() {
        super();
        this.setData({})
        this.render()
        this.script()
    }
    
    render() {
        let template = this.getVue("myTemplate.twig")
        this.genTemplate('panelPage', template, this.data)
    }
    
    script(){
    
    }

}

First of all your component MUST extends AbstractComponent

this will need to override 2 methods: render() and script()

render() is used to render the twig template and script() will be trigger after the render, you'll use this method to perform post loaded operations. like filling a table

Getting the template

To get the template you use the getVue method from AbstractComponent.

Then you apply the template using getTemplate('divId', theTemplate, theDataInJsObjectType)

For exmple: in the code above we load myTemplate.twig, then we draw it on the div #panelPage and give the following data : this.data (actually an empty js object )

Tips:

If your data are empty you don't need to provide them so you could do : getTemplate('divId', theTemplate)

You can manage your template by using subFolder ex: vue/main/myTemplate.twig in that case you'll load the template like this :

 let template = this.getVue("main/myTemplate.twig")

If you need to load data BEFORE drawing the template you could remove the this.render() and this.script() in the constructor. Create a method to get your data, then call this.render() and this.script()

export default class beforeLoadingComponent extends AbstractComponent {
    constructor() {
        super();
        this.setData({})
        this.customLoader()
    }
    
    render() {
        let template = this.getVue("main/myTemplate.twig")
        this.genTemplate("panelPage", template, this.data)
    }

    script() {

    }
    
    async customLoader(){
        await Ajax.get(PLASMA.getConfig().host + "myRoute", {
            authToken: Session.getToken()
        }).then((res) => {
            //do what you want here
            this.setData(res.data)
            //res.data look like {id:1,name:"toto"}
            this.render()
            this.script()
        }
    }

}

You can also do multiple custom laoder if you need to edit specific data don't use this.setData. Instead use this.data["key"] = value