feat: Configurable question tags

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/MoreDialog/MoreDialog.tsx

@@ -16,6 +16,7 @@ import { TextFieldOptions } from "./TextFieldOptions";
 import { CharacterLimitOptions } from "./CharacterLimitOptions";
 import { useRefsContext } from "@formBuilder/[id]/edit/components/RefsContext";
 import { FormElement } from "@lib/types";
+import { QuestionTagOptions } from "./QuestionTagOptions";
 
 export const MoreDialog = () => {
   const { elements, updateField, setChangeKey, getFormElementById } = useTemplateStore((s) => ({
@@ -118,6 +119,8 @@ export const MoreDialog = () => {
               <TextFieldOptions item={item} setItem={setItem} />
 
               <CharacterLimitOptions item={item} setItem={setItem} />
+
+              <QuestionTagOptions item={item} setItem={setItem} />
             </form>
           </div>
         </Dialog>

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/components/dialogs/MoreDialog/QuestionTagOptions.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from "@i18n/client";
+import { InfoDetails } from "@formBuilder/components/shared/InfoDetails";
+import { FormElement, FormElementTypes } from "@lib/types";
+import { Label } from "./Label";
+import { Hint } from "./Hint";
+import { Input } from "@formBuilder/components/shared/Input";
+import { v4 as uuid } from "uuid";
+
+export const QuestionTagOptions = ({
+  item,
+  setItem,
+}: {
+  item: FormElement;
+  setItem: (item: FormElement) => void;
+}) => {
+  const { t } = useTranslation("form-builder");
+
+  if (item.type === FormElementTypes.richText) {
+    return null;
+  }
+
+  return (
+    <section className="mb-4 mt-8">
+      <Label htmlFor="">{t("Question tag")}</Label>
+      <Hint>
+        {t("Adding a question tag allows the question to contain a permanent identifier.")}
+      </Hint>
+      <Input
+        id={`title--modal--${item.id}`}
+        name={`item${item.id}`}
+        value={item.properties.tag || uuid()}
+        className="w-11/12"
+        onChange={(e) => {
+          setItem({
+            ...item,
+            properties: {
+              ...item.properties,
+              tag: e.target.value,
+            },
+          });
+        }}
+      />
+      <div>
+        <InfoDetails summary={t("How tags can help")}>
+          <div className="mb-8 mt-4 border-l-3 border-gray-500 pl-8">
+            <p className="mb-4 text-sm">{t("text description")}</p>
+          </div>
+        </InfoDetails>
+      </div>
+    </section>
+  );
+};

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/responses/[[...statusFilter]]/actions.ts

@@ -115,7 +115,24 @@ const sortByGroups = ({ form, elements }: { form: FormProperties; elements: Answ
   return sortByLayout({ layout, elements });
 };
 
+// @TODO: moved to lib/responses
+export type TaggedResponse = {
+  tag: string;
+  answer: string;
+};
+
+const extractAnswerFromTaggedResponse = (answer: unknown): string => {
+  try {
+    const answerObject = JSON.parse(answer as string) as TaggedResponse;
+    return answerObject.answer;
+  } catch (e) {
+    return answer as string;
+  }
+};
+
 const getAnswerAsString = (question: FormElement | undefined, answer: unknown): string => {
+  answer = extractAnswerFromTaggedResponse(answer);
+
   if (question && question.type === "checkbox") {
     return Array(answer).join(", ");
   }
@@ -125,6 +142,7 @@ const getAnswerAsString = (question: FormElement | undefined, answer: unknown):
     if (!answer) {
       return "";
     }
+
     const dateFormat = (question.properties.dateFormat || "YYYY-MM-DD") as DateFormat;
     const dateObject = JSON.parse(answer as string) as DateObject;
 
@@ -229,12 +247,12 @@ export const getSubmissionsByFormat = async ({
     const allowGroupsFlag = allowGrouping();
     // Get responses into a ResponseSubmission array containing questions and answers that can be easily transformed
     const responses = queryResult.map((item) => {
+      // console.log({ item });
       const submission = Object.entries(JSON.parse(String(item.formSubmission))).map(
         ([questionId, answer]) => {
           const question = fullFormTemplate.form.elements.find(
             (element) => element.id === Number(questionId)
           );
-
           // Handle Dynamic Rows
           if (question?.type === FormElementTypes.dynamicRow && answer instanceof Array) {
             return {

app/(gcforms)/[locale]/(form filler)/id/[...props]/lib/buildFormDataObject.ts

@@ -22,6 +22,14 @@ export function buildFormDataObject(formRecord: PublicFormRecord, values: Respon
     const result = _handleDynamicRowTypeIfNeeded(element, values[element.id]);
     for (const tuple of result) {
       formData[tuple[0]] = tuple[1];
+
+      // If there is a question tag, store it with the response
+      // if (element.properties.tag) {
+      //   formData[tuple[0]] = JSON.stringify({
+      //     answer: tuple[1],
+      //     tag: element.properties.tag,
+      //   });
+      // }
     }
   }
 

lib/middleware/schemas/templates.schema.json

@@ -128,6 +128,7 @@
           "id": 1,
           "type": "richText",
           "properties": {
+            "tag": "91eac504-d781-4c64-85f2-3233895f907d1",
             "validation": {
               "required": false
             },
@@ -139,6 +140,7 @@
           "id": 2,
           "type": "radio",
           "properties": {
+            "tag": "f8c8245a-3fc0-42a4-8686-e036403734e4",
             "choices": [
               {
                 "en": "Team nomination",
@@ -229,6 +231,11 @@
         "properties": {
           "type": "object",
           "properties": {
+            "tag": {
+              "description": "A configurable tag that can be used to identify the element",
+              "type": "string",
+              "minimum": 0
+            },
             "titleEN": {
               "description": "Input label in English",
               "type": "string"

lib/types/form-types.ts

@@ -50,6 +50,7 @@ export type dynamicRowType = {
 
 // used to define attributes for the properties of an element in the form
 export interface ElementProperties {
+  tag?: string;
   titleEn: string;
   titleFr: string;
   placeholderEn?: string;

lib/utils/form-builder/itemHelper.ts

@@ -1,6 +1,7 @@
 import { FormElement, FormElementTypes, HTMLTextInputTypeAttribute } from "@lib/types";
 import { Language, LocalizedElementProperties } from "../../types/form-builder-types";
 import { isValidatedTextType, isAutoCompleteField } from "@lib/utils/form-builder";
+import { v4 as uuid } from "uuid";
 
 type ElementType =
   | keyof typeof FormElementTypes
@@ -28,6 +29,7 @@ export const defaultField: FormElement = {
   id: 0,
   type: FormElementTypes.textField,
   properties: {
+    tag: uuid(),
     subElements: [],
     choices: [{ en: "", fr: "" }],
     titleEn: "",