Licitator/httpdocs/templates/database/components/formcomponents/datatable.html.twig

<div class="form-row {{ pregunta.alias }} {{ pregunta.class }}">
    <div class="form-holder">
        {% if pregunta.preTitulo is not empty %}
            <div class="{{ tarea[0].getProcesosId.alias }}_pretitulo">{{ pregunta.preTitulo|trans({})|raw }}</div>
        {% else %}
            <div class="{{ tarea[0].getProcesosId.alias }}_pretitulo no-contenido">{{ pregunta.preTitulo|trans({})|raw }}</div>
        {%  endif %}
        <label for="{{ pregunta.alias }}" class="{{ tarea[0].getProcesosId.alias }}_nombre">{{ pregunta.nombre|trans({})|raw }}</label>
        {%  if pregunta.descripcion is not empty %}
            <div class="{{ tarea[0].getProcesosId.alias }}_descripcion">{{ pregunta.descripcion|trans({})|raw }}</div>
        {% else %}
            <div class="{{ tarea[0].getProcesosId.alias }}_descripcion no-contenido">{{ pregunta.descripcion|trans({})|raw }}</div>
        {%  endif %}
        {% if casoestudio is defined and casoestudio is not empty %}
            {% if respuestaca[pregunta.alias] is defined and respuestaca[pregunta.alias] is not empty %}
                <a class="btn btn-primary btn-sm casoestudiobtn" data-toggle="collapse" data-target="#casoestudio{{ pregunta.id }}">{{ 'Caso de estudio'|trans({}) }}</a>
                <div id="casoestudio{{ pregunta.id }}" class="collapse casoestudiodiv">
                    <pre>{{ respuestaca[pregunta.alias]|raw }}</pre>
                </div>
            {% endif %}
        {% else %}
            <a class="btn btn-primary btn-sm casoestudiobtn no-contenido" data-toggle="collapse" data-target="#casoestudio{{ pregunta.id }}"></a>
            <div id="casoestudio{{ pregunta.id }}" class="collapse casoestudiodiv no-contenido">
            </div>
        {% endif %}
        {% if app.user.getType == 'trainer' %}
            <div><label>{{ 'Green Entrepreneur Answer'|trans({}) }}</label>
                {% if respuestas is empty %}
                    <pre>{{ 'Not available'|trans({}) }}</pre>
                {% else %}
                    {% set encontrada = false %}
                    {% if respuesta[pregunta.alias] is defined %}
                        {% set encontrada=true %}
                        <pre>{{ respuesta[pregunta.alias] }}</pre>
                    {% endif %}
                    {% if not encontrada %}
                        <pre>{{ 'Not available'|trans({}) }}</pre>
                    {% endif %}
                {% endif %}
            </div>
            {% if pregunta.isRevisable  %}
                <div>
                    <label for="review-{{ pregunta.alias }}">{{ 'Supervisor Review Mark'|trans({}) }}</label>
                    <input type="checkbox" class="form-control icheckbox_minimal" data-sonata-icheck="false" id="review-{{ pregunta.alias }}" name="review-{{ pregunta.alias }}" {% if reviewed[pregunta.alias] is defined and reviewed[pregunta.alias] == true %} checked {% endif%} %}></input>
                </div>
                <div>
                    <label for="comment-{{ pregunta.alias }}">{{ 'Supervisor Comment'|trans({}) }}</label>
                    <textarea class="form-control" id="comment-{{ pregunta.alias }}" name="comment-{{ pregunta.alias }}"  rows="10"> {% if comentarios is defined and comentarios[pregunta.alias] is defined and comentarios[pregunta.alias].comentario is defined and comentarios[pregunta.alias].comentario is not empty %}{{ comentarios[pregunta.alias].comentario|raw}}{% endif %}</textarea>
                </div>
            {% endif %}
        {% endif %}
        {% if app.user.getType == 'green_entrepreneur' %}
            {% if respuestas is empty %}
                <span>{{ 'Select any column header before clicking Add new column button'|trans({})}}</span>
                <button type="btn btn-success btn-sm" id="btnAddRow{{ pregunta.alias }}">{{ 'Add New Row'|trans({}) }}</button>
                <button type="btn btn-danger btn-sm" id="btnAddCol{{ pregunta.alias }}">{{ 'Add New Column'|trans({}) }}</button>
                <br>
    			<input id="{{ pregunta.alias }}"  name="{{ pregunta.alias }}" type="hidden" value="">
                <table class="dataTable" id="{{ pregunta.alias }}_table"></table>
            {% else %}
                {% set encontrada = false %}
                {% if respuesta[pregunta.alias] is defined %}
                    {% set encontrada=true %}
                    <span>{{ 'Select any column header before clicking Add new column button'|trans({})}}</span>
                    <button type="btn btn-success btn-sm" id="btnAddRow{{ pregunta.alias }}">{{ 'Add New Row'|trans({}) }}</button>
                    <button type="btn btn-danger btn-sm" id="btnAddCol{{ pregunta.alias }}">{{ 'Add New Column'|trans({}) }}</button>
                    <br>

  					<input id="{{ pregunta.alias }}"  name="{{ pregunta.alias }}" type="hidden" value="{{respuesta[pregunta.alias]}}">
                    <table class="dataTable" id="{{ pregunta.alias }}_table"></table>
                    {% if pregunta.isRevisable and reviewed[pregunta.alias]  and comentarios[pregunta.alias].comentario is defined and comentarios[pregunta.alias].comentario is not empty%}
                        <div><label>{{ 'Supervisor Comment'|trans({}) }}</label>
                            <pre>{{ comentarios[pregunta.alias].comentario|raw }}</pre>
                        </div>
                    {% endif %}
                {% endif %}
                {% if not encontrada %}
                    <span>{{ 'Select any column header before clicking Add new column button'|trans({})}}</span>
                    <button type="btn btn-success btn-sm" id="btnAddRow{{ pregunta.alias }}">{{ 'Add New Row'|trans({}) }}</button>
                    <button type="btn btn-danger btn-sm" id="btnAddCol{{ pregunta.alias }}">{{ 'Add New Column'|trans({}) }}</button>
                    <br>
	      			<input id="{{ pregunta.alias }}"  name="{{ pregunta.alias }}" type="hidden" value="">
                    <table class="dataTable" id="{{ pregunta.alias }}_table"></table>
                {% endif %}

            {% endif %}
        {% endif %}
    </div>
    <script>
        var data_table{{ pregunta.alias }}, row_num{{ pregunta.alias }}, col_num{{ pregunta.alias }}, row_cell{{ pregunta.alias }}, col_cell{{ pregunta.alias }}, iter{{ pregunta.alias }}=0;
     
        var cols{{ pregunta.alias }} =[
           {% if respuesta[pregunta.alias] is defined and respuesta[pregunta.alias]|json_decode is not empty %}
          	{% for field in respuesta[pregunta.alias]|json_decode[0]|cast_to_array|keys %}
             {% if loop.first %}
            	{ "mDataProp": "{{field}}", sTitle: "{{field}}", sType : "string"},
            {% elseif loop.last %}
                { "mDataProp": "{{field}}",  sTitle: "{{field}}", sType : "string"}
            {% else %}
            	{ "mDataProp": "{{field}}",  sTitle: "{{field}}", sType : "string"},
            {% endif %}
            {% endfor %}
      {% else %}
            {% for field in pregunta.TipoPreguntaOptions|split(',') %}
            {% if loop.first %}
             	{ "mDataProp": "{{'Actions'|trans({})}}", sTitle: "{{'Actions'|trans({})}}", sType : "string"},
            	{ "mDataProp": "{{field}}", sTitle: "{{field}}", sType : "string"},
              {% elseif loop.last %}
                { "mDataProp": "{{field}}",  sTitle: "{{field}}", sType : "string"}
            {% else %}
            	{ "mDataProp": "{{field}}",  sTitle: "{{field}}", sType : "string"},
            {% endif %}
            {% endfor %}
            {% endif %}
        ];
      
        col_num{{ pregunta.alias }}={{pregunta.TipoPreguntaOptions|split(',')|length}};
        iter{{ pregunta.alias }}={{pregunta.TipoPreguntaOptions|split(',')|length}};

       if($('#{{ pregunta.alias }}').val()=== ""){
         var results{{ pregunta.alias }} = [{
           {% for field in pregunta.TipoPreguntaOptions|split(',') %}
            {% if loop.first %}
             	"{{'Actions'|trans({})}}":"<a href=\"#\" class=\"btn btn-warning\" onclick=\"deleteRow{{ pregunta.alias }}(this);\">{{'Delete'|trans({})}}</a>",
            	 "{{field}}": "{{'Edit me!'|trans({})}}", 
            {% elseif loop.last %}
                 "{{field}}": "{{'Edit me!'|trans({})}}"
            {% else %}
            	 "{{field}}": "{{'Edit me!'|trans({})}}",
            {% endif %}
            {% endfor %}
         }];
       }else{
          var results{{ pregunta.alias }} = JSON.parse($('#{{ pregunta.alias}}').val());
       }
        function initDT{{ pregunta.alias }}(){
            //Construct the measurement table
         	console.log(cols{{ pregunta.alias }});
            console.log(results{{ pregunta.alias }});

            data_table{{ pregunta.alias }} = $('#{{ pregunta.alias }}_table').dataTable({
                "bJQueryUI": true,
                "bDeferRender": true,
                "bInfo" : false,
                "bSort" : false,
                "bDestroy" : true,
                "bFilter" : false,
                "bPagination" : false,
                "aaData": results{{ pregunta.alias }},
                "aoColumns": cols{{ pregunta.alias }}
            });
            attachTableClickEventHandlers();
            $('#{{ pregunta.alias }}_table').find('tr:eq(0)')
            .children('th:gt(0)')
            .css('vertical-align', 'top')
            .prepend('<span class="btn btn-warning" style="cursor: pointer; width: 35px;" onclick="deleteCol{{ pregunta.alias }}(this)"><i class="fa fa-trash"></i></span>');
        }

        function attachTableClickEventHandlers(){
            //row/column indexing is zero based
            $("#{{ pregunta.alias }}_table thead tr th").click(function() {
                col_num{{ pregunta.alias }} = parseInt( $(this).index() );
                console.log("column_num ="+ col_num{{ pregunta.alias }} );
            });
            $("#{{ pregunta.alias }}_table tbody tr td").click(function() {
                col_cell{{ pregunta.alias }} = parseInt( $(this).index() );
                row_cell{{ pregunta.alias }} = parseInt( $(this).parent().index() );
                console.log("Row_num =" + row_cell{{ pregunta.alias }} + "  ,  column_num ="+ col_cell{{ pregunta.alias }} );
            });
        };
        $("#btnAddRow{{ pregunta.alias }}").click(function(e){
            e.preventDefault();
            //adding/removing row from datatable datasource
            var aoCols = data_table{{ pregunta.alias }}.fnSettings().aoColumns;
            var newRow = new Object();
            for(var iRec=0; iRec<aoCols.length; iRec++){
              	if(iRec==0){
                  newRow[aoCols[iRec].mDataProp] =  "<a href=\"#\" class=\"btn btn-warning\" onclick=\"deleteRow{{ pregunta.alias }}(this);\">{{'Delete'|trans({})}}</a>";
                }else{
                	newRow[aoCols[iRec].mDataProp] = '{{'Edit me!'|trans({})}}';
                }
            }
            results{{ pregunta.alias }}.splice(row_cell{{ pregunta.alias }}+1, 0, newRow);
            data_table{{ pregunta.alias }}.fnDestroy();
            //results.pop();
            initDT{{ pregunta.alias }}();
            cleanHeaderAndSave();
            addDBClikHandler{{ pregunta.alias }}();
        });

        $('#btnAddCol{{ pregunta.alias }}').click(function (e) {
            e.preventDefault();
            const { value: columnname }=  Swal.fire({
                    title: '{{'Enter new column title'|trans({})}}',
                    input: 'text',
                    inputValue: "",
                    showCancelButton: true,
                    inputValidator: (value) => {
                      if (!value) {
                        return '{{'You need to write something!'|trans({})}}'
                      }else{
                           iter{{ pregunta.alias }}++;
                        cols{{ pregunta.alias }}.splice(col_num{{ pregunta.alias }}+1, 0, {"mDataProp": value, sTitle: value , sType : "string"});

                        for(var iRes=0; iRes<results{{ pregunta.alias }}.length ;iRes++){
                            results{{ pregunta.alias }}[iRes][value] = "{{'Edit me!'|trans({})}}";
                        }
                        col_num{{ pregunta.alias }}++;
                        data_table{{ pregunta.alias }}.fnDestroy();
                        $("#{{ pregunta.alias }}_table thead tr").append('<th>Col-'+iter{{ pregunta.alias }}+'</th>');
                        initDT{{ pregunta.alias }}();
      					cleanHeaderAndSave();
                        addDBClikHandler{{ pregunta.alias }}();
                      }
                    }
                  });
      
        });
    
function restoreRow{{ pregunta.alias }} ( oTable, nRow ){
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    
    for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) 
    {
        oTable.fnUpdate( aData[i], nRow, i, false );
    }
};

function editRow{{ pregunta.alias }} ( oTable, nRow ){
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    jqTds[col_cell{{ pregunta.alias }}].innerHTML = '<input type="text" id ="typ" value="'+aData[cols{{ pregunta.alias }}[col_cell{{ pregunta.alias }}].mData]+'"/>';
};

function saveRow{{ pregunta.alias }}( oTable, nRow ){
    var jqInputs = $('input', nRow);
    oTable.fnUpdate( jqInputs[0].value, row_cell{{ pregunta.alias }}, col_cell{{ pregunta.alias }}, false );
    data_table{{ pregunta.alias }}.fnDestroy();
      
    initDT{{ pregunta.alias }}();
    cleanHeaderAndSave();
    addDBClikHandler{{ pregunta.alias }}();
};
function deleteRow{{ pregunta.alias }}( element ){
  event.preventDefault();
    var row = $(element).parents('tbody').children().index($(element).parents('tr'));

  data_table{{ pregunta.alias }}.api().row($(element).parents('tr')).remove().draw();
  console.log(row);
  results{{ pregunta.alias }}.splice(row,1);
  data_table{{ pregunta.alias }}.fnDestroy();
  
  initDT{{ pregunta.alias }}();
  cleanHeaderAndSave();
  addDBClikHandler{{ pregunta.alias }}();
};
function deleteCol{{ pregunta.alias }}( element ){
   event.preventDefault();
   var col = $(element).parents('thead').children().index($(element).parents('th'));
  //
   html=$(element).parents('th').html();
   html=html.replace('<span class="btn btn-warning" style="cursor: pointer; width: 35px;" onclick="deleteCol{{ pregunta.alias }}(this)"><i class="fa fa-trash"></i></span>', '');
   console.log(html);
    
   data_table{{ pregunta.alias }}.fnDestroy();
    cols{{ pregunta.alias }}.splice(col,1);
      for(i in results{{ pregunta.alias }}) {
          console.log(results{{ pregunta.alias }}[i]);
          delete results{{ pregunta.alias }}[i][html];
      }
   $('#{{ pregunta.alias }}_table thead tr th:last').remove();
   $('#{{ pregunta.alias }}_table tbody tr').each(function (index){
     $(this).find("td:last").remove();
   });
      
   initDT{{ pregunta.alias }}();
      cleanHeaderAndSave();
   addDBClikHandler{{ pregunta.alias }}();
     
}
function cleanHeaderAndSave(){
   $('#{{ pregunta.alias }}_table').find('tr:eq(0)')
            .children('th:gt(0)').each(function(index){
              $(this).html($(this).html().replace('<span class=\"btn btn-warning\" style=\"cursor: pointer; width: 35px;\" onclick=\"deleteCol{{ pregunta.alias }}(this)\"><i class=\"fa fa-trash\"></i></span>',''))
              });
         	$('#{{ pregunta.alias }}').val(JSON.stringify(tableToJSON($("#{{ pregunta.alias }}_table"))));
             $('#{{ pregunta.alias }}_table').find('tr:eq(0)')
            .children('th:gt(0)')
            .css('vertical-align', 'top')
            .prepend('<span class="btn btn-warning" style="cursor: pointer; width: 35px;" onclick="deleteCol{{ pregunta.alias }}(this)"><i class="fa fa-trash"></i></span>')
}
/*jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-uk-pre": function ( a ) {
        var ukDatea = a.split('/');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1
    },
    
    "date-uk-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    
    "date-uk-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );*/

/* Get the rows which are currently selected */
function fnGetSelected{{ pregunta.alias }}( oTableLocal ){
    var aReturn = new Array();
    var aTrs = oTableLocal.fnGetNodes();
    
    for ( var i=0 ; i<aTrs.length ; i++ )
    {
        if ( $(aTrs[i]).hasClass('row_selected') )
        {
            aReturn.push( aTrs[i] );
        }
    }
    return aReturn;
};

function addDBClikHandler{{ pregunta.alias }}(){
        $('#{{ pregunta.alias }}_table tbody tr').on('dblclick', function (e) {
        	e.preventDefault();
        
            var nRow = $(this)[0];
             var jqTds = $('>td', nRow);

            if($.trim(jqTds[0].innerHTML.substr(0,6)) != '<input') 
            {
                if ( nEditing{{ pregunta.alias }} !== null && nEditing{{ pregunta.alias }} !==nRow) {
                  console.log('Entra en distinto de null');
                    /* Currently editing - but not this row - restore the old before continuing to edit mode */
					restoreRow{{ pregunta.alias }}( oTable{{ pregunta.alias }}, nEditing{{ pregunta.alias }} );
            		nEditing{{ pregunta.alias }} = null;
                  
      				nEditing{{ pregunta.alias }} = nRow;
                    editRow{{ pregunta.alias }}( oTable{{ pregunta.alias }}, nRow );
                   
                }
                else {
                    /* No edit in progress - let's start one */
                      nEditing{{ pregunta.alias }} = nRow;
                      editRow{{ pregunta.alias }}( oTable{{ pregunta.alias }}, nRow );
                  
                }
                
            }
     } );
    
     $('#{{ pregunta.alias }}_table tbody tr').keydown(function(event){
    
        if(event.keyCode==13)
        {
        event.preventDefault();
    
         if(nEditing{{ pregunta.alias }}==null){
            alert("Select Row");
         }else{
            saveRow{{ pregunta.alias }}( oTable{{ pregunta.alias }}, nEditing{{ pregunta.alias }} );
            nEditing{{ pregunta.alias }} = null;
      }
        }
        /* Editing this row and want to save it */
    
    } );
    
    
};
function tableToJSON(tblObj){  
   var data = [];
   var $headers = $(tblObj).find("th");
   var $rows = $(tblObj).find("tbody tr").each(function(index) {
   $cells = $(this).find("td");
   data[index] = {};
   $cells.each(function(cellIndex) {
     data[index][$($headers[cellIndex]).html()] = $(this).html();
   });    
});
  return data;
}
var nEditing{{ pregunta.alias }} = null;

var oTable{{ pregunta.alias }} = null;

$(document).ready(function() {
    initDT{{ pregunta.alias }}();
    oTable{{ pregunta.alias }} = data_table{{ pregunta.alias }};  
    addDBClikHandler{{ pregunta.alias }}();
} );
    </script>
</div>