Empieza version 2.3.0.alfa3 con renombramientos. Avanza https://gitla…

…b.com/pasosdeJesus/sivel2_gen/-/issues/730

Gemfile

@@ -54,8 +54,8 @@ gem "will_paginate" # Pagina listados
 # lógico y no alfabetico como las gemas anteriores)
 
 gem "msip", # Motor generico
-  git: 'https://gitlab.com/pasosdeJesus/msip.git', branch: 'main'
-  #path: "../msip"
+  #git: 'https://gitlab.com/pasosdeJesus/msip.git', branch: 'main'
+  path: "../msip"
 
 group :development do
   gem "puma"

Gemfile.lock

@@ -16,10 +16,8 @@ GIT
   specs:
     cocoon (1.2.11)
 
-GIT
-  remote: https://gitlab.com/pasosdeJesus/msip.git
-  revision: 3c8aad6cefd31e803400e8f566ac1c5610953d71
-  branch: main
+PATH
+  remote: ../msip
   specs:
     msip (2.3.0.alfa3)
       cancancan (~> 3)
@@ -39,7 +37,7 @@ GIT
 PATH
   remote: .
   specs:
-    mr519_gen (2.3.0.alfa2)
+    mr519_gen (2.3.0.alfa3)
       msip
       rails
 

app/assets/javascripts/mr519_gen/application.js

@@ -10,8 +10,6 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require msip/motor
-//= require mr519_gen/motor
 //= require_tree .
 
 

app/javascript/controllers/edita_formulario.js

@@ -0,0 +1,149 @@
+export default class Mr519__EditaFormulario {
+  // Ahora gridstack se carga como módulo
+
+
+  // Pasa ubicaciones de elementos del formulario del
+  // esquema visual al esquema texto
+  static visualATexto() {
+    document.querySelectorAll('.grid-stack-item').forEach((i) => {
+      var vx = i.getAttribute('data-gs-x');
+      var vy = i.getAttribute('data-gs-y');
+      var vwidth = i.getAttribute('data-gs-width');
+      if (!i.getAttribute('class').includes('grid-stack-placeholder')) {
+        var vid = +i.getAttribute('data-gs-id');
+        $('#formulario_campo_attributes_' + vid + '_fila').attr('value', 
+          +vy + 1);
+        $('#formulario_campo_attributes_' + vid + '_columna').attr('value', 
+          +vx + 1 );
+        $('#formulario_campo_attributes_' + vid + '_ancho').attr('value', 
+          +vwidth);
+      }
+    })
+  }
+
+  // Pasa ubicaciones de elementos del formulario del
+  // esquema texto al esquema visual
+  static textoAVisual() {
+    document.querySelectorAll('[id^=formulario_campo_attributes_][id$=_id]').forEach((i) => {
+      console.log(i)
+      if (i.parentElement.parentElement.parentElement.getAttribute('style') === null  || !i.parentElement.parentElement.parentElement.getAttribute('style').includes('display: none')) {
+        // No agrega a esquema visual los eliminados
+        if (i.getAttribute('id').split('_')[4] == 'id'){
+          let idc = i.getAttribute('id').split('_')[3]
+          let vx = +document.querySelector('#formulario_campo_attributes_' + idc + 
+            '_columna').value
+          let vy = +document.querySelector('#formulario_campo_attributes_' + idc + 
+            '_fila').value
+          let vancho = +document.querySelector('#formulario_campo_attributes_' + 
+            idc + '_ancho').value
+          let vnombre = msip_escapaHtml(
+            document.querySelector('#formulario_campo_attributes_' + 
+              idc + '_nombre').value
+          )
+
+          document.addNewWidget({
+            x: vx > 0 ? vx - 1 : 0,
+            y: vy > 0 ? vy - 1 : 0,
+            width: vancho > 0 ? vancho : 12,
+            height: 1,
+            minWidth: 1,
+            auto_position: true,
+            id: idc,
+            contenido: vnombre ,
+          })
+        }
+      }
+    })
+  }
+
+  // Prepara esquema visual de formulario y sincronización con esquema texto
+  // y configura primer esquema visual con esquema texto desplegado
+  static preparar() {
+
+    var opciones = {
+      float: true,
+      auto: false,
+      resizable: { handles: 'e, w'},
+    };
+    if (typeof $.fn.gridstack === 'undefined') {
+      return
+    }
+
+    $('.grid-stack').gridstack(opciones);
+    document.grid = $('.grid-stack').data('gridstack');
+
+    document.addNewWidget = function (datos = null) {
+      var node = {
+        x: 12 * Math.random(),
+        y: 5 * Math.random(),
+        width: 1 + 3 * Math.random(),
+        height: 1,
+      };
+      if (datos != null) {
+        node = {
+          x: datos.x,
+          y: datos.y,
+          width: datos.width,
+          height: 1,
+          auto_position: true,
+          id: datos.id
+        };
+      }
+      document.grid.addWidget($('<div><div class="grid-stack-item-content">' +
+        datos.contenido + '</div></div>'), node);
+      return false;
+    }.bind(document);  
+
+
+    $(document).on('cocoon:after-insert', '#campos', function(e, campo){
+      if (e.target.id == "campos") { 
+        var ultimaFila = e.target.lastElementChild;
+        var ultimaColumna = ultimaFila.lastElementChild;
+        var elementoId = ultimaColumna.firstElementChild;
+        var laid = elementoId.firstElementChild.value
+        var maxy = 0
+        document.querySelectorAll('.grid-stack-item').forEach( i => {
+          y = +i.getAttribute('data-gs-y')
+          if (y > maxy) {
+            maxy = y
+          }
+        })
+        var node = {
+          x: 0,
+          y: maxy,
+          width: 12,
+          height: 1,
+          minWidth: 1,
+          auto_position: true,
+          id: laid,
+          contenido: laid
+        }
+        document.grid.addWidget($('<div><div class="grid-stack-item-content">' +
+          node.contenido + '</div></div>'), node);
+      }
+    });
+
+    $(document).on('cocoon:after-remove', '#campos', function(e, campo){
+      if (e.target.id == "campos") { 
+        document.grid.removeAll()
+        Mr519__EditaFormulario.textoAVisual()
+      }  
+    })
+
+    $(document).on('change', '#campos',function(event, items) {
+      if (event.target.id == "campos") { 
+        document.grid.removeAll()
+        Mr519__EditaFormulario.textoAVisual()
+      }
+    })
+
+    $(document).on('change', '.grid-stack',function(event, items) {
+      Mr519__EditaFormulario.visualATexto()
+    })
+
+    Mr519__EditaFormulario.textoAVisual();
+
+  }
+
+}
+