A different type of component

[mrhicksman]

Hi Everyone,

I am looking for some advice on the best way to create a component for Smarty template code.

For example, I need the output to be as follows:
<div>{display_question question_id=30 qlayout_id=1 show_instructions=false show_number=false show_answer=false}</div>

Each value in the component is dynamic and is selected by the user in a modal form when adding the component to the page. The following is the approach I am trying and it works but, I feel I am down the wrong road with this approach.

editor.Components.addType('problem', {
            model: {
                defaults: {
                    // Default props
                    tagName: 'div',
                    droppable: true,
                    editable: true,
                    selectable: true,
                    changeProp: true,
                    attributes: { class: 'cmp-css-a' },
                    components: model => {

                  return `{tt_display_questions question_id=${model.get('question_id')} qlayout_id=${model.get('qlayout_id')} question_meta=${model.get('question_meta')} show_instructions=${model.get('show_instructions')} show_numbers=${model.get('show_numbers')} num=${model.get('num')} show_answers=${model.get('show_answers')}}`;
                },
              },
            },
            view: {
                events: {
                    click: 'handleClick',
                },
                onActive(ev) {
                    ev && ev.stopPropagation();
                    var modal = editor.Modal;
                    var content = this.createContent({/literal}{$skill_id}{literal});
                    var btn = content.children.length === 2 && content.children[1];
                    btn.addEventListener('click', this.applyChanges);
                    getSkills({/literal}{$grade_id},{$subject_id},null,{$skill_id}{literal});
                    getLevels();
                    modal.open({
                        title: 'Problem Manager',
                        content: content,
                    })
                },
                createContent(skillid) {
                    const content = document.createElement('div');
                    content.style = 'position: relative';
                    content.innerHTML = `
                        <div class="container">
                          <form id="problem_form">
                            <input type="hidden" name="question_id" id="question_id" value="">
                            <input type="hidden" name="qlayout_id" id="qlayout_id" value="">
                            <input type="hidden" name="question_meta" id="question_meta" value="">
                            <div class="row">
                            <div class="col">
                                <label for="num" class="form-label">Problem Number:</label>
                                <select class="form-control" name="num" id="num">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                </select>
                            </div>
                            <div class="col">
                                <span>Show Instructions:</span>
                                <label for="Yes" class="form-label">Yes</label>
                                <input type="radio" name="show_instructions" id="show_instructions" value="true">
                                <label for="No" class="form-label">No</label>
                                <input type="radio" name="show_instructions" id="show_instructions" value="false" checked>
                            </div>
                            <div class="col">
                                <span>Show Problem Numbers:</span>
                                <label for="Yes" class="form-label">Yes</label>
                                <input type="radio" name="show_numbers" id="show_numbers" value="true">
                                <label for="No" class="form-label">No</label>
                                <input type="radio" name="show_numbers" id="show_numbers" value="false" checked>
                            </div>
                            <div class="col">
                                <span>Show Answers:</span>
                                <label for="Yes" class="form-label">Yes</label>
                                <input type="radio" name="show_answers" id="show_answers" value="true">
                                <label for="No" class="form-label">No</label>
                                <input type="radio" name="show_answers" id="show_answers" value="false" checked>
                            </div>
                            <div class="col">
                                <label for="skill_id" class="form-label">Skill:</label>
                                <select class="form-control" name="skill_id" id="skill_id"></select>
                              </div>
                              <div class="col">
                                  <label for="level_id" class="form-label">Level: </label>
                                   <select class="form-control" name="level_id" id="level_id" onchange="getProblem()"></select>
                              </div>
                              <div>
                                   <div class="card">
                                        <div class="card-body" id="problem_html"></div>
                                        <a href="#" class="btn btn-primary" onclick="getProblem()">Get A Problem</a>
                                   </div>
                              </div>
                            </div>
                          </form>
                        </div>
                        <button style="
                          position: absolute;
                          top: 0; right: 0;
                          background-color: #fff;
                          font-size: 1rem;
                          border-radius: 3px;
                          border: none;
                          padding: 10px 20px;
                          cursor: pointer
                        ">Submit</botton>`;
                        return content;
                    },
                    applyChanges() {
                        updateWorksheetData({/literal}{$worksheet_id}{literal},document.getElementById("question_id").value,document.getElementById("num").value);
                        const modelComponent = editor.getSelected();
                        modelComponent.setAttributes({
                            question_id: document.getElementById("question_id").value,
                            qlayout_id: document.getElementById("qlayout_id").value,
                            question_meta:null,
                            show_instructions: document.querySelector('input[name="show_instructions"]:checked').value,
                            show_numbers: document.querySelector('input[name="show_numbers"]:checked').value,
                            num: document.getElementById("num").value,
                            show_answers: document.querySelector('input[name="show_answers"]:checked').value,
                            level_id: document.getElementById("level_id").value
                        });
                        const addedComponents = modelComponent.components(`{tt_display_questions question_id=${document.getElementById("question_id").value} qlayout_id=${document.getElementById("qlayout_id").value} question_meta=null show_instructions=${document.querySelector('input[name="show_instructions"]:checked').value} show_numbers=${document.querySelector('input[name="show_numbers"]:checked').value} num=${document.getElementById("num").value} show_answers=${document.querySelector('input[name="show_answers"]:checked').value}}`);
                       
                        //view && view.render();
                        modal.close();
                    },  
                    handleClick: function(ev) {
                        const modelComponent = editor.getSelected();
                        const attrs = modelComponent.getAttributes();
                        ev && ev.stopPropagation();
                        var modal = editor.Modal;
                        var content = this.createContent({/literal}{$skill_id}{literal});
                        var btn = content.children.length === 2 && content.children[1];
                        btn.addEventListener('click', this.applyChanges);
                        getSkills({/literal}{$grade_id},{$subject_id},null,{$skill_id}{literal});
                        getLevels(attrs.level_id);
                        getProblemData(attrs);
                        modal.open({
                            title: 'Problem Manager',
                            content: content,
                        })
                    },
                },
            });

[artf]

What exactly makes you feel wrong?

[mrhicksman]

It feels incorrect to have attributes as part of a div tag as I have them. They should be data- attributes at a minimum. However, I am having trouble getting it to work in setAttributes(). Any suggestions?

[artf]

Well, you don't need to add them as attributes indeed. You can simply use the model of the component as your data container.

// Set data
modelComponent.set('problemData', { question_id: ..., qlayout_id: ... });
// Get data
getProblemData(modelComponent.get('problemData') || {});