feat(prov_servidor): add many2many integrations linking
- ProvServidor model: add Integraciones []Submodules (many2many:prov_servidor_submodules) - GetAllProvServidor: preload Integraciones - SetProvServidorIntegraciones: new model func to replace associations - New endpoint PUT /app/provservidor/:id/integraciones - GetSubmodules: support ?limit= query param - prov_servidor.html: show integrations as badges in table, view modal, and edit modal with checkboxes to select one or more existing submodules Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Copilot
Copilot
parent
c834e40e83
commit
b4b60810a1
@@ -9,7 +9,8 @@ import (
|
||||
|
||||
type ProvServidor struct {
|
||||
gorm.Model
|
||||
Nombre string `json:"nombre" gorm:"column:nombre"`
|
||||
Nombre string `json:"nombre" gorm:"column:nombre"`
|
||||
Integraciones []Submodules `json:"integraciones" gorm:"many2many:prov_servidor_submodules;"`
|
||||
}
|
||||
|
||||
func (ProvServidor) TableName() string {
|
||||
@@ -30,7 +31,7 @@ func GetAllProvServidor(search string) ([]ProvServidor, int64, error) {
|
||||
return nil, 0, err
|
||||
}
|
||||
|
||||
if err := db.Order("created_at DESC").Find(&items).Error; err != nil {
|
||||
if err := db.Preload("Integraciones").Order("created_at DESC").Find(&items).Error; err != nil {
|
||||
log.Printf("Error retrieving proveedores: %v", err)
|
||||
return nil, 0, err
|
||||
}
|
||||
@@ -58,3 +59,19 @@ func DeleteProvServidor(provServidor ProvServidor) error {
|
||||
}
|
||||
return nil
|
||||
}
|
||||
|
||||
// SetIntegraciones reemplaza todas las integraciones del proveedor con los IDs dados.
|
||||
func SetProvServidorIntegraciones(provServidorID uint, submoduleIDs []uint) error {
|
||||
db := app.Http.Database.DB
|
||||
var prov ProvServidor
|
||||
if err := db.First(&prov, provServidorID).Error; err != nil {
|
||||
return err
|
||||
}
|
||||
var subs []Submodules
|
||||
if len(submoduleIDs) > 0 {
|
||||
if err := db.Where("id IN ?", submoduleIDs).Find(&subs).Error; err != nil {
|
||||
return err
|
||||
}
|
||||
}
|
||||
return db.Model(&prov).Association("Integraciones").Replace(subs)
|
||||
}
|
||||
|
||||
Executable → Regular
+97
-35
@@ -26,6 +26,7 @@
|
||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||
<tr class="text-left font-semibold border-collapse">
|
||||
<th class="py-2 px-3 border-b">Nombre</th>
|
||||
<th class="py-2 px-3 border-b">Integraciones</th>
|
||||
<th class="py-2 px-3 border-b"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -33,6 +34,18 @@
|
||||
<template x-for="data in datos" :key="data.id">
|
||||
<tr class="hover:bg-gray-100">
|
||||
<td class="py-3 text-xs px-3 border-b" x-text="data.nombre"></td>
|
||||
<td class="py-3 text-xs px-3 border-b">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<template x-if="data.integraciones && data.integraciones.length > 0">
|
||||
<template x-for="integ in data.integraciones" :key="integ.id">
|
||||
<span class="bg-blue-100 text-blue-700 text-xs px-2 py-0.5 rounded-full" x-text="integ.title"></span>
|
||||
</template>
|
||||
</template>
|
||||
<template x-if="!data.integraciones || data.integraciones.length === 0">
|
||||
<span class="text-gray-400 italic">—</span>
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 text-xs px-3 border-b w-24">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(data)" title="Ver">
|
||||
@@ -83,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales -->
|
||||
<!-- Modal Ver -->
|
||||
<div x-show="viewModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
@@ -97,12 +110,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block mb-2 font-semibold">Integraciones relacionadas:</label>
|
||||
<div class="flex flex-wrap gap-2 min-h-8">
|
||||
<template x-if="selectedItem.integraciones && selectedItem.integraciones.length > 0">
|
||||
<template x-for="integ in selectedItem.integraciones" :key="integ.id">
|
||||
<span class="bg-blue-100 text-blue-700 text-xs px-3 py-1 rounded-full" x-text="integ.title"></span>
|
||||
</template>
|
||||
</template>
|
||||
<template x-if="!selectedItem.integraciones || selectedItem.integraciones.length === 0">
|
||||
<span class="text-gray-400 text-xs italic">Sin integraciones relacionadas</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 text-sm">
|
||||
<button @click="viewModal = false" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Editar -->
|
||||
<div x-show="editModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
@@ -116,6 +144,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Integraciones -->
|
||||
<div class="mb-4">
|
||||
<label class="block mb-2 font-semibold">Integraciones:</label>
|
||||
<div class="border border-gray-200 rounded p-3 max-h-48 overflow-y-auto">
|
||||
<template x-if="submodules.length === 0">
|
||||
<p class="text-gray-400 text-xs">Cargando...</p>
|
||||
</template>
|
||||
<template x-for="sub in submodules" :key="sub.id">
|
||||
<label class="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 rounded px-1">
|
||||
<input type="checkbox"
|
||||
:value="sub.id"
|
||||
:checked="isIntegSelected(sub.id)"
|
||||
@change="toggleInteg(sub.id)"
|
||||
class="rounded" />
|
||||
<span class="text-sm" x-text="sub.title"></span>
|
||||
<span class="text-xs text-gray-400" x-text="sub.url"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between gap-2 text-sm">
|
||||
<button @click="updateItem()" class="px-4 py-2 bg-[#8eb02f] text-white rounded">Actualizar</button>
|
||||
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||
@@ -123,6 +172,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Añadir -->
|
||||
<div x-show="addModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center text-sm z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||
@@ -143,6 +193,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Eliminar -->
|
||||
<div x-show="deleteModal"
|
||||
class="fixed inset-0 overflow-auto bg-gray-800 bg-opacity-75 flex justify-center items-center z-40">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg text-sm">
|
||||
@@ -150,7 +201,6 @@
|
||||
|
||||
<p>¿Estás seguro de que deseas eliminar este registro?</p>
|
||||
|
||||
|
||||
<div class="flex mt-4 justify-end gap-2 text-sm">
|
||||
<button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded">Eliminar</button>
|
||||
<button @click="closeModals()" class="bg-gray-600 text-white px-4 py-2 rounded">Cancelar</button>
|
||||
@@ -163,13 +213,14 @@
|
||||
function app() {
|
||||
return {
|
||||
datos: [],
|
||||
submodules: [],
|
||||
selectedIntegIds: [],
|
||||
loading: false,
|
||||
limit: 10,
|
||||
page: 1,
|
||||
search: '',
|
||||
totalPages: 0,
|
||||
paginatedPages: [],
|
||||
// modales
|
||||
viewModal: false,
|
||||
addModal: false,
|
||||
editModal: false,
|
||||
@@ -178,8 +229,7 @@
|
||||
errors: {},
|
||||
init() {
|
||||
this.loadData();
|
||||
this.loadProvServidor();
|
||||
this.loadTipoServidor();
|
||||
this.loadSubmodules();
|
||||
},
|
||||
loadData() {
|
||||
if (this.search !== '') {
|
||||
@@ -190,17 +240,17 @@
|
||||
}
|
||||
this.setLoading(true);
|
||||
axios.get('/app/loadprovservidor', {
|
||||
params: {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
search: this.search
|
||||
}
|
||||
params: { page: this.page, limit: this.limit, search: this.search }
|
||||
}).then(response => {
|
||||
this.datos = response.data.registros.map(data => ({
|
||||
id: data.ID,
|
||||
nombre: data.nombre,
|
||||
integraciones: (data.integraciones || []).map(s => ({
|
||||
id: s.ID,
|
||||
title: s.title,
|
||||
url: s.url,
|
||||
})),
|
||||
}));
|
||||
|
||||
this.totalPages = response.data.totalPages;
|
||||
this.calculatePaginatedPages();
|
||||
}).catch(error => {
|
||||
@@ -209,12 +259,36 @@
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
loadSubmodules() {
|
||||
axios.get('/app/loadsubmodules', { params: { limit: 200, page: 1 } })
|
||||
.then(response => {
|
||||
this.submodules = (response.data.registros || response.data.submodules || []).map(s => ({
|
||||
id: s.ID,
|
||||
title: s.title,
|
||||
url: s.url,
|
||||
}));
|
||||
})
|
||||
.catch(err => console.error('Error cargando submodules:', err));
|
||||
},
|
||||
isIntegSelected(id) {
|
||||
return this.selectedIntegIds.includes(id);
|
||||
},
|
||||
toggleInteg(id) {
|
||||
const idx = this.selectedIntegIds.indexOf(id);
|
||||
if (idx >= 0) {
|
||||
this.selectedIntegIds.splice(idx, 1);
|
||||
} else {
|
||||
this.selectedIntegIds.push(id);
|
||||
}
|
||||
},
|
||||
setSelectedItem(data) {
|
||||
this.selectedItem = { ...data };
|
||||
this.selectedIntegIds = (data.integraciones || []).map(i => i.id);
|
||||
this.errors = {};
|
||||
},
|
||||
resetSelectedItem() {
|
||||
this.selectedItem = {};
|
||||
this.selectedIntegIds = [];
|
||||
this.errors = {};
|
||||
},
|
||||
calculatePaginatedPages() {
|
||||
@@ -230,16 +304,6 @@
|
||||
setLoading(value) {
|
||||
this.loading = value;
|
||||
},
|
||||
// validateFields(fields) {
|
||||
// this.errors = {};
|
||||
// fields.forEach(field => {
|
||||
// if (!this.selectedItem[field]) {
|
||||
// this.errors[field] = 'Este campo es obligatorio';
|
||||
// }
|
||||
// });
|
||||
// return Object.keys(this.errors).length === 0;
|
||||
// },
|
||||
|
||||
openViewModal(data) {
|
||||
this.setSelectedItem(data);
|
||||
this.viewModal = true;
|
||||
@@ -248,7 +312,6 @@
|
||||
this.setSelectedItem(data);
|
||||
this.editModal = true;
|
||||
},
|
||||
|
||||
deleteItem() {
|
||||
this.setLoading(true);
|
||||
axios.delete(`/app/provservidor/${this.selectedItem.id}`)
|
||||
@@ -263,7 +326,6 @@
|
||||
},
|
||||
openDeleteModal(data) {
|
||||
this.selectedItem.id = data.id;
|
||||
|
||||
this.deleteModal = true;
|
||||
},
|
||||
closeModals() {
|
||||
@@ -271,12 +333,10 @@
|
||||
this.addModal = false;
|
||||
this.editModal = false;
|
||||
this.deleteModal = false;
|
||||
|
||||
this.resetSelectedItem();
|
||||
},
|
||||
addItem() {
|
||||
this.setLoading(true);
|
||||
|
||||
axios.post('/app/provservidor', this.selectedItem)
|
||||
.then(response => {
|
||||
alert("Proveedor añadido exitosamente.");
|
||||
@@ -285,22 +345,24 @@
|
||||
this.loadData();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error al añadir el servidor:", error);
|
||||
console.error("Error al añadir el proveedor:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setLoading(false);
|
||||
});
|
||||
},
|
||||
|
||||
updateItem() {
|
||||
const dataToSend = {
|
||||
nombre: this.selectedItem.nombre
|
||||
};
|
||||
|
||||
this.setLoading(true);
|
||||
|
||||
axios.put(`/app/provservidor/${this.selectedItem.id}`, dataToSend)
|
||||
.then(response => {
|
||||
const id = this.selectedItem.id;
|
||||
// Actualizar nombre
|
||||
axios.put(`/app/provservidor/${id}`, { nombre: this.selectedItem.nombre })
|
||||
.then(() => {
|
||||
// Sincronizar integraciones
|
||||
return axios.put(`/app/provservidor/${id}/integraciones`, {
|
||||
submodule_ids: this.selectedIntegIds
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
alert("Proveedor actualizado exitosamente.");
|
||||
this.resetSelectedItem();
|
||||
this.editModal = false;
|
||||
@@ -315,4 +377,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -115,3 +115,26 @@ func DeleteProvServidor(c *fiber.Ctx) error {
|
||||
"message": "Proveedor de servidor eliminado exitosamente",
|
||||
})
|
||||
}
|
||||
|
||||
func SetProvServidorIntegraciones(c *fiber.Ctx) error {
|
||||
uid, err := strconv.ParseUint(c.Params("id"), 10, 32)
|
||||
if err != nil {
|
||||
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"message": "ID inválido"})
|
||||
}
|
||||
|
||||
var body struct {
|
||||
SubmoduleIDs []uint `json:"submodule_ids"`
|
||||
}
|
||||
if err := c.BodyParser(&body); err != nil {
|
||||
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"message": "Error parsing body"})
|
||||
}
|
||||
|
||||
if err := models.SetProvServidorIntegraciones(uint(uid), body.SubmoduleIDs); err != nil {
|
||||
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
|
||||
"message": "Error actualizando integraciones",
|
||||
"error": err.Error(),
|
||||
})
|
||||
}
|
||||
|
||||
return c.JSON(fiber.Map{"message": "Integraciones actualizadas"})
|
||||
}
|
||||
|
||||
@@ -39,7 +39,11 @@ func GetSubmodules(c *fiber.Ctx) error {
|
||||
}
|
||||
|
||||
searchQuery := c.Query("search", "") // Obtener el término de búsqueda
|
||||
limit := 10 // Número de módulos por página
|
||||
limitStr := c.Query("limit", "10")
|
||||
limit, _ := strconv.Atoi(limitStr)
|
||||
if limit <= 0 {
|
||||
limit = 10
|
||||
}
|
||||
offset := (page - 1) * limit
|
||||
|
||||
// Llama a AllModules con el término de búsqueda
|
||||
|
||||
@@ -85,6 +85,7 @@ func UserRoutes(app fiber.Router) {
|
||||
protected.Get("/loadprovservidor", controllers.GetProvServidor)
|
||||
protected.Post("/provservidor", controllers.CreateProvServidor)
|
||||
protected.Put("/provservidor/:id", controllers.UpdateProvServidor)
|
||||
protected.Put("/provservidor/:id/integraciones", controllers.SetProvServidorIntegraciones)
|
||||
protected.Delete("/provservidor/:id", controllers.DeleteProvServidor)
|
||||
|
||||
// Rutas de tipos de servidor
|
||||
|
||||
Reference in New Issue
Block a user