Esta web utiliza cookies propias y de terceros para su funcionamiento. ¿Aceptas? Leer más
PanelController

addGridView()

Añade una vista para editar un registro "padre" de un modelo y multiples registros "hijos" de un modelo. La edición de los registros hijos se realiza mediante el componente handsontable que nos permite editar los datos a modo de hoja de cálculo. Se usa dentro de la función createViews() del PanelController donde además de crear la vista padre, debemos indicar al crear la vista detalle cual será la vista padre de la que depende. Para el correcto funcionamiento se debe usar la plantilla GridController. Igualmente, se debe implementar la carga de datos en la función loadData() del PanelController.

Ejemplo de uso:

protected function createViews()
{
    $this->addEditView('\FacturaScripts\Dinamic\Model\Asiento', 'EditAsiento', 'accounting-entry', 'fa-balance-scale');
    $this->addGridView('EditAsiento', '\FacturaScripts\Dinamic\Model\Partida', 'EditPartida', 'accounting-items');
    $this->setTemplate('GridController');
}

protected function loadData($viewName, $view)
{
    switch ($viewName) {
        case 'EditAsiento':
                $code = $this->request->get('code');
                $view->loadData($code);
                break;

            case 'EditPartida':
                $idasiento = $this->getViewModelValue('EditAsiento', 'idasiento');
                if (!empty($idasiento)) {
                    $where = [new DataBaseWhere('idasiento', $idasiento)];
                    $orderby = ['idpartida' => 'ASC'];
                    $view->loadData($where, $orderby);
                }
                break;
    }
}

La plantilla GridController añade la carga de archivos y la creación de los objetos necesarios para gestionar el grid de datos, y crea una nuevo bloque denominado gridcard donde inserta el mismo. Los datos son cargados en una variable de JavaScript denominada documentLineData y la visualización se realiza dentro de un card de bootstrap, en el 'body' con el identificador document-lines.

Estos procesos sólo son incluidos cuando ya existe un registro de datos en el modelo padre. En caso de ser un alta nueva, sólo se visualizará el formulario para introducir los datos del padre y al grabar se refrescará la página visualizando el grid de datos.

Personalización:

Aunque estas tareas se realizan de manera automática es posible personalizar la apariencia creando una nueva vista twig que herede de GridController sobrescribiendo el bloque gridcard.

        {% block gridcard %}
        <div class="col-9 mr-2">
            <div class="card">
                <div class="card-header">
                    <span><small id="account-description"></small></span>
                    <span class="float-right"><small><strong>{{ i18n.trans('unbalance') }}:&nbsp;<span id="unbalance">0.00</span></strong></small></span>
                </div>
                <div class="body">
                    <div id="document-lines"></div>
                </div>
            </div>
        </div>
        {% endblock %}

Grabación de datos:

Además debemos incluir la carga de un archivo JavaScript donde personalizar los eventos del grid. Este archivo debe llamarse igual que el controlador y estar ubicado en la carpeta Core\Assets\JS. Usaremos la función $(document).ready para introducir los eventos a controlar. En la versión actual, es obligatorio redefinir la grabación de datos cuando ya existe el registro padre, para que PanelController no use el proceso de grabación normal sino el proceso de GridView.

        function saveAccountEntry() {
            submitButton.prop("disabled", true);
            try {
                var mainForm = $("form[name^='EditAsiento-']");
                var data = {
                    action: "save-document",
                    lines: getGridData('orden'),
                    document: {}
                };

                $.each(mainForm.serializeArray(), function(key, value) {
                    switch (value.name) {
                        case 'action':
                            break;

                        case 'active':
                            data[value.name] = value.value;
                            break;

                        default:
                            data.document[value.name] = value.value;
                            break;
                    }
                });

                $.post(
                    documentUrl,
                    data,
                    function (results) {
                        if (results.error) {
                            alert(results.message);
                            return;
                        }
                        location.reload();
                    });
            } finally {
                submitButton.prop("disabled", false);
                return false;
            }
        }

        $(document).ready(function () {
            if (document.getElementById("document-lines")) {
                // Rewrite submit action
                submitButton = $("button[id^='submit-EditAsiento-']");
                submitButton.on('click', saveAccountEntry);

                // Add control events to Grid Controller
                addEvent('beforeChange', data_beforeChange);
                addEvent('afterSelection', data_afterSelection);
            }
        });