up
This commit is contained in:
Lizandro Guarnizo
@@ -17,7 +17,8 @@
|
||||
<thead class="text-left border-b border-gray-200 bg-gray-50">
|
||||
<tr>
|
||||
<th class="py-2 px-3">Nombre</th>
|
||||
<th class="py-2 px-3">Días antes</th>
|
||||
<th class="py-2 px-3">Evento</th>
|
||||
<th class="py-2 px-3">Días</th>
|
||||
<th class="py-2 px-3">Plantilla</th>
|
||||
<th class="py-2 px-3">Aplica a</th>
|
||||
<th class="py-2 px-3">Pasarela</th>
|
||||
@@ -30,7 +31,19 @@
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-100">
|
||||
<td class="py-2 px-3 font-medium" x-text="d.nombre"></td>
|
||||
<td class="py-2 px-3">
|
||||
<span class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded text-xs font-semibold" x-text="d.dias_antes+' días'"></span>
|
||||
<span class="px-2 py-0.5 rounded text-xs font-medium"
|
||||
:class="{
|
||||
'bg-orange-100 text-orange-700': d.tipo_evento==='vencimiento_proximo',
|
||||
'bg-red-100 text-red-700': d.tipo_evento==='ya_vencido',
|
||||
'bg-green-100 text-green-700': d.tipo_evento==='bienvenida',
|
||||
'bg-blue-100 text-blue-700': d.tipo_evento==='pago_recibido',
|
||||
'bg-gray-100 text-gray-600': d.tipo_evento==='manual'
|
||||
}"
|
||||
x-text="tipoEventoLabel(d.tipo_evento)"></span>
|
||||
</td>
|
||||
<td class="py-2 px-3">
|
||||
<span x-show="d.tipo_evento==='vencimiento_proximo'" class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded text-xs font-semibold" x-text="d.dias_antes+' días'"></span>
|
||||
<span x-show="d.tipo_evento!=='vencimiento_proximo'" class="text-gray-300 text-xs">—</span>
|
||||
</td>
|
||||
<td class="py-2 px-3 text-gray-500" x-text="d.plantilla?.nombre||'—'"></td>
|
||||
<td class="py-2 px-3">
|
||||
@@ -62,7 +75,7 @@
|
||||
</tr>
|
||||
</template>
|
||||
<tr x-show="!loading && datos.length===0">
|
||||
<td colspan="6" class="text-center text-gray-400 py-8">Sin reglas configuradas</td>
|
||||
<td colspan="8" class="text-center text-gray-400 py-8">Sin reglas configuradas</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -80,26 +93,43 @@
|
||||
<input x-model="form.nombre" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600">Tipo de evento *</label>
|
||||
<select x-model="form.tipo_evento" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
|
||||
<option value="vencimiento_proximo">⏰ Próximo a vencer (X días antes)</option>
|
||||
<option value="ya_vencido">🔴 Servicio ya vencido</option>
|
||||
<option value="bienvenida">🎉 Bienvenida (al activar contrato)</option>
|
||||
<option value="pago_recibido">✅ Pago recibido (al confirmar pago)</option>
|
||||
<option value="manual">✋ Manual (sin disparo automático)</option>
|
||||
</select>
|
||||
<p class="text-xs text-gray-400 mt-1">
|
||||
<span x-show="form.tipo_evento==='bienvenida'">Se dispara automáticamente cuando se activa un contrato nuevo.</span>
|
||||
<span x-show="form.tipo_evento==='pago_recibido'">Se dispara automáticamente cuando se confirma un pago (Bold / dLocal).</span>
|
||||
<span x-show="form.tipo_evento==='manual'">Solo se envía desde el historial o de forma programada manualmente.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div x-show="form.tipo_evento==='vencimiento_proximo'">
|
||||
<label class="text-xs font-medium text-gray-600">Días antes del vencimiento *</label>
|
||||
<input x-model="form.dias_antes" type="number" min="1" max="365" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
|
||||
<input x-model="form.dias_antes" type="number" min="1" max="365"
|
||||
:required="form.tipo_evento==='vencimiento_proximo'"
|
||||
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600">Plantilla de correo *</label>
|
||||
<select x-model="form.plantilla_id" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
|
||||
<option value="">Seleccionar...</option>
|
||||
<template x-for="p in plantillas" :key="p.ID">
|
||||
<option :value="p.ID" x-text="p.nombre"></option>
|
||||
<option :value="p.ID" x-text="p.nombre + ' (' + p.tipo + ')'"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div x-show="['vencimiento_proximo','ya_vencido','manual'].includes(form.tipo_evento)">
|
||||
<label class="text-xs font-medium text-gray-600">Pasarela de pago (enlace)</label>
|
||||
<select x-model="form.pasarela_enlace" class="mt-1 w-full border rounded px-3 py-2 text-sm">
|
||||
<option value="bold">Bold (Colombia)</option>
|
||||
<option value="dlocal">dLocal</option>
|
||||
<option value="ninguna">Ninguna (sin enlace de pago)</option>
|
||||
</select>
|
||||
<p class="text-xs text-gray-400 mt-1">Genera automáticamente <code>{{.EnlacePago}}</code> al enviar</p>
|
||||
<p class="text-xs text-gray-400 mt-1">Genera automáticamente <code>{{"{{"}.EnlacePago{{"}}"}}</code> en la plantilla</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600">Aplica a</label>
|
||||
@@ -148,7 +178,7 @@ document.addEventListener('alpine:init', () => {
|
||||
loading: false, datos: [], plantillas: [],
|
||||
addModal: false, editModal: false, deleteModal: false,
|
||||
selectedId: null,
|
||||
form: { nombre:'', dias_antes:30, plantilla_id:'', aplica_a:'todos', pasarela_enlace:'bold', activo:true },
|
||||
form: { nombre:'', tipo_evento:'vencimiento_proximo', dias_antes:30, plantilla_id:'', aplica_a:'todos', pasarela_enlace:'bold', activo:true },
|
||||
toast: { show:false, msg:'', type:'ok' },
|
||||
|
||||
async init() {
|
||||
@@ -166,7 +196,7 @@ document.addEventListener('alpine:init', () => {
|
||||
},
|
||||
|
||||
openEdit(d) {
|
||||
this.form = { nombre: d.nombre, dias_antes: d.dias_antes, plantilla_id: d.plantilla_id, aplica_a: d.aplica_a, pasarela_enlace: d.pasarela_enlace||'bold', activo: d.activo };
|
||||
this.form = { nombre: d.nombre, tipo_evento: d.tipo_evento||'vencimiento_proximo', dias_antes: d.dias_antes, plantilla_id: d.plantilla_id, aplica_a: d.aplica_a, pasarela_enlace: d.pasarela_enlace||'bold', activo: d.activo };
|
||||
this.selectedId = d.ID;
|
||||
this.editModal = true;
|
||||
},
|
||||
@@ -174,7 +204,7 @@ document.addEventListener('alpine:init', () => {
|
||||
closeModals() {
|
||||
this.addModal = this.editModal = this.deleteModal = false;
|
||||
this.selectedId = null;
|
||||
this.form = { nombre:'', dias_antes:30, plantilla_id:'', aplica_a:'todos', pasarela_enlace:'bold', activo:true };
|
||||
this.form = { nombre:'', tipo_evento:'vencimiento_proximo', dias_antes:30, plantilla_id:'', aplica_a:'todos', pasarela_enlace:'bold', activo:true };
|
||||
},
|
||||
|
||||
async toggleActivo(d) {
|
||||
@@ -189,8 +219,7 @@ document.addEventListener('alpine:init', () => {
|
||||
...this.form,
|
||||
dias_antes: parseInt(this.form.dias_antes) || 0,
|
||||
plantilla_id: parseInt(this.form.plantilla_id) || 0,
|
||||
};
|
||||
if (this.editModal) {
|
||||
}; if (this.editModal) {
|
||||
await axios.put(`/app/api/reglas-notificacion/${this.selectedId}`, payload);
|
||||
} else {
|
||||
await axios.post('/app/api/reglas-notificacion', payload);
|
||||
@@ -216,6 +245,17 @@ document.addEventListener('alpine:init', () => {
|
||||
showToast(msg, type='ok') {
|
||||
this.toast = { show:true, msg, type };
|
||||
setTimeout(() => this.toast.show = false, 3000);
|
||||
},
|
||||
|
||||
tipoEventoLabel(tipo) {
|
||||
const map = {
|
||||
'vencimiento_proximo': 'Próximo a vencer',
|
||||
'ya_vencido': 'Ya vencido',
|
||||
'bienvenida': 'Bienvenida',
|
||||
'pago_recibido': 'Pago recibido',
|
||||
'manual': 'Manual',
|
||||
};
|
||||
return map[tipo] || tipo;
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user