Merge pull request #124 from Generation-D/feat/overview_progress

added overview over phases

frontend/src/actions/phase.ts

@@ -232,7 +232,7 @@ export async function fetch_phase_by_name(
   return phaseData;
 }
 
-export async function fetch_all_phases() {
+export async function fetch_all_phases(): Promise<PhaseData[]> {
   const cookieStore = cookies();
 
   const supabase = createServerClient(
@@ -256,7 +256,7 @@ export async function fetch_all_phases() {
   if (!phasesData) {
     console.log("No data " + phasesData);
   }
-  return phasesData;
+  return phasesData || [];
 }
 
 type Phase = {
@@ -307,3 +307,20 @@ export async function fetch_answer_table(
 
   return answerData ? answerData.length : 0;
 }
+
+export async function fetch_all_questions(): Promise<DefaultQuestion[]> {
+  const { data: questionData, error: errorData } = await get_supabase()
+    .from("question_table")
+    .select("*");
+
+  if (errorData) {
+    console.log("Error:" && errorData);
+  }
+
+  if (!questionData) {
+    console.log("No Data");
+    return [];
+  }
+
+  return questionData as DefaultQuestion[];
+}

frontend/src/app/[phase_name]/page.tsx

@@ -32,7 +32,7 @@ export default async function Page({
   const phase_questions = await cached_fetch_phase_questions(phaseData.phaseid);
 
   const mandatoryQuestionIds = phase_questions
-    .filter((q) => q.mandatory) // Filter questions where mandatory is true
+    .filter((q) => q.mandatory)
     .map((q) => q.questionid);
   const already_answered = await fetch_answer_table(mandatoryQuestionIds);
   console.log("Render Questionnaire");

frontend/src/app/globals.css

@@ -7,6 +7,10 @@
   --secondary-color: #153757;
 }
 
+.apl-button-fixed-short {
+  @apply rounded px-1 py-2 text-primary bg-secondary;
+}
+
 .apl-button-fixed {
   @apply rounded px-4 py-2 text-primary bg-secondary;
 }

frontend/src/app/page.tsx

@@ -1,10 +1,24 @@
 import Logger from "@/logger/logger";
 import Apl_Header from "@/components/header";
 import getOverviewPageText from "@/utils/getMarkdownText";
+import {
+  fetch_all_phases,
+  fetch_all_questions,
+  fetch_answer_table,
+} from "@/actions/phase";
+import PhaseOverview from "@/components/phaseOverview";
 
 export default async function Home() {
   const log = new Logger("Overview Page");
   const contentHtml = await getOverviewPageText();
+  const phasesData = await fetch_all_phases();
+  const phase_questions = await fetch_all_questions();
+
+  const mandatoryQuestions = phase_questions.filter((q) => q.mandatory);
+
+  const already_answered = await fetch_answer_table(
+    mandatoryQuestions.map((q) => q.phaseid),
+  );
   return (
     <>
       <div className="flex flex-col items-start justify-between space-y-4">
@@ -14,13 +28,26 @@ export default async function Home() {
           dangerouslySetInnerHTML={{ __html: contentHtml }}
         />
       </div>
-      <div className="w-full max-w-screen-xl mx-auto bg-white p-8 rounded-lg shadow-md">
-        <div className="grid grid-cols-3 gap-4">
-          <h2 className="p-4 rounded font-bold">Bewerbungs-Phase 1</h2>
-          <div className="p-4 rounded">PHASEN_STATUS_HIER</div>
-          <button className="apl-button-fixed">Phase fortsetzen</button>
-        </div>
-      </div>
+      {phasesData
+        .sort((a, b) => a.phaseorder - b.phaseorder)
+        .map(async (phase) => {
+          const mandatoryPhaseQuestionIds = mandatoryQuestions
+            .filter((q) => q.phaseid == phase.phaseid)
+            .map((q) => q.questionid);
+          const alreadyAnsweredPhaseQuestions = await fetch_answer_table(
+            mandatoryPhaseQuestionIds,
+          );
+          return (
+            <PhaseOverview
+              key={phase.phaseid}
+              phaseName={phase.phasename}
+              phaseStart={phase.startdate}
+              phaseEnd={phase.enddate}
+              mandatoryQuestionIds={mandatoryPhaseQuestionIds}
+              numAnswers={alreadyAnsweredPhaseQuestions}
+            />
+          );
+        })}
     </>
   );
 }

frontend/src/components/phaseOverview.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { transformReadableDate } from "@/utils/helpers";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { ProgressBar } from "./progressbar";
+
+const PhaseOverview: React.FC<{
+  key: string;
+  phaseName: string;
+  phaseStart: string;
+  phaseEnd: string;
+  mandatoryQuestionIds: string[];
+  numAnswers: number;
+}> = ({
+  key,
+  phaseName,
+  phaseStart,
+  phaseEnd,
+  mandatoryQuestionIds,
+  numAnswers,
+}) => {
+  const router = useRouter();
+  const handleRedirect = () => {
+    router.push(`/${phaseName}`);
+  };
+
+  return (
+    <div
+      key={key}
+      className="w-full max-w-screen-xl mx-auto bg-white p-8 rounded-lg shadow-md"
+    >
+      <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-rows-2">
+          <h2 className="rounded font-bold">{phaseName}</h2>
+          <h4 className="rounded">
+            {transformReadableDate(phaseStart)} -{" "}
+            {transformReadableDate(phaseEnd)}
+          </h4>
+        </div>
+        <div className="p-4 rounded">
+          <ProgressBar
+            mandatoryQuestionIds={mandatoryQuestionIds}
+            numAnswers={numAnswers}
+          />
+        </div>
+        <button
+          onClick={() => handleRedirect()}
+          className="apl-button-fixed-short"
+        >
+          Phase fortsetzen
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default PhaseOverview;

frontend/src/components/progressbar.tsx

@@ -42,7 +42,7 @@ export const ProgressBar = ({
     return () => {
       supabase.removeChannel(progressbarChannel);
     };
-  }, [supabase]);
+  });
   return (
     <div className="w-full bg-gray-300 rounded-2xl border">
       <div

frontend/src/utils/helpers.ts

@@ -29,6 +29,10 @@ export function setToPrefferedTimeZone(dateString: string) {
     .format("YYYY-MM-DDTHH:mm:ss.SSS");
 }
 
+export function transformReadableDate(dateString: string) {
+  return moment(dateString).tz("Europe/Berlin").format("DD.MM.YYYY");
+}
+
 export async function fetchImageUploadAnswer(questionid: string) {
   const supabase = createBrowserClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,