Merge branch 'issue/9683/userResetPassword_form_switch' of https://gi…

…thub.com/AdityaJ2305/care_fe into issue/9683/userResetPassword_form_switch
ohcnetwork · Jan 7, 2025 · f8fe6a2 · f8fe6a2
2 parents bcb806b + 4cc2c24
commit f8fe6a2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 44 deletions.
diff --git a/src/components/Questionnaire/QuestionTypes/ChoiceQuestion.tsx b/src/components/Questionnaire/QuestionTypes/ChoiceQuestion.tsx
@@ -20,6 +20,7 @@ interface ChoiceQuestionProps {
     questionnaireResponse: QuestionnaireResponse,
   ) => void;
   disabled?: boolean;
+  withLabel?: boolean;
   clearError: () => void;
   index?: number;
 }
@@ -29,6 +30,7 @@ export const ChoiceQuestion = memo(function ChoiceQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled = false,
+  withLabel = true,
   clearError,
   index = 0,
 }: ChoiceQuestionProps) {
@@ -51,10 +53,12 @@ export const ChoiceQuestion = memo(function ChoiceQuestion({
 
   return (
     <div className="space-y-2">
-      <Label className="text-base font-medium">
-        {question.text}
-        {question.required && <span className="ml-1 text-red-500">*</span>}
-      </Label>
+      {withLabel && (
+        <Label className="text-base font-medium">
+          {question.text}
+          {question.required && <span className="ml-1 text-red-500">*</span>}
+        </Label>
+      )}
       <Select
         value={currentValue}
         onValueChange={handleValueChange}

diff --git a/src/components/Questionnaire/QuestionTypes/NumberQuestion.tsx b/src/components/Questionnaire/QuestionTypes/NumberQuestion.tsx
@@ -38,9 +38,10 @@ export function NumberQuestion({
 
   return (
     <div className={cn(classes)}>
-      <Label className="text-base font-medium">
+      <Label className="text-base font-medium flex justify-between">
         {question.text}
         {question.required && <span className="ml-1 text-red-500">*</span>}
+        <span className="text-sm text-gray-500">{question.unit?.code}</span>
       </Label>
       <Input
         type="number"

diff --git a/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx b/src/components/Questionnaire/QuestionTypes/QuestionGroup.tsx
@@ -108,46 +108,47 @@ export const QuestionGroup = memo(function QuestionGroup({
   const isActive = activeGroupId === question.id;
 
   return (
-    <div className="pt-4">
+    <div
+      title="group_styling"
+      className={cn(
+        "space-y-4 rounded-lg border p-4",
+        isActive && "ring-2 ring-primary",
+        question.styling_metadata?.classes && question.styling_metadata.classes,
+      )}
+    >
+      {question.text && (
+        <div className="space-y-1">
+          <Label className="text-lg font-semibold text-green-600">
+            {question.text}
+          </Label>
+          {question.description && (
+            <p className="text-sm text-muted-foreground">
+              {question.description}
+            </p>
+          )}
+        </div>
+      )}
       <div
+        title="group_container_styling"
         className={cn(
-          "space-y-4 rounded-lg border p-4",
-          isActive && "ring-2 ring-primary",
+          "gap-2",
+          question.styling_metadata?.containerClasses &&
+            question.styling_metadata.containerClasses,
         )}
       >
-        {question.text && (
-          <div className="space-y-1">
-            <Label className="text-lg font-semibold text-green-600">
-              {question.text}
-            </Label>
-            {question.description && (
-              <p className="text-sm text-muted-foreground">
-                {question.description}
-              </p>
-            )}
-          </div>
-        )}
-        <div
-          className={cn(
-            "gap-2",
-            question.styling_metadata?.classes &&
-              question.styling_metadata.classes,
-          )}
-        >
-          {question.questions?.map((subQuestion) => (
-            <QuestionGroup
-              facilityId={facilityId}
-              key={subQuestion.id}
-              question={subQuestion}
-              questionnaireResponses={questionnaireResponses}
-              updateQuestionnaireResponseCB={updateQuestionnaireResponseCB}
-              errors={errors}
-              clearError={clearError}
-              disabled={disabled}
-              activeGroupId={activeGroupId}
-            />
-          ))}
-        </div>
+        {question.questions?.map((subQuestion) => (
+          <QuestionGroup
+            facilityId={facilityId}
+            key={subQuestion.id}
+            question={subQuestion}
+            questionnaireResponses={questionnaireResponses}
+            updateQuestionnaireResponseCB={updateQuestionnaireResponseCB}
+            errors={errors}
+            clearError={clearError}
+            disabled={disabled}
+            activeGroupId={activeGroupId}
+          />
+        ))}
       </div>
     </div>
   );

diff --git a/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx b/src/components/Questionnaire/QuestionTypes/QuestionInput.tsx
@@ -72,13 +72,14 @@ export function QuestionInput({
     });
   };
 
-  const renderSingleInput = (index: number = 0) => {
+  const renderSingleInput = (index: number = 0, withLabel: boolean = true) => {
     const commonProps = {
       classes: question.styling_metadata?.classes,
       question,
       questionnaireResponse,
       updateQuestionnaireResponseCB,
       disabled,
+      withLabel,
       clearError,
       index,
     };
@@ -159,8 +160,10 @@ export function QuestionInput({
             );
 
           return (
-            <div key={index} className="mt-2 gap-2">
-              <div>{renderSingleInput(index)}</div>
+            <div key={index} className="mt-2 gap-2 flex items-end">
+              <div className="flex-1">
+                {renderSingleInput(index, index === 0)}
+              </div>
               {removeButton}
             </div>
           );

diff --git a/src/types/questionnaire/question.ts b/src/types/questionnaire/question.ts
@@ -60,6 +60,7 @@ export interface Question {
   structured_type?: StructuredQuestionType;
   styling_metadata?: {
     classes?: string;
+    containerClasses?: string;
   };
   required?: boolean;
   collect_time?: boolean;