https://amaga-antioquia.gov.co/scripts/DirectivosFuncionarios/assets/js/funcionesUI.js

1import { consumirDatosFuncionarios, 
2        funcionarioFiltradoCategoria, 
3        consultaInfoModal, 
4        consultaCategoriasSlider, 
5        consultaBusquedaInput } from './consultaFuncionarios.js';
6
7import { pintarCardsFuncionarios, 
8          pintarInfoModal, 
9          pintarItemsCategoria } from './pintarFuncionarios.js';
10
11import { showCurrentPage } from './paginador.js';
12
13//Llamando funcion al cargar la pagina
14const datosFuncionarios = await consumirDatosFuncionarios();
15await showCurrentPage(datosFuncionarios);
16
17//Pintar items de categoria
18const datosCategorias = await consultaCategoriasSlider();
19await pintarItemsCategoria(datosCategorias);
20abrirModal();
21
22//Slider categorias
23const mySwiperCategorias = new Swiper(".categorias", {
24  breakpoints: {
25      // when window width is >= 320px
26      0: {
27        slidesPerView: 1,
28        spaceBetween: 10,
29      },
30
31      340: {
32        slidesPerView: 2,
33        spaceBetween: 10,
34      },
35      640: {
36          slidesPerView: 3,
37          spaceBetween: 10,
38      },
39      720: {
40          slidesPerView: 4,
41          spaceBetween: 10,
42      },
43
44  },
45
46  navigation: {
47      nextEl: ".swiper-button-next",
48      prevEl: ".swiper-button-prev",
49  },
50});
51
52
53//Cargar informacion en el modal
54//Funcion modal
55// Obtenemos el botón para abrir la ventana modal y la ventana modal misma
56export function abrirModal() {
57
58  const openBtnModal = document.querySelectorAll('.btn__funcionario');
59
60  const modal = document.getElementById("myModal");
61
62  // Obtenemos el elemento <span> que cierra la ventana modal
63  const closeSpan = document.querySelector(".close");
64
65
66  // Evento al hacer clic en el botón para abrir la ventana modal
67  openBtnModal.forEach(btn =>{
68      btn.addEventListener('click', async (e)=>{
69
70          e.preventDefault();
71          let idFuncionario = e.target.closest('.funcionario__item').dataset.id;
72          const datosModal = await consultaInfoModal(idFuncionario);
73          pintarInfoModal(datosModal);
74
75          modal.style.display = "block";
76      });
77  });
78
79  // Evento al hacer clic en el botón para cerrar la ventana modal
80  closeSpan.addEventListener("click", () => {
81    modal.style.display = "none";
82  });
83
84  // Evento para cerrar la ventana modal si se hace clic fuera de ella
85  window.addEventListener("click", (event) => {
86    if (event.target === modal) {
87      modal.style.display = "none";
88    }
89  });
90}
91
92// Funcion filtro por categorias
93const categorias = document.querySelector('.categorias');
94
95categorias.addEventListener('click', async (e)=>{
96
97  if(e.target.closest('.categorias__item')){
98
99    const categoriaActiva = document.querySelector('.categorias__item--active');
100
101    categoriaActiva.classList.remove('categorias__item--active');
102
103    e.target.classList.toggle('categorias__item--active');
104

105    const categoriaSeleccionada = e.target.closest('.categorias__item--active').dataset.target;
106
107    let datos = await funcionarioFiltradoCategoria(categoriaSeleccionada);
108
109    showCurrentPage(datos);
110
111    abrirModal();
112    
113  };
114  
115});
116
117//Funcion de busqueda
118const input = document.querySelector('.buscador__funcionarios');
119const btn_buscar = document.querySelector('#btn__buscar');
120let valueInput;
121
122const funcionBusqueda = async () => {
123  valueInput = document.querySelector('.buscador__funcionarios').value;
124      
125      if(valueInput){
126        const datosBuscados = await consultaBusquedaInput(valueInput);
127
128        //pintarCardsFuncionarios(datosBuscados);
129        showCurrentPage(datosBuscados);
130        abrirModal();
131      }else {
132        //await pintarCardsFuncionarios(datosFuncionarios);
133        showCurrentPage(datosFuncionarios);
134        abrirModal();
135      };
136};
137
138input.addEventListener('focus', async function(event) {
139
140  input.addEventListener('keypress', async function(event) {
141    // Verificar si la tecla presionada es "Enter"
142    if (event.keyCode === 13) {
143      event.preventDefault();
144      funcionBusqueda();
145    }
146  });
147
148  btn_buscar.addEventListener('click', async (e) => {
149    e.preventDefault();
150    funcionBusqueda();
151  });
152  
153});
154
155//Evento eliminar texto de input
156const btn__borrar = document.getElementById('btn__borrar');
157
158input.addEventListener('keyup', (e) => {
159
160  if(input.value.length > 0){
161    btn__borrar.style.display = 'block';
162    btn__borrar.addEventListener('click', async (e) =>{
163      e.preventDefault();
164
165      input.value = '';
166      btn__borrar.style.display = 'none';
167
168      let datosBuscados = await consumirDatosFuncionarios();
169
170      //pintarCardsFuncionarios(datosBuscados);
171      showCurrentPage(datosBuscados);
172    });
173  }
174  else{
175    btn__borrar.style.display = 'none';
176  }
177});