Disponibilidades Atualizadas
This commit is contained in:
parent
63121d6702
commit
5aaaf7d3e5
31
package-lock.json
generated
31
package-lock.json
generated
@ -31871,23 +31871,6 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-bytes": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
|
||||
@ -33013,20 +32996,6 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts/node_modules/yaml": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
|
||||
"integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
|
||||
"license": "ISC",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.6"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toastify": {
|
||||
"version": "11.0.5",
|
||||
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
|
||||
|
||||
@ -199,3 +199,14 @@
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.doctor-form-container { padding: 0.75rem; }
|
||||
.doctor-form-title { font-size: 1.75rem; }
|
||||
.form-section { padding: 0.75rem; }
|
||||
.section-header { font-size: 1.25rem; }
|
||||
.form-label { font-size: 1rem; }
|
||||
.form-control-custom { font-size: 1rem; }
|
||||
.btns-container { display: flex; flex-direction: column; gap: 8px; }
|
||||
.btn-submit, .btn-cancel { width: 100%; margin-right: 0; }
|
||||
}
|
||||
@ -135,14 +135,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleAvailabilityUpdate = useCallback((newAvailability) => {
|
||||
const handleAvailabilityUpdate = useCallback((newAvailability) => {
|
||||
setFormData((prev) => {
|
||||
if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
|
||||
return { ...prev, availability: newAvailability };
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, []);
|
||||
}, [setFormData]);
|
||||
|
||||
const handleCepBlur = async () => {
|
||||
const cep = formData.cep?.replace(/\D/g, "");
|
||||
@ -326,17 +323,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
}
|
||||
|
||||
try {
|
||||
const savedDoctor = await onSave({ ...formData });
|
||||
|
||||
if (formData.availability && formData.availability.length > 0 && savedDoctor.id) {
|
||||
if (formData.availabilityId) {
|
||||
|
||||
await handlePatchAvailability(formData.availabilityId, formData.availability);
|
||||
} else {
|
||||
|
||||
await handleCreateAvailability(savedDoctor.id, formData.availability);
|
||||
}
|
||||
}
|
||||
// Chama a função onSave (handleSave no DoctorEditPage) com o formData completo.
|
||||
// A lógica de salvamento do médico e da disponibilidade é responsabilidade do componente pai.
|
||||
await onSave({ ...formData });
|
||||
|
||||
} catch (error) {
|
||||
console.error("Erro ao salvar médico ou disponibilidade:", error);
|
||||
|
||||
@ -152,3 +152,17 @@
|
||||
.btn-add:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.horarios-container { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.horarios-container { grid-template-columns: 1fr; gap: 10px; }
|
||||
.day-card { height: auto; }
|
||||
.day-header label { font-size: 13px; }
|
||||
.time-inputs { flex-direction: column; }
|
||||
.input-wrapper input { font-size: 12px; }
|
||||
.btn-add { font-size: 12px; }
|
||||
.btn-remove { font-size: 12px; }
|
||||
}
|
||||
@ -10,13 +10,13 @@ const initialBlockTemplate = {
|
||||
};
|
||||
|
||||
const emptyAvailabilityTemplate = [
|
||||
{ dia: "Segunda-feira", isChecked: false, blocos: [] },
|
||||
{ dia: "Terça-feira", isChecked: false, blocos: [] },
|
||||
{ dia: "Quarta-feira", isChecked: false, blocos: [] },
|
||||
{ dia: "Quinta-feira", isChecked: false, blocos: [] },
|
||||
{ dia: "Sexta-feira", isChecked: false, blocos: [] },
|
||||
{ dia: "Sábado", isChecked: false, blocos: [] },
|
||||
{ dia: "Domingo", isChecked: false, blocos: [] },
|
||||
{ dia: "Domingo", weekday: 0, isChecked: false, blocos: [] },
|
||||
{ dia: "Segunda-feira", weekday: 1, isChecked: false, blocos: [] },
|
||||
{ dia: "Terça-feira", weekday: 2, isChecked: false, blocos: [] },
|
||||
{ dia: "Quarta-feira", weekday: 3, isChecked: false, blocos: [] },
|
||||
{ dia: "Quinta-feira", weekday: 4, isChecked: false, blocos: [] },
|
||||
{ dia: "Sexta-feira", weekday: 5, isChecked: false, blocos: [] },
|
||||
{ dia: "Sábado", weekday: 6, isChecked: false, blocos: [] },
|
||||
];
|
||||
|
||||
const HorariosDisponibilidade = ({
|
||||
@ -35,10 +35,18 @@ const HorariosDisponibilidade = ({
|
||||
}
|
||||
}, [initialAvailability]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isFirstRun.current) {
|
||||
isFirstRun.current = false;
|
||||
return;
|
||||
}
|
||||
if (onUpdate) onUpdate(availability);
|
||||
}, [availability, onUpdate]);
|
||||
|
||||
const handleDayCheck = useCallback((dayIndex, currentIsChecked) => {
|
||||
const isChecked = !currentIsChecked;
|
||||
setAvailability((prev) =>
|
||||
prev.map((day, i) =>
|
||||
setAvailability((prev) => {
|
||||
const updated = prev.map((day, i) =>
|
||||
i === dayIndex
|
||||
? {
|
||||
...day,
|
||||
@ -56,8 +64,10 @@ const HorariosDisponibilidade = ({
|
||||
: [],
|
||||
}
|
||||
: day
|
||||
)
|
||||
);
|
||||
console.log('handleDayCheck - updated availability:', updated);
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleAddBlock = useCallback((dayIndex) => {
|
||||
@ -107,9 +117,7 @@ const HorariosDisponibilidade = ({
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
if (onUpdate) onUpdate(availability);
|
||||
}, [availability, onUpdate]);
|
||||
|
||||
|
||||
return (
|
||||
<div className="horarios-container">
|
||||
|
||||
@ -7,9 +7,29 @@ import "./style/DisponibilidadesDoctorPage.css";
|
||||
const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
|
||||
const DOCTORS_ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
|
||||
|
||||
const diasDaSemana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
|
||||
const diasDaSemana = [
|
||||
"Domingo",
|
||||
"Segunda",
|
||||
"Terça",
|
||||
"Quarta",
|
||||
"Quinta",
|
||||
"Sexta",
|
||||
"Sábado"
|
||||
];
|
||||
const weekdayNumToStr = {
|
||||
0: "sunday",
|
||||
1: "monday",
|
||||
2: "tuesday",
|
||||
3: "wednesday",
|
||||
4: "thursday",
|
||||
5: "friday",
|
||||
6: "saturday",
|
||||
};
|
||||
const weekdayStrToNum = Object.fromEntries(
|
||||
Object.entries(weekdayNumToStr).map(([num, str]) => [str, Number(num)])
|
||||
);
|
||||
|
||||
const DisponibilidadesDoctorPage = ( ) => {
|
||||
const DisponibilidadesDoctorPage = () => {
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const [disponibilidades, setDisponibilidades] = useState([]);
|
||||
const [doctors, setDoctors] = useState([]);
|
||||
@ -17,6 +37,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
const [editando, setEditando] = useState(null);
|
||||
const [expandedDoctors, setExpandedDoctors] = useState({});
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [availabilityEdit, setAvailabilityEdit] = useState([]);
|
||||
|
||||
const getHeaders = () => {
|
||||
const myHeaders = new Headers();
|
||||
@ -24,6 +45,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
if (authHeader) myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Prefer", "return=representation");
|
||||
return myHeaders;
|
||||
};
|
||||
|
||||
@ -31,15 +53,13 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
const fetchDoctors = async () => {
|
||||
try {
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
method: "GET",
|
||||
headers: getHeaders(),
|
||||
};
|
||||
|
||||
const response = await fetch(DOCTORS_ENDPOINT, requestOptions);
|
||||
const result = await response.json();
|
||||
setDoctors(Array.isArray(result) ? result : []);
|
||||
} catch (error) {
|
||||
console.error("Erro ao carregar médicos:", error);
|
||||
setDoctors([]);
|
||||
}
|
||||
};
|
||||
@ -49,16 +69,12 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
useEffect(() => {
|
||||
const fetchDisponibilidades = async () => {
|
||||
try {
|
||||
const res = await fetch(ENDPOINT, {
|
||||
method: "GET",
|
||||
headers: getHeaders()
|
||||
});
|
||||
const res = await fetch(ENDPOINT, { method: "GET", headers: getHeaders() });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDisponibilidades(Array.isArray(data) ? data : []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro ao buscar disponibilidades:", error);
|
||||
setDisponibilidades([]);
|
||||
}
|
||||
};
|
||||
@ -66,35 +82,24 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
}, [getAuthorizationHeader]);
|
||||
|
||||
const toggleExpandDoctor = (doctorId) => {
|
||||
setExpandedDoctors((prev) => ({
|
||||
...prev,
|
||||
[doctorId]: !prev[doctorId],
|
||||
}));
|
||||
setExpandedDoctors((prev) => ({ ...prev, [doctorId]: !prev[doctorId] }));
|
||||
};
|
||||
|
||||
const salvarTodasDisponibilidades = async (doctorId, horariosAtualizados) => {
|
||||
try {
|
||||
const headers = getHeaders();
|
||||
|
||||
// 1. Obter as disponibilidades existentes para este médico
|
||||
const existingDisponibilidadesRes = await fetch(`${ENDPOINT}?doctor_id=eq.${String(doctorId)}`, {
|
||||
method: "GET",
|
||||
headers,
|
||||
});
|
||||
const existingDisponibilidades = existingDisponibilidadesRes.ok ? await existingDisponibilidadesRes.json() : [];
|
||||
|
||||
const disponibilidadesParaManter = new Set();
|
||||
const promises = [];
|
||||
const currentIds = new Set();
|
||||
|
||||
for (const dia of horariosAtualizados) {
|
||||
if (dia.isChecked && dia.blocos.length > 0) {
|
||||
// Processar blocos de horários
|
||||
for (const bloco of dia.blocos) {
|
||||
const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
|
||||
const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
|
||||
|
||||
const payload = {
|
||||
doctor_id: doctorId,
|
||||
weekday: dia.weekday,
|
||||
weekday: weekdayNumToStr[dia.weekday],
|
||||
start_time: inicio,
|
||||
end_time: termino,
|
||||
slot_minutes: bloco.slot_minutes || 30,
|
||||
@ -103,82 +108,74 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
};
|
||||
|
||||
if (bloco.id && !bloco.isNew) {
|
||||
// Atualizar disponibilidade existente
|
||||
await fetch(`${ENDPOINT}?id=eq.${bloco.id}`, {
|
||||
currentIds.add(bloco.id);
|
||||
promises.push(
|
||||
fetch(`${ENDPOINT}?id=eq.${bloco.id}`, {
|
||||
method: "PATCH",
|
||||
headers,
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
disponibilidadesParaManter.add(bloco.id);
|
||||
}).then(() => ({ type: 'PATCH', id: bloco.id }))
|
||||
);
|
||||
} else {
|
||||
// Criar nova disponibilidade
|
||||
const postRes = await fetch(ENDPOINT, {
|
||||
promises.push(
|
||||
fetch(ENDPOINT, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (postRes.ok) {
|
||||
const newDisp = await postRes.json();
|
||||
// Adicionar o ID da nova disponibilidade para evitar exclusão acidental
|
||||
if (newDisp && newDisp.length > 0) {
|
||||
disponibilidadesParaManter.add(newDisp[0].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Excluir disponibilidades antigas que não foram mantidas
|
||||
const disponibilidadesParaExcluir = existingDisponibilidades.filter(
|
||||
(disp) => !disponibilidadesParaManter.has(disp.id)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const createdItem = Array.isArray(data) ? data[0] : data;
|
||||
return { type: 'POST', id: createdItem?.id };
|
||||
})
|
||||
);
|
||||
|
||||
for (const disp of disponibilidadesParaExcluir) {
|
||||
await fetch(`${ENDPOINT}?id=eq.${disp.id}`, {
|
||||
method: "DELETE",
|
||||
headers,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
alert("Horários atualizados com sucesso!");
|
||||
setEditando(null);
|
||||
const results = await Promise.all(promises);
|
||||
|
||||
const res = await fetch(ENDPOINT, {
|
||||
method: "GET",
|
||||
headers: getHeaders()
|
||||
results.forEach(res => {
|
||||
if (res.type === 'POST' && res.id) currentIds.add(res.id);
|
||||
});
|
||||
|
||||
const existingRes = await fetch(`${ENDPOINT}?doctor_id=eq.${String(doctorId)}`, {
|
||||
method: "GET", headers
|
||||
});
|
||||
|
||||
if (existingRes.ok) {
|
||||
const existingData = await existingRes.json();
|
||||
const deletePromises = existingData
|
||||
.filter(dbItem => !currentIds.has(dbItem.id))
|
||||
.map(dbItem =>
|
||||
fetch(`${ENDPOINT}?id=eq.${dbItem.id}`, { method: "DELETE", headers })
|
||||
);
|
||||
await Promise.all(deletePromises);
|
||||
}
|
||||
|
||||
setEditando(null);
|
||||
setAvailabilityEdit([]);
|
||||
const res = await fetch(ENDPOINT, { method: "GET", headers: getHeaders() });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDisponibilidades(Array.isArray(data) ? data : []);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Erro ao salvar disponibilidades:", error);
|
||||
alert("Erro ao salvar os horários");
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const deletarDisponibilidade = async (id) => {
|
||||
if (!window.confirm("Deseja realmente excluir esta disponibilidade?")) return;
|
||||
try {
|
||||
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
|
||||
method: "DELETE",
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (res.ok) {
|
||||
alert("Disponibilidade excluída com sucesso!");
|
||||
setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro:", error);
|
||||
alert("Erro ao conectar com o servidor");
|
||||
}
|
||||
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE", headers: getHeaders() });
|
||||
if (res.ok) setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
const disponibilidadesAgrupadas = useMemo(() => {
|
||||
const agrupadas = {};
|
||||
|
||||
doctors.forEach((doctor) => {
|
||||
agrupadas[doctor.id] = {
|
||||
doctor_id: doctor.id,
|
||||
@ -186,13 +183,9 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
disponibilidades: [],
|
||||
};
|
||||
});
|
||||
|
||||
disponibilidades.forEach((disp) => {
|
||||
if (agrupadas[disp.doctor_id]) {
|
||||
agrupadas[disp.doctor_id].disponibilidades.push(disp);
|
||||
}
|
||||
if (agrupadas[disp.doctor_id]) agrupadas[disp.doctor_id].disponibilidades.push(disp);
|
||||
});
|
||||
|
||||
Object.values(agrupadas).forEach((grupo) => {
|
||||
if (grupo.disponibilidades.length === 0) {
|
||||
grupo.disponibilidades.push({
|
||||
@ -203,15 +196,8 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let resultado = Object.values(agrupadas);
|
||||
|
||||
if (searchTerm) {
|
||||
resultado = resultado.filter(grupo =>
|
||||
grupo.doctor_name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
if (searchTerm) resultado = resultado.filter((grupo) => grupo.doctor_name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
return resultado;
|
||||
}, [disponibilidades, doctors, searchTerm]);
|
||||
|
||||
@ -237,60 +223,66 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
friday: "Sexta",
|
||||
saturday: "Sábado",
|
||||
};
|
||||
|
||||
const key = typeof weekday === "string" ? weekday.toLowerCase() : weekday;
|
||||
return dias[key] || "Desconhecido";
|
||||
};
|
||||
|
||||
const initialAvailabilityParaEdicao = useMemo(() => {
|
||||
if (!editando) return [];
|
||||
|
||||
const disponibilidadesMedico = disponibilidades.filter(
|
||||
(d) => String(d.doctor_id) === String(editando)
|
||||
);
|
||||
|
||||
return [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
|
||||
const blocosDoDia = disponibilidadesMedico
|
||||
.filter((d) => d.weekday === weekday && d.active !== false)
|
||||
.map((d) => ({
|
||||
const disponibilidadesMedico = disponibilidades.filter((d) => String(d.doctor_id) === String(editando));
|
||||
const blocosPorDia = {};
|
||||
disponibilidadesMedico.forEach((d) => {
|
||||
const num = typeof d.weekday === "string" ? weekdayStrToNum[d.weekday.toLowerCase()] : d.weekday;
|
||||
if (num === undefined) return;
|
||||
if (!blocosPorDia[num]) blocosPorDia[num] = [];
|
||||
if (d.active !== false) {
|
||||
blocosPorDia[num].push({
|
||||
id: d.id,
|
||||
inicio: formatTime(d.start_time) || "07:00",
|
||||
termino: formatTime(d.end_time) || "17:00",
|
||||
slot_minutes: d.slot_minutes || 30,
|
||||
appointment_type: d.appointment_type || "presencial",
|
||||
isNew: false,
|
||||
}));
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
const resultado = [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
|
||||
const blocosDoDia = blocosPorDia[weekday] || [];
|
||||
return {
|
||||
dia: diasDaSemana[weekday],
|
||||
weekday: weekday,
|
||||
isChecked: blocosDoDia.length > 0,
|
||||
blocos: blocosDoDia.length > 0 ? blocosDoDia : [{
|
||||
blocos:
|
||||
blocosDoDia.length > 0
|
||||
? blocosDoDia
|
||||
: [
|
||||
{
|
||||
id: null,
|
||||
inicio: "07:00",
|
||||
termino: "17:00",
|
||||
slot_minutes: 30,
|
||||
appointment_type: "presencial",
|
||||
isNew: true,
|
||||
}],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
return resultado;
|
||||
}, [disponibilidades, editando]);
|
||||
|
||||
const handleUpdateHorarios = (horariosAtualizados) => {
|
||||
if (!editando) return;
|
||||
salvarTodasDisponibilidades(editando, horariosAtualizados);
|
||||
setAvailabilityEdit(horariosAtualizados || []);
|
||||
};
|
||||
|
||||
const filteredDoctors = useMemo(() => {
|
||||
if (!searchTerm) return doctors;
|
||||
return doctors.filter((doc) =>
|
||||
(doc.full_name || doc.name).toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
return doctors.filter((doc) => (doc.full_name || doc.name).toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
}, [doctors, searchTerm]);
|
||||
|
||||
const handleCancelarEdicao = () => {
|
||||
setEditando(null);
|
||||
setAvailabilityEdit([]);
|
||||
};
|
||||
|
||||
const handleDoctorSelect = (doctor) => {
|
||||
@ -317,9 +309,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
|
||||
return (
|
||||
<div className="disponibilidades-container">
|
||||
<h1 className="disponibilidades-title">
|
||||
Disponibilidades dos Médicos
|
||||
</h1>
|
||||
<h1 className="disponibilidades-title">Disponibilidades dos Médicos</h1>
|
||||
|
||||
<div className="search-container">
|
||||
<div className="search-input-container">
|
||||
@ -335,10 +325,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
className="search-input"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={handleClearSearch}
|
||||
className="clear-search-btn"
|
||||
>
|
||||
<button onClick={handleClearSearch} className="clear-search-btn">
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
@ -347,11 +334,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
{showSuggestions && searchTerm && filteredDoctors.length > 0 && (
|
||||
<div className="suggestions-dropdown">
|
||||
{filteredDoctors.map((doc) => (
|
||||
<div
|
||||
key={doc.id}
|
||||
onClick={() => handleDoctorSelect(doc)}
|
||||
className="suggestion-item"
|
||||
>
|
||||
<div key={doc.id} onClick={() => handleDoctorSelect(doc)} className="suggestion-item">
|
||||
{doc.full_name || doc.name}
|
||||
</div>
|
||||
))}
|
||||
@ -361,9 +344,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
|
||||
<section className="calendario-ou-filaespera">
|
||||
<div className="fila-container">
|
||||
<h2 className="section-title">
|
||||
{editando ? `Editar Horários` : "Lista de Disponibilidades"}
|
||||
</h2>
|
||||
<h2 className="section-title">{editando ? `Editar Horários` : "Lista de Disponibilidades"}</h2>
|
||||
|
||||
{doctors.length === 0 ? (
|
||||
<p className="loading-text">Carregando médicos...</p>
|
||||
@ -371,13 +352,7 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
<>
|
||||
<div className="edit-container">
|
||||
{initialAvailabilityParaEdicao.length > 0 ? (
|
||||
<HorariosDisponibilidade
|
||||
initialAvailability={initialAvailabilityParaEdicao}
|
||||
onUpdate={handleUpdateHorarios}
|
||||
readOnly={false}
|
||||
showHeader={false}
|
||||
compact={false}
|
||||
/>
|
||||
<HorariosDisponibilidade initialAvailability={initialAvailabilityParaEdicao} onUpdate={handleUpdateHorarios} onCancel={handleCancelarEdicao} />
|
||||
) : (
|
||||
<p className="loading-text">Carregando horários para edição...</p>
|
||||
)}
|
||||
@ -385,16 +360,15 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
|
||||
<div className="disp-buttons-container">
|
||||
<button
|
||||
onClick={() => handleUpdateHorarios(initialAvailabilityParaEdicao)}
|
||||
onClick={() =>
|
||||
salvarTodasDisponibilidades(editando, availabilityEdit.length > 0 ? availabilityEdit : initialAvailabilityParaEdicao)
|
||||
}
|
||||
className="disp-btn-primary"
|
||||
>
|
||||
Salvar Alterações
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleCancelarEdicao}
|
||||
className="disp-btn-danger"
|
||||
>
|
||||
<button onClick={handleCancelarEdicao} className="disp-btn-danger">
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
@ -405,33 +379,20 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
<p className="no-results">Nenhum médico encontrado</p>
|
||||
) : (
|
||||
disponibilidadesAgrupadas.map((grupo) => (
|
||||
<div
|
||||
key={grupo.doctor_id}
|
||||
className={`doctor-group ${expandedDoctors[grupo.doctor_id] ? 'expanded' : ''}`}
|
||||
>
|
||||
<div
|
||||
className="doctor-header"
|
||||
onClick={() => toggleExpandDoctor(grupo.doctor_id)}
|
||||
>
|
||||
<div key={grupo.doctor_id} className={`doctor-group ${expandedDoctors[grupo.doctor_id] ? "expanded" : ""}`}>
|
||||
<div className="doctor-header" onClick={() => toggleExpandDoctor(grupo.doctor_id)}>
|
||||
<h3 className="doctor-name">
|
||||
{grupo.doctor_name}
|
||||
<span className="doctor-hours">
|
||||
({grupo.disponibilidades.filter(d => !d.is_empty).length} horários)
|
||||
</span>
|
||||
<span className="doctor-hours">({grupo.disponibilidades.filter((d) => !d.is_empty).length} horários)</span>
|
||||
</h3>
|
||||
<span className={`expand-icon ${expandedDoctors[grupo.doctor_id] ? 'expanded' : ''}`}>
|
||||
▼
|
||||
</span>
|
||||
<span className={`expand-icon ${expandedDoctors[grupo.doctor_id] ? "expanded" : ""}`}>▼</span>
|
||||
</div>
|
||||
|
||||
{expandedDoctors[grupo.doctor_id] && (
|
||||
<div className="doctor-content">
|
||||
<div className="edit-btn-container">
|
||||
<button
|
||||
onClick={() => setEditando(grupo.doctor_id)}
|
||||
className="disp-btn-edit"
|
||||
>
|
||||
{grupo.disponibilidades.some(d => !d.is_empty) ? "Editar" : "Cadastrar Horários"}
|
||||
<button onClick={() => setEditando(grupo.doctor_id)} className="disp-btn-edit">
|
||||
{grupo.disponibilidades.some((d) => !d.is_empty) ? "Editar" : "Cadastrar Horários"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -451,36 +412,15 @@ const DisponibilidadesDoctorPage = ( ) => {
|
||||
<tbody>
|
||||
{grupo.disponibilidades.map((disp) => (
|
||||
<tr key={disp.id}>
|
||||
<td>{disp.is_empty ? "Nenhum horário cadastrado" : getDiaSemana(disp.weekday)}</td>
|
||||
<td>{disp.is_empty ? "-" : formatTime(disp.start_time)}</td>
|
||||
<td>{disp.is_empty ? "-" : formatTime(disp.end_time)}</td>
|
||||
<td>{disp.is_empty ? "-" : disp.slot_minutes || 30}</td>
|
||||
<td>{disp.is_empty ? "-" : disp.appointment_type || "presencial"}</td>
|
||||
<td>
|
||||
{disp.is_empty ? "Nenhum horário cadastrado" : getDiaSemana(disp.weekday)}
|
||||
</td>
|
||||
<td>
|
||||
{disp.is_empty ? "-" : formatTime(disp.start_time)}
|
||||
</td>
|
||||
<td>
|
||||
{disp.is_empty ? "-" : formatTime(disp.end_time)}
|
||||
</td>
|
||||
<td>
|
||||
{disp.is_empty ? "-" : disp.slot_minutes || 30}
|
||||
</td>
|
||||
<td>
|
||||
{disp.is_empty ? "-" : disp.appointment_type || "presencial"}
|
||||
</td>
|
||||
<td>
|
||||
<span className={getStatusBadgeClass(disp)}>
|
||||
{getStatusText(disp)}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{!disp.is_empty && (
|
||||
<button
|
||||
onClick={() => deletarDisponibilidade(disp.id)}
|
||||
className="disp-btn-delete"
|
||||
>
|
||||
Excluir
|
||||
</button>
|
||||
)}
|
||||
<span className={getStatusBadgeClass(disp)}>{getStatusText(disp)}</span>
|
||||
</td>
|
||||
<td>{!disp.is_empty && <button onClick={() => deletarDisponibilidade(disp.id)} className="disp-btn-delete">Excluir</button>}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@ -1,104 +1,333 @@
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { useParams, useSearchParams } from "react-router-dom";
|
||||
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import { useParams, useNavigate, useLocation } from "react-router-dom";
|
||||
import DoctorForm from "../components/doctors/DoctorForm";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
import API_KEY from "../components/utils/apiKeys";
|
||||
|
||||
const ENDPOINT_AVAILABILITY =
|
||||
"https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
|
||||
const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
|
||||
const ENDPOINT_AVAILABILITY = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
|
||||
|
||||
const DoctorEditPage = ({DictInfo}) => {
|
||||
const diasDaSemana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
|
||||
const weekdayNumToStr = {
|
||||
0: "sunday",
|
||||
1: "monday",
|
||||
2: "tuesday",
|
||||
3: "wednesday",
|
||||
4: "thursday",
|
||||
5: "friday",
|
||||
6: "saturday",
|
||||
};
|
||||
const weekdayStrToNum = Object.fromEntries(
|
||||
Object.entries(weekdayNumToStr).map(([num, str]) => [str, Number(num)])
|
||||
);
|
||||
|
||||
const EditDoctorPage = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const [DoctorToPUT, setDoctorPUT] = useState({});
|
||||
|
||||
const Parametros = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [doctor, setDoctor] = useState(null);
|
||||
const [availability, setAvailability] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const DoctorID = "b24c88b2-1d51-4c04-8fe8-e75c3f2817d1";
|
||||
const availabilityId = searchParams.get("availabilityId");
|
||||
const effectiveId = id;
|
||||
|
||||
const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
|
||||
const [mode, setMode] = useState("doctor");
|
||||
console.log("teste", DictInfo)
|
||||
|
||||
useEffect(() => {
|
||||
setDoctorPUT(DictInfo)
|
||||
}, [DictInfo]);
|
||||
|
||||
const HandlePutDoctor = async () => {
|
||||
const getHeaders = () => {
|
||||
const myHeaders = new Headers();
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
if (authHeader) myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
var raw = JSON.stringify(DoctorToPUT);
|
||||
|
||||
console.log("Enviando médico para atualização (PUT):", DoctorToPUT);
|
||||
|
||||
var requestOptions = {
|
||||
method: "PUT",
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: "follow",
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
|
||||
.then(response => console.log(response))
|
||||
};
|
||||
|
||||
// 2. Função para Atualizar DISPONIBILIDADE (PATCH)
|
||||
const HandlePatchAvailability = async (data) => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
var raw = JSON.stringify(data);
|
||||
|
||||
console.log("Enviando disponibilidade para atualização (PATCH):", data);
|
||||
|
||||
var requestOptions = {
|
||||
method: "PATCH",
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: "follow",
|
||||
if (API_KEY) myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Prefer", "return=representation");
|
||||
return myHeaders;
|
||||
};
|
||||
|
||||
const salvarDisponibilidades = async (doctorId, horariosAtualizados) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}`,
|
||||
requestOptions
|
||||
const headers = getHeaders();
|
||||
const promises = [];
|
||||
const currentIds = new Set();
|
||||
|
||||
for (const dia of horariosAtualizados) {
|
||||
if (dia.isChecked && dia.blocos.length > 0) {
|
||||
for (const bloco of dia.blocos) {
|
||||
const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
|
||||
const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
|
||||
|
||||
const payload = {
|
||||
doctor_id: doctorId,
|
||||
weekday: weekdayNumToStr[dia.weekday],
|
||||
start_time: inicio,
|
||||
end_time: termino,
|
||||
slot_minutes: bloco.slot_minutes || 30,
|
||||
appointment_type: bloco.appointment_type || "presencial",
|
||||
active: true,
|
||||
};
|
||||
|
||||
if (bloco.id && !bloco.isNew) {
|
||||
currentIds.add(bloco.id);
|
||||
promises.push(
|
||||
fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${bloco.id}`, {
|
||||
method: "PATCH",
|
||||
headers,
|
||||
body: JSON.stringify(payload),
|
||||
}).then((res) => {
|
||||
if (!res.ok) throw new Error(`Erro no PATCH: ${res.status}`);
|
||||
return { type: "PATCH", id: bloco.id };
|
||||
})
|
||||
);
|
||||
console.log("Resposta PATCH Disponibilidade:", response);
|
||||
alert("Disponibilidade atualizada com sucesso!");
|
||||
// Opcional: Redirecionar de volta para a lista de disponibilidades
|
||||
// navigate('/disponibilidades');
|
||||
} else {
|
||||
promises.push(
|
||||
fetch(ENDPOINT_AVAILABILITY, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const createdItem = Array.isArray(data) ? data[0] : data;
|
||||
if (createdItem && createdItem.id) {
|
||||
return { type: "POST", id: createdItem.id };
|
||||
}
|
||||
return { type: "POST", id: null };
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
|
||||
results.forEach((res) => {
|
||||
if (res.type === "POST" && res.id) currentIds.add(res.id);
|
||||
});
|
||||
|
||||
const existingDisponibilidadesRes = await fetch(
|
||||
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${String(doctorId)}`,
|
||||
{ method: "GET", headers }
|
||||
);
|
||||
|
||||
if (existingDisponibilidadesRes.ok) {
|
||||
const existingDisponibilidades = await existingDisponibilidadesRes.json();
|
||||
|
||||
const deletePromises = existingDisponibilidades
|
||||
.filter((disp) => !currentIds.has(disp.id))
|
||||
.map((disp) =>
|
||||
fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${disp.id}`, {
|
||||
method: "DELETE",
|
||||
headers,
|
||||
})
|
||||
);
|
||||
|
||||
await Promise.all(deletePromises);
|
||||
}
|
||||
|
||||
const updatedResponse = await fetch(
|
||||
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${doctorId}&order=weekday.asc,start_time.asc`,
|
||||
{ method: "GET", headers }
|
||||
);
|
||||
|
||||
if (updatedResponse.ok) {
|
||||
const updatedData = await updatedResponse.json();
|
||||
setAvailability(updatedData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro ao atualizar disponibilidade:", error);
|
||||
alert("Erro ao atualizar disponibilidade.");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const normalizeAvailabilityForForm = (availabilityData) => {
|
||||
if (!Array.isArray(availabilityData)) return [];
|
||||
|
||||
const disponibilidadesMedico = availabilityData.filter((d) =>
|
||||
String(d.doctor_id) === String(effectiveId) && d.active !== false
|
||||
);
|
||||
const blocosPorDia = {};
|
||||
|
||||
disponibilidadesMedico.forEach((d) => {
|
||||
const num = typeof d.weekday === "string" ? weekdayStrToNum[d.weekday.toLowerCase()] : d.weekday;
|
||||
if (num === undefined || num === null) return;
|
||||
if (!blocosPorDia[num]) blocosPorDia[num] = [];
|
||||
blocosPorDia[num].push({
|
||||
id: d.id,
|
||||
inicio: d.start_time?.substring(0, 5) || "07:00",
|
||||
termino: d.end_time?.substring(0, 5) || "17:00",
|
||||
slot_minutes: d.slot_minutes || 30,
|
||||
appointment_type: d.appointment_type || "presencial",
|
||||
isNew: false,
|
||||
});
|
||||
});
|
||||
|
||||
const resultado = [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
|
||||
const blocosDoDia = blocosPorDia[weekday] || [];
|
||||
return {
|
||||
dia: diasDaSemana[weekday],
|
||||
weekday: weekday,
|
||||
isChecked: blocosDoDia.length > 0,
|
||||
blocos:
|
||||
blocosDoDia.length > 0
|
||||
? blocosDoDia
|
||||
: [
|
||||
{
|
||||
id: null,
|
||||
inicio: "07:00",
|
||||
termino: "17:00",
|
||||
slot_minutes: 30,
|
||||
appointment_type: "presencial",
|
||||
isNew: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
return resultado;
|
||||
};
|
||||
|
||||
const availabilityFormatted = useMemo(() => {
|
||||
return normalizeAvailabilityForForm(availability);
|
||||
}, [availability, effectiveId]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDoctorData = async () => {
|
||||
if (!effectiveId || effectiveId === "edit") {
|
||||
alert("ID do médico não encontrado");
|
||||
navigate("/secretaria/medicos");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const doctorResponse = await fetch(`${ENDPOINT}?id=eq.${effectiveId}`, {
|
||||
method: "GET",
|
||||
headers: getHeaders(),
|
||||
});
|
||||
|
||||
if (!doctorResponse.ok) {
|
||||
throw new Error("Erro ao carregar dados do médico");
|
||||
}
|
||||
|
||||
const doctorData = await doctorResponse.json();
|
||||
if (doctorData.length === 0) {
|
||||
throw new Error("Médico não encontrado");
|
||||
}
|
||||
|
||||
setDoctor(doctorData[0]);
|
||||
|
||||
const availabilityResponse = await fetch(
|
||||
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${effectiveId}&order=weekday.asc,start_time.asc`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: getHeaders(),
|
||||
}
|
||||
);
|
||||
|
||||
if (availabilityResponse.ok) {
|
||||
const availabilityData = await availabilityResponse.json();
|
||||
setAvailability(availabilityData);
|
||||
} else {
|
||||
setAvailability([]);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
alert("Erro ao carregar dados do médico");
|
||||
navigate("/secretaria/medicos");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (effectiveId) {
|
||||
fetchDoctorData();
|
||||
}
|
||||
}, [effectiveId, navigate]);
|
||||
|
||||
const handleSave = async (formData) => {
|
||||
const { availability: updatedAvailability, ...doctorDataToSave } = formData;
|
||||
|
||||
try {
|
||||
setIsSaving(true);
|
||||
|
||||
const response = await fetch(`${ENDPOINT}?id=eq.${effectiveId}`, {
|
||||
method: "PATCH",
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(doctorDataToSave),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Erro ao salvar dados do médico");
|
||||
}
|
||||
|
||||
if (updatedAvailability && updatedAvailability.length > 0) {
|
||||
await salvarDisponibilidades(effectiveId, updatedAvailability);
|
||||
}
|
||||
|
||||
alert("Médico e horários atualizados com sucesso!");
|
||||
navigate("/secretaria/medicos");
|
||||
|
||||
} catch (error) {
|
||||
alert(`Erro ao salvar dados: ${error.message}`);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
console.log('Horários a serem salvos:', updatedAvailability);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/secretaria/medicos");
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div>
|
||||
<div className="container mt-4">
|
||||
<div className="d-flex justify-content-center">
|
||||
<div className="spinner-border" role="status">
|
||||
<span className="visually-hidden">Carregando...</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center mt-2">
|
||||
Carregando dados do médico ID: {effectiveId || "..."}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!doctor) {
|
||||
if (!isLoading) {
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="alert alert-danger">
|
||||
Médico não encontrado
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
...doctor,
|
||||
availability: (doctor && doctor.availability) ? doctor.availability : availabilityFormatted,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h1>Editar Médico</h1>
|
||||
<DoctorForm
|
||||
onSave={
|
||||
mode === "availability" ? HandlePatchAvailability : HandlePutDoctor
|
||||
}
|
||||
formData={mode === "availability" ? availabilityToPATCH : DoctorToPUT}
|
||||
setFormData={
|
||||
mode === "availability" ? setAvailabilityToPATCH : setDoctorPUT
|
||||
}
|
||||
isEditingAvailability={mode === "availability"}
|
||||
formData={formData}
|
||||
setFormData={setDoctor}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
isLoading={isSaving}
|
||||
isEditing={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DoctorEditPage;
|
||||
export default EditDoctorPage;
|
||||
@ -147,7 +147,7 @@ function TableDoctor({setDictInfo}) {
|
||||
return resultado;
|
||||
}) : [];
|
||||
|
||||
// Aplica ordenação rápida
|
||||
|
||||
const applySorting = (arr) => {
|
||||
if (!Array.isArray(arr) || !sortKey) return arr;
|
||||
const copy = [...arr];
|
||||
@ -437,13 +437,13 @@ function TableDoctor({setDictInfo}) {
|
||||
<td>{medico.email || 'Não informado'}</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
<Link to={`details`}>
|
||||
<Link to={`details/${medico.id}`}>
|
||||
<button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
|
||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`edit`}>
|
||||
<Link to={`edit/${medico.id}`}>
|
||||
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
|
||||
@ -223,3 +223,20 @@
|
||||
.btn-action.btn-delete:hover {
|
||||
background-color: #C53030;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.unidade-selecionarprofissional { flex-direction: column; align-items: stretch; gap: 12px; }
|
||||
.calendar-wrapper { flex-direction: column; padding: 16px; }
|
||||
.calendar-info-panel { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #E2E8F0; padding-right: 0; padding-bottom: 16px; }
|
||||
.calendar-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
.calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.calendar-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.date-indicator h2 { font-size: 1.25rem; }
|
||||
.legend-item { font-size: 0.75rem; padding: 4px 8px; }
|
||||
.appointment-item { flex-direction: column; align-items: stretch; gap: 8px; }
|
||||
.appointment-actions { width: 100%; }
|
||||
.btn-action { width: 100%; }
|
||||
}
|
||||
|
||||
@ -218,6 +218,30 @@
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.disponibilidades-container { padding: 12px; }
|
||||
.disponibilidades-title { font-size: 1.25rem; }
|
||||
.search-container { padding: 12px; }
|
||||
.doctor-header { padding: 12px; }
|
||||
.doctor-name { font-size: 1rem; }
|
||||
.doctor-hours { display: none; }
|
||||
.expand-icon { font-size: 0.9rem; }
|
||||
.table-container { padding: 0 6px 6px 6px; }
|
||||
.disponibilidades-table thead th { padding: 6px 8px; }
|
||||
.disponibilidades-table td { padding: 10px 8px; font-size: 0.8125rem; }
|
||||
.disponibilidades-table thead th:nth-child(4),
|
||||
.disponibilidades-table thead th:nth-child(5),
|
||||
.disponibilidades-table thead th:nth-child(7),
|
||||
.disponibilidades-table tbody td:nth-child(4),
|
||||
.disponibilidades-table tbody td:nth-child(5),
|
||||
.disponibilidades-table tbody td:nth-child(7) {
|
||||
display: none;
|
||||
}
|
||||
.disp-buttons-container { flex-direction: column; gap: 10px; }
|
||||
.disp-btn-primary, .disp-btn-danger { width: 100%; }
|
||||
.suggestions-dropdown { width: calc(100% - 30px); left: 15px; right: 15px; }
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
@ -304,7 +328,7 @@
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
background-color: #95a5a6;
|
||||
background-color: #fa273c;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@ -312,7 +336,7 @@
|
||||
}
|
||||
|
||||
.disp-btn-danger:hover {
|
||||
background-color: #7f8c8d;
|
||||
background-color: #f41936;
|
||||
}
|
||||
|
||||
/* Section Titles */
|
||||
|
||||
@ -256,6 +256,15 @@ html, body {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
.unidade-selecionarprofissional { flex-direction: column; gap: 10px; }
|
||||
.unidade-selecionarprofissional input,
|
||||
.unidade-selecionarprofissional select { width: 100%; margin-left: 0; }
|
||||
.busca-fila-espera { position: static; width: 100%; margin-bottom: 8px; }
|
||||
.fila-header { height: auto; flex-direction: column; gap: 8px; }
|
||||
.btns-e-legenda-container { flex-direction: column; gap: 10px; }
|
||||
.legenda-tabela { justify-content: center; flex-wrap: wrap; }
|
||||
}
|
||||
.fila-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -160,6 +160,17 @@
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.table-doctor-card .card-header { padding: 0.75rem 1rem; }
|
||||
.table-doctor-table th, .table-doctor-table td { padding: 8px 6px; }
|
||||
.table-doctor-table thead th:nth-child(2),
|
||||
.table-doctor-table thead th:nth-child(4),
|
||||
.table-doctor-table tbody td:nth-child(2),
|
||||
.table-doctor-table tbody td:nth-child(4) { display: none; }
|
||||
.filter-buttons-container { width: 100%; }
|
||||
.filter-btn { width: 100%; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.table-doctor-table {
|
||||
font-size: 0.875rem;
|
||||
|
||||
@ -338,3 +338,13 @@
|
||||
padding: 0.4em 0.65em;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.table-paciente-card .card-header { padding: 0.75rem 1rem; }
|
||||
.table-paciente-table th, .table-paciente-table td { padding: 8px 6px; }
|
||||
.table-paciente-table thead th:nth-child(2),
|
||||
.table-paciente-table thead th:nth-child(4),
|
||||
.table-paciente-table tbody td:nth-child(2),
|
||||
.table-paciente-table tbody td:nth-child(4) { display: none; }
|
||||
.table-paciente-filters .btn-sm { width: 100%; }
|
||||
}
|
||||
@ -34,8 +34,8 @@ function PerfilSecretaria({ onLogout }) {
|
||||
<Route path="medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
|
||||
<Route path="pacientes/details" element={<Details DictInfo={DictInfo}/>} />
|
||||
<Route path="pacientes/edit" element={<EditPage DictInfo={DictInfo}/>} />
|
||||
<Route path="medicos/details" element={<DoctorDetails doctor={DictInfo} />} />
|
||||
<Route path="medicos/edit" element={<DoctorEditPage DictInfo={DictInfo} />} />
|
||||
<Route path="medicos/details/:id" element={<DoctorDetails doctor={DictInfo} />} />
|
||||
<Route path="medicos/edit/:id" element={<DoctorEditPage DictInfo={DictInfo} />} />
|
||||
<Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
|
||||
<Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user