lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-05-14 22:30:31 -05:00
parent 277ad6bb63
commit 61b3eca31d
16 changed files with 1341 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/saas_api.html
+68
View File
@@ -55,6 +55,12 @@
class="text-xs px-2 py-0.5 rounded-full"></span>
</td>
<td class="py-2 px-4 flex gap-2 justify-end">
<button @click="openProbar(item)" title="Probar endpoint" class="text-[#8eb02f] hover:text-[#6d8a24]">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</button>
<button @click="openEdit(item)" title="Editar" class="text-blue-500 hover:text-blue-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
@@ -83,6 +89,48 @@
</div>
</div>
<!-- ── Modal Probar endpoint ─────────────────────────────────────────── -->
<div x-show="probarModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display:none">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-screen overflow-y-auto">
<div class="flex justify-between items-center p-5 border-b">
<div>
<h2 class="text-lg font-semibold">Probar endpoint</h2>
<p class="text-xs text-gray-500 mt-0.5" x-text="probarItem ? probarItem.metodo + ' ' + probarItem.endpoint_url : ''"></p>
</div>
<button @click="closeProbar()" class="text-gray-400 hover:text-gray-600 text-xl">✕</button>
</div>
<div class="p-5 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Payload JSON (editable)</label>
<textarea x-model="probarPayload" rows="8"
class="border rounded w-full p-2 text-sm font-mono"
placeholder='{"contrato_id":1,"email":"test@example.com"}'></textarea>
<p class="text-xs text-gray-400 mt-0.5">Se enviará tal cual al endpoint. Si está vacío se envía sin body.</p>
</div>
<button @click="runProbar()" :disabled="probarLoading" class="bg-[#8eb02f] text-white px-5 py-2 rounded text-sm disabled:opacity-50">
<span x-show="!probarLoading">▶ Enviar petición</span>
<span x-show="probarLoading">Enviando…</span>
</button>
<!-- Resultado -->
<div x-show="probarResult" class="border rounded">
<div class="flex items-center gap-3 px-4 py-2 border-b bg-gray-50">
<span class="text-sm font-semibold">HTTP</span>
<span x-text="probarResult && probarResult.http_status"
:class="probarResult && probarResult.ok ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
class="text-xs px-2 py-0.5 rounded-full font-mono font-bold"></span>
<span class="text-xs text-gray-500" x-text="probarResult ? probarResult.latency_ms + ' ms' : ''"></span>
<span x-show="probarResult && !probarResult.ok" x-text="probarResult && probarResult.error" class="text-xs text-red-600 ml-auto"></span>
</div>
<pre x-text="probarResult && probarResult.body"
class="p-4 text-xs font-mono whitespace-pre-wrap break-all bg-gray-900 text-green-300 rounded-b max-h-64 overflow-auto"></pre>
</div>
</div>
<div class="flex justify-end p-5 border-t">
<button @click="closeProbar()" class="px-4 py-2 border rounded text-sm">Cerrar</button>
</div>
</div>
</div>
<!-- ── Modal crear / editar ────────────────────────────────────────────── -->
<div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display:none">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-screen overflow-y-auto">
@@ -190,6 +238,7 @@ function saasApiApp() {
loading: false, showModal: false, editMode: false,
saving: false, error: '',
form: {},
probarModal: false, probarItem: null, probarPayload: '', probarResult: null, probarLoading: false,
defaultForm() {
return { saas_id: 0, nombre: '', pasarela: 'ambas', endpoint_url: '', metodo: 'POST', api_key_header: '', api_key_value: '', payload_template: '', timeout_seg: 10, activo: true };
},
@@ -250,6 +299,25 @@ function saasApiApp() {
await fetch(`/app/saas-api/${id}`, { method: 'DELETE' });
await this.load(this.page);
},
openProbar(item) {
this.probarItem = item;
this.probarPayload = item.payload_template || '';
this.probarResult = null;
this.probarModal = true;
},
closeProbar() { this.probarModal = false; },
async runProbar() {
this.probarLoading = true;
this.probarResult = null;
const body = { payload: this.probarPayload };
const res = await fetch(`/app/saas-api/${this.probarItem.ID}/probar`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
this.probarResult = await res.json();
this.probarLoading = false;
},
};
}
</script>