Traits change effect on component

[zeeshan-algo]

Hi @artf As you can see in the video After dropping the block when i click on the AddItems button then new html is appending on the selected component which is good according to my requirements . But I want is whatever i write on the traits must be reflecting on the html that appended . How can i achieve this functionality
dragdrop.webm
Here is my Code snippets

[zeeshan-algo]

Hi @artf ???????

[Aadarsh4u-code]

Hi @zeeshan-algo, i like you first requirement actually i have also same requirement but in my case let say i have 5 textarea in trait and one submit button. once i click on submit it should take value form 5 textfield and call api get data in response and on basic of that data component in editor should be render. For now everything working fine except after getting data from api component is not re-rendering.

chart in editor

-----code----
Basically my concern is that i re-render chart component in editor once i click button from trait of the component

import alasql from 'alasql';
import { DataService } from '../../../../../../service/DataService';

const Chart = require('chart.js');

//Block
export const BarChartBlock = (bm, category, label, type) => {
bm.add(type, {
label,
category,
content: <canvas id="barChart" data-gjs-type=${type}></canvas>,
});
};

//Components
export default (editor, dc, label, type) => {

const defaultType = dc.getType('default');
const defaultView = defaultType.view;

const script = function (props) {
const elementId = this.id;
let labelsFromTrait;
let xAxisKeyFromTrait;

const regex = /(\w+)\s*{([^{}]+)}/g;


// console.log('props', props);
console.log('this', this);
// console.log('this.attributes', this.attributes);

const initLib = function () {
  const labels = [];
  let match;
  labelsFromTrait = props.label?.replace(/'/g,'"');
  xAxisKeyFromTrait = props.xAxisKey?.replace(/'/g,'"');
  
  if(labelsFromTrait !== '') {
    while ((match = regex.exec(labelsFromTrait))) {
      labels.push({ key: match[1], value: match[2] });
    }
  }
  

  let finaData;
  if(props.resultAfterQuery && props.resultAfterQuery.length) {
    finaData = props.resultAfterQuery;
  }

  const colorList = ['#3e95cd','#8e5ea2','#3cba9f','#e8c3b9','#c45850'];

  //data to render chart
  let data = {
    labels: (finaData && xAxisKeyFromTrait !== '') && finaData?.map((item) => item[`${xAxisKeyFromTrait}`]),
    datasets: labels && labels?.map((labelItem,index) => {
      let obj = {
        label: labelItem.value,
        data: finaData && finaData?.map((item) => item[`${labelItem.key}`]),
        backgroundColor: colorList[index],
        parsing: {
          yAxisKey: labelItem.key
        }
      };
      return obj;
    })
  };
 

  console.log('final data for bar chart',data);
  console.log('finaData',finaData);
  
  const config: any = {
    type: 'bar',
    data: finaData,
  };

  const canvas = document.getElementById(`${elementId}`);
  const cv = canvas as HTMLCanvasElement;
  const ctx = cv?.getContext('2d');
  const myChart = new Chart(ctx, config);
};

//chart js script
if (typeof Chart === 'undefined') {
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js';
  script.onload = initLib;
  document.body.appendChild(script);
} else {
  initLib();
}

};

dc.addType(type, {

isComponent: (el) => {
  if (el.getAttribute && el.getAttribute('data-gjs-type') === type) {
    return { type };
  }
},

model: {
  defaults: {
    droppable: false,
    resultAfterQuery: null,
    attributes: {
     
    },
    traits: [
      {
        type: 'barChart_trait',
        label: 'API',
        placeholder: 'Enter api endpoint',
        name: 'apiEndpoint',
        changeProp: 1,
        full: true,
      },
      {
        type: 'barChart_trait',
        label: 'Query',
        placeholder: 'Enter query',
        name: 'query',
        changeProp: 1,
        full: true,
      },
      {
        type: 'barChart_trait',
        label: 'Tables',
        placeholder: `Type 'dataFromApi' by comma seperated`,
        name: 'table',
        changeProp: 1,
        full: true,
      },
      {
        type: 'barChart_trait',
        label: 'Label',
        placeholder: '1st part { 2nd part }',
        name: 'label',
        changeProp: 1,
        full: true,
      },
      {
        type: 'barChart_trait',
        label: 'xAxis Label',
        placeholder: '{}',
        name: 'xAxisKey',
        changeProp: 1,
        full: true,
      },
      {
        type: 'button',
        text: 'Process data',
        full: true,
        name: 'getData',
        command: ( async (editor, sender) =>  {

          const component = editor.getSelected();
          const myValue = 'abc';
          const myComponent = sender.get('component');
          myComponent.set('myAttribute', myValue);
          editor.renderComponents(myComponent);
        
        
        })
       
      }
    ],
    apiEndpoint: '',
    query: '',
    table: '',
    label: '',
    xAxisKey: '',
    script,
    'script-props': ['apiEndpoint', 'query', 'table', 'label', 'xAxisKey','resultAfterQuery'],
  },


  init() {
    // this.listenTo(this, 'change:label datasets options', this.updateScriptInCanvas);
    // this.listenTo(this, 'change:apiEndpoint query', this.getDataFromApi);
    
    this.listenTo(this.model, 'change:attributes:resultAfterQuery', this.getDataFromApi);
 
  },
  updated(property, value, prevValue) {
    // console.log('Local hook: model.updated', 'property-', property, 'value-', value, 'prevValue-', prevValue);
  },

  async getDataFromApi() {
    let dataFromApi;
    let resultQuery;
    const { apiEndpoint, query, table } = this.attributes;
    const baseUrl = localStorage.getItem('apiBaseUrl');
    const accessToken = sessionStorage.getItem('accessToken');

    if(dataFromApi === undefined || dataFromApi === null) {
      const response = await DataService.designPages.getDataForChart(baseUrl, accessToken, apiEndpoint);
      if(response.success) {
        dataFromApi = response.data;
      }
    }
    
    if(query !== '' && dataFromApi?.length && table !== '') {
      const tableValue = table.split(',').map((item) => dataFromApi);
      resultQuery = alasql(query,tableValue);
    
      
      
    }

    if(resultQuery !== undefined && resultQuery?.length) {
      this.set('resultAfterQuery', resultQuery);
  


    }
   

    
  },

  updateScriptInCanvas() {
    const view = this.getView();
    view && view.render();
  },
},

view: defaultView.extend({
  init({ model }) {
    //something todo
  },
})

});

editor.TraitManager.addType('barChart_trait', {

onValueChange: function () {
  const traitModel = this.model;
  const selectedComponent = editor.getSelected();
  const traits = selectedComponent.get('traits');
  const traitsId = traitModel.get('id');
  const inputValue = traitModel.get('value');

  traits.forEach((trait) => {
    if (trait.props().id === traitsId) {
      this.target.set(`${traitsId}`, inputValue);
    }
  });
},

getInputEl: function () {
  const traitModel = this.model;
  const selectedComponent = editor.getSelected();
  const traits = selectedComponent.get('traits');
  const traitsId = traitModel.get('id');

  if (!this.inputEl) {
    const input = document.createElement('textarea');
    input.rows = 5;
    input.style.fontSize = '13px';
    traits.forEach((trait) => {
      if (trait.props().id === traitsId) {    
        input.value = this.target.get(`${trait.props().name}`);
        this.inputEl = input;
      }
    });
  }
  return this.inputEl;
}, 

});

};