source: seiven/productivo/templates/productivo.unidad.economica.html @ accc529

Last change on this file since accc529 was accc529, checked in by Ing. Roldan D. Vargas G <rvargas@…>, 6 años ago

documentación en código de función ajax que permite obtener los datos de las unidades económicas.
Agregada clase en checkbox de filtros para restringir la consulta de datos si no se han seleccionado.
Comentarios y optimización en instrucciones jquery para limitar el acceso a secciones de consulta si previamente no se han indicado datos
  • Propiedad mode establecida a 100644
File size: 12.0 KB
Línea 
1{% extends 'base.template.html' %}
2{% load productivo_filtros %}
3{% load i18n %}
4{% load static from staticfiles %}
5{% block content_header_title %}{% trans 'CONSULTAR DATOS' %}{% endblock %}
6{% block content_header_roadmap %}
7    <li><a href="{% url 'productivo-consultar-datos' %}">{% trans 'Producción - Consultar Datos' %}</a></li>
8    <li class="active">{% block active_link %}{% trans 'Unidad Económica' %}{% endblock %}</li>
9{% endblock %}
10{% block content %}
11    <div class="panel panel-produccion">
12        <div class="panel-heading">
13            <h2 class="panel-title">{% trans 'Productivo' %} - {% trans 'Unidad Económica' %}</h2>
14        </div>
15        <div class="panel-body">
16            <form action="" class="form form-horizontal" method="post" autocomplete="off" id="form-consulta">
17                {% csrf_token %}
18                <div class="row">
19                    <div class="col-md-12">
20                        <div class="form-group {% if form.anho.errors %}has-error{% endif %}">
21                            <label class="col-md-1 control-label" for="{{ form.anho.auto_id }}">
22                                {{ form.anho.label }}
23                            </label>
24                            <div class="col-md-10">
25                                <div class="form-inline">
26                                    {{ form.anho }}
27                                    {% include 'base.form.errors.html' with form_errors=form.anho.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
28                                </div>
29                            </div>
30                        </div>
31                    </div>
32                </div>
33                <hr>
34                <h4>{% trans 'Realice la búsqueda por una de las tres categorías' %}</h4>
35                <div class="row">
36                    <div class="col-md-4">
37                        <div class="form-group {% if form.nombre.errors %}has-error{% endif %}">
38                            <label class="col-md-4 control-label" for="{{ form.nombre.auto_id }}">
39                                {{ form.nombre.label }}
40                            </label>
41                            <div class="col-md-8">
42                                <div class="form-inline">
43                                    {{ form.nombre }}
44                                    {% include 'base.form.errors.html' with form_errors=form.nombre.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
45                                </div>
46                            </div>
47                        </div>
48                    </div>
49                    <div class="col-md-4">
50                        <div class="form-group {% if form.rif.errors %}has-error{% endif %}">
51                            <label class="col-md-4 control-label" for="{{ form.rif.auto_id }}">
52                                {{ form.rif.label }}
53                            </label>
54                            <div class="col-md-8">
55                                <div class="form-inline">
56                                    {{ form.rif }}
57                                    {% include 'base.form.errors.html' with form_errors=form.rif.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
58                                </div>
59                            </div>
60                        </div>
61                    </div>
62                    <div class="col-md-4">
63                        <div class="form-group {% if form.estado.errors %}has-error{% endif %}">
64                            <label class="col-md-4 control-label" for="{{ form.estado.auto_id }}">
65                                {{ form.estado.label }}
66                            </label>
67                            <div class="col-md-8">
68                                <div class="form-inline">
69                                    {{ form.estado }}
70                                    {% include 'base.form.errors.html' with form_errors=form.estado.errors col_title_error='col-sm-2' col_msg_error='col-sm-10' %}
71                                </div>
72                            </div>
73                        </div>
74                    </div>
75                </div>
76                <div class="row">
77                    <div class="col-md-6 col-xs-6 text-center">
78                        <button type="button" class="btn btn-warning" id="buscar">{% trans 'Buscar' %}</button>
79                    </div>
80                    <div class="col-md-6 col-sx-6 text-center">
81                        <button type="reset" class="btn btn-warning">{% trans 'Limpiar' %}</button>
82                    </div>
83                </div>
84            </form>
85            {% include 'productivo.ue.datos.consultados.html' %}
86            {% include 'productivo.ue.filtros.consulta.html' %}
87            {% include 'productivo.ue.resultado.filtros.html' %}
88        </div>
89    </div>
90{% endblock %}
91
92{% block extra_footer %}
93    <script>
94        show_hide_elements([], [$("#datos-consultados"), $('#filtros-consulta'), $('#resultado-filtros')]);
95
96        $(document).ready(function(){
97            /**
98             * Evento que permite buscar datos de las Unidades Económicas de acuerdo a los datos de consulta indicados
99             * por el usuario
100             */
101            $("#buscar").on('click', function(){
102                $.ajax({
103                    type: 'POST',
104                    url: "{% url 'get_unidad_economica' %}",
105                    data: {
106                        anho: $("#{{ form.anho.auto_id }}").val(),
107                        rif: $("#{{ form.rif.auto_id }}").val(),
108                        nombre: $("#{{ form.nombre.auto_id }}").val(),
109                        estado: $("#{{ form.estado.auto_id }}").val(),
110                        csrfmiddlewaretoken: '{{ csrf_token }}'
111                    },
112                    dataType: 'JSON',
113                    success: function(data) {
114                        if (data.result) {
115                            var dataSet = [];
116                            $.each(data.unidades_economicas, function(index, datos) {
117                                dataSet.push([
118                                    '<input type="checkbox" class="ue_consulted" value="'+datos.pk+'">',
119                                    datos.nombre_ue, datos.rif, datos.razon_social, ''
120                                ]);
121                            });
122
123                            $("#result-consult").DataTable({
124                                "destroy": true,
125                                                "data": dataSet
126                            });
127                            show_hide_elements([$("#datos-consultados")], []);
128
129                        }
130                        else {
131                            bootbox.alert(data.message);
132                        }
133                    },
134                    error: function(jqxhr, textStatus, error) {
135                        var err = textStatus + ", " + error + ", " + jqxhr.responseJSON;
136                        console.log( err );
137                    }
138                }).fail(function(jqxhr, textStatus, error) {
139                    console.log(textStatus + ", " + error + ", " + jqxhr.responseJSON);
140                });
141            });
142
143            /** Evento que muestra los datos a seleccionar para filtrar la información de consulta */
144            $("#btn-next-filtros").on('click', function() {
145                var is_checked_ue = false;
146                $(".ue_consulted").each(function() {
147                    if ($(this).is(':checked')) {
148                        is_checked_ue = true;
149                    }
150                });
151                if (!is_checked_ue) {
152                    bootbox.alert('Debe seleccionar al menos una Unidad Económica para obtener información');
153                    return false;
154                }
155                show_hide_elements([$('#filtros-consulta')], [
156                    $("#form-consulta .row"), $("#datos-consultados"),$('#resultado-filtros')
157                ]);
158            });
159
160            /** Evento que muestra el resultado según los filtros de consulta indicados por el usuario */
161            $("#btn-next-filtros-results").on('click', function() {
162                var is_checked_filters = false;
163                $(".filtros").each(function() {
164                    if ($(this).is(':checked')) {
165                        is_checked_filters = true;
166                    }
167                });
168                if (!is_checked_filters) {
169                    bootbox.alert('Debe seleccionar al menos un filtro de consulta para obtener información');
170                    return false;
171                }
172                show_hide_elements([$('#resultado-filtros')], [
173                    $("#form-consulta .row"), $("#datos-consultados"), $('#filtros-consulta')
174                ]);
175            });
176
177            /** Evento que permite iniciar un nuevo procedimiento de consulta de datos */
178            $("#btn-new-consult").on('click', function() {
179                $(location).attr('href', '{% url 'consultar_unidad_economica' %}');
180            });
181
182            /** Evento que permite seleccionar o deseleccionar todas las Unidades Económicas a consultar */
183            $("#check_all").on('click', function() {
184                var check_all = $(this);
185                $(".ue_consulted").each(function() {
186                    $(this).prop('checked', check_all.is(':checked'));
187                });
188            });
189
190            /** Valida el número máximo de filtros a seleccionar para la categoría de búsqueda de Unidad Económica */
191            validar_max_filtros($("#opciones-unidad_economica input[type=checkbox]"));
192            /** Valida el número máximo de filtros a seleccionar para la categoría de búsqueda de Subunidad Económica */
193            validar_max_filtros($("#opciones-sub_unidad_economica input[type=checkbox]"));
194            /** Valida el número máximo de filtros a seleccionar para la categoría de búsqueda del proceso productivo */
195            validar_max_filtros($("#opciones-proceso_productivo input[type=checkbox]"));
196            /** Valida el número máximo de filtros a seleccionar para la categoría de búsqueda dela actividad económica */
197            validar_max_filtros($("#opciones-actividad_economica input[type=checkbox]"));
198
199        });
200
201
202        /**
203         * Función que permite validar el número máximo de filtros a seleccionar para la consulta de información
204         * @param element object Elemento del DOM que va a ser evaluado para considerar el número máximo de elementos
205         *                       a seleccionar
206         * @param max integer    Número máximo de elementos permitidos, por defecto el valor es de 6
207         * @return Devuelve falso cuando el número máximo de elementos ha sido seleccionado
208         */
209        function validar_max_filtros(element, max) {
210            max = (typeof (max) !== 'undefined')?max:6;
211
212            /** Evento que evalúa si ya se alcanzo el límite máximo permitido para la selección de filtros */
213            element.on('click', function() {
214                var count_opt = 0, opt_clicked = $(this);
215                element.each(function() {
216                    if ($(this).is(':checked')) {
217                        count_opt++;
218                    }
219                    if (count_opt > max) {
220                        bootbox.alert('Solo se permite filtrar un máximo de 6 opciones');
221                        opt_clicked.prop('checked', false);
222                        return false;
223                    }
224                });
225            });
226        }
227
228        /**
229         * Función que permite mostrar u ocultar elementos del DOM
230         * @param to_show array Arreglo de elementos a mostrar
231         * @param to_hide array Arreglo de elementos a ocultar
232         */
233        function show_hide_elements(to_show, to_hide) {
234            /** Evalúa el arreglo de elementos del DOM a mostrar */
235            $.each(to_show, function(index, element) {
236                element.show();
237            });
238            /** Evalúa el arreglo de elementos del DOM a ocultar */
239            $.each(to_hide, function(index, element) {
240                element.hide();
241            });
242        }
243    </script>
244{% endblock %}
Nota: Vea TracBrowser para ayuda de uso del navegador del repositorio.