@omniumretail/component-library 1.1.75 → 1.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.75",
+  "version": "1.1.77",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/Category/Category.stories.tsx

@@ -46,6 +46,7 @@ const Template: Story<any> = (args) => {
             "IsNumeric": false,
             "HasGrade": false,
             "IsEmphasis": false,
+            "IsMultipleChoise": true,
             "State": "Draft",
             "Grade": 0,
             "Options": [
@@ -75,6 +76,7 @@ const Template: Story<any> = (args) => {
             "IsNumeric": false,
             "HasGrade": false,
             "IsEmphasis": false,
+            "IsMultipleChoise": true,
             "State": "Draft",
             "Grade": 0,
             "Options": [
@@ -104,6 +106,7 @@ const Template: Story<any> = (args) => {
             "IsNumeric": false,
             "HasGrade": false,
             "IsEmphasis": false,
+            "IsMultipleChoise": false,
             "State": "Finished",
             "Grade": 0,
             "Options": [
@@ -127,13 +130,7 @@ const Template: Story<any> = (args) => {
         }
     ]
 
-    const answerTypeOptions = getAnswerTypeOptions?.map((answerType) => ({
-        value: answerType?.Id,
-        label: answerType?.Name
-    }));
-
-
-    return <Category {...args} chooseResponse serverReadyData={setServerData} responseTypeOptions={answerTypeOptions} hasHeader data={[]}></Category>
+    return <Category {...args} chooseResponse serverReadyData={setServerData} responseTypeOptions={getAnswerTypeOptions} hasHeader data={[]}></Category>
 };
 
 export const Primary = Template.bind({});

package/src/components/CategoryResponse/CategoryResponse.stories.tsx

@@ -38,7 +38,7 @@ const Template: Story<any> = (args) => {
     };
 
     useEffect(() => {
-        // console.log(serverData);
+        console.log(serverData);
     }, [serverData])
 
     return (
@@ -167,7 +167,7 @@ Primary.args = {
                                             "Subject": "This is a Subject",
                                             "Description": "This is a description",
                                             "Grade": "50",
-                                            "Answer": null
+                                            "Answer": []
                                         },
                                         {
                                             "Id": "35562A64-A24B-425A-A345-560238CA2468",
@@ -175,7 +175,8 @@ Primary.args = {
                                             "Subject": "This is a Subject",
                                             "Description": "This is a description",
                                             "Grade": "25",
-                                            "Answer": null
+                                            "Answer": ["1"],
+                                            "IsMultipleChoise": false
                                         },
                                         {
                                             "Id": "35562A64-A24B-425A-A345-560238CA2468",
@@ -183,7 +184,8 @@ Primary.args = {
                                             "Subject": "This is a Subject",
                                             "Description": "This is a description",
                                             "Grade": "25",
-                                            "Answer": null
+                                            "Answer": [],
+                                            "IsMultipleChoise": true
                                         }
                                     ]
                                 }
@@ -233,7 +235,7 @@ Primary.args = {
                     "Id": "97A06838-67F9-4726-BC36-719A0C797484",
                     "CategoryId": "CATEGORYID3",
                     "CategoryName": "Category 3",
-                    "OpenAnswer": true,
+                    "OpenAnswer": false,
                     "GeneralEvaluationLevel": 0,
                     "Grade": "0",
                     "Description": "This is a description",
@@ -245,7 +247,8 @@ Primary.args = {
                             "Subject": "This is a Subject",
                             "Description": "This is a description",
                             "Grade": "0",
-                            "Answer": "dwjdiwjdiwjdi"
+                            "Answer": "dwjdiwjdiwjdi",
+                            "IsOpenAnswer": true
                         },
                         {
                             "Id": "93862A64-A24B-425A-A345-560238CA2468",
@@ -253,7 +256,8 @@ Primary.args = {
                             "Subject": "This is a Subject",
                             "Description": "This is a description",
                             "Grade": "0",
-                            "Answer": null
+                            "Answer": null,
+                            "IsMultipleChoise": true
                         }
                     ]
                 }

package/src/components/CategoryResponse/index.tsx

@@ -16,7 +16,7 @@ interface CategoryResponse {
     onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
     onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
     selectYesNoOption?: any;
-    addAction?: (questionId: string, questionAnswerId:string) => void;
+    addAction?: (questionId: string, questionAnswerId: string) => void;
     addButtons?: boolean;
     fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
 };
@@ -84,15 +84,6 @@ const hasCategory = (currentKey: string, categories: Category[], direction: 'nex
     return !!category;
 };
 
-const getTitleWithQuestionCount = (category: any): string => {
-    const questionCount = category?.Data?.Questions?.length;
-    const answeredQuestions = category?.Data?.Questions?.filter((question: any) => question.Answer !== null && question.Answer !== undefined && question.Answer !== '').length;
-
-    return questionCount
-        ? `${category.Title} - ${answeredQuestions} / ${questionCount}`
-        : category.Title;
-};
-
 export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref) => {
     const { data } = props;
 
@@ -117,7 +108,8 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                 Subject: question.Subject,
                 Description: question.Description,
                 Answer: question.Answer || "",
-                Note: question.Note || ""
+                Note: question.Note || "",
+                IsMultipleChoise: question.IsMultipleChoise || false
             })),
             OpenAnswer: OpenAnswer,
             IsYesOrNo: IsYesOrNo
@@ -127,6 +119,16 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
         form.setFieldsValue(initial);
     };
 
+    const getTitleWithQuestionCount = (category: any): string => {
+        const questionCount = category?.Data?.Questions?.length;
+        const answeredQuestions = category?.Data?.Questions?.filter
+            ((question: any) => question.Answer !== null && question.Answer !== undefined && question.Answer !== '' && question.Answer.length > 0).length;
+
+        return questionCount
+            ? `${category.Title} - ${answeredQuestions} / ${questionCount}`
+            : category.Title;
+    };
+
     const handleLabelClick = (category: any, index: number) => {
         setSelectedCategory(category);
         updateInitialValues(category.Data);
@@ -172,8 +174,15 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
         const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
             return {
                 ...question,
-                Answer: values.Questions[index].Answer,
+                Answer: !props.addButtons
+                    ? values.Questions[index].Answer
+                    : Array.isArray(values.Questions[index].Answer)
+                        ? values.Questions[index].Answer
+                        : values.Questions[index].Answer
+                            ? [values.Questions[index].Answer]
+                            : [],
                 Note: values.Questions[index].Note,
+                IsMultipleChoise: values.Questions[index].IsMultipleChoise,
                 Files: fileLists[`${selectedCategory.Data.CategoryId}_${index}`] || [], // Include files in the form data
             };
         });
@@ -347,7 +356,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
 
                                                 <Button customClass={styles.actionsButtons} onClick={() => handleAddAction(question.QuestionId, question.Id)}>
                                                     {t('components.categoryResponse.createAction')}
-                                                    </Button>
+                                                </Button>
                                             </div>
                                         </>
                                     }
@@ -371,6 +380,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                                         : evaluationOptions[selectedEvaluationOption]
                                                 }
                                                 // style={{ minWidth: '100%' }}
+                                                mode={form.getFieldValue(`Questions`)?.[index]?.IsMultipleChoise ? "multiple" : undefined}
                                                 customClass={styles.selectAnswerStyle}
                                             />
                                         </Form.Item>

package/src/components/Questions/SingleQuestion/index.tsx

@@ -2,9 +2,10 @@ import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/
 import { Checkbox, ColorPicker, Form, Input, Space } from 'antd';
 import { t } from 'i18next';
 import styles from './styles.module.scss';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { Select } from 'antd';
 import classnames from 'classnames';
+import { FieldContext } from 'rc-field-form';
 
 export const SingleQuestion = ({
     key,
@@ -24,6 +25,19 @@ export const SingleQuestion = ({
     const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
     const [multipleChoiseCheckbox, setMultipleChoiseCheckbox] = useState<boolean>(false);
 
+    const formContext = useContext(FieldContext);
+
+    const filteredIds = responseTypeOptions
+        .filter((item: { IsMultipleChoise: any; }) => item.IsMultipleChoise)
+        .map((item: { Id: any; }) => item.Id);
+
+    const answerTypeOptions = responseTypeOptions?.map((answerType: any) => ({
+        value: answerType?.Id,
+        label: answerType?.Name
+    }));
+
+    console.log(filteredIds);
+
     const onCheckboxMultipeChoiseHandler = (checked: boolean) => {
         setMultipleChoiseCheckbox(checked);
         handleChanges();
@@ -145,7 +159,8 @@ export const SingleQuestion = ({
                                     <span>{t('components.category.emphasisAnswer')}</span>
                                 </div>
 
-                                    <div className={styles.checkboxContainer}>
+                                {filteredIds.includes(formContext.getFieldsValue().questions?.[name]?.responseType) &&
+                                    < div className={styles.checkboxContainer}>
                                         <Form.Item
                                             {...restField}
                                             name={[name, 'multipleChoise']}
@@ -156,6 +171,8 @@ export const SingleQuestion = ({
 
                                         <span>{t('components.category.multipleChoise')}</span>
                                     </div>
+                                }
+
                             </>
                         }
 
@@ -166,7 +183,7 @@ export const SingleQuestion = ({
                                 rules={[{ required: true, message: t('components.category.errorResponseType')! }]}
                             >
                                 <Select
-                                    options={responseTypeOptions}
+                                    options={answerTypeOptions}
                                     onBlur={handleChanges}
                                     className={styles.selectResponseType}
                                 />
@@ -177,7 +194,8 @@ export const SingleQuestion = ({
                     </div>
                 }
 
-                {responseTypeComponent &&
+                {
+                    responseTypeComponent &&
                     <div className={styles.questionFooter}>
                         <div />
 
@@ -218,7 +236,7 @@ export const SingleQuestion = ({
                         </div>
                     </div>
                 }
-            </Space>
-        </div>
+            </Space >
+        </div >
     );
 };