Link submission into form response

ikigai-hq · Aug 24, 2024 · 78460c6 · 78460c6
1 parent fbae1b9
commit 78460c6
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 63 deletions.
diff --git a/...Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx b/...Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx
@@ -2,6 +2,9 @@ import useDocumentStore from "store/DocumentStore";
 import { useQuery } from "@apollo/client";
 import { Button, Heading, Table, Text } from "@radix-ui/themes";
 import { Trans } from "@lingui/macro";
+import { CSVLink } from "react-csv";
+import React from "react";
+import Link from "next/link";
 
 import { GET_EMBEDDED_RESPONSES } from "graphql/query/DocumentQuery";
 import { handleError } from "graphql/ApolloClient";
@@ -10,8 +13,7 @@ import {
   GetEmbeddedResponses_documentGetEmbeddedSession_responses,
 } from "graphql/types";
 import { formatTimestamp, FormatType, getNowAsSec } from "util/Time";
-import { CSVLink } from "react-csv";
-import React from "react";
+import { formatDocumentRoute } from "config/Routes";
 
 const FormResponses = () => {
   const title = useDocumentStore((state) => state.activeDocument?.title);
@@ -55,6 +57,7 @@ const FormResponses = () => {
             <Table.ColumnHeaderCell>
               <Trans>Response at</Trans>
             </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell />
           </Table.Row>
         </Table.Header>
 
@@ -70,6 +73,19 @@ const FormResponses = () => {
               <Table.Cell>
                 {formatTimestamp(response.createdAt, FormatType.DateTimeFormat)}
               </Table.Cell>
+              <Table.Cell>
+                {response.submission && (
+                  <Link
+                    href={formatDocumentRoute(response.submission?.documentId)}
+                    target="_blank"
+                    passHref
+                  >
+                    <a target="_blank">
+                      <Button variant="soft">View submission</Button>
+                    </a>
+                  </Link>
+                )}
+              </Table.Cell>
             </Table.Row>
           ))}
         </Table.Body>

diff --git a/...ponents/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx b/...ponents/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx
@@ -28,7 +28,6 @@ import { handleError } from "graphql/ApolloClient";
 import Modal from "components/base/Modal";
 
 const ShareAssignment = () => {
-  const [showPreview, setShowPreview] = useState(false);
   const activeDocumentId = useDocumentStore((state) => state.activeDocumentId);
   const activeDocumentTitle = useDocumentStore(
     (state) => state.activeDocument?.title,
@@ -175,7 +174,7 @@ const ShareAssignment = () => {
               </Trans>
             </Text>
             <TextArea
-              value={`<iframe src="${url}?embedded=true" title="${activeDocumentTitle}" width="100%" height="100%" frameborder="0"></iframe>`}
+              value={`<iframe src="${url}" title="${activeDocumentTitle}" width="100%" height="100%" frameborder="0"></iframe>`}
               readOnly
               rows={6}
             />
@@ -186,57 +185,16 @@ const ShareAssignment = () => {
             <Trans>Form Preview</Trans>
           </Heading>
           <iframe
-            src={url}
+            src={`${url}?readOnly=true`}
             title="Ikigia Embedded"
             width="100%"
             height="100%"
             frameBorder={0}
           ></iframe>
         </div>
       </div>
-      {showPreview && (
-        <ReviewEmbeddedForm
-          open={showPreview}
-          onChangeOpen={setShowPreview}
-          url={`${url}?readOnly=true`}
-        />
-      )}
     </div>
   );
 };
 
-type ReviewEmbeddedFormProps = {
-  open: boolean;
-  onChangeOpen: (open: boolean) => void;
-  url: string;
-};
-
-const ReviewEmbeddedForm = ({
-  open,
-  onChangeOpen,
-  url,
-}: ReviewEmbeddedFormProps) => {
-  return (
-    <Modal
-      content={
-        <div style={{ height: "80vh" }}>
-          <iframe
-            src={url}
-            title="Ikigia Embedded"
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          ></iframe>
-        </div>
-      }
-      minWidth={"90vw"}
-      maxWidth={"90vw"}
-      open={open}
-      onOpenChange={onChangeOpen}
-    >
-      <></>
-    </Modal>
-  );
-};
-
 export default ShareAssignment;
diff --git a/apps/ikigai/graphql/graphql-schema.json b/apps/ikigai/graphql/graphql-schema.json
@@ -5601,6 +5601,18 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "submission",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "OBJECT",
+              "name": "Submission",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

diff --git a/apps/ikigai/graphql/query/DocumentQuery.ts b/apps/ikigai/graphql/query/DocumentQuery.ts
@@ -149,6 +149,10 @@ export const GET_EMBEDDED_RESPONSES = gql`
           lastName
         }
         createdAt
+        submission {
+          id
+          documentId
+        }
       }
     }
   }

diff --git a/apps/ikigai/graphql/types.ts b/apps/ikigai/graphql/types.ts
@@ -1793,11 +1793,17 @@ export interface GetEmbeddedResponses_documentGetEmbeddedSession_responses_respo
   lastName: string;
 }
 
+export interface GetEmbeddedResponses_documentGetEmbeddedSession_responses_submission {
+  id: number;
+  documentId: any;
+}
+
 export interface GetEmbeddedResponses_documentGetEmbeddedSession_responses {
   submissionId: number | null;
   responseUserId: number;
   responseData: GetEmbeddedResponses_documentGetEmbeddedSession_responses_responseData;
   createdAt: number;
+  submission: GetEmbeddedResponses_documentGetEmbeddedSession_responses_submission | null;
 }
 
 export interface GetEmbeddedResponses_documentGetEmbeddedSession {

diff --git a/apps/ikigai/locales/en/messages.po b/apps/ikigai/locales/en/messages.po
@@ -120,7 +120,7 @@ msgstr "Answer Options"
 #~ msgid "Anyone with link can <0>do the assignment</0> by fill a<1> Form with email, phone number, first name, and last name.</1>"
 #~ msgstr "Anyone with link can <0>do the assignment</0> by fill a<1> Form with email, phone number, first name, and last name.</1>"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:160
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:159
 msgid "Anyone with the link can <0>do the assignment</0> by filling out a form with their email, phone number, and name."
 msgstr "Anyone with the link can <0>do the assignment</0> by filling out a form with their email, phone number, and name."
 
@@ -270,7 +270,7 @@ msgstr "Content"
 msgid "Copied"
 msgstr "Copied"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:104
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:103
 #: components/SpaceSetting/CreateSpaceInvite.tsx:138
 #: components/SpaceSetting/InviteSpaceSetting.tsx:156
 msgid "Copied!"
@@ -289,12 +289,12 @@ msgstr "Copied!"
 msgid "Copy invite link"
 msgstr "Copy invite link"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:154
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:153
 #: components/Document/DocumentHeader/Menubar/index.tsx:144
 msgid "Copy Link"
 msgstr "Copy Link"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:172
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:171
 msgid "Copy the code below and paste it into your website to embed this assignment."
 msgstr "Copy the code below and paste it into your website to embed this assignment."
 
@@ -416,13 +416,13 @@ msgstr "Edit Page"
 msgid "Edit Profile"
 msgstr "Edit Profile"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:50
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:52
 #: components/MagicLink/index.tsx:63
 #: components/PreJoinSpace.tsx:65
 msgid "Email"
 msgstr "Email"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:169
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:168
 msgid "Embed code"
 msgstr "Embed code"
 
@@ -439,7 +439,7 @@ msgstr "Embed code"
 msgid "Exit"
 msgstr "Exit"
 
-#: components/Document/index.tsx:37
+#: components/Document/index.tsx:36
 msgid "Exit focus mode"
 msgstr "Exit focus mode"
 
@@ -463,7 +463,7 @@ msgstr "Expire at"
 msgid "Expired"
 msgstr "Expired"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:106
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:122
 #: components/Document/LeftSide/LeftSecondarySide/Gradebook.tsx:236
 msgid "Export to CSV"
 msgstr "Export to CSV"
@@ -525,19 +525,19 @@ msgstr "First name"
 msgid "Folder"
 msgstr "Folder"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:186
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:185
 msgid "Form Preview"
 msgstr "Form Preview"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:32
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:34
 msgid "Form Responses"
 msgstr "Form Responses"
 
 #: components/Rubric/index.tsx:372
 msgid "From point"
 msgstr "From point"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:47
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:49
 msgid "Full name"
 msgstr "Full name"
 
@@ -884,7 +884,7 @@ msgstr "Oops! We found an unexpected error..."
 #~ msgid "Pages & Edit tools"
 #~ msgstr "Pages & Edit tools"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:53
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:55
 msgid "Phone number"
 msgstr "Phone number"
 
@@ -985,7 +985,7 @@ msgstr "Remove member"
 msgid "Removed!"
 msgstr "Removed!"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:56
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:58
 msgid "Response at"
 msgstr "Response at"
 
@@ -1095,7 +1095,7 @@ msgstr "Sent. Please check your email inbox!"
 msgid "Share & Embed"
 msgstr "Share & Embed"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:145
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:144
 msgid "Share link"
 msgstr "Share link"
 
@@ -1266,7 +1266,7 @@ msgstr "Text color"
 #~ msgid "The answer is incorrect! Correct answer is <0>{explainAnswer}</0>"
 #~ msgstr "The answer is incorrect! Correct answer is <0>{explainAnswer}</0>"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:35
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/FormResponses.tsx:37
 msgid "The response after a student fills out the form before doing the assignment via the Share & Embed feature."
 msgstr "The response after a student fills out the form before doing the assignment via the Share & Embed feature."
 
@@ -1606,6 +1606,6 @@ msgstr "Your last submission already has feedback. Please check it!"
 msgid "Your space is empty"
 msgstr "Your space is empty"
 
-#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:118
+#: components/Document/DocumentBody/CoverPage/AssignmentCoverPageBody/ShareAssignment/index.tsx:117
 msgid "Your students will need to fill out a form before they can start the assignment. The responses of students will be stored in the Share Responses tab."
 msgstr "Your students will need to fill out a form before they can start the assignment. The responses of students will be stored in the Share Responses tab."
diff --git a/graphql_server/src/db/embedded_session.rs b/graphql_server/src/db/embedded_session.rs
@@ -109,7 +109,7 @@ pub struct EmbeddedResponse {
 impl_jsonb_for_db!(EmbeddedResponse);
 
 #[derive(Debug, Clone, SimpleObject, InputObject, Insertable, Queryable)]
-#[graphql(input_name = "EmbeddedFormResponseInput")]
+#[graphql(input_name = "EmbeddedFormResponseInput", complex)]
 #[diesel(table_name = embedded_form_responses)]
 pub struct EmbeddedSessionResponse {
     #[graphql(skip_input)]

diff --git a/graphql_server/src/graphql/document_action/mod.rs b/graphql_server/src/graphql/document_action/mod.rs
@@ -160,3 +160,16 @@ impl EmbeddedSession {
         Ok(responses)
     }
 }
+
+#[ComplexObject]
+impl EmbeddedSessionResponse {
+    async fn submission(&self, ctx: &Context<'_>) -> Result<Option<Submission>> {
+        if let Some(submission_id) = self.submission_id {
+            let loader = ctx.data_unchecked::<DataLoader<IkigaiDataLoader>>();
+            let submission = loader.load_one(SubmissionById(submission_id)).await?;
+            Ok(submission)
+        } else {
+            Ok(None)
+        }
+    }
+}