Añadido configurador

httpdocs/assets/js/safekat/components/configVariableDatatable.js

@@ -1,10 +1,8 @@
 
 import Modal from "./modal.js";
 import Ajax from "./ajax.js";
-class ConfigVariableDatatable
-{
-    constructor(domItem)
-    {
+class ConfigVariableDatatable {
+    constructor(domItem) {
         this.domItem = domItem
         this.datatableItem = this.domItem
         this.modalItem = $("#modalConfigVariableForm")
@@ -14,76 +12,69 @@ class ConfigVariableDatatable
         this.formEdit = this.modalItem.find("#formEditConfigVariable")
 
     }
-    init(){
+    init() {
         this.datatable = this.datatableItem.DataTable({
             processing: true,
             dom: 'Blrtip',
             serverSide: true,
-            lengthMenu: [ 25, 50, 100, 200 ],
+            lengthMenu: [25, 50, 100, 200],
             pageLength: 50,
             language: {
                 url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
             },
-            columns : [
-                {data : 'name',searchable:true,sortable:false},
-                {data : 'value',searchable:true,sortable:false},
-                {data : 'description',searchable:true,sortable:false},
-                {data : 'action',sortable:false,searchable:false,
-                    render : (d,t) =>{
+            columns: [
+                { data: 'name', searchable: true, sortable: false },
+                { data: 'value', searchable: true, sortable: false },
+                { data: 'description', searchable: true, sortable: false },
+                {
+                    data: 'action', sortable: false, searchable: false,
+                    render: (d, t) => {
                         return `
                         <div class="btn-group btn-group-sm">
                             <a href="javascript:void(0)" data-id="${d}" class="edit-variable"><i class="ti ti-pencil ti-sm mx-2"></i></a>
                         </div>
                         `
-                    } 
+                    }
                 },
             ],
             ajax: '/configuracion/variables/datatable'
         });
 
     }
-    events()
-    {
-        this.modalItem.on("click",".btn-update-variable",this.handleUpdateVariable.bind(this))
-        this.datatableItem.on("click",".edit-variable",(e)=> {
+    events() {
+        this.modalItem.on("click", ".btn-update-variable", this.handleUpdateVariable.bind(this))
+        this.datatableItem.on("click", ".edit-variable", (e) => {
             e.preventDefault()
             this.variableId = $(e.currentTarget).data("id")
             this.handleGetVariable()
         })
 
     }
-    handleGetVariable()
-    {
+    handleGetVariable() {
         const url = `/configuracion/variables/find/${this.variableId}`
         let ajax = new Ajax(
-            url,null,null,
+            url, null, null,
             this.handleGetVariableSuccess.bind(this),
             this.handleGetVariableError.bind(this)
         )
         ajax.get()
 
     }
-    handleGetVariableSuccess(data){
+    handleGetVariableSuccess(data) {
         this.formEdit[0].reset()
         this.modalEdit.toggle()
-        this.nameInput = this.formEdit
-        .find("#name")
+        this.nameInput = this.formEdit.find("#name")
         this.nameInput.val(data.name)
-        this.valueInput = this.formEdit
-        .find("#value")
-        this.valueInput.val(data.value)
-        this.descriptionInput = this.formEdit
-        .find("#description")
+        this.renderValueField(data.name, data.value)
+        this.descriptionInput = this.formEdit.find("#description")
         this.descriptionInput.val(data.description)
-        
     }
-    handleGetVariableError(err){}
-    handleUpdateVariable()
-    {
+    handleGetVariableError(err) { }
+    handleUpdateVariable() {
         const url = `/configuracion/variables/edit/${this.variableId}`
         const data = {
-            value : this.valueInput.val(),
-            description : this.descriptionInput.val(),
+            value: this.valueInput.val(),
+            description: this.descriptionInput.val(),
         }
         let ajax = new Ajax(
             url,
@@ -94,26 +85,49 @@ class ConfigVariableDatatable
         )
         ajax.post()
     }
-    handleUpdateVariableSucess(data){
+    handleUpdateVariableSucess(data) {
         this.modalEdit.toggle()
         this.datatable.ajax.reload()
     }
-    handleUpdateVariableError(err){}
+    handleUpdateVariableError(err) { }
 
-    handleDeleteVariable()
-    {
+    handleDeleteVariable() {
         const url = `/configuracion/variables/delete/${this.variableId}`
         let ajax = new Ajax(
-            url,null,null,
+            url, null, null,
             this.handleDeleteVariableSucess.bind(this),
             this.handleDeleteVariableError.bind(this)
         )
         ajax.post()
     }
-    handleDeleteVariableSucess(data){
+    handleDeleteVariableSucess(data) {
         this.datatable.reload()
     }
-    handleDeleteVariableError(err){}
+    handleDeleteVariableError(err) { }
+
+    renderValueField(name, currentValue) {
+        const wrapper = this.formEdit.find("#value-wrapper");
+        let html = '';
+
+        if (name === 'cabezadas_disponibles') {
+            html = `<textarea id="value" rows="6" class="form-control">${currentValue}</textarea>`;
+        } else if (name === 'cabezada_default') {
+            const options = window.CABEZADAS_OPCIONES || {};
+            html = `<select id="value" class="form-select">`;
+            for (const [key, label] of Object.entries(options)) {
+                const selected = key === currentValue ? 'selected' : '';
+                html += `<option value="${key}" ${selected}>${label}</option>`;
+            }
+            html += `</select>`;
+        } else {
+            html = `<input type="text" id="value" class="form-control" value="${currentValue}">`;
+        }
+
+        wrapper.html(html);
+        this.valueInput = this.formEdit.find("#value"); // Actualiza referencia
+    }
+
+
 }
 
 export default ConfigVariableDatatable;

httpdocs/assets/js/safekat/pages/configuracion/variables.js

@@ -2,4 +2,4 @@ import ConfigVariableDatatable from "../../components/configVariableDatatable.js
 
 const item = new ConfigVariableDatatable($("#tableConfigVariables"))
 item.init()
-item.events()
+item.events()