MelissaPaciente: full-width + sidebar "Voltar pra Pacientes" no lugar de Configuracoes
Feedback do user pos-Fase 8: 1. Janela full-width (prontuario tem KPIs + tabelas + timeline — precisa de espaco). Removido o `right: max(6px, min(50%, calc(100% - 1006px)))` da .mpa-page no @media >=1024px. Mantém apenas inset 6px nos 4 lados. 2. Botao "Configuracoes" da sidebar removido (prontuario pertence a Pacientes, nao a Configuracoes — nao faz sentido o atalho global de cfg-* aqui). No mesmo lugar visual entra o botao "Voltar para Pacientes" com mesma classe .mpa-cfg-btn (reaproveita estilo) + modifier .mpa-cfg-btn--back pra hover sutilmente diferente. REMOVIDO - Import MelissaConfigList (nao usado mais) - Refs cfgOpen + funcoes toggleCfg/fecharCfg - Template do dual-mode (cfgOpen ? MelissaConfigList : cards) - CSS .mpa-cfg-btn.is-open + .mpa-cfg-btn__chev + .mpa-side__scroll--cfg ADICIONADO - close() agora faz history.back se houver historia, fallback pra /melissa/pacientes (cobre deep-link direto). Antes ia sempre pra /melissa/pacientes — agora respeita de onde o user veio (Agenda OU Pacientes). - goToPacientes() handler novo pro botao "Voltar pra Pacientes". - .mpa-cfg-btn--back hover style. Tooltip do X mudou de "Voltar (Esc)" pra "Fechar (Esc)" — semantica mais clara (o X fecha; o botao da sidebar voltar EXPLICITO). ESLint: 0 errors da minha mudanca. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -22,7 +22,6 @@ import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
|
||||
import MelissaConfigList from './MelissaConfigList.vue';
|
||||
import DocumentsListPage from '@/features/documents/DocumentsListPage.vue';
|
||||
import PatientConversationsTab from '@/features/patients/prontuario/PatientConversationsTab.vue';
|
||||
import { usePatientDetail } from '@/features/patients/composables/usePatientDetail';
|
||||
@@ -82,10 +81,6 @@ function _onMqMobileChange(e) {
|
||||
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
|
||||
function fecharDrawer() { drawerOpen.value = false; }
|
||||
|
||||
// Toggle entre cards (default) e lista de configs
|
||||
const cfgOpen = ref(false);
|
||||
function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
|
||||
function fecharCfg() { cfgOpen.value = false; }
|
||||
|
||||
// ── Tabs ───────────────────────────────────────────────────
|
||||
const TABS = [
|
||||
@@ -327,9 +322,19 @@ const kpiRealizadas = computed(() => sessionsHook.totalRealizadas.value);
|
||||
const kpiMensagens = computed(() => messagesHook.messages.value.length);
|
||||
|
||||
// ── Acoes ──────────────────────────────────────────────────
|
||||
// Volta pra lista de pacientes (preserva o estado de Melissa).
|
||||
// X (close): volta de onde veio (Agenda OU Pacientes) via history.
|
||||
// Fallback pra /melissa/pacientes se nao tem history (deep-link direto).
|
||||
function close() {
|
||||
emit('close');
|
||||
if (window.history.length > 1) {
|
||||
router.back();
|
||||
} else {
|
||||
router.push('/melissa/pacientes');
|
||||
}
|
||||
}
|
||||
|
||||
// Botao dedicado: navega EXPLICITAMENTE pra lista de pacientes.
|
||||
function goToPacientes() {
|
||||
router.push('/melissa/pacientes');
|
||||
}
|
||||
|
||||
@@ -472,7 +477,7 @@ onBeforeUnmount(() => {
|
||||
<button class="mpa-act-btn" v-tooltip.bottom="'Editar paciente'" @click="editPatient">
|
||||
<i class="pi pi-pencil" />
|
||||
</button>
|
||||
<button class="mpa-close" v-tooltip.bottom="'Voltar (Esc)'" @click="close">
|
||||
<button class="mpa-close" v-tooltip.bottom="'Fechar (Esc)'" @click="close">
|
||||
<i class="pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -491,15 +496,13 @@ onBeforeUnmount(() => {
|
||||
<!-- ═══ COL 1: Sidebar — esquerda ═══ -->
|
||||
<Teleport to="#mpa-mobile-drawer-target" :disabled="!isMobile">
|
||||
<aside class="mpa-side">
|
||||
<button class="mpa-cfg-btn" :class="{ 'is-open': cfgOpen }" @click="toggleCfg">
|
||||
<i :class="cfgOpen ? 'pi pi-arrow-left' : 'pi pi-cog'" />
|
||||
<span>{{ cfgOpen ? 'Voltar' : 'Configurações' }}</span>
|
||||
<i v-if="!cfgOpen" class="pi pi-chevron-down mpa-cfg-btn__chev" />
|
||||
<!-- Voltar pra Pacientes — substitui o botao de Configuracoes
|
||||
(prontuario pertence a Pacientes, nao a Configuracoes). -->
|
||||
<button class="mpa-cfg-btn mpa-cfg-btn--back" @click="goToPacientes">
|
||||
<i class="pi pi-arrow-left" />
|
||||
<span>Voltar para Pacientes</span>
|
||||
</button>
|
||||
<div v-if="cfgOpen" class="mpa-side__scroll mpa-side__scroll--cfg">
|
||||
<MelissaConfigList @select="fecharCfg" />
|
||||
</div>
|
||||
<div v-else class="mpa-side__scroll">
|
||||
<div class="mpa-side__scroll">
|
||||
<!-- Card: Acoes rapidas -->
|
||||
<div class="mpa-w mpa-w--side">
|
||||
<div class="mpa-w__head">
|
||||
@@ -1893,12 +1896,10 @@ onBeforeUnmount(() => {
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* ═══════ Page chrome em desktop — fica do mesmo tamanho dos outros ═══════ */
|
||||
@media (min-width: 1024px) {
|
||||
.mpa-page {
|
||||
right: max(6px, min(50%, calc(100% - 1006px)));
|
||||
}
|
||||
}
|
||||
/* Page chrome desktop: largura TOTAL (sem right:max). O prontuario tem
|
||||
muito conteudo (KPIs grid + tabelas + timeline), full-width facilita
|
||||
leitura. Diferente das outras Melissa Pages que tem painel flutuante
|
||||
ou conteudo mais compacto. */
|
||||
|
||||
.mpa-page__head {
|
||||
display: flex;
|
||||
@@ -2010,6 +2011,7 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
.mpa-close:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
|
||||
|
||||
|
||||
.mpa-menu-btn {
|
||||
display: none;
|
||||
align-items: center;
|
||||
@@ -2107,25 +2109,15 @@ onBeforeUnmount(() => {
|
||||
background: var(--m-bg-soft-hover);
|
||||
border-color: var(--m-border-strong);
|
||||
}
|
||||
.mpa-cfg-btn.is-open {
|
||||
background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
|
||||
color: var(--p-primary-color);
|
||||
.mpa-cfg-btn--back:hover {
|
||||
background: color-mix(in srgb, var(--p-primary-color) 8%, var(--m-bg-medium));
|
||||
border-color: color-mix(in srgb, var(--p-primary-color) 30%, transparent);
|
||||
}
|
||||
.mpa-cfg-btn > i:first-child {
|
||||
color: var(--p-primary-color);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.mpa-cfg-btn > span { flex: 1; }
|
||||
.mpa-cfg-btn__chev {
|
||||
color: var(--m-text-muted);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.mpa-side__scroll--cfg {
|
||||
padding: 8px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.mpa-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
Reference in New Issue
Block a user