Calendar and Time Inputs are now Directives (Fixes #155)

[andresmanelli]

Con esta PR se solucionan los problemas de retardo al crear los elementos del DOM nombrados en #155.

Directives

Las dos creadas son de typo Attribute, es decir se colocan como atributo a un elemento HTML, en nuestro caso <input rsa-calendar-input> y <input rsa-time-input>. Ambas necesitan un atributo extra llamado daysSelected y limits respectivamente:

• daysSelected: Es un array de booleanos (uno por día de la semana - DoW). Representan qué días habilitar en la selección del calendario.
• limits: Object que contiene las keys start y end (ambas strings de formato XXhXX). Representan los límites de selección por default de los timepickers. Estos limites cambian al ir seleccionando horarios para evitar situaciones absurdas (como horario de inicio después de horario de fin)

  Snippets de src/app/edt/edt.tpl.html

<input rsa-calendar-input id="newActFrom{{periodIndex}}" type="text"
                                   placeholder="{{translation.edt['from']}}"
                                   class="sign-input" data-parsley-ui-enabled="false"•
                                   ng-model="dummyWhenFrom[periodIndex]"
                                   ng-change="newActWhenFrom(dummyWhenFrom[periodIndex], periodIndex)"
                                   ng-required="daySelected(periodIndex)"
                                   days-selected="newActDays[periodIndex]">

<input rsa-time-input 
           id="newActTimeFrom{{periodIndex}}-{{dayIndex}}-{{timeIndex}}"
           type="text" ng-model="time.from" placeholder="{{translation.edt['from']}}"
           class="sign-input" data-parsley-ui-enabled="false"
           ng-change="setMinTimeTo(periodIndex,dayIndex,timeIndex)"
           ng-required="newActDays[periodIndex][dayIndex]===true"
           limits="config.limits">

Solución

El método link de la directive se ejecuta luego de que se carga el DOM. Entonces es totalmente seguro aplicar las funciones de calendario y horarios. Lo que antes se hacía en un timeout (attachCalendar(...)) ahora se hace así:

.directive('rsaCalendarInput', function(){
            return {
                restrict: 'A',
                scope: {
                    daysSelected: '='
                },
                link: function(scope, element){
                    function renderCalendar(){
                        element.pickadate('picker').render();
                    }

                    scope.$watchCollection('daysSelected', function(){
                        renderCalendar();
                    });

                    element.pickadate({
                        min: new Date(),
                        format: 'dd/mm/yyyy',
                        firstDay: 1, //Monday
                        disable: [
                            true,
                            function(){ return scope.daysSelected.map(function(boolDay,i){i=i+1; i=(i===7?0:i); return boolDay?i:10;}); }
                        ]
                    });
                }
            };
        });

Snapshots

[andresmanelli]

Faltan las traducciones, el finde lo agrego.

[fcladera]

Está muy bueno!!! Me gusta además porque la otra opción de escribir horas era un embole.

Hay una cosa que no me cierra, y es que el alto sea variable. Cuando apretás por primera vez, para seleccionar el horario de inicio, se despliega un menú kilométrico. Hay chances de hacer alto fijo + flechitas? Si la estoy flasheando mucho, decime.

[andresmanelli]

Seguro se pueda poner algo de css para eso. Don't worry

-----Message d'origine----- De : "Fernando Cladera" notifications@github.com Envoyé : ‎29/‎04/‎2016 19:22 À : "MecatronicaUncu/Red-Social-Asociacion" Red-Social-Asociacion@noreply.github.com Cc : "Andrés" andresmanelli@gmail.com; "Author" author@noreply.github.com Objet : Re: [MecatronicaUncu/Red-Social-Asociacion] Calendar and Time Inputsare now Directives (Fixes #155) (#164)

Está muy bueno!!! Me gusta además porque la otra opción de escribir horas era un embole. Hay una cosa que no me cierra, y es que el alto sea variable. Cuando apretás por primera vez, para seleccionar el horario de inicio, se despliega un menú kilométrico. Hay chances de hacer alto fijo + flechitas? Si la estoy flasheando mucho, decime. — You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub