|
@@ -1,5 +1,5 @@
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { computed } from "vue";
|
|
|
|
|
|
|
+import { computed, ref } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
import LayoutSistema from "../../layout/LayoutSistema.vue";
|
|
import LayoutSistema from "../../layout/LayoutSistema.vue";
|
|
|
import { useChat } from "../../composables/useChat.js";
|
|
import { useChat } from "../../composables/useChat.js";
|
|
@@ -11,6 +11,8 @@ const items = computed(() =>
|
|
|
(conversations.value ?? []).slice().sort((a, b) => Number(b.updatedAt ?? 0) - Number(a.updatedAt ?? 0))
|
|
(conversations.value ?? []).slice().sort((a, b) => Number(b.updatedAt ?? 0) - Number(a.updatedAt ?? 0))
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
|
|
+const confirmandoExclusaoId = ref(null);
|
|
|
|
|
+
|
|
|
function formatarData(ts) {
|
|
function formatarData(ts) {
|
|
|
try {
|
|
try {
|
|
|
return new Date(Number(ts ?? 0)).toLocaleString("pt-BR", {
|
|
return new Date(Number(ts ?? 0)).toLocaleString("pt-BR", {
|
|
@@ -27,8 +29,17 @@ function abrirConversa(id) {
|
|
|
router.push({ name: "home" });
|
|
router.push({ name: "home" });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-function excluirConversa(id) {
|
|
|
|
|
|
|
+function pedirExclusao(id) {
|
|
|
|
|
+ confirmandoExclusaoId.value = id;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function cancelarExclusao() {
|
|
|
|
|
+ confirmandoExclusaoId.value = null;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function confirmarExclusao(id) {
|
|
|
deleteConversation(id);
|
|
deleteConversation(id);
|
|
|
|
|
+ confirmandoExclusaoId.value = null;
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -78,11 +89,12 @@ function excluirConversa(id) {
|
|
|
</button>
|
|
</button>
|
|
|
|
|
|
|
|
<button
|
|
<button
|
|
|
|
|
+ v-if="confirmandoExclusaoId !== c.id"
|
|
|
type="button"
|
|
type="button"
|
|
|
class="rounded-xl border border-gray-200 bg-background/60 px-3 py-2 text-gray-400 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-background/10 dark:text-gray-500 dark:hover:border-red-500/40 dark:hover:bg-red-500/10 dark:hover:text-red-400"
|
|
class="rounded-xl border border-gray-200 bg-background/60 px-3 py-2 text-gray-400 transition-colors hover:border-red-300 hover:bg-red-50 hover:text-red-600 dark:border-gray-700 dark:bg-background/10 dark:text-gray-500 dark:hover:border-red-500/40 dark:hover:bg-red-500/10 dark:hover:text-red-400"
|
|
|
title="Excluir conversa"
|
|
title="Excluir conversa"
|
|
|
aria-label="Excluir conversa"
|
|
aria-label="Excluir conversa"
|
|
|
- @click="excluirConversa(c.id)"
|
|
|
|
|
|
|
+ @click="pedirExclusao(c.id)"
|
|
|
>
|
|
>
|
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 6h18" />
|
|
@@ -90,6 +102,26 @@ function excluirConversa(id) {
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6V4h6v2" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 6V4h6v2" />
|
|
|
</svg>
|
|
</svg>
|
|
|
</button>
|
|
</button>
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-else
|
|
|
|
|
+ class="flex items-center gap-1.5 rounded-xl border border-red-300 bg-red-50 px-2 dark:border-red-500/40 dark:bg-red-500/10"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span class="text-xs text-red-600 dark:text-red-400">Excluir?</span>
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="rounded-lg bg-red-600 px-2 py-1 text-xs font-medium text-white"
|
|
|
|
|
+ @click="confirmarExclusao(c.id)"
|
|
|
|
|
+ >
|
|
|
|
|
+ Sim
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="rounded-lg border border-gray-300 px-2 py-1 text-xs font-medium text-gray-700 dark:border-gray-600 dark:text-gray-300"
|
|
|
|
|
+ @click="cancelarExclusao"
|
|
|
|
|
+ >
|
|
|
|
|
+ Não
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</section>
|
|
</section>
|