Add edit questionnaire response page

aidbox-forms-smart-launch-2/src/app/(authorized)/questionnaire-responses/[id]/page.tsx

@@ -0,0 +1,71 @@
+import { getCurrentAidbox } from "@/lib/server/smart";
+import { PageHeader } from "@/components/page-header";
+import { Questionnaire, QuestionnaireResponse } from "fhir/r4";
+import { QuestionnaireEditor } from "@/components/questionnaire-editor";
+import { getFirst } from "@/lib/utils";
+import { QuestionnaireResponseEditor } from "@/components/questionnaire-response-editor";
+
+interface PageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default async function EditQuestionnaireResponsePage({
+  params,
+}: PageProps) {
+  const aidbox = await getCurrentAidbox();
+  const { id } = await params;
+
+  const questionnaireResponse = await aidbox
+    .get(`fhir/QuestionnaireResponse/${id}`, {})
+    .json<QuestionnaireResponse>();
+
+  if (!questionnaireResponse) {
+    throw new Error("Questionnaire response not found");
+  }
+
+  const [url, version] = questionnaireResponse.questionnaire?.split("|") || [];
+
+  const questionnaire = await aidbox
+    .get(`fhir/Questionnaire?url=${url}&${version ? `version=${version}` : ""}`)
+    .json<Questionnaire>()
+    .then(getFirst);
+
+  if (!questionnaire) {
+    throw new Error("Questionnaire not found");
+  }
+
+  async function saveQuestionnaireResponse(
+    questionnaireResponse: QuestionnaireResponse,
+  ) {
+    "use server";
+
+    const aidbox = await getCurrentAidbox();
+    return aidbox
+      .put(`fhir/QuestionnaireResponse/${id}`, {
+        json: questionnaireResponse,
+      })
+      .json<QuestionnaireResponse>();
+  }
+
+  return (
+    <>
+      <PageHeader
+        items={[
+          { href: "/", label: "Home" },
+          {
+            href: "/questionnaire-responses",
+            label: "Questionnaire responses",
+          },
+          { label: "Form filler" },
+        ]}
+      />
+      <QuestionnaireResponseEditor
+        questionnaire={questionnaire}
+        questionnaireResponse={questionnaireResponse}
+        onSaveAction={saveQuestionnaireResponse}
+      />
+    </>
+  );
+}

aidbox-forms-smart-launch-2/src/app/(authorized)/questionnaires/[id]/page.tsx

@@ -9,7 +9,7 @@ interface PageProps {
   }>;
 }
 
-export default async function QuestionnairesPage({ params }: PageProps) {
+export default async function EditQuestionnairePage({ params }: PageProps) {
   const aidbox = await getCurrentAidbox();
   const { id } = await params;
 

aidbox-forms-smart-launch-2/src/components/forms-renderer.tsx

@@ -4,6 +4,7 @@ import { Questionnaire, QuestionnaireResponse } from "fhir/r4";
 
 export function FormsRenderer({
   questionnaire,
+  questionnaireResponse,
   onChange,
 }: {
   questionnaire: Questionnaire;
@@ -34,7 +35,7 @@ export function FormsRenderer({
     <aidbox-form-renderer
       ref={ref}
       questionnaire={JSON.stringify(questionnaire)}
-      questionnaire-response={JSON.stringify(questionnaire)}
+      questionnaire-response={JSON.stringify(questionnaireResponse)}
       style={{
         width: "100%",
         height: "100%",

aidbox-forms-smart-launch-2/src/components/questionnaire-response-editor.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { FormsBuilder } from "@/components/forms-builder";
+import { Questionnaire, QuestionnaireResponse } from "fhir/r4";
+import { Suspense, useTransition } from "react";
+import { Spinner } from "@/components/spinner";
+import { FormsRenderer } from "@/components/forms-renderer";
+
+interface QuestionnaireResponseEditorProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse: QuestionnaireResponse;
+  onSaveAction: (
+    questionnaireResponse: QuestionnaireResponse,
+  ) => Promise<QuestionnaireResponse>;
+}
+
+export function QuestionnaireResponseEditor({
+  questionnaire,
+  questionnaireResponse,
+  onSaveAction,
+}: QuestionnaireResponseEditorProps) {
+  const [, startTransition] = useTransition();
+
+  return (
+    <Suspense fallback={<Spinner expand="true" />}>
+      <FormsRenderer
+        questionnaire={questionnaire}
+        questionnaireResponse={questionnaireResponse}
+        onChange={(updatedQuestionnaireResponse) => {
+          startTransition(async () => {
+            try {
+              await onSaveAction(updatedQuestionnaireResponse);
+            } catch (error) {
+              console.error("Failed to save questionnaire response:", error);
+            }
+          });
+        }}
+      />
+    </Suspense>
+  );
+}