Improve The Symptoms, Diagnosis And Allergies View All UI

by ADMIN 58 views

Describe the Bug

The current UI for symptoms, diagnosis, and allergies has a few issues that need to be addressed. When there are symptoms recorded for a patient but they are entered in error or have any other status, the text should be displayed as "No active symptoms." Similarly, this should be applied to allergies and diagnosis. Additionally, the View All button should always be visible, even when there are no active symptoms. This is because the current implementation prevents users from viewing discontinued, entered in error, or other status data.

Current Implementation

The current implementation fetches only 14 symptoms in the card, and the View All button is only visible if at least one active symptom exists. This means that users cannot view all the symptoms, allergies, or diagnosis together, which can be frustrating and limit the user experience.

Expected Outcome

The expected outcome is to improve the UI for symptoms, diagnosis, and allergies by displaying "No active symptoms" when there are no active symptoms, and always showing the View All button. When the View All button is clicked, a popup should appear with all the symptoms, allergies, or diagnosis together.

Screenshots

The following screenshots illustrate the current implementation and the expected outcome:

  • Current implementation: Image
  • Expected outcome: Image

Figma Design

The Figma design for the Care page can be found at: https://www.figma.com/design/Z93EYKSa1MdBmXndsMBJSQ/Care?node-id=7998-2775&t=qogwsL4RErFL025m-1

Instructions for Requesting Assignment

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

Describe your solution clearly: Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

Expected Timeline:

  • End date: [Expected submission date of a completed Pull Request]

Additional Context: Include any other relevant context, links, screenshots, or resources that support your proposed solution.

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

Solution

To improve the symptoms, diagnosis, and allergies view all UI, we need to make the following changes:

  1. Display "No active symptoms" when there are no active symptoms: We need to modify the code to display "No active symptoms" when there are no active symptoms for a patient. This can be achieved by checking the status of the symptoms and displaying the text accordingly.
  2. Always show the View All button: We need to modify the code to always show the View All button, even when there are no active symptoms. This can be achieved by removing the condition that checks for active symptoms.
  3. Fetch all symptoms, allergies, or diagnosis when the View All button is clicked: We need to modify the code to fetch all symptoms, allergies, or diagnosis when the View All button is clicked. This can be achieved by making an API call to fetch all the data and displaying it in a popup.

Implementation

To implement the solution, we need to make the following changes:

  1. Modify the code to display "No active symptoms": We need to modify the code to display "No active symptoms" when there are no active symptoms for a patient. This can be achieved by checking the status of the symptoms and displaying the text accordingly.
if (symptoms.length === 0) {
  // Display "No active symptoms"
  document.getElementById("symptoms").innerHTML = "No active symptoms";
} else {
  // Display symptoms
  symptoms.forEach((symptom) => {
    // Display symptom details
  });
}
  1. Modify the code to always show the View All button: We need to modify the code to always show the View All button, even when there are no active symptoms. This can be achieved by removing the condition that checks for active symptoms.
// Always show the View All button
document.getElementById("view-all-button").style.display = "block";
  1. Modify the code to fetch all symptoms, allergies, or diagnosis when the View All button is clicked: We need to modify the code to fetch all symptoms, allergies, or diagnosis when the View All button is clicked. This can be achieved by making an API call to fetch all the data and displaying it in a popup.
// Fetch all symptoms, allergies, or diagnosis when the View All button is clicked
document.getElementById("view-all-button").addEventListener("click", () => {
  // Make API call to fetch all data
  fetch("/api/symptoms")
    .then((response) => response.json())
    .then((data) => {
      // Display data in a popup
      const popup = document.createElement("div");
      popup.innerHTML = data.map((item) => {
        // Display item details
      }).join("");
      document.body.appendChild(popup);
    });
});

Timeline

The expected timeline for completing this assignment is as follows:

  • Day 1-2: Review the requirements and design the solution
  • Day 3-4: Implement the solution
  • Day 5-6: Test the solution and fix any bugs
  • Day 7: Submit the completed Pull Request

Additional Context

The following resources may be helpful in completing this assignment:

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.
Improve the Symptoms, Diagnosis and Allergies View All UI: Q&A ===========================================================

Q: What is the current issue with the symptoms, diagnosis, and allergies view all UI?

A: The current UI for symptoms, diagnosis, and allergies has a few issues that need to be addressed. When there are symptoms recorded for a patient but they are entered in error or have any other status, the text should be displayed as "No active symptoms." Similarly, this should be applied to allergies and diagnosis. Additionally, the View All button should always be visible, even when there are no active symptoms.

Q: Why is the View All button only visible if there are active symptoms?

A: The View All button is only visible if there are active symptoms because the current implementation checks for active symptoms before displaying the button. This means that users cannot view discontinued, entered in error, or other status data.

Q: What is the expected outcome of this assignment?

A: The expected outcome is to improve the UI for symptoms, diagnosis, and allergies by displaying "No active symptoms" when there are no active symptoms, and always showing the View All button. When the View All button is clicked, a popup should appear with all the symptoms, allergies, or diagnosis together.

Q: How will the symptoms, allergies, or diagnosis be displayed in the popup?

A: The symptoms, allergies, or diagnosis will be displayed in the popup by making an API call to fetch all the data and displaying it in a popup. The data will be displayed in a list format, with each item showing the details of the symptom, allergy, or diagnosis.

Q: What resources will be helpful in completing this assignment?

A: The following resources may be helpful in completing this assignment:

Q: What is the timeline for completing this assignment?

A: The expected timeline for completing this assignment is as follows:

  • Day 1-2: Review the requirements and design the solution
  • Day 3-4: Implement the solution
  • Day 5-6: Test the solution and fix any bugs
  • Day 7: Submit the completed Pull Request

Q: What happens if there is no activity or progress within the stated timeline?

A: If there is no activity or progress within the stated timeline, the assignment may be unassigned unless communicated clearly and agreed upon.

Q: What are the key implementation steps for this assignment?

A: The key implementation steps for this assignment are:

  1. Modify the code to display "No active symptoms": We need to modify code to display "No active symptoms" when there are no active symptoms for a patient.
  2. Modify the code to always show the View All button: We need to modify the code to always show the View All button, even when there are no active symptoms.
  3. Modify the code to fetch all symptoms, allergies, or diagnosis when the View All button is clicked: We need to modify the code to fetch all symptoms, allergies, or diagnosis when the View All button is clicked.

Q: What are the dependencies, assumptions, or risks associated with this assignment?

A: The dependencies, assumptions, or risks associated with this assignment are:

  • The Figma design for the Care page is accurate and up-to-date.
  • The API documentation for fetching symptoms, allergies, or diagnosis is accurate and up-to-date.
  • The code modifications do not introduce any bugs or errors.
  • The solution meets the requirements and expectations of the assignment.

Q: How can I request assignment for this task?

A: To request assignment for this task, please clearly outline your solution and timeline by commenting on the issue using the format below:

Describe your solution clearly: Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

Expected Timeline:

  • End date: [Expected submission date of a completed Pull Request]

Additional Context: Include any other relevant context, links, screenshots, or resources that support your proposed solution.

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.