https://palermo-huila.gov.co/SiteAssets/V3/Componentes/ADMAcordeon/assets/js/app.js

1import { Accordion } from "./acordionFunctions.js";
2import {
3  consulteAcordion,
4  insertData,
5  getLastIdPrincipal,
6  getElementByID,
7  updateData,
8  deleteData,
9  getIdElementInList,
10} from "./services.js";
11import { paintAccordion } from "./ui.js";
12
13document.addEventListener("DOMContentLoaded", () => {
14  consulteAcordion()
15    .then((data) => {
16      paintAccordion(data);
17    })
18    .then(() => {
19      Accordion();
20    });
21});
22
23document.addEventListener("click", async (event) => {
24  event.stopPropagation();
25  const buttonAdd = event.target.closest(".btn-add"); // Captura el botón correcto
26  if (buttonAdd) {
27    await handleAddItem(buttonAdd);
28  }
29
30  const buttonEdit = event.target.closest(".btn-edit"); // Captura el botón correcto
31  if (buttonEdit) {
32    console.log("Editar elemento", buttonEdit);
33    handleEditItem(buttonEdit);
34    //await handleEditItem(buttonEdit);
35  }
36
37  const buttonDelete = event.target.closest(".btn-delete"); // Captura el botón correcto
38    if (buttonDelete) {
39        console.log("Eliminar elemento", buttonDelete);
40        handleDeleteItem(buttonDelete);
41        //await handleEditItem(buttonEdit);
42    }
43});
44
45// Función para agregar un nuevo elemento al acordeón
46async function handleAddItem(button) {
47  const parentId = button.dataset.id || null; // Obtiene el ID del acordeón padre
48
49  const formInsert = `
50            <section class="flex items-center justify-center">
51        <div class="bg-white p-6 rounded-lg w-96">
52            <form id="insertForm">
53                <div class="mb-3">
54                    <label for="title" class="block text-gray-600">Ingrese el nombre del nuevo elemento:</label>
55                    <input type="text" name="title" required
56                        class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
57                </div>
58                
59                <div class="mb-3">
60                    <label for="pagina" class="block text-gray-600">Ingrese la URL del nuevo elemento:</label>
61                    <input type="text" name="pagina" required
62                        class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
63                </div>
64                
65                <div class="mb-4">
66                    <label for="item" class="block text-gray-600">Ingrese el número de <span class="font-semibold">Item</span> del nuevo elemento:</label>
67                    <input type="text" name="item" required
68                        class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
69                </div>
70            </form>
71        </div>
72    </section>`;
73
74  Swal.fire({
75    title: "Agregar nuevo elemento",
76    html: formInsert,
77    showCloseButton: true,
78    showCancelButton: true,
79    focusConfirm: false,
80    confirmButtonText: "Guardar",
81  }).then(async (result) => {
82    if (result.isConfirmed) {
83      const form = document.getElementById("insertForm");
84      const data = {
85        __metadata: { type: "SP.Data.AcordeonListItem" }, // Asegúrate de que el nombre de la lista sea correcto
86        IdPrincipal: (await getLastIdPrincipal()) + 1,
87        Title: form.title.value,
88        item: form.item.value,
89        IdPadre: parentId,
90        Pagina: form.pagina.value || "#",
91      };
92
93      const response = await insertData(data);
94
95      if (response) {
96        location.reload();
97      }
98    }
99  });
100}
101
102// Función para editar un elemento del acordeón
103async function handleEditItem(button) {
104  const id = button.dataset.id || null; // Obtiene el ID del acordeón padre
105
106  const item = await getElementByID(id);
107
108  const idElement = await getIdElementInList(id);
109  console.log("ID Elemento", idElement);
110
111  const form = `
112            <section class="flex justify-center items-center">
113                <form id="editForm" class="bg-white p-6 rounded-lg w-96">
114                    <div class="flex items-center mb-3">
115                        <label for="title" class="w-24 text-start text-gray-600">Título:</label>
116                        <input type="text" name="title" value="${item[0].Title}" required
117                            class="flex-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
118                    </div>
119                    
120                    <div class="flex items-center mb-3">
121                        <label for="item" class="w-24 text-start text-gray-600">Item:</label>
122                        <input type="text" name="item" value="${item[0].item}" required
123                            class="flex-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
124                    </div>
125                    
126                    <div class="flex items-center mb-3">
127                        <label for="pagina" class="w-24 text-start text-gray-600">Página:</label>
128                        <input type="text" name="pagina" value="${item[0].Pagina}" required
129                            class="flex-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
130                    </div>
131                </form>
132            </section>`;
133
134  Swal.fire({
135    title: "Editar elemento",
136    html: form,
137    showCloseButton: true,
138    showCancelButton: true,
139    focusConfirm: false,
140    confirmButtonText: "Guardar",
141  }).then(async (result) => {
142    if (result.isConfirmed) {
143      const form = document.getElementById("editForm");
144      const data = {
145        __metadata: { type: "SP.Data.AcordeonListItem" }, // Asegúrate de que el nombre de la lista sea correcto
146        Title: form.title.value,
147        item: form.item.value,
148        Pagina: form.pagina.value,
149      };
150      console.log("Data", data);
151      const response = await updateData(data, idElement);
152      if (response) {
153        location.reload();
154      }
155    }
156  });
157}
158
159//Fuicion para eliminar un elemento del acordeon
160async function handleDeleteItem(button) {
161    const id = button.dataset.id || null;
162    
163    if (!id) {
164        console.error("ID no válido");
165        return;
166    }
167
168    const idElement = await getIdElementInList(id);
169    console.log("ID Elemento", idElement);
170
171    Swal.fire({
172        title: "¿Estás seguro?",
173        text: "Esta acción no se puede deshacer.",
174        icon: "warning",
175        showCancelButton: true,
176        confirmButtonColor: "#d33",
177        cancelButtonColor: "#3085d6",
178        confirmButtonText: "Sí, eliminar",
179    }).then(async (result) => {
180        if (result.isConfirmed) {
181            const response = await deleteData(idElement);
182            if (response) {
183                location.reload();
184            }
185        }
186    });

187}
188