feat(conx_db): complete edit/add modals with nombre, estado, version fields
- Edit modal: added Nombre, Versión, Estado (select) fields - Add modal: added Nombre, Versión, Estado (select) fields - loadData() JS mapping: includes nombre, estado, version - updateItem() payload: sends nombre, estado, version to backend Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Copilot
Copilot
parent
03ccc75337
commit
4cb564890d
@@ -24,11 +24,13 @@
|
|||||||
<table class="table-auto w-full">
|
<table class="table-auto w-full">
|
||||||
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
<thead class="text-sm text-left py-4 border-b border-gray-300">
|
||||||
<tr class="text-left font-semibold border-collapse">
|
<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">Puerto</th>
|
<th class="py-2 px-3 border-b">Puerto</th>
|
||||||
<th class="py-2 px-3 border-b">Usuario</th>
|
<th class="py-2 px-3 border-b">Usuario</th>
|
||||||
<th class="py-2 px-3 border-b">Password</th>
|
|
||||||
<th class="py-2 px-3 border-b">Tipo DB</th>
|
<th class="py-2 px-3 border-b">Tipo DB</th>
|
||||||
<th class="py-2 px-3 border-b">Servidor</th>
|
<th class="py-2 px-3 border-b">Servidor</th>
|
||||||
|
<th class="py-2 px-3 border-b">Estado</th>
|
||||||
|
<th class="py-2 px-3 border-b">Versión</th>
|
||||||
<th class="py-2 px-3 border-b"></th>
|
<th class="py-2 px-3 border-b"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -36,13 +38,19 @@
|
|||||||
<template x-for="data in datos" :key="data.id">
|
<template x-for="data in datos" :key="data.id">
|
||||||
<tr class="hover:bg-gray-100">
|
<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" x-text="data.puerto"></td>
|
<td class="py-3 text-xs px-3 border-b" x-text="data.puerto"></td>
|
||||||
<td class="py-3 text-xs px-3 border-b" x-text="data.usuario"></td>
|
<td class="py-3 text-xs px-3 border-b" x-text="data.usuario"></td>
|
||||||
<td class="py-3 text-xs px-3 border-b" x-text="data.password"></td>
|
|
||||||
<td class="py-3 text-xs px-3 border-b" x-text="tipos.find(ts => ts.ID == data.tipo_db_id)?.nombre || '-'"></td>
|
<td class="py-3 text-xs px-3 border-b" x-text="tipos.find(ts => ts.ID == data.tipo_db_id)?.nombre || '-'"></td>
|
||||||
<td class="py-3 text-xs px-3 border-b">
|
<td class="py-3 text-xs px-3 border-b">
|
||||||
<span x-text="(servidores.find(serv => serv.ID == data.servidor_id)?.nombre ?? '-') + ' - ' + (servidores.find(serv => serv.ID == data.servidor_id)?.ip_servidor ?? '')"></span>
|
<span x-text="(servidores.find(serv => serv.ID == data.servidor_id)?.nombre ?? '-') + ' - ' + (servidores.find(serv => serv.ID == data.servidor_id)?.ip_servidor ?? '')"></span>
|
||||||
</td>
|
</td>
|
||||||
|
<td class="py-3 text-xs px-3 border-b">
|
||||||
|
<span class="px-2 py-0.5 rounded-full text-xs font-semibold"
|
||||||
|
:class="data.estado === 'activo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
|
||||||
|
x-text="data.estado || 'activo'"></span>
|
||||||
|
</td>
|
||||||
|
<td class="py-3 text-xs px-3 border-b" x-text="data.version || '—'"></td>
|
||||||
<td class="py-3 text-xs px-3 border-b w-24">
|
<td class="py-3 text-xs px-3 border-b w-24">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<button @click="openViewModal(data)" title="Ver">
|
<button @click="openViewModal(data)" title="Ver">
|
||||||
@@ -107,6 +115,13 @@
|
|||||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||||
<h2 class="text-xl font-bold mb-4">Ver conexión DB</h2>
|
<h2 class="text-xl font-bold mb-4">Ver conexión DB</h2>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Nombre:</label>
|
||||||
|
<input type="text" x-model="selectedItem.nombre" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre de la conexión" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label class="block mb-2">Puerto:</label>
|
<label class="block mb-2">Puerto:</label>
|
||||||
@@ -144,6 +159,21 @@
|
|||||||
<label class="block mb-2">Password:</label>
|
<label class="block mb-2">Password:</label>
|
||||||
<input type="text" x-model="selectedItem.password" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
<input type="text" x-model="selectedItem.password" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Versión:</label>
|
||||||
|
<input type="text" x-model="selectedItem.version" disabled class="border border-gray-300 rounded p-2 w-full" placeholder="Ej: 8.0, 15.2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Estado:</label>
|
||||||
|
<select x-model="selectedItem.estado" disabled class="border border-gray-300 rounded p-2 w-full">
|
||||||
|
<option value="activo">Activo</option>
|
||||||
|
<option value="inactivo">Inactivo</option>
|
||||||
|
<option value="mantenimiento">Mantenimiento</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-end gap-2 text-sm">
|
<div class="flex justify-end gap-2 text-sm">
|
||||||
@@ -156,6 +186,13 @@
|
|||||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||||
<h2 class="text-xl font-bold mb-4">Editar conexión DB</h2>
|
<h2 class="text-xl font-bold mb-4">Editar conexión DB</h2>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Nombre:</label>
|
||||||
|
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre de la conexión" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label class="block mb-2">Puerto:</label>
|
<label class="block mb-2">Puerto:</label>
|
||||||
@@ -193,7 +230,23 @@
|
|||||||
<label class="block mb-2">Password:</label>
|
<label class="block mb-2">Password:</label>
|
||||||
<input type="text" x-model="selectedItem.password" class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
<input type="text" x-model="selectedItem.password" class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Versión:</label>
|
||||||
|
<input type="text" x-model="selectedItem.version" class="border border-gray-300 rounded p-2 w-full" placeholder="Ej: 8.0, 15.2" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Estado:</label>
|
||||||
|
<select x-model="selectedItem.estado" class="border border-gray-300 rounded p-2 w-full">
|
||||||
|
<option value="activo">Activo</option>
|
||||||
|
<option value="inactivo">Inactivo</option>
|
||||||
|
<option value="mantenimiento">Mantenimiento</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-between gap-2 text-sm">
|
<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="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>
|
<button @click="closeModals()" class="px-4 py-2 bg-gray-600 text-white rounded">Cerrar</button>
|
||||||
@@ -205,6 +258,13 @@
|
|||||||
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
<div class="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-lg">
|
||||||
<h2 class="text-xl font-bold mb-4">Añadir conexión DB</h2>
|
<h2 class="text-xl font-bold mb-4">Añadir conexión DB</h2>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Nombre:</label>
|
||||||
|
<input type="text" x-model="selectedItem.nombre" class="border border-gray-300 rounded p-2 w-full" placeholder="Nombre de la conexión" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<label class="block mb-2">Puerto:</label>
|
<label class="block mb-2">Puerto:</label>
|
||||||
@@ -242,6 +302,21 @@
|
|||||||
<label class="block mb-2">Password:</label>
|
<label class="block mb-2">Password:</label>
|
||||||
<input type="text" x-model="selectedItem.password" class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
<input type="text" x-model="selectedItem.password" class="border border-gray-300 rounded p-2 w-full" placeholder="Password" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Versión:</label>
|
||||||
|
<input type="text" x-model="selectedItem.version" class="border border-gray-300 rounded p-2 w-full" placeholder="Ej: 8.0, 15.2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row justify-between gap-4 mb-4">
|
||||||
|
<div class="w-full">
|
||||||
|
<label class="block mb-2">Estado:</label>
|
||||||
|
<select x-model="selectedItem.estado" class="border border-gray-300 rounded p-2 w-full">
|
||||||
|
<option value="activo">Activo</option>
|
||||||
|
<option value="inactivo">Inactivo</option>
|
||||||
|
<option value="mantenimiento">Mantenimiento</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-between gap-2 text-sm">
|
<div class="flex justify-between gap-2 text-sm">
|
||||||
@@ -308,9 +383,12 @@
|
|||||||
}).then(response => {
|
}).then(response => {
|
||||||
this.datos = response.data.registros.map(data => ({
|
this.datos = response.data.registros.map(data => ({
|
||||||
id: data.ID,
|
id: data.ID,
|
||||||
|
nombre: data.nombre,
|
||||||
puerto: data.puerto,
|
puerto: data.puerto,
|
||||||
usuario: data.usuario,
|
usuario: data.usuario,
|
||||||
password: data.password,
|
password: data.password,
|
||||||
|
estado: data.estado,
|
||||||
|
version: data.version,
|
||||||
tipo_db_id: data.tipo_db_id,
|
tipo_db_id: data.tipo_db_id,
|
||||||
servidor_id: data.servidor_id,
|
servidor_id: data.servidor_id,
|
||||||
created_at: data.CreatedAt,
|
created_at: data.CreatedAt,
|
||||||
@@ -443,9 +521,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const dataToSend = {
|
const dataToSend = {
|
||||||
|
nombre: this.selectedItem.nombre,
|
||||||
puerto: this.selectedItem.puerto,
|
puerto: this.selectedItem.puerto,
|
||||||
usuario: this.selectedItem.usuario,
|
usuario: this.selectedItem.usuario,
|
||||||
password: this.selectedItem.password,
|
password: this.selectedItem.password,
|
||||||
|
estado: this.selectedItem.estado || 'activo',
|
||||||
|
version: this.selectedItem.version,
|
||||||
tipo_db_id: this.selectedItem.tipo_db_id,
|
tipo_db_id: this.selectedItem.tipo_db_id,
|
||||||
servidor_id: this.selectedItem.servidor_id,
|
servidor_id: this.selectedItem.servidor_id,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user