add some information about completed modules

buchungapp · Sep 16, 2024 · 18101a0 · 18101a0
1 parent c35f12f
commit 18101a0
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 29 deletions.
diff --git a/apps/web/src/app/(certificate)/diploma/[id]/_components/advise.tsx b/apps/web/src/app/(certificate)/diploma/[id]/_components/advise.tsx
@@ -0,0 +1,121 @@
+import { CheckIcon } from "@heroicons/react/16/solid";
+import { notFound } from "next/navigation";
+import { Badge } from "~/app/(dashboard)/_components/badge";
+import { Divider } from "~/app/(dashboard)/_components/divider";
+import { Subheading } from "~/app/(dashboard)/_components/heading";
+import { Strong, Text, TextLink } from "~/app/(dashboard)/_components/text";
+import { retrieveCertificateById } from "~/lib/nwd";
+import { generateAdvise } from "../../_utils/generate-advise";
+
+export default async function CertificateAdvise({ id }: { id: string }) {
+  const [certificate, advise] = await Promise.all([
+    retrieveCertificateById(id).catch(() => notFound()),
+    generateAdvise(id),
+  ]);
+
+  const {
+    course: {
+      title: courseTitle,
+      handle: courseHandle,
+      discipline: { handle: disciplineHandle },
+    },
+    degree: { title: degreeTitle },
+  } = certificate.program;
+
+  const uniqueCompletedModules = Array.from(
+    new Set(
+      certificate.completedCompetencies.map(
+        (competency) => competency.curriculum_competency.moduleId,
+      ),
+    ),
+  );
+
+  return (
+    <div className="mt-6 max-w-prose mx-auto">
+      <Text className="">
+        Je bent bezig met de cursus <Strong>{courseTitle}</Strong> op niveau{" "}
+        <Strong>{degreeTitle}</Strong>. Hieronder vind je een overzicht van de
+        modules die je tot nu toe hebt voltooid. {advise}
+      </Text>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
+        <div>
+          <Subheading>Kernmodules</Subheading>
+          <ul className="space-y-2 mt-2.5">
+            {certificate.curriculum.modules
+              .filter((module) => module.isRequired)
+              .map((module, index, filteredArray) => {
+                const isModuleCompleted = uniqueCompletedModules.includes(
+                  module.id,
+                );
+                return (
+                  <li key={module.id}>
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center">
+                        {isModuleCompleted ? (
+                          <CheckIcon className="w-4 h-4 mr-2.5" />
+                        ) : (
+                          <span className="w-4 h-4 rounded-full border border-zinc-500 mr-2.5" />
+                        )}
+                        <Text>{module.title}</Text>
+                      </div>
+                      {isModuleCompleted ? (
+                        <Badge color="green">Behaald</Badge>
+                      ) : null}
+                    </div>
+                    {index < filteredArray.length - 1 && (
+                      <Divider soft className="my-2.5" />
+                    )}
+                  </li>
+                );
+              })}
+          </ul>
+        </div>
+        <div>
+          <Subheading>Keuzemodules</Subheading>
+          <ul className="space-y-2 mt-2.5">
+            {certificate.curriculum.modules
+              .filter((module) => !module.isRequired)
+              .map((module, index, filteredArray) => {
+                const isModuleCompleted = uniqueCompletedModules.includes(
+                  module.id,
+                );
+                return (
+                  <li key={module.id}>
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center">
+                        {isModuleCompleted ? (
+                          <CheckIcon className="w-4 h-4 mr-2.5" />
+                        ) : (
+                          <span className="w-4 h-4 rounded-full border border-zinc-500 mr-2.5" />
+                        )}
+                        <Text>{module.title}</Text>
+                      </div>
+                      {isModuleCompleted ? (
+                        <Badge color="green">Behaald</Badge>
+                      ) : null}
+                    </div>
+                    {index < filteredArray.length - 1 && (
+                      <Divider soft className="my-2.5" />
+                    )}
+                  </li>
+                );
+              })}
+          </ul>
+        </div>
+      </div>
+
+      <Text className="mt-8">
+        Wil je meer weten over de opbouw van jouw cursus? <br /> Bezoek de
+        cursuspagina{" "}
+        <TextLink
+          href={`/diplomalijn/consument/disciplines/${disciplineHandle}/${courseHandle}`}
+          target="_blank"
+        >
+          {courseTitle}
+        </TextLink>
+        .
+      </Text>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/(certificate)/diploma/[id]/page.tsx b/apps/web/src/app/(certificate)/diploma/[id]/page.tsx
@@ -14,8 +14,8 @@ import {
 import dayjs from "~/lib/dayjs";
 import { retrieveCertificateById } from "~/lib/nwd";
 import { Text, TextLink } from "../../../(dashboard)/_components/text";
-import { generateAdvise } from "../_utils/generate-advise";
 import { safeParseCertificateParams } from "../_utils/parse-certificate-params";
+import CertificateAdvise from "./_components/advise";
 import { Confetti } from "./_components/confetti";
 import { ShareCertificate } from "./_components/share";
 import CertificateTemplate from "./_components/template";
@@ -48,9 +48,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function Page({ params, searchParams }: Props) {
-  const [certificate, advice] = await Promise.all([
+  const [certificate] = await Promise.all([
     retrieveCertificateById(params.id).catch(() => notFound()),
-    generateAdvise(params.id),
   ]);
 
   const result = safeParseCertificateParams({
@@ -136,13 +135,9 @@ export default async function Page({ params, searchParams }: Props) {
       <div className="text-center py-8">
         <h2 className="text-2xl font-semibold text-gray-950">En nu?</h2>
 
-        <Text className="max-w-prose mx-auto mt-1.5">{advice}</Text>
-
-        <Text className="max-w-prose mx-auto mt-2">
-          Leer meer over alle verschillende diploma's op{" "}
-          <TextLink href="/diplomalijn/consument">onze diplomalijn</TextLink>{" "}
-          pagina!
-        </Text>
+        <Suspense>
+          <CertificateAdvise id={params.id} />
+        </Suspense>
       </div>
 
       <div className="mt-10 pb-8 lg:pb-12 xl:pb-16">

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/seed-local-db.js b/scripts/seed-local-db.js
@@ -4,17 +4,29 @@ const cp = require('child_process')
 
 const options = { shell: true, stdio: 'inherit' }
 
-cp.execFileSync(
-  'pnpm',
-  ['--filter', 'core', '--filter', 'scripts', 'build'],
-  options,
-)
-cp.execFileSync('node', ['./packages/scripts/out/seed/seed'], {
-  ...options,
-  env: {
-    PGURI: 'postgresql://postgres:[email protected]:54322/postgres',
-    NEXT_PUBLIC_SUPABASE_URL: 'http://127.0.0.1:54321',
-    SUPABASE_SERVICE_ROLE_KEY:
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU',
-  },
-})
+try {
+  console.log('Executing pnpm build...')
+  cp.execFileSync(
+    'pnpm',
+    ['--filter', 'core', '--filter', 'scripts', 'build'],
+    options,
+  )
+  console.log('pnpm build completed successfully')
+
+  console.log('Executing seed script...')
+  cp.execFileSync('node', ['./packages/scripts/out/seed/seed'], {
+    ...options,
+    env: {
+      ...process.env,
+      PGURI: 'postgresql://postgres:[email protected]:54322/postgres',
+      NEXT_PUBLIC_SUPABASE_URL: 'http://127.0.0.1:54321',
+      SUPABASE_SERVICE_ROLE_KEY:
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU',
+    },
+  })
+  console.log('Seed script completed successfully')
+} catch (error) {
+  console.error('An error occurred:', error.message)
+  console.error('Error details:', error)
+  process.exit(1)
+}
diff --git a/supabase/package.json b/supabase/package.json
@@ -12,6 +12,6 @@
     "deploy": "supabase link --project-ref $SUPABASE_PROJECT_REF && supabase db push"
   },
   "devDependencies": {
-    "supabase": "^1.183.5"
+    "supabase": "^1.192.5"
   }
 }