https://campoalegre-huila.gov.co/SiteAssets/v1/assets/generic-components/ADMAcordeon/assets/js/ui.js

1export const paintAccordion = (data) => {
2    const ACCORDION = document.querySelector(".accordion");
3    ACCORDION.innerHTML = "";
4
5    // Crear un mapa para almacenar los elementos por su IdPadre
6    const map = {};
7    data.forEach((item) => {
8        const { IdPadre } = item;
9        if (!map[IdPadre]) {
10            map[IdPadre] = [];
11        }
12        map[IdPadre].push(item);
13    });
14
15    // Función recursiva para construir el acordeón
16    const buildAccordion = (items, parentId = null) => {
17        return items.map((accordionItem) => {
18            const { Title, item, Pagina, IdPrincipal } = accordionItem;
19
20            // Asegurarse de que no se genere un bucle infinito al verificar si tiene hijos
21            const children = map[accordionItem.IdPrincipal] || [];
22            const hasChildren = children.length > 0;
23
24            if (!hasChildren) {
25                return AccordionLink(Title, item, Pagina, IdPrincipal);
26            }
27
28            return (
29                `<div class="accordion-item last:border-0 bg-color2 rounded-lg overflow-hidden" data-expanded="false">
30                    <button type="button" class="accordion-header border-0 bg-transparent flex px-6 py-4 justify-between gap-4 items-center w-full group/accordion transition-all duration-300 ease-in-out [&.active]:bg-color2 hover:bg-color2 active">
31                        <span class="text-lg font-medium text-black text-start">${item} ${Title}</span>
32                        <div class="flex gap-4 justify-end w-1/6 content-center items-center">
33                            <span class="admin cursor-pointer btn-edit" data-id="${IdPrincipal}">
34                                <i class="fa-solid fa-pen-to-square text-[20px] text-black hover:!text-yellow-500 transition-all transform hover:scale-105"></i>
35                            </span>
36                            <span class="admin cursor-pointer btn-add" data-id="${IdPrincipal}">
37                                <i class="fa-solid fa-file-import text-[20px] text-black hover:!text-green-500 transition-all transform hover:scale-105"></i>
38                            </span>
39                             <span class="admin cursor-pointer btn-delete" data-id="${IdPrincipal}">
40                                <i class="fa-solid fa-trash text-[20px] text-black hover:!text-red-500 transition-all transform hover:scale-105"></i>            
41                            </span>
42
43                            <!-- Icono de la flecha que ya existía -->
44                            <span class="shrink-0 text-2xl leading-none transition-all duration-300 ease-in-out group-[.active]/accordion:rotate-180">
45                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
46                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
47                                    <path d="M6 9l6 6l6 -6" />
48                                </svg>
49                            </span>
50                        </div>
51                    </button>
52                    <div class="accordion-collapse">
53                        <ul class="p-5 flex flex-col gap-3">
54                            ${buildAccordion(children, accordionItem.IdPrincipal)}
55                        </ul>
56                    </div>
57                </div>`
58            );
59            
60            
61        }).join("");
62    };
63
64    // Iniciar el proceso de construcción del acordeón con los elementos raíz
65    const rootItems = data.filter(item => !item.IdPadre);
66    ACCORDION.innerHTML += buildAccordion(rootItems);
67};
68
69function AccordionLink(Title, Item, Pagina, IdPrincipal) {
70  return (
71    `<li class="flex justify-between p-2 bg-white rounded-lg">
72        <a href="${Pagina}" class="text-black hover:underline hover:text-blue-800 w-full">
73        ${Item} ${Title}
74        </a>
75        <div class="flex gap-5 justify-end w-1/6  items-center relative right-[10px]">

76            <span class="admin cursor-pointer btn-edit" data-id="${IdPrincipal}">
77                <i class="fa-solid fa-pen-to-square text-[12px] text-black hover:!text-yellow-500 transition-all transform hover:scale-105"></i>
78            </span>
79            <span class="admin cursor-pointer btn-add" data-id="${IdPrincipal}">
80                <i class="fa-solid fa-file-import text-[12px] text-black  hover:!text-green-500 transition-all transform hover:scale-105"></i>
81            </span>
82                <span class="admin cursor-pointer btn-delete" data-id="${IdPrincipal}">
83                <i class="fa-solid fa-trash text-[12px] text-black hover:!text-red-500 transition-all transform hover:scale-105"></i>            
84            </span>
85        </div>
86    </li>
87    `
88  );
89}
90
91
92
93
94
95
96