@omniumretail/component-library 1.1.74 → 1.1.76

package/dist/main.css

@@ -18,7 +18,7 @@
 .gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
 .lOKzfPUFf3ukLT2wGZaY{display:grid;grid-template-columns:300px auto;gap:16px}.OIrZOBn2f036M5MGzc61,.adDQP_uvIYgNFVC4VdHj{background:#fff;padding:20px;overflow:auto}
 .yBjbWkudwA_AOwhHrnlc .ant-tree-title{font-weight:var(--font-weight-semibold)}.yBjbWkudwA_AOwhHrnlc button{margin-top:32px;width:100%}.yBjbWkudwA_AOwhHrnlc button:nth-child(3){margin-top:12px}.je000VEfsPqZupGr8ymu{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase}.tUDGWNXopUejF6zWJloy{margin-top:20px}
-.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.BAso_dbeoowN7VtxWiKx.W120L8cnn6ydwOqHngty{max-width:650px}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}@media(max-width: 768px){.GbZVOtcaUURjn4CweVjF{gap:12px}}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}@media(max-width: 768px){.C3Qrjv76hDipL39fyfzf{width:100%}}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:250px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:150px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}
+.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.BAso_dbeoowN7VtxWiKx.W120L8cnn6ydwOqHngty{max-width:650px}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}@media(max-width: 768px){.GbZVOtcaUURjn4CweVjF{gap:12px}}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}@media(max-width: 768px){.C3Qrjv76hDipL39fyfzf{width:100%}}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:200px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:100px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}
 .vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.k3OGGGQwXB0zmX0T61yt{display:flex;gap:32px}.JHuRhb2cRXyGWESiQ2TQ{width:100%}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
 .j8_c3JHTX0JOkT36fF6A{contain:inline-size}.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{height:50px;width:300px}@media(min-width: 1024px){.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{width:450px}}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close{color:var(--color-white);font-size:12px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover{color:var(--color-black)}
 .BWmwZ5nFKyctBZyOAXzg{width:100%}.GWTSauaAl_v9W8o4YPxW{background:rgba(44,45,46,.0509803922);height:100%;position:relative}.GWTSauaAl_v9W8o4YPxW .ant-menu-light{background-color:rgba(0,0,0,0) !important;border-inline-end:none !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content{font-size:17px;line-height:20px;font-weight:var(--font-weight-semibold)}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content{font-size:15px;line-height:18px;font-weight:var(--font-weight-medium)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item{height:30px;line-height:30px;margin-bottom:16px}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child{margin-top:-10px}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu{border-top:1px solid var(--color-orange);border-radius:0}.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected>.ant-menu-submenu-title{color:var(--color-orange);background-color:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline{background:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title{height:50px !important;line-height:50px !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content{overflow-x:auto;text-overflow:unset}.hWGer1IJ7RdkfQWwYfsw{position:absolute;top:24px;left:24px;right:24px;height:144px}.MD1FhirslDDwd2izGwai{font-size:var(--font-size-body-2);line-height:14px;font-weight:var(--font-weight-light);display:inline-block;padding:12px;cursor:pointer;position:absolute;right:0;top:60px}.RxGn4c38kNq8Ai4ypW_x{position:absolute;top:144px;left:24px;right:24px;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.9)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.74",
+  "version": "1.1.76",
   "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 (
@@ -175,7 +175,8 @@ Primary.args = {
                                             "Subject": "This is a Subject",
                                             "Description": "This is a description",
                                             "Grade": "25",
-                                            "Answer": null
+                                            "Answer": null,
+                                            "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": null,
+                                            "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>[]>>>;
 };
@@ -117,7 +117,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
@@ -174,6 +175,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                 ...question,
                 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 +349,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 +373,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,
@@ -22,6 +23,25 @@ export const SingleQuestion = ({
 }: any) => {
     const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
     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();
+    }
 
     const onCheckboxMandatoryHandler = (checked: boolean) => {
         setMandatoryCheckbox(checked);
@@ -138,6 +158,21 @@ export const SingleQuestion = ({
 
                                     <span>{t('components.category.emphasisAnswer')}</span>
                                 </div>
+
+                                {filteredIds.includes(formContext.getFieldsValue().questions?.[name]?.responseType) &&
+                                    < div className={styles.checkboxContainer}>
+                                        <Form.Item
+                                            {...restField}
+                                            name={[name, 'multipleChoise']}
+                                            valuePropName='checked'
+                                        >
+                                            <Checkbox onChange={(e) => onCheckboxMultipeChoiseHandler(e.target.checked)} checked={multipleChoiseCheckbox} />
+                                        </Form.Item>
+
+                                        <span>{t('components.category.multipleChoise')}</span>
+                                    </div>
+                                }
+
                             </>
                         }
 
@@ -148,7 +183,7 @@ export const SingleQuestion = ({
                                 rules={[{ required: true, message: t('components.category.errorResponseType')! }]}
                             >
                                 <Select
-                                    options={responseTypeOptions}
+                                    options={answerTypeOptions}
                                     onBlur={handleChanges}
                                     className={styles.selectResponseType}
                                 />
@@ -159,7 +194,8 @@ export const SingleQuestion = ({
                     </div>
                 }
 
-                {responseTypeComponent &&
+                {
+                    responseTypeComponent &&
                     <div className={styles.questionFooter}>
                         <div />
 
@@ -200,7 +236,7 @@ export const SingleQuestion = ({
                         </div>
                     </div>
                 }
-            </Space>
-        </div>
+            </Space >
+        </div >
     );
 };

package/src/components/Questions/SingleQuestion/styles.module.scss

@@ -78,10 +78,10 @@ $questionAndInformationGap: 20px;
 }
 
 .selectResponseType {
-    min-width: 250px;
+    min-width: 200px;
 
     @media(max-width: 768px) {
-        min-width: 150px;
+        min-width: 100px;
     }
 }
 

package/src/locales/en.json

@@ -54,6 +54,7 @@
             "header": "Header",
             "color": "Assigned colour",
             "flagged": "Flagged",
+            "multipleChoise": "Multiple selection",
             "placeholderScore": "Score",
             "answerNameIsMissing": "Missing name",
             "typeResponseNameIsMissing": "Name of the missing answer type",

package/src/locales/es.json

@@ -54,6 +54,7 @@
             "header": "Cabecera",
             "color": "Color asignado",
             "flagged": "Marcado",
+            "multipleChoise": "Selección múltiple",
             "placeholderScore": "Puntuación",
             "answerNameIsMissing": "Falta el nombre",
             "typeResponseNameIsMissing": "Nombre del tipo de respuesta que falta",

package/src/locales/pt.json

@@ -55,6 +55,7 @@
             "header": "Cabeçalho",
             "color": "Cor atribuída",
             "flagged": "Sinalizado",
+            "multipleChoise": "Seleção múltipla",
             "placeholderScore": "Pontuação",
             "typeResponseNameIsMissing": "Nome do tipo de resposta em falta",
             "responseTypeName": "Nome do tipo de resposta"