completedProjects.ts

"use strict";
import {
  getImprovementWorkResponsible,
  getImprovementWorks,
  getObject,
  getObjectById,
  getFilteredImprovementWorks,
} from "../Database/database.js";
import {
  loadProjectPageP,
  loadProjectPageA,
  loadProjectPageG,
  loadProjectPageS,
} from "../SidebarAndHeader/pageHandler.js";
import {
  loadHospitals,
  loadUnits,
  clearContent,
  removeCardsFromDiv,
} from "../ideaBank/ideaBank.js";

import { formatDate } from "../projectPage/projectPage.js";

import { projectCard } from "../currentProjects/currentProjects.js"

let projectCards: projectCard[] = [];
let filteredImprovementWorks: any[] = [];


export async function loadPage(listenersLoaded: boolean) {
  const container = document.querySelector("#container-fluid");

  if (!container) return; // Stop if the container isn't found
  projectCards = [];

  // Initialize empty lists of checked hospital and unit ids
  let checkedHospitalIds: string[] = [];
  let checkedUnitIds: string[] = [];
  let checkedNolanStages: string[] = [];
  let checkedPatientRiskLevels: string[] = [];
  let ascendingDates: boolean = false;

  fetch("KnowledgeBank/completedProjects.html")
    .then((response) => response.text())
    .then((data) => {
      // Create a temporary container element to hold the loaded content
      const tempContainer = document.createElement("div");
      tempContainer.innerHTML = data;

      // Select the specific element with the class you want
      const specificElement = tempContainer.querySelector(".filterBar");

      const createHospitalCheckBoxContainer = tempContainer.querySelector(
        "#hospitalSelection"
      ) as HTMLSelectElement;
      const createUnitCheckBoxContainer = tempContainer.querySelector(
        "#unitSelection"
      ) as HTMLSelectElement;
      const createNolanStageCheckBoxContainer = tempContainer.querySelector(
        "#nolanStageSelection"
      ) as HTMLSelectElement;
      const createPatientRiskLevelCheckBoxContainer =
        tempContainer.querySelector(
          "#patientRiskLevelSelection"
        ) as HTMLSelectElement;
      const createOrderSelectionContainer = tempContainer.querySelector(
        "#orderSelection"
      ) as HTMLSelectElement;

      if (createHospitalCheckBoxContainer) {
        createHospitalCheckBoxContainer.addEventListener(
          "change",
          async function (event) {
            const checkboxes = createHospitalCheckBoxContainer.querySelectorAll(
              'input[type="checkbox"]'
            );
            console.log("createHospitalCheckBoxContainer");

            // Empty list of checked hospitals
            checkedHospitalIds = [];

            // Array to store IDs of checked checkboxes
            checkboxes.forEach((checkbox) => {
              // Ensure the checkbox is an HTMLInputElement
              const inputCheckbox = checkbox as HTMLInputElement;

              // Check if the checkbox is checked and add its ID to the array
              if (inputCheckbox.checked) {
                checkedHospitalIds.push(inputCheckbox.id);
              }
            });

            // Log all checked hospital IDs
            console.log("Checked hospitals:", checkedHospitalIds);

            // Future change: Only clear the unitIds for unchecked hospitals!
            clearContent("unitSelection");
            loadUnits(checkedHospitalIds);
          }
        );
      }

      if (createUnitCheckBoxContainer) {
        createUnitCheckBoxContainer.addEventListener(
          "change",
          async function (event) {
            const checkboxes = createUnitCheckBoxContainer.querySelectorAll(
              'input[type="checkbox"]'
            );

            console.log("createUnitCheckBoxContainer");
            // Empty list of checked units
            checkedUnitIds = [];

            checkboxes.forEach((checkbox) => {
              // Ensure the checkbox is an HTMLInputElement
              const inputCheckbox = checkbox as HTMLInputElement;

              // Check if the checkbox is checked and add its ID to the array
              if (inputCheckbox.checked) {
                checkedUnitIds.push(inputCheckbox.id);
              }
            });

            filteredImprovementWorks = await getFilteredImprovementWorks({
              patientRiskLevels: checkedPatientRiskLevels,
              nolanStages: checkedNolanStages,
              units: checkedUnitIds,
              completed: true,
            });
            removeCardsFromDiv("div.projectCardCardDiv");
            getProjects(container, listenersLoaded, filteredImprovementWorks);
          }
        );
      }

      if (createNolanStageCheckBoxContainer) {
        createNolanStageCheckBoxContainer.addEventListener(
          "change",
          async function (event) {
            const checkboxes =
              createNolanStageCheckBoxContainer.querySelectorAll(
                'input[type="checkbox"]'
              );

            // Empty list of checked hospitals
            checkedNolanStages = [];

            // Array to store IDs of checked checkboxes
            checkboxes.forEach((checkbox) => {
              // Ensure the checkbox is an HTMLInputElement
              const inputCheckbox = checkbox as HTMLInputElement;

              // Check if the checkbox is checked and add its ID to the array
              if (inputCheckbox.checked) {
                checkedNolanStages.push(inputCheckbox.id);
                checkedNolanStages.push(nolanStageMapping[inputCheckbox.id]);
                console.log("checkedNolanStages: ", checkedNolanStages);
              }
            });

            filteredImprovementWorks = await getFilteredImprovementWorks({
              patientRiskLevels: checkedPatientRiskLevels,
              nolanStages: checkedNolanStages,
              units: checkedUnitIds,
              completed: true,
            });
            removeCardsFromDiv("div.projectCardCardDiv");
            getProjects(container, listenersLoaded, filteredImprovementWorks);
          }
        );
      }

      if (createPatientRiskLevelCheckBoxContainer) {
        createPatientRiskLevelCheckBoxContainer.addEventListener(
          "change",
          async function (event) {
            const checkboxes =
              createPatientRiskLevelCheckBoxContainer.querySelectorAll(
                'input[type="checkbox"]'
              );
            console.log("createPatientRiskLevelCheckBoxContainer");

            // Empty list of checked hospitals
            checkedPatientRiskLevels = [];

            // Array to store IDs of checked checkboxes
            checkboxes.forEach((checkbox) => {
              // Ensure the checkbox is an HTMLInputElement
              const inputCheckbox = checkbox as HTMLInputElement;

              // Check if the checkbox is checked and add its ID to the array
              if (inputCheckbox.checked) {
                checkedPatientRiskLevels.push(inputCheckbox.id);
                checkedPatientRiskLevels.push(
                  patientRiskLevelMapping[inputCheckbox.id]
                );
                console.log(
                  "checkedPatientRiskLevels: ",
                  checkedPatientRiskLevels
                );
              }
            });

            filteredImprovementWorks = await getFilteredImprovementWorks({
              patientRiskLevels: checkedPatientRiskLevels,
              nolanStages: checkedNolanStages,
              units: checkedUnitIds,
              completed: true,
            });
            removeCardsFromDiv("div.projectCardCardDiv");
            getProjects(container, listenersLoaded, filteredImprovementWorks);
          }
        );
      }

      if (createOrderSelectionContainer) {
        createOrderSelectionContainer.addEventListener(
          "change",
          async function (event) {
            const inputCheckbox = event.target as HTMLInputElement;

            ascendingDates = inputCheckbox.checked;

            removeCardsFromDiv("div.projectCardCardDiv");
            sortProjects(container, listenersLoaded, ascendingDates);
          }
        );
      }

      if (specificElement) {
        // Insert the specific element into the target element
        container.insertBefore(specificElement, container.firstChild);
      }
    })
    .catch((error) => {
      console.error("Failed to load the external HTML file:", error);
    });
  filteredImprovementWorks = await getImprovementWorks({ completed: true });
  console.log("Filtered improvementWorks: ", filteredImprovementWorks);
  removeCardsFromDiv("div.projectCardCardDiv");
  getProjects(container, listenersLoaded, filteredImprovementWorks);

  const searchBar = document.getElementById(
    "searchBarImprovement"
  ) as HTMLInputElement;
  searchBar?.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
      performSearch(searchBar, container);
    }
  });
  console.log("Loading hospitals");
  clearContent("hospitalSelection");
  loadHospitals();
  loadNolanStages();
  loadPatientRiskLevels();
}

async function loadNolanStages() {
  const selectStageHTML = $("#nolanStageSelection"); // loads the select type from html
  const allStages = ["Planera", "Göra", "Studera", "Agera"];
  allStages.forEach((stage) => {
    const generatedElement = document.createRange().createContextualFragment(
      `
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="` +
        stage +
        `">
      <label class="form-check-label" for="flexCheckDefault">` +
        stage +
        `</label>
    </div>`
    );
    selectStageHTML.append(generatedElement);
    console.log("Adding HTML for for stage ", stage);
  });
}

async function loadPatientRiskLevels() {
  const selectPatientRiskLevelHTML = $("#patientRiskLevelSelection"); // loads the select type from html
  const allRiskLevels = ["Grön", "Blå", "Gul", "Röd"];
  allRiskLevels.forEach((riskLevel) => {
    const generatedElement = document.createRange().createContextualFragment(
      `
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="` +
        riskLevel +
        `">
      <label class="form-check-label" for="flexCheckDefault">Risknivå ` +
        riskLevel +
        `</label>
    </div>`
    );
    selectPatientRiskLevelHTML.append(generatedElement);
    console.log("Adding HTML for for risk level ", riskLevel);
  });
}

function sortProjects(
  selectElement: Element,
  listenersLoaded: boolean,
  ascendingDates: boolean
) {
  // Sort in reversed order if ascendingDates is true
  const cardsToIterate = ascendingDates
    ? [...projectCards].reverse()
    : projectCards;

  // Loop through the saved array of cards and generate HTML for each card
  for (const card of cardsToIterate) {
    let cardHTML = card.generateHTML();
    addEventListener(listenersLoaded, card.projectId, card);
    let div = document.createElement("div");
    div.className = "projectCardCardDiv"; // Set the class name(s) here
    div.innerHTML = cardHTML;
    if (!selectElement) return;
    selectElement.appendChild(div); // Stop if the container isn't found
  }
}

async function getProjects(
  selectElement: Element,
  listenersLoaded: boolean,
  improvementWorks: any[]
) {
  let id = 0;
  projectCards = [];
  improvementWorks.forEach(async (improvementWork) => {
    let title = improvementWork.name;
    let department = await getObjectById("unit", improvementWork.unitId);
    let projectLeaderHsaId = await getImprovementWorkResponsible(
      improvementWork.id
    );
    console.log("leadr : " + projectLeaderHsaId);
    let projectLeader = await getObjectById("users", projectLeaderHsaId.id);
    if (department) {
      let card = new projectCard(
        id,
        projectLeader.firstName + " " + projectLeader.lastName,
        department.name,
        title,
        improvementWork.content,
        improvementWork.id,
        improvementWork.currentStage,
        improvementWork.dateStarted,
        improvementWork.endDate,
        improvementWork.completed
      );
      projectCards.push(card);
      let cardHTML = card.generateHTML();
      let div = document.createElement("div");
      div.className = "projectCardCardDiv"; // Set the class name(s) here
      div.innerHTML = cardHTML;
      if (!selectElement) return;
      selectElement.appendChild(div); // Stop if the container isn't found
      addEventListener(listenersLoaded, improvementWork.id, card);
      if (improvementWork.completed) {
        const datesDiv = document.getElementById(
          "ongoingCardDatesCompletedProjects" + improvementWork.id
        );
        if (datesDiv) {
          datesDiv.innerText += " till " + formatDate(improvementWork.endDate);
        }
      }
      id++;
    } else {
      console.log(improvementWork.unitId + " is not a unit"); //Unit Ids on improvement work that do not exist
    }
  });
}

async function addEventListener(
  listenersLoaded: boolean,
  projectId: string,
  card: projectCard
) {
  //if (!listenersLoaded) {

  $("#completed-page-ongoingSeeDetailsButton" + projectId)
    .off("click")
    .on("click", async function () {
      const expandedDiv = document.getElementById(
        "expandedOngoingWorkCard" + projectId
      );
      if (expandedDiv && expandedDiv.style.display === "none") {
        card.showMoreInfo(
          `expandedOngoingWorkCard` + projectId,
          `completed-page-ongoingSeeDetailsButton` + projectId
        );
      } else {
        card.closeMoreInfo(
          `expandedOngoingWorkCard` + projectId,
          `completed-page-ongoingSeeDetailsButton` + projectId
        );
      }
    });

  $("#completed-page-button-" + projectId)
    .off("click")
    .on("click", async function () {
      let tmp = await getObjectById("improvementWork", projectId);
      const currentStage = tmp.currentStage;
      if (currentStage === "Act") {
        loadProjectPageA(projectId);
      } else if (currentStage === "Study") {
        loadProjectPageS(projectId);
      } else if (currentStage === "Do") {
        loadProjectPageG(projectId);
      } else if (currentStage === "Plan") {
        loadProjectPageP(projectId);
      } else if (currentStage === "Finished") {
        loadProjectPageP(projectId);
      }
    });

  /*$(document).on("click", "#" + projectId, async function (event) {
      let tmp = await getObjectById("improvementWork", projectId);
      const currentStage = tmp.currentStage;
      const element = event.target as HTMLElement;
      if (element.classList.contains("moreInfoClass")) {
        const expandedDiv = document.getElementById(
          "expandedOngoingWorkCard" + projectId
        );
        if (expandedDiv && expandedDiv.style.display === "none") {
          card.showMoreInfo(
            `expandedOngoingWorkCard` + projectId,
            `ongoingSeeDetailsButton` + projectId
          );
        } else {
          card.closeMoreInfo(
            `expandedOngoingWorkCard` + projectId,
            `ongoingSeeDetailsButton` + projectId
          );
        }
      } else if (element.classList.contains("projectButton")) {
        document.removeEventListener("click", event.target);
        if (currentStage === "Act") {
          loadProjectPageA(projectId);
        } else if (currentStage === "Study") {
          loadProjectPageS(projectId);
        } else if (currentStage === "Do") {
          loadProjectPageG(projectId);
        } else if (currentStage === "Plan") {
          loadProjectPageP(projectId);
        } else if (currentStage === "Finished") {
          loadProjectPageP(projectId);
        }
      }
    });*/
  // }
}

const patientRiskLevelMapping: { [key: string]: string } = {
  Grön: "Green",
  Blå: "Blue",
  Gul: "Yellow",
  Röd: "Red",
};

const nolanStageMapping: { [key: string]: string } = {
  Planera: "Plan",
  Göra: "Do",
  Studera: "Study",
  Agera: "Act",
};

async function performSearch(searchBar: HTMLInputElement, container: Element) {
  let inputValue = searchBar.value;
  //make first character uppercase
  inputValue = inputValue.toLowerCase();
  console.log("Search query:", inputValue);
  // Remove each element
  projectCards = [];

  let query: { [key: string]: string | boolean } = {};
  query.completed = true;

  removeCardsFromDiv("div.projectCardCardDiv");

  if (inputValue !== "") {
    const matchedStage = Object.keys(nolanStageMapping).find((stage) =>
      stage.toLowerCase().includes(inputValue.toLowerCase())
    );

    if (matchedStage) {
      query.nolanStage = nolanStageMapping[matchedStage];
    } else {
      query.name = inputValue;
    }
  }
  console.log("query:", query);
  filteredImprovementWorks = await getImprovementWorks(query);
  await getProjects(container, true, filteredImprovementWorks);
}