All
This commit is contained in:
@@ -15,6 +15,7 @@ const store = reactive({
|
||||
perPage: 10,
|
||||
modal_state: "Cargando datos...",
|
||||
justificada: null,
|
||||
fechas_clicked: false,
|
||||
},
|
||||
facultades: {
|
||||
data: [],
|
||||
@@ -32,7 +33,6 @@ const store = reactive({
|
||||
profesor: null,
|
||||
periodo_id: null,
|
||||
bloque_horario: null,
|
||||
sin_registro: false,
|
||||
estados: [],
|
||||
switchFecha: false,
|
||||
async switchFechas() {
|
||||
@@ -54,10 +54,12 @@ const store = reactive({
|
||||
const fecha = $("#fecha"), inicio = $("#fecha_inicio"), fin = $("#fecha_fin");
|
||||
fecha.datepicker("setDate", new Date(`${periodo_data.fecha_final}:00:00:00`));
|
||||
inicio.on("change", function () {
|
||||
store.current.fechas_clicked = false;
|
||||
store.filters.fecha_inicio = inicio.val();
|
||||
fin.datepicker("option", "minDate", inicio.val());
|
||||
});
|
||||
fin.on("change", function () {
|
||||
store.current.fechas_clicked = false;
|
||||
store.filters.fecha_fin = fin.val();
|
||||
inicio.datepicker("option", "maxDate", fin.val());
|
||||
});
|
||||
@@ -70,6 +72,7 @@ const store = reactive({
|
||||
});
|
||||
},
|
||||
async fetchByDate() {
|
||||
store.current.fechas_clicked = true;
|
||||
$('div.modal#cargando').modal('show');
|
||||
await store.registros.fetch(undefined, store.filters.fecha_inicio, store.filters.fecha_fin);
|
||||
store.current.page = 1;
|
||||
@@ -84,7 +87,12 @@ const store = reactive({
|
||||
this.data = await res.json();
|
||||
},
|
||||
getEstado(id) {
|
||||
return this.data.find((estado) => estado.estado_supervisor_id === id);
|
||||
return this.data.find((estado) => estado.estado_supervisor_id === id) ?? {
|
||||
estado_color: 'dark',
|
||||
estado_icon: 'ing-cancelar',
|
||||
nombre: 'Sin registro',
|
||||
estado_supervisor_id: -1,
|
||||
};
|
||||
},
|
||||
printEstados() {
|
||||
if (store.filters.estados.length > 0)
|
||||
@@ -108,7 +116,7 @@ const store = reactive({
|
||||
toggle(arr, element) {
|
||||
const newArray = arr.includes(element) ? arr.filter((item) => item !== element) : [...arr, element];
|
||||
// if all are selected, then unselect all
|
||||
if (newArray.length === this.estados.data.length) {
|
||||
if (newArray.length === (this.estados.data.length + 1)) {
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('#dlAsistencia>ul>li.selected').forEach(element => element.classList.remove('selected'));
|
||||
}, 100);
|
||||
@@ -213,16 +221,13 @@ const store = reactive({
|
||||
case 'estados':
|
||||
if (store.filters[filtro].length === 0)
|
||||
return true;
|
||||
else if (store.filters[filtro].includes(-1) && registro.estado_supervisor_id === null)
|
||||
return true;
|
||||
return store.filters[filtro].includes(registro.estado_supervisor_id);
|
||||
case 'bloque_horario':
|
||||
const bloque = store.bloques_horario.data.find((bloque) => bloque.id === store.filters[filtro]);
|
||||
return registro.horario_hora < bloque.hora_fin && registro.horario_fin > bloque.hora_inicio;
|
||||
default: {
|
||||
if (store.filters.sin_registro)
|
||||
return !registro.registro_fecha_supervisor;
|
||||
else
|
||||
return registro.registro_fecha_supervisor;
|
||||
}
|
||||
default: return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
293
js/datalist.js
293
js/datalist.js
@@ -1,264 +1,43 @@
|
||||
/*
|
||||
* Selects con datalist
|
||||
*/
|
||||
var click_in_process = false;
|
||||
var visible = false;
|
||||
|
||||
$('.datalist-text .datalist-input').on('focusin', function () {
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
|
||||
elementRoot.find(".icono").show();
|
||||
elementRoot.find("ul").show();
|
||||
elementRoot.find(".datalist-input").trigger("keyup");
|
||||
});
|
||||
|
||||
|
||||
|
||||
function ocultaList(e) {
|
||||
(e.data.padre).find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
||||
(e.data.padre).find('ul').hide();
|
||||
// $('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
||||
// $('.datalist ul').hide();
|
||||
}
|
||||
|
||||
function ocultaTodos() {
|
||||
$('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
||||
$('.datalist ul').hide();
|
||||
}
|
||||
|
||||
//$('.datalist-input').click(function(){
|
||||
$(document).on('click', '.datalist-input', function () {
|
||||
var elementRoot = $(this).parent();
|
||||
limpiaInput({ "data": { "padre": elementRoot } });
|
||||
|
||||
const alreadyOpen = elementRoot.find('ul').is(':visible');
|
||||
if (alreadyOpen) {
|
||||
setTimeout(() => {
|
||||
ocultaTodos();
|
||||
}, 0);
|
||||
// stop all jquery animations
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!elementRoot.hasClass("disabled")) {
|
||||
elementRoot.find('ul').show();
|
||||
elementRoot.find('.datalist-input').focus();
|
||||
elementRoot.find('ul').show();
|
||||
elementRoot.find('.icono').removeClass('ing-buscar').addClass('ing-cancelar iconoAzul pointer');
|
||||
elementRoot.find('.icono').on('click', { "padre": elementRoot }, limpiaInput);
|
||||
elementRoot.find('.icono').on('click', { "padre": elementRoot }, ocultaList);
|
||||
}
|
||||
|
||||
// if other datalist is open, close it
|
||||
$('.datalist').each(function () {
|
||||
// get the input hidden from the datalist
|
||||
var inputHidden = $(this).find('input[type="hidden"]').attr('id');
|
||||
// get the input hidden from the datalist that was clicked
|
||||
var inputHiddenClicked = elementRoot.find('input[type="hidden"]').attr('id');
|
||||
if ($(this).find('ul').is(':visible') && inputHidden != inputHiddenClicked) {
|
||||
$(this).find('ul').hide();
|
||||
$(this).find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
//usar class="selected" para marcar seleccioando por default
|
||||
$(function () {
|
||||
$.each($(".datalist").find('ul li:not(.not-selectable)'), function () {
|
||||
if ($(this).hasClass("selected")) {
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
||||
var cid = $(this).data('id');
|
||||
elementRoot.find("input[type=hidden]").val(cid);
|
||||
}
|
||||
});
|
||||
const toggleIcon = (el, fromClass, toClass) => $(el).removeClass(fromClass).addClass(toClass);
|
||||
|
||||
// add not-selectable class to all li elements and the .datalist-input element
|
||||
$('.datalist-input ul li, .datalist-input').addClass('user-select-none');
|
||||
});
|
||||
const ocultaTodos = () => {
|
||||
toggleIcon('.datalist .icono', 'ing-cancelar iconoAzul pointer', 'ing-buscar');
|
||||
$('.datalist ul').hide();
|
||||
};
|
||||
|
||||
$(document).on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
||||
// $(this).parent('ul').siblings('input[type="text"]').blur();
|
||||
ocultaList({ "data": { "padre": elementRoot } });
|
||||
var cid = $(this).data('id');
|
||||
elementRoot.find("input[type=hidden]").val(cid);
|
||||
elementRoot.find("li").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
elementRoot.removeClass("datalist-invalid");
|
||||
});
|
||||
$(document)
|
||||
.on('click', '.datalist-input,.icono', function () {
|
||||
const parent = $(this).parent();
|
||||
$(".datalist ul:visible").not(parent.find('ul')).siblings('.datalist-input').trigger('click');
|
||||
if (parent.find('ul').is(':visible') || parent.hasClass("disabled")) return ocultaTodos();
|
||||
|
||||
$('.modal').on('hide.bs.modal', function (e) {
|
||||
$('.datalist .icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
||||
$('.datalist ul').hide();
|
||||
});
|
||||
|
||||
function setDatalist(selector, value = -1) {
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
$.each(elementRoot.find('ul li:not(.not-selectable)'), function () {
|
||||
if ($(this).data("id") == value) {
|
||||
elementRoot.find('.datalist-input').text($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
||||
$(selector).val(value);
|
||||
elementRoot.find("li").removeClass("selected");
|
||||
parent.find('ul, .datalist-input').show();
|
||||
toggleIcon(parent.find('.icono'), 'ing-buscar', 'ing-cancelar iconoAzul pointer');
|
||||
})
|
||||
.on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
|
||||
const parent = $(this).closest('.datalist');
|
||||
parent.find('.datalist-input').text($(this).text().trim());
|
||||
parent.find("input[type=hidden]").val($(this).data('id'));
|
||||
$('.datalist li').removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
}
|
||||
parent.removeClass("datalist-invalid");
|
||||
ocultaTodos();
|
||||
})
|
||||
.on('click', (e) => {
|
||||
if (!$(e.target).closest('.datalist').length) ocultaTodos();
|
||||
});
|
||||
|
||||
$('.modal').on('hide.bs.modal', ocultaTodos);
|
||||
});
|
||||
const setDatalist = (selector, value = -1) => {
|
||||
const parent = $(selector).closest('.datalist');
|
||||
parent.find('ul li:not(.not-selectable)').each(function () {
|
||||
if ($(this).data("id") !== value) return;
|
||||
parent.find('.datalist-input').text($(this).text().trim());
|
||||
$(selector).val(value);
|
||||
$('.datalist li').removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
});
|
||||
}
|
||||
|
||||
function setDatalistFirst(selector) {
|
||||
var index = 1;
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
var num = elementRoot.find('ul li:not(.not-selectable)').length;
|
||||
if (index <= num) {
|
||||
while (elementRoot.find('ul li:nth-child(' + index + ')').hasClass("not-selectable") && index <= num) {
|
||||
index++;
|
||||
}
|
||||
var element = elementRoot.find('ul li:nth-child(' + index + ')');
|
||||
elementRoot.find('.datalist-input').text(element.html().replace(/[\t\n]+/g, ' ').trim());
|
||||
$(selector).val(element.data("id"));
|
||||
elementRoot.find("li").removeClass("selected");
|
||||
element.addClass("selected");
|
||||
}
|
||||
}
|
||||
|
||||
function disableDatalist(selector, disabled = true) {
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
if (disabled) {
|
||||
elementRoot.addClass("disabled");
|
||||
ocultaList({ "data": { "padre": elementRoot } });
|
||||
} else
|
||||
elementRoot.removeClass("disabled");
|
||||
}
|
||||
|
||||
function invalidDatalist(selector, invalid = true) {
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
if (invalid) {
|
||||
elementRoot.addClass("datalist-invalid");
|
||||
} else
|
||||
elementRoot.removeClass("datalist-invalid");
|
||||
}
|
||||
|
||||
function buscaDatalist(selector, valor) {
|
||||
selector.find('ul li').each(function () {
|
||||
var elem = $(this);
|
||||
if ($(this).parent().is('li'))
|
||||
elem = $(this).parent();
|
||||
if (!$(this).html().toUpperCase().includes(valor.toUpperCase())) {
|
||||
$(elem).hide();
|
||||
selector.find('.datalist-input').val("");
|
||||
selector.find("input[type=hidden]").val("");
|
||||
} else
|
||||
$(elem).show();
|
||||
});
|
||||
}
|
||||
function getDatalistText(selector, valor) {
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
var text = "";
|
||||
$.each(elementRoot.find('ul li:not(.not-selectable)'), function () {
|
||||
if ($(this).data("id") == valor) {
|
||||
text = $(this).html();
|
||||
}
|
||||
});
|
||||
return text;
|
||||
}
|
||||
//---
|
||||
$('.datalist-text .datalist-input').keyup(function () {
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
var input = $(this);
|
||||
elementRoot.find('ul li').each(function () {
|
||||
var elem = $(this);
|
||||
if ($(this).parent().is('li'))
|
||||
elem = $(this).parent();
|
||||
if (!$(this).html().toUpperCase().includes(input.val().toUpperCase()))
|
||||
$(elem).hide();
|
||||
else
|
||||
$(elem).show();
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
$('.datalist-text input').blur(function() {
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
console.log("Click? "+click_in_process);
|
||||
if(!click_in_process) {
|
||||
buscaDatalist(elementRoot, elementRoot.find('.datalist-input').val());
|
||||
|
||||
elementRoot.find('.icono').removeClass('ing-cancelar iconoAzul pointer').addClass('ing-buscar');
|
||||
elementRoot.find('ul').children('li').show();
|
||||
elementRoot.find('ul').hide();
|
||||
}
|
||||
click_in_process = false;
|
||||
});
|
||||
*/
|
||||
|
||||
$('.datalist-text > ul li:not(.not-selectable)').click(function () {
|
||||
console.log("Li click!" + $(this).html());
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
elementRoot.find('.datalist-input').val($(this).html().replace(/[\t\n]+/g, ' ').trim());
|
||||
|
||||
//$(this).parent('ul').siblings('input[type="text"]').blur();
|
||||
|
||||
var cid = $(this).data('id');
|
||||
elementRoot.find("input[type=hidden]").val(cid);
|
||||
elementRoot.find("li").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
click_in_process = true;
|
||||
//elementRoot.find('.datalist-input').blur();
|
||||
ocultaList({ "data": { "padre": elementRoot } });
|
||||
});
|
||||
|
||||
/* $('.datalist-text .datalist-input').click(function () {
|
||||
var elementRoot = $(this).parents('.datalist');
|
||||
limpiaInput({ "data": { "padre": elementRoot } });
|
||||
const alreadyOpen = elementRoot.find('ul').is(':visible');
|
||||
console.log("Click! " + alreadyOpen);
|
||||
elementRoot.find('ul').show();
|
||||
elementRoot.find('input').focus();
|
||||
elementRoot.find('ul').show();
|
||||
elementRoot.find('.icono').removeClass('ing-buscar').addClass('ing-cancelar iconoAzul pointer');
|
||||
elementRoot.find('.icono').on('click', { "padre": elementRoot }, limpiaInput);
|
||||
}); */
|
||||
|
||||
$(document).on('click', function (e) {
|
||||
var target = $(e.target);
|
||||
// or if you click in the .datalist-input and the datalist is visible
|
||||
let isDatalist = target.parents().addBack().is('.datalist');
|
||||
// alert(isDatalist);
|
||||
|
||||
if (!isDatalist)
|
||||
ocultaList({ "data": { "padre": $('.datalist') } });
|
||||
// if the data list is visible and you click in the input, hide the list
|
||||
});
|
||||
|
||||
|
||||
function limpiaInput(e) {
|
||||
(e.data.padre).find('.datalist-input').val('');
|
||||
(e.data.padre).find('.datalist-input').parent().children('ul').children('li').show();
|
||||
(e.data.padre).find('li:first').focus();
|
||||
(e.data.padre).find('.datalist-input').focus();
|
||||
|
||||
}
|
||||
|
||||
// function make required
|
||||
function makeRequiredDatalist(selector, required = true) {
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
if (required)
|
||||
elementRoot.addClass("required");
|
||||
else
|
||||
elementRoot.removeClass("required");
|
||||
}
|
||||
|
||||
// function validate
|
||||
function validateDatalist(selector) {
|
||||
var elementRoot = $(selector).parents('.datalist');
|
||||
if (elementRoot.hasClass("required") && $(selector).val() == "") {
|
||||
invalidDatalist(selector, true);
|
||||
return false;
|
||||
}
|
||||
invalidDatalist(selector, false);
|
||||
return true;
|
||||
}
|
||||
const makeRequiredDatalist = (selector, required = true) => $(selector).closest('.datalist').toggleClass("required", required);
|
||||
Reference in New Issue
Block a user