|
@@ -1,10 +1,9 @@
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { computed, ref, onMounted, onUnmounted } from "vue";
|
|
|
|
|
|
|
+import { computed, ref, onMounted } from "vue";
|
|
|
import LayoutSistema from "../../layout/LayoutSistema.vue";
|
|
import LayoutSistema from "../../layout/LayoutSistema.vue";
|
|
|
import BotaoAlterarTema from "../../components/BotaoAlterarTema.vue";
|
|
import BotaoAlterarTema from "../../components/BotaoAlterarTema.vue";
|
|
|
import BaseButton from "../../components/base/BaseButton.vue";
|
|
import BaseButton from "../../components/base/BaseButton.vue";
|
|
|
import BaseBadge from "../../components/base/BaseBadge.vue";
|
|
import BaseBadge from "../../components/base/BaseBadge.vue";
|
|
|
-import ModalWhatsappConexao from "../../components/ModalWhatsappConexao.vue";
|
|
|
|
|
import { useAuth } from "../../composables/useAuth.js";
|
|
import { useAuth } from "../../composables/useAuth.js";
|
|
|
import { useWhatsappConexao } from "../../composables/useWhatsappConexao.js";
|
|
import { useWhatsappConexao } from "../../composables/useWhatsappConexao.js";
|
|
|
import { sincronizarAtendimentos, sincronizarTodosAtendimentos } from "../../api/atendimentos.js";
|
|
import { sincronizarAtendimentos, sincronizarTodosAtendimentos } from "../../api/atendimentos.js";
|
|
@@ -14,56 +13,28 @@ const isAdmin = computed(() => String(user.value?.Nivel) === "3");
|
|
|
|
|
|
|
|
const {
|
|
const {
|
|
|
status: whatsappStatus,
|
|
status: whatsappStatus,
|
|
|
- qrDataUrl,
|
|
|
|
|
telefone: whatsappTelefone,
|
|
telefone: whatsappTelefone,
|
|
|
- carregando: conectandoWhatsapp,
|
|
|
|
|
|
|
+ carregando: verificandoWhatsapp,
|
|
|
erro: erroWhatsapp,
|
|
erro: erroWhatsapp,
|
|
|
- atualizarStatus: atualizarStatusWhatsapp,
|
|
|
|
|
- conectar: conectarWhatsapp,
|
|
|
|
|
- desconectar: desconectarWhatsapp,
|
|
|
|
|
- pararPolling: pararPollingWhatsapp
|
|
|
|
|
|
|
+ atualizarStatus: atualizarStatusWhatsapp
|
|
|
} = useWhatsappConexao();
|
|
} = useWhatsappConexao();
|
|
|
|
|
|
|
|
-const mostrarModalConexao = ref(false);
|
|
|
|
|
-
|
|
|
|
|
const badgeConexaoVariant = computed(() => {
|
|
const badgeConexaoVariant = computed(() => {
|
|
|
if (whatsappStatus.value === "conectado") return "success";
|
|
if (whatsappStatus.value === "conectado") return "success";
|
|
|
- if (whatsappStatus.value === "qr_pendente" || whatsappStatus.value === "conectando") return "warning";
|
|
|
|
|
|
|
+ if (whatsappStatus.value === "nao_configurado") return "warning";
|
|
|
return "danger";
|
|
return "danger";
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const badgeConexaoTexto = computed(() => {
|
|
const badgeConexaoTexto = computed(() => {
|
|
|
- if (whatsappStatus.value === "conectado") return `Conectado — ${whatsappTelefone.value}`;
|
|
|
|
|
- if (whatsappStatus.value === "qr_pendente") return "Aguardando leitura do QR";
|
|
|
|
|
- if (whatsappStatus.value === "conectando") return "Conectando...";
|
|
|
|
|
- return "Desconectado";
|
|
|
|
|
|
|
+ if (whatsappStatus.value === "conectado") return `Configurado — ${whatsappTelefone.value}`;
|
|
|
|
|
+ if (whatsappStatus.value === "nao_configurado") return "Não configurado";
|
|
|
|
|
+ return "Erro ao verificar";
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-async function abrirConexao() {
|
|
|
|
|
- mostrarModalConexao.value = true;
|
|
|
|
|
- await conectarWhatsapp();
|
|
|
|
|
- // modal pode ter sido fechado enquanto conectarWhatsapp() estava em voo —
|
|
|
|
|
- // conectar() só arma o polling depois do await, então para aqui se já fechou
|
|
|
|
|
- if (!mostrarModalConexao.value) pararPollingWhatsapp();
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-function fecharConexao() {
|
|
|
|
|
- mostrarModalConexao.value = false;
|
|
|
|
|
- pararPollingWhatsapp();
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-async function desconectar() {
|
|
|
|
|
- await desconectarWhatsapp();
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
if (isAdmin.value) atualizarStatusWhatsapp();
|
|
if (isAdmin.value) atualizarStatusWhatsapp();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
|
|
- pararPollingWhatsapp();
|
|
|
|
|
-});
|
|
|
|
|
-
|
|
|
|
|
const sincronizando = ref(false);
|
|
const sincronizando = ref(false);
|
|
|
const importandoTudo = ref(false);
|
|
const importandoTudo = ref(false);
|
|
|
const syncOcupado = computed(() => sincronizando.value || importandoTudo.value);
|
|
const syncOcupado = computed(() => sincronizando.value || importandoTudo.value);
|
|
@@ -229,32 +200,25 @@ async function importarTudo() {
|
|
|
</svg>
|
|
</svg>
|
|
|
</div>
|
|
</div>
|
|
|
<div>
|
|
<div>
|
|
|
- <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Número conectado</div>
|
|
|
|
|
- <div class="text-xs text-gray-500 dark:text-gray-400">Gerencie a conexão do WhatsApp usada no Atendimento.</div>
|
|
|
|
|
|
|
+ <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Número (WhatsApp Cloud API)</div>
|
|
|
|
|
+ <div class="text-xs text-gray-500 dark:text-gray-400">Status do número oficial usado no Atendimento.</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="flex shrink-0 items-center gap-3">
|
|
<div class="flex shrink-0 items-center gap-3">
|
|
|
<BaseBadge :variant="badgeConexaoVariant">{{ badgeConexaoTexto }}</BaseBadge>
|
|
<BaseBadge :variant="badgeConexaoVariant">{{ badgeConexaoTexto }}</BaseBadge>
|
|
|
<button
|
|
<button
|
|
|
- v-if="whatsappStatus === 'conectado'"
|
|
|
|
|
type="button"
|
|
type="button"
|
|
|
- class="rounded-xl border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/5"
|
|
|
|
|
- :disabled="conectandoWhatsapp"
|
|
|
|
|
- @click="desconectar"
|
|
|
|
|
|
|
+ class="rounded-xl border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-white/5"
|
|
|
|
|
+ :disabled="verificandoWhatsapp"
|
|
|
|
|
+ @click="atualizarStatusWhatsapp"
|
|
|
>
|
|
>
|
|
|
- Desconectar
|
|
|
|
|
- </button>
|
|
|
|
|
- <button
|
|
|
|
|
- v-else
|
|
|
|
|
- type="button"
|
|
|
|
|
- class="rounded-xl bg-primary px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50"
|
|
|
|
|
- :disabled="conectandoWhatsapp"
|
|
|
|
|
- @click="abrirConexao"
|
|
|
|
|
- >
|
|
|
|
|
- Conectar número
|
|
|
|
|
|
|
+ Verificar status
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div v-if="erroWhatsapp" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-xs text-red-800 dark:bg-red-900/30 dark:text-red-300">
|
|
|
|
|
+ {{ erroWhatsapp }}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
@@ -282,14 +246,5 @@ async function importarTudo() {
|
|
|
</section>
|
|
</section>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <ModalWhatsappConexao
|
|
|
|
|
- v-if="mostrarModalConexao"
|
|
|
|
|
- :status="whatsappStatus"
|
|
|
|
|
- :qr-data-url="qrDataUrl"
|
|
|
|
|
- :telefone="whatsappTelefone"
|
|
|
|
|
- :erro="erroWhatsapp"
|
|
|
|
|
- @close="fecharConexao"
|
|
|
|
|
- />
|
|
|
|
|
</LayoutSistema>
|
|
</LayoutSistema>
|
|
|
</template>
|
|
</template>
|