382 lines
14 KiB
Svelte
382 lines
14 KiB
Svelte
<script lang="ts">
|
|
import { useQuery, useConvexClient } from "convex-svelte";
|
|
import { api } from "@sgse-app/backend/convex/_generated/api";
|
|
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
|
import { format } from "date-fns";
|
|
import { ptBR } from "date-fns/locale";
|
|
|
|
interface Props {
|
|
conversaId: Id<"conversas">;
|
|
onClose: () => void;
|
|
}
|
|
|
|
let { conversaId, onClose }: Props = $props();
|
|
|
|
const client = useConvexClient();
|
|
const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, { conversaId });
|
|
|
|
let mensagem = $state("");
|
|
let data = $state("");
|
|
let hora = $state("");
|
|
let loading = $state(false);
|
|
|
|
// Rastrear mudanças nas mensagens agendadas
|
|
$effect(() => {
|
|
console.log("📅 [ScheduleModal] Mensagens agendadas atualizadas:", mensagensAgendadas?.data);
|
|
});
|
|
|
|
// Definir data/hora mínima (agora)
|
|
const now = new Date();
|
|
const minDate = format(now, "yyyy-MM-dd");
|
|
const minTime = format(now, "HH:mm");
|
|
|
|
function getPreviewText(): string {
|
|
if (!data || !hora) return "";
|
|
|
|
try {
|
|
const dataHora = new Date(`${data}T${hora}`);
|
|
return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
|
|
} catch {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
async function handleAgendar() {
|
|
if (!mensagem.trim() || !data || !hora) {
|
|
alert("Preencha todos os campos");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
loading = true;
|
|
const dataHora = new Date(`${data}T${hora}`);
|
|
|
|
// Validar data futura
|
|
if (dataHora.getTime() <= Date.now()) {
|
|
alert("A data e hora devem ser futuras");
|
|
return;
|
|
}
|
|
|
|
await client.mutation(api.chat.agendarMensagem, {
|
|
conversaId,
|
|
conteudo: mensagem.trim(),
|
|
agendadaPara: dataHora.getTime(),
|
|
});
|
|
|
|
mensagem = "";
|
|
data = "";
|
|
hora = "";
|
|
|
|
// Dar tempo para o Convex processar e recarregar a lista
|
|
setTimeout(() => {
|
|
alert("Mensagem agendada com sucesso!");
|
|
}, 500);
|
|
} catch (error) {
|
|
console.error("Erro ao agendar mensagem:", error);
|
|
alert("Erro ao agendar mensagem");
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
async function handleCancelar(mensagemId: string) {
|
|
if (!confirm("Deseja cancelar esta mensagem agendada?")) return;
|
|
|
|
try {
|
|
await client.mutation(api.chat.cancelarMensagemAgendada, { mensagemId: mensagemId as any });
|
|
} catch (error) {
|
|
console.error("Erro ao cancelar mensagem:", error);
|
|
alert("Erro ao cancelar mensagem");
|
|
}
|
|
}
|
|
|
|
function formatarDataHora(timestamp: number): string {
|
|
try {
|
|
return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
|
|
} catch {
|
|
return "Data inválida";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50"
|
|
onclick={onClose}
|
|
onkeydown={(e) => e.key === 'Escape' && onClose()}
|
|
>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col m-4"
|
|
onclick={(e) => e.stopPropagation()}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-title"
|
|
tabindex="-1"
|
|
>
|
|
<!-- Header ULTRA MODERNO -->
|
|
<div class="flex items-center justify-between px-6 py-5 relative overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);">
|
|
<!-- Efeitos de fundo -->
|
|
<div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
|
|
|
|
<h2 id="modal-title" class="text-xl font-bold flex items-center gap-3 text-white relative z-10">
|
|
<!-- Ícone moderno de relógio -->
|
|
<div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="w-5 h-5"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
</div>
|
|
<span style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">Agendar Mensagem</span>
|
|
</h2>
|
|
|
|
<!-- Botão fechar moderno -->
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden z-10"
|
|
style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
|
|
onclick={onClose}
|
|
aria-label="Fechar"
|
|
>
|
|
<div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="w-5 h-5 text-white relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
|
|
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 overflow-y-auto p-6 space-y-6">
|
|
<!-- Formulário de Agendamento -->
|
|
<div class="card bg-base-200">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
|
|
|
|
<div class="form-control">
|
|
<label class="label" for="mensagem-input">
|
|
<span class="label-text">Mensagem</span>
|
|
</label>
|
|
<textarea
|
|
id="mensagem-input"
|
|
class="textarea textarea-bordered h-24"
|
|
placeholder="Digite a mensagem..."
|
|
bind:value={mensagem}
|
|
maxlength="500"
|
|
aria-describedby="char-count"
|
|
></textarea>
|
|
<div class="label">
|
|
<span id="char-count" class="label-text-alt">{mensagem.length}/500</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="form-control">
|
|
<label class="label" for="data-input">
|
|
<span class="label-text">Data</span>
|
|
</label>
|
|
<input
|
|
id="data-input"
|
|
type="date"
|
|
class="input input-bordered"
|
|
bind:value={data}
|
|
min={minDate}
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label" for="hora-input">
|
|
<span class="label-text">Hora</span>
|
|
</label>
|
|
<input
|
|
id="hora-input"
|
|
type="time"
|
|
class="input input-bordered"
|
|
bind:value={hora}
|
|
min={data === minDate ? minTime : undefined}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{#if getPreviewText()}
|
|
<div class="alert alert-info">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
|
/>
|
|
</svg>
|
|
<span>{getPreviewText()}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="card-actions justify-end">
|
|
<!-- Botão AGENDAR ultra moderno -->
|
|
<button
|
|
type="button"
|
|
class="relative px-6 py-3 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
|
|
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
|
|
onclick={handleAgendar}
|
|
disabled={loading || !mensagem.trim() || !data || !hora}
|
|
>
|
|
<!-- Efeito de brilho no hover -->
|
|
<div class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"></div>
|
|
|
|
<div class="relative z-10 flex items-center gap-2">
|
|
{#if loading}
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
<span>Agendando...</span>
|
|
{:else}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="w-5 h-5 group-hover:scale-110 transition-transform"
|
|
>
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<span class="group-hover:scale-105 transition-transform">Agendar</span>
|
|
{/if}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista de Mensagens Agendadas -->
|
|
<div class="card bg-base-200">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-lg">Mensagens Agendadas</h3>
|
|
|
|
{#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
|
|
<div class="space-y-3">
|
|
{#each mensagensAgendadas.data as msg (msg._id)}
|
|
<div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
|
|
<div class="flex-shrink-0 mt-1">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-5 h-5 text-primary"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-base-content/80">
|
|
{formatarDataHora(msg.agendadaPara || 0)}
|
|
</p>
|
|
<p class="text-sm text-base-content mt-1 line-clamp-2">
|
|
{msg.conteudo}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Botão cancelar moderno -->
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
|
|
style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
|
|
onclick={() => handleCancelar(msg._id)}
|
|
aria-label="Cancelar"
|
|
>
|
|
<div class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"></div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform"
|
|
>
|
|
<polyline points="3 6 5 6 21 6"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
<line x1="10" y1="11" x2="10" y2="17"/>
|
|
<line x1="14" y1="11" x2="14" y2="17"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else if !mensagensAgendadas?.data}
|
|
<div class="flex items-center justify-center py-8">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
{:else}
|
|
<div class="text-center py-8 text-base-content/50">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-12 h-12 mx-auto mb-2 opacity-50"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
|
/>
|
|
</svg>
|
|
<p class="text-sm">Nenhuma mensagem agendada</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Efeito shimmer para o header */
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
</style>
|