I’ve had a lot of troubles to display a datetimepicker inside a bootstrap modal window. I’ve tried several ways to display the datetimepicker but none of them worked (delegate, z-index, etc.)

The problem I think, is we tried to initialize the datetimepicker before it gets added to the DOM, because of the animation on the modal window.
I tried also to initialize the datetimepicker on the ‘opened’ event of the modal window like so

<div class="row">
            <div class="'col-sm-3'">
                <div class="form-group">
                    <div class="'input-group" id="'datetimepicker'">

                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-time"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
var modal = $modal.open({
      templateUrl: ...,
      controller: ...
});
modal.result.then(function (result) {
     $state.go('avisos', null, {reload: true});
}, function () {
    $state.go('^');
 });

modal.opened.then(function(){
     console.log('modal opened');
     $('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY'});
});

the event gets fired before the datetimepicker is in place and therefore not initialized correctly. So, the solution for me was to initialize the datetimepicker in a timeout function inside my angular controller

setTimeout(function () {
     $('#datetimepicker').datetimepicker({
         format: 'DD/MM/YYYY'
     });
}, 1000);
Anuncios

Screenshot from 2017-10-04 14-18-42

we needed to filter the events on a fullcalendar. The fullcalendar retrieves the events from the server through a REST service like so

<div id="calendar"></div>
$scope.calendar.fullCalendar({
                header: ...,
                defaultView: 'agendaWeek',
                events: function (start, end, timezone, callback) {
                    Audiencia.findByDates({inicio: start.format('YYYY-MM-DD'), fin: end.format('YYYY-MM-DD')}, function (data) {
                        var events = data.map(function (audiencia) {
                            return {
                                start: moment(audiencia.inicio).tz('America/Mexico_City'),
                                end: moment(audiencia.fin).tz('America/Mexico_City'),
                                title: audiencia.nuc || (audiencia.sala ? audiencia.sala.nombre : 'Audiencia'),
                                audiencia: audiencia,
                                backgroundColor: audiencia.tipoAudiencia.color
                            };
                        });
                        callback(events);
                    });
                },

here we used a $resource called Audiencia which retrieves the events from the server. we have to map the properties in the Audiencia objects to the Event object expected by the fullcalendar, nothing special.
Then, when a select option is changed we need to filter the events accordingly, so we need to add the select control and bind the event.

<div class="row">
        <div class="col-sm-6">
            <div class="form-inline">
                <div class="form-group">
                    Juez 

                        TODOS

                </div>
            </div>
        </div>
    </div>
    <div id="calendar"></div>
$scope.filtro = {
                juez: null
            };

$scope.jueces = Juez.query();

$scope.refrescarAudiencias = function (juez) {
                $scope.calendar.fullCalendar('rerenderEvents');
            };

$scope.calendar.fullCalendar({
                header: ...,
                defaultView: ...,
                events: ...,
                eventRender: function (event, element) {
                    var audiencia = event.audiencia;
                    if ($scope.filtro.juez && !audiencia.jueces.reduce(
                            function (prev, current) {
                                return $scope.filtro.juez.id === prev.id || $scope.filtro.juez.id === current.id;
                            })) {
                        return false;
                    }
                },...

here the important part is the eventRender function that is called for each event and when it returns false, the event is not displayed, thus filtered.
In the example the object Audiencia contains an array of Juez and if the selected Juez matches any of the Juez in the audiencia it is shown, otherwise it is not. We used the reduce function which takes an array and produce a single value, boolean in this case. Notice that we added an extra option ‘TODOS’ to display all events, if it gets selected $scope.filtro.juez is null and thus is not filtered.

We could also have used the filter function like this

eventRender: function (event, element) {
                    var audiencia = event.audiencia;
                    var display = true;
                    if($scope.filtro.juez){
                        display = audiencia.jueces.filter(function(juez){
                            return $scope.filtro.juez.id === juez.id;
                        }).length > 0;
                    }
                    if(!display){
                        return false;
                    }
}...

it depends on your preference and the readability of the code.

sources:
https://stackoverflow.com/questions/6641355/jquery-fullcalendar-event-filtering
https://fullcalendar.io/docs/

Screenshot from 2017-10-04 12-59-43

To allow our users to quickly chage the events displayed on a fullcalendar.js we thought we could use the bootstrap-datetimepicker to select the date and update the fullcalendar accordingly.

You just need to create your calendar as usual, and add the datetimepicker above, binding its ‘dp.change’ event to fire the gotoDate method on the calendar

<div class="row">
        <div class="'col-sm-3'">
            <div class="form-group">
                <div class="'input-group" id="'datetimepicker'">

                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div id="calendar"></div>
$scope.datetimepicker = $("#datetimepicker").datetimepicker({
                useCurrent: false,
                locale: 'es-MX',
                format: 'DD/MM/YYYY',
                showTodayButton: true
            }).on('dp.change', function(e){
                $scope.calendar.fullCalendar('gotoDate', e.date);
            });

$scope.calendar.fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek'
...

sources:
https://fullcalendar.io/docs/
http://eonasdan.github.io/bootstrap-datetimepicker/

I was trying to simplify the following lines with java 8

this.audiencias = new ArrayList<>();
        for(Audiencia audiencia: carpeta.getAudiencias()){
            this.audiencias.add(new AudienciaDTO(audiencia));
        }

to this

this.audiencias = carpeta.getAudiencias.stream().map(AudienciaDTO::new).collect(Collectors.toList());

although it seems correct, and no error was thrown, it was returning an empty list.

As it happens, the list type is important. The attribute this.audiencias is of type Collection and carpeta.getAudiencias returns the same type, but the method stream() apparently only works with List types.

If I change the code to

List<Audiencia> asList = new ArrayList(carpeta.getAudiencias());
        this.audiencias = asList.stream().map(AudienciaDTO::new).collect(Collectors.toList());

it works as expected, but it is cumbersome the need to convert the Collection to a List type first.

for a one liner it would be

this.audiencias = new ArrayList<>(carpeta.getAudiencias()).stream().map(AudienciaDTO::new).collect(Collectors.toList());

fuentes:
http://tutorials.jenkov.com/java-collections/streams.html
https://docs.oracle.com/javase/tutorial/collections/interfaces/index.html

En una tabla de wordpress se guarda un registro donde se concatenan los id’s de las imagenes adjuntas a un tipo de post, por ejemplo

meta_value
27954,27955,27956,27958,27960,27962,27964,

para encontrar los posts (de tipo attachment) que corresponden a estos id’s podemos utilizar la función find_in_set de la siguiente manera

select p.post_title, concat('http://localhost/wp-content/uploads/', m.meta_value) image_url
from wptv_posts p 
join wptv_postmeta m on p.id = m.post_id
where 1 = 1 
and m.meta_key = '_wp_attached_file'
and find_in_set(p.id, 
(select m.meta_value
from wptv_posts p
join wptv_postmeta m on p.id = m.post_id
where 1 = 1
 and p.id = 27116
 and m.meta_key = 'image_to_attach'
 )) &gt; 0

en esta consulta utilizamos primero una subconsulta para encontrar la información ‘meta’, del post que nos interesa, donde estan las referencias a los archivos adjuntos y luego buscamos el atributo ‘_wp_attached_file’ para los registros encontrados para formar la ruta a las imagenes mediante la función concat.

Un ejemplo sin la subconsulta sería el siguiente

select p.post_title, concat('http://localhost/wp-content/uploads/', m.meta_value) image_url
from wptv_posts p 
join wptv_postmeta m on p.id = m.post_id
where 1 = 1 
and m.meta_key = '_wp_attached_file'
and find_in_set(p.id, 
'27954,27955,27956,27958,27960,27962,27964,') &gt; 0

La función find_in_set regresa el índice del elemento si lo encuentra en el arreglo de cadena, por ello filtramos los registros en que es mayor a cero (si se encontró).

fuentes:
https://stackoverflow.com/questions/2153149/mysql-select-in-from-string

Para concatenar campos en Oracle utilizas el caracter ‘|’ (pipe), por ejemplo

select ‘titulo ‘ || ‘largo’ from dual;

En mySQL se utiliza una función llamada concat, por ejemplo

select concat(‘titulo ‘, ‘largo’);

nótese además que en mySQL no se utiliza una tabla auxiliar para ejecutar el query.

fuentes:
https://stackoverflow.com/questions/19261760/concatenate-string-with-field-value-in-mysql

Supongamos que tienes un reporte en el que quieres ocultar un listado de una consulta de acuerdo al valor de un parámetro.

Podríamos ocultarlo fácilmente mediante la opción de visibilidad ‘Properties | Visibility | Hide element’ y utilizar una expresión como la siguiente

params[‘ocultarDetalles’].value === true

Screenshot from 2017-06-23 15-02-13

pero la consulta se ejecutaría de cualquier manera, lo que ocasionaría tiempo y procesamiento innecesario.

Para que no se ejecuté la consulta, es necesario remover el elemento que queremos ocultar en el método ‘beforeFactory’ del reporte. Para ello, primero necesitamos especificar el nombre al elemento que queremos ocultar, yo utilicé un grid el cual contiene la tabla de la consulta y lo nombré grdDetalles.
Screenshot from 2017-06-23 15-28-46

Luego selecciona la pestaña ‘Script’ y en la ventana ‘Outline’ selecciona el reporte. Asegurate seleccionar el evento ‘beforeFactory’ y agrega el siguiente script

if (params['ocultarDetalles'].value === true) {
    reportContext.getDesignHandle().findElement("grdDetalles").drop();
}

Screenshot from 2017-06-23 15-01-23

con esto se evita que se realice innecesariamente la consulta.

fuentes:
http://developer.actuate.com/community/forum/index.php?/topic/34143-does-birt-still-execute-a-query-if-an-element-is-hidden/