From 00c0d53e5c6597f3288a88314f64ce11d1382c57 Mon Sep 17 00:00:00 2001 From: DanielDubon Date: Thu, 22 Aug 2024 20:25:14 -0600 Subject: [PATCH 1/4] feat: update feature was added to allergic history --- .../src/views/History/Allergic/index.jsx | 105 +++++++++++++----- 1 file changed, 80 insertions(+), 25 deletions(-) diff --git a/sanitas_frontend/src/views/History/Allergic/index.jsx b/sanitas_frontend/src/views/History/Allergic/index.jsx index dd4e74dd..b7dd02a8 100644 --- a/sanitas_frontend/src/views/History/Allergic/index.jsx +++ b/sanitas_frontend/src/views/History/Allergic/index.jsx @@ -9,6 +9,10 @@ import { BaseInput, RadioInput } from "src/components/Input/index"; import Throbber from "src/components/Throbber"; import { colors, fonts, fontSize } from "src/theme.mjs"; import WrapPromise from "src/utils/promiseWrapper"; +import IconButton from "src/components/Button/Icon"; +import CheckIcon from "@tabler/icons/outline/check.svg"; +import EditIcon from "@tabler/icons/outline/edit.svg"; +import CancelIcon from "@tabler/icons/outline/x.svg"; /** * @typedef {Object} AllergicHistoryProps @@ -141,6 +145,9 @@ export function AllergicHistory({ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { const [selectedAllergie, setSelectedAllergie] = useState(null); const [addingNew, setAddingNew] = useState(false); + const [isEditable, setIsEditable] = useState(false); + + const isFirstTime = addingNew; const allergicHistoryResult = allergicHistoryResource.read(); @@ -177,7 +184,7 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { (category) => Array.isArray(category.data) && category.data.length > 0, ); - useEffect(() => {}, []); + useEffect(() => { }, []); // Event handlers for adding, editing, and saving allergic history records const handleOpenNewForm = () => { @@ -187,10 +194,12 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { reactionType: "", }); setAddingNew(true); + setIsEditable(true) }; // Save the new Allergic record to the database const handleSaveNewAllergie = async () => { + if ( !( selectedAllergie.selectedMed && @@ -204,39 +213,56 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { toast.info("Guardando antecedente alérgico..."); - // Crear el nuevo registro de alergia - const newAllergy = { + // Log para verificar que selectedAllergie está correcto + console.log("Selected Allergie antes de guardar:", selectedAllergie); + + const updatedAllergy = { name: selectedAllergie.whichAllergie, severity: selectedAllergie.reactionType, }; - // Obtener la categoría actual (ej. medicamento, comida, etc.) - const currentCategoryData = - AllergicHistory[selectedAllergie.selectedMed]?.data || []; - - // Si la categoría ya tiene datos, usamos su versión, de lo contrario, establecemos la versión en 1 - const currentVersion = - AllergicHistory[selectedAllergie.selectedMed]?.version || 1; - - // Actualizar la categoría con el nuevo registro - const updatedCategory = { - version: currentVersion, - data: [...currentCategoryData, newAllergy], - }; - - // Actualizar el historial médico con la nueva categoría - const updatedMedicalHistory = { - ...AllergicHistory, - [selectedAllergie.selectedMed]: updatedCategory, - }; + let updatedMedicalHistory; + + if (isFirstTime) { + // Si es la primera vez, agrega un nuevo registro + const currentCategoryData = + AllergicHistory[selectedAllergie.selectedMed]?.data || []; + + const currentVersion = + AllergicHistory[selectedAllergie.selectedMed]?.version || 1; + + const updatedCategory = { + version: currentVersion, + data: [...currentCategoryData, updatedAllergy], + }; + + updatedMedicalHistory = { + ...AllergicHistory, + [selectedAllergie.selectedMed]: updatedCategory, + }; + } else { + // Si estamos editando, reemplaza directamente los datos de la categoría seleccionada + const updatedCategory = { + ...AllergicHistory[selectedAllergie.selectedMed], + data: [updatedAllergy], // Reemplaza con el nuevo dato actualizado + }; + + // Actualiza todo el historial médico con la categoría seleccionada actualizada + updatedMedicalHistory = { + ...AllergicHistory, + [selectedAllergie.selectedMed]: updatedCategory, + }; + } + // Log para verificar updatedMedicalHistory antes de enviarlo + console.log("Historial médico actualizado:", updatedMedicalHistory); try { const response = await updateAllergicHistory(id, updatedMedicalHistory); if (!response.error) { - // Actualizar el estado con el historial médico actualizado - setAllergicHistory(updatedMedicalHistory); + setAllergicHistory(updatedMedicalHistory); // Actualiza el estado local setAddingNew(false); setSelectedAllergie(null); + setIsEditable(false); toast.success("Antecedente alérgico guardado con éxito."); } else { toast.error(`Error al guardar: ${response.error}`); @@ -245,14 +271,27 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { toast.error(`Error en la operación: ${error.message}`); } }; + + // Seleccionar una tarjeta para editarla const handleSelectAllergie = (allergy) => { setSelectedAllergie({ selectedMed: allergy.selectedMed || "climateChange", // Este valor debe ser dinámico según el tipo de alergia whichAllergie: allergy.name || allergy.source || allergy.type, reactionType: allergy.severity, }); + setIsEditable(false); + setAddingNew(false); + + // Log para verificar que la alergia seleccionada se está configurando correctamente + console.log("Alergia seleccionada para editar:", allergy); }; + + + + + + const handleFieldChange = (fieldName, value) => { setSelectedAllergie((prevAllergie) => ({ ...prevAllergie, @@ -371,7 +410,7 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { handleFieldChange("selectedMed", e.target.value)} style={{ container: { width: "80%" }, @@ -401,6 +440,7 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { fontFamily: fonts.textFont, fontSize: "1rem", }} + disabled={!isEditable} />

handleFieldChange("reactionType", "Cutánea")} style={{ label: { fontFamily: fonts.textFont } }} + disabled={!isEditable} /> handleFieldChange("reactionType", "Respiratoria")} style={{ label: { fontFamily: fonts.textFont } }} + disabled={!isEditable} /> handleFieldChange("reactionType", "Ambos")} style={{ label: { fontFamily: fonts.textFont } }} + disabled={!isEditable} /> @@ -451,6 +494,18 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { justifyContent: "center", }} > +

+
+ {!addingNew && (isEditable ? ( +
+ + setIsEditable(false)} /> +
+ ) : ( + setIsEditable(true)} /> + ))} +
+
{addingNew && ( <> Date: Thu, 22 Aug 2024 20:27:49 -0600 Subject: [PATCH 2/4] fix: format fix --- .../src/views/History/Allergic/index.jsx | 45 +++++++++++-------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/sanitas_frontend/src/views/History/Allergic/index.jsx b/sanitas_frontend/src/views/History/Allergic/index.jsx index b7dd02a8..50859bed 100644 --- a/sanitas_frontend/src/views/History/Allergic/index.jsx +++ b/sanitas_frontend/src/views/History/Allergic/index.jsx @@ -184,7 +184,7 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { (category) => Array.isArray(category.data) && category.data.length > 0, ); - useEffect(() => { }, []); + useEffect(() => {}, []); // Event handlers for adding, editing, and saving allergic history records const handleOpenNewForm = () => { @@ -194,12 +194,11 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { reactionType: "", }); setAddingNew(true); - setIsEditable(true) + setIsEditable(true); }; // Save the new Allergic record to the database const handleSaveNewAllergie = async () => { - if ( !( selectedAllergie.selectedMed && @@ -286,12 +285,6 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { console.log("Alergia seleccionada para editar:", allergy); }; - - - - - - const handleFieldChange = (fieldName, value) => { setSelectedAllergie((prevAllergie) => ({ ...prevAllergie, @@ -494,16 +487,32 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { justifyContent: "center", }} > -
+
- {!addingNew && (isEditable ? ( -
- - setIsEditable(false)} /> -
- ) : ( - setIsEditable(true)} /> - ))} + {!addingNew && + (isEditable ? ( +
+ + setIsEditable(false)} + /> +
+ ) : ( + setIsEditable(true)} + /> + ))}
{addingNew && ( From 0ce37a18228cd510fe3f3aaecf14334f8d125a6c Mon Sep 17 00:00:00 2001 From: DanielDubon Date: Thu, 22 Aug 2024 20:44:47 -0600 Subject: [PATCH 3/4] fix: console log removed --- sanitas_frontend/src/views/History/Allergic/index.jsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/sanitas_frontend/src/views/History/Allergic/index.jsx b/sanitas_frontend/src/views/History/Allergic/index.jsx index 50859bed..27fd9009 100644 --- a/sanitas_frontend/src/views/History/Allergic/index.jsx +++ b/sanitas_frontend/src/views/History/Allergic/index.jsx @@ -184,7 +184,7 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { (category) => Array.isArray(category.data) && category.data.length > 0, ); - useEffect(() => {}, []); + useEffect(() => { }, []); // Event handlers for adding, editing, and saving allergic history records const handleOpenNewForm = () => { @@ -212,8 +212,6 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { toast.info("Guardando antecedente alérgico..."); - // Log para verificar que selectedAllergie está correcto - console.log("Selected Allergie antes de guardar:", selectedAllergie); const updatedAllergy = { name: selectedAllergie.whichAllergie, @@ -252,8 +250,7 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { [selectedAllergie.selectedMed]: updatedCategory, }; } - // Log para verificar updatedMedicalHistory antes de enviarlo - console.log("Historial médico actualizado:", updatedMedicalHistory); + try { const response = await updateAllergicHistory(id, updatedMedicalHistory); @@ -281,8 +278,6 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { setIsEditable(false); setAddingNew(false); - // Log para verificar que la alergia seleccionada se está configurando correctamente - console.log("Alergia seleccionada para editar:", allergy); }; const handleFieldChange = (fieldName, value) => { From 3cc90a0447331452f9f621addc2f8e3f42c96a33 Mon Sep 17 00:00:00 2001 From: DanielDubon Date: Thu, 22 Aug 2024 22:58:32 -0600 Subject: [PATCH 4/4] fix: format error and center save button --- .../src/views/History/Allergic/index.jsx | 75 ++++++++----------- 1 file changed, 33 insertions(+), 42 deletions(-) diff --git a/sanitas_frontend/src/views/History/Allergic/index.jsx b/sanitas_frontend/src/views/History/Allergic/index.jsx index 27fd9009..d181f9ba 100644 --- a/sanitas_frontend/src/views/History/Allergic/index.jsx +++ b/sanitas_frontend/src/views/History/Allergic/index.jsx @@ -1,4 +1,4 @@ -import { Suspense, useEffect, useState } from "react"; +import { Suspense, useState } from "react"; import "react-toastify/dist/ReactToastify.css"; import { toast } from "react-toastify"; import BaseButton from "src/components/Button/Base/index"; @@ -184,8 +184,6 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { (category) => Array.isArray(category.data) && category.data.length > 0, ); - useEffect(() => { }, []); - // Event handlers for adding, editing, and saving allergic history records const handleOpenNewForm = () => { setSelectedAllergie({ @@ -212,7 +210,6 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { toast.info("Guardando antecedente alérgico..."); - const updatedAllergy = { name: selectedAllergie.whichAllergie, severity: selectedAllergie.reactionType, @@ -221,7 +218,6 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { let updatedMedicalHistory; if (isFirstTime) { - // Si es la primera vez, agrega un nuevo registro const currentCategoryData = AllergicHistory[selectedAllergie.selectedMed]?.data || []; @@ -238,24 +234,21 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { [selectedAllergie.selectedMed]: updatedCategory, }; } else { - // Si estamos editando, reemplaza directamente los datos de la categoría seleccionada const updatedCategory = { ...AllergicHistory[selectedAllergie.selectedMed], data: [updatedAllergy], // Reemplaza con el nuevo dato actualizado }; - // Actualiza todo el historial médico con la categoría seleccionada actualizada updatedMedicalHistory = { ...AllergicHistory, [selectedAllergie.selectedMed]: updatedCategory, }; } - try { const response = await updateAllergicHistory(id, updatedMedicalHistory); if (!response.error) { - setAllergicHistory(updatedMedicalHistory); // Actualiza el estado local + setAllergicHistory(updatedMedicalHistory); setAddingNew(false); setSelectedAllergie(null); setIsEditable(false); @@ -268,16 +261,14 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { } }; - // Seleccionar una tarjeta para editarla const handleSelectAllergie = (allergy) => { setSelectedAllergie({ - selectedMed: allergy.selectedMed || "climateChange", // Este valor debe ser dinámico según el tipo de alergia + selectedMed: allergy.selectedMed || "climateChange", whichAllergie: allergy.name || allergy.source || allergy.type, reactionType: allergy.severity, }); setIsEditable(false); setAddingNew(false); - }; const handleFieldChange = (fieldName, value) => { @@ -359,9 +350,9 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) { return ( handleSelectAllergie({ ...allergy, selectedMed: category }) } @@ -477,39 +468,39 @@ function AllergicView({ id, allergicHistoryResource, updateAllergicHistory }) {
-
-
- {!addingNew && - (isEditable ? ( -
- - setIsEditable(false)} - /> -
- ) : ( +
+ {!addingNew && + (isEditable ? ( +
setIsEditable(true)} + icon={CheckIcon} + onClick={handleSaveNewAllergie} /> - ))} -
+ setIsEditable(false)} + /> +
+ ) : ( + setIsEditable(true)} + /> + ))}
+
+
{addingNew && ( <>