@omniumretail/component-library 1.2.71 → 1.2.73

package/src/components/CategoryResponse/index.tsx

@@ -1,502 +0,0 @@
-import styles from './styles.module.scss';
-import { useEffect, useImperativeHandle, useState } from 'react';
-import { Form, UploadFile, Upload, DatePicker, InputNumber, Tag, Modal } from 'antd';
-import { useForm } from 'antd/es/form/Form';
-import classNames from 'classnames';
-import TextArea from 'antd/es/input/TextArea';
-import { Select } from '../Select';
-import { evaluationOptions } from './evaluationOptions';
-import React from 'react';
-import { t } from 'i18next';
-import { Button } from '../Button';
-import dayjs from 'dayjs';
-import { CommentOutlined, FileDoneOutlined, PictureOutlined } from '@ant-design/icons';
-
-interface CategoryResponse {
-    data: any;
-    serverReadyData: any;
-    onNextCategoryAvailabilityChange: (hasNext: boolean) => void;
-    onPreviousCategoryAvailabilityChange: (hasPrevious: boolean) => void;
-    selectYesNoOption?: any;
-    addAction?: (questionId: string, questionAnswerId: string) => void;
-    openAction?: (actionId: string) => void;
-    addButtons?: boolean;
-    fileList?: React.Dispatch<React.SetStateAction<Record<string, UploadFile<any>[]>>>;
-    initialFileList?: any;
-};
-
-type Category = {
-    Title: string;
-    Key: string;
-    Data: any;
-    Children?: Category[];
-};
-
-const updateCategoryAnswers = (CategoryAnswers: any[], categoryToUpdate: any, updatedQuestions: any) => {
-    CategoryAnswers.forEach((category: any) => {
-        if (category.Data.CategoryId === categoryToUpdate.CategoryId) {
-            category.Data.Questions = category.Data.Questions.map((question: any, index: any) => {
-                return {
-                    ...question,
-                    Answer: updatedQuestions[index].Answer,
-                    Note: updatedQuestions[index].Note,
-                    ImagesList: updatedQuestions[index].ImagesList
-                };
-            });
-        }
-        else if (category.Children && category.Children.length > 0) {
-            updateCategoryAnswers(category.Children, categoryToUpdate, updatedQuestions);
-        }
-    });
-    return CategoryAnswers;
-};
-
-const findCategoryWithQuestions = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): Category | null => {
-    let foundCurrent = false;
-
-    const searchCategories = (categoryList: Category[], direction: 'next' | 'prev'): Category | null => {
-        const iterable = direction === 'next' ? categoryList : [...categoryList].reverse();
-
-        for (const category of iterable) {
-            if (foundCurrent) {
-                if (category.Data.Questions.length > 0) {
-                    return category;
-                }
-            } else if (category.Key === currentKey) {
-                foundCurrent = true;
-            }
-
-            if (category.Children) {
-                const result = searchCategories(category.Children, direction);
-                if (result) {
-                    return result;
-                }
-            }
-        }
-        return null;
-    };
-
-    return searchCategories(categories, direction);
-};
-
-const getCategoryObject = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): any => {
-    const category = findCategoryWithQuestions(currentKey, categories, direction);
-    return category ? category.Data : null;
-};
-
-const hasCategory = (currentKey: string, categories: Category[], direction: 'next' | 'prev'): boolean => {
-    const category = findCategoryWithQuestions(currentKey, categories, direction);
-    return !!category;
-};
-
-export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref) => {
-    const { data } = props;
-    const [currentKey, setCurrentKey] = useState(data.CategoryAnswers[0].Key);
-    const [localData, setLocalData] = useState<any>(data);
-    // Setting first set of questions as default open
-    const [selectedCategory, setSelectedCategory] = useState<any>(data.CategoryAnswers[0]);
-    const [initialValues, setInitialValues] = useState<any>(data.CategoryAnswers[0].Data);
-    const [fileLists, setFileLists] = useState<Record<string, UploadFile[]>>(props.initialFileList || []);
-    const [dataValue, setDataValue] = useState<any>();
-    const [isNoteVisible, setIsNoteVisible] = useState<{ categoryIndex: number; questionIndex: number } | null>(null);
-    const [form] = useForm();
-    const [isMobile, setIsMobile] = useState(window.innerWidth < 767);
-    const [previewVisible, setPreviewVisible] = useState(false);
-    const [previewImage, setPreviewImage] = useState<string>("");
-
-    const handleResize = () => {
-        setIsMobile(window.innerWidth < 767);
-    };
-
-    useEffect(() => {
-        handleResize();
-
-        const resizeListener = () => {
-            handleResize();
-        };
-
-        window.addEventListener('resize', resizeListener);
-
-        return () => {
-            window.removeEventListener('resize', resizeListener);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (props.initialFileList) {
-            setFileLists(props.initialFileList);
-        }
-    }, [props.initialFileList]);
-
-    const updateInitialValues = (data: any) => {
-        const {
-            Questions,
-            OpenAnswer,
-            IsYesOrNo
-        } = data;
-
-        const initial = {
-            Questions: Questions.map((question: any) => ({
-                Subject: question.Subject,
-                Description: question.Description,
-                Answer: props.addButtons
-                    ? !question.Disabled
-                        ? (question.IsDate
-                            ? (question?.Answer?.length > 0
-                                ? dayjs.unix(Number(question?.Answer))
-                                : null)
-                            : question.Answer)
-                        : question.Answer
-                    : question.Answer,
-                Note: question.Note || "",
-                IsMultipleChoise: question.IsMultipleChoise || false,
-                IsNumerical: question.IsNumerical || false,
-                IsDate: question.IsDate || false,
-                IsOpenAnswer: question.IsOpenAnswer || false,
-                IsMandatory: question.IsMandatory || false
-            })),
-            OpenAnswer: OpenAnswer,
-            IsYesOrNo: IsYesOrNo
-        };
-
-        setInitialValues(initial);
-        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);
-        setCurrentKey(index);
-    };
-
-    const handleFileChange = (fileList: UploadFile[], categoryIndex: number, questionIndex: number) => {
-        const key = `${categoryIndex}_${questionIndex}`;
-        setFileLists((prev) => ({
-            ...prev,
-            [key]: fileList,
-        }));
-    };
-
-    useEffect(() => {
-        if (props.fileList) {
-            props.fileList(fileLists);
-        }
-    }, [fileLists]);
-
-    const onPreview = async (file: UploadFile) => {
-        let src = file.url as string;
-        if (!src) {
-            src = await new Promise((resolve) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(file.originFileObj!);
-                reader.onload = () => resolve(reader.result as string);
-            });
-        }
-
-        setPreviewImage(src);
-        setPreviewVisible(true);
-    };
-
-    const handleAddAction = (questionId: string, questionAnswerId: string) => {
-        if (props.addAction) {
-            props.addAction(questionId, questionAnswerId);
-        }
-    };
-
-    const onFinish = (values: any) => {
-        const updatedQuestions = initialValues.Questions.map((question: any, index: number) => {
-
-            return {
-                ...question,
-                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
-            };
-        });
-
-        const updatedCategory = updateCategoryAnswers(localData.CategoryAnswers, selectedCategory.Data, updatedQuestions);
-
-        const updatedLocalData = { ...localData, CategoryAnswers: updatedCategory };
-
-        setLocalData(updatedLocalData);
-    };
-
-    const renderCategories = (categories: any) => {
-        return categories.map((category: any, index: number) => {
-            const labelClasses = classNames({
-                [styles.cursorPointer]: category.Data.Questions.length > 0
-            }, [styles.label]);
-
-            const indexCheck = category.Data.Questions.length > 0 && category.Key;
-
-            return (
-                <div
-                    className={`${styles.labelWrapper} ${category.Data.CategoryId === selectedCategory.Data.CategoryId ? styles.active : ""}`}
-                    key={index}
-                >
-                    <div
-                        className={labelClasses}
-                        data-index={indexCheck}
-                        onClick={() => category.Data.Questions.length > 0 && handleLabelClick(category, indexCheck)}
-                    >
-                        {getTitleWithQuestionCount(category)}
-                    </div>
-                    {category.Children && (
-                        <div className={styles.subCategory}>
-                            {renderCategories(category.Children)}
-                        </div>
-                    )}
-                </div>
-            )
-        });
-    };
-
-    const handleNextClick = () => {
-        const nextCategory = findCategoryWithQuestions(currentKey, localData.CategoryAnswers, 'next');
-        if (nextCategory) {
-            setCurrentKey(nextCategory.Key);
-            setSelectedCategory(nextCategory);
-        }
-
-        const nextCategoryData = getCategoryObject(currentKey, localData.CategoryAnswers, 'next');
-        setSelectedCategory(nextCategoryData ? { ...nextCategory, data: nextCategoryData } : null);
-        updateInitialValues(nextCategoryData);
-    };
-
-    const handlePreviousClick = () => {
-        const prevCategory = findCategoryWithQuestions(currentKey, localData.CategoryAnswers, 'prev');
-        if (prevCategory) {
-            setCurrentKey(prevCategory.Key);
-            setSelectedCategory(prevCategory);
-        }
-
-        const prevCategoryData = getCategoryObject(currentKey, localData.CategoryAnswers, 'prev');
-        setSelectedCategory(prevCategoryData ? { ...prevCategory, data: prevCategoryData } : null);
-        updateInitialValues(prevCategoryData);
-    };
-
-    useImperativeHandle(ref, () => ({
-        handleNextClick,
-        handlePreviousClick,
-    }));
-
-    useEffect(() => {
-        props.serverReadyData(localData);
-    }, [localData]);
-
-    useEffect(() => {
-        const hasNext = hasCategory(currentKey, localData.CategoryAnswers, 'next');
-        props.onNextCategoryAvailabilityChange(hasNext);
-
-        const hasPrevious = hasCategory(currentKey, localData.CategoryAnswers, 'prev');
-        props.onPreviousCategoryAvailabilityChange(hasPrevious);
-    }, [currentKey, localData.CategoryAnswers, props]);
-
-    // This gets the scale we use for each select from the database using a key based variable,if 
-    // any new generalEvaluationLevel is added to the backend we need to update our own without 
-    // deleting any of the previous so we dont mess up the project history.
-    const selectedEvaluationOption = `scale_${selectedCategory?.Data?.GeneralEvaluationLevel}` as keyof typeof evaluationOptions;
-    const dateFormatList = ['DD/MM/YYYY', 'YYYY/MM/DD'];
-
-    return (
-        <div className={styles.categoryResponse}>
-            <div className={styles.sidebarWrapper}>
-                {renderCategories(localData.CategoryAnswers)}
-            </div>
-            <div className={styles.contentWrapper}>
-                <Form
-                    initialValues={initialValues}
-                    name="dynamic_form_nest_item"
-                    onFinish={onFinish}
-                    autoComplete="off"
-                    form={form}
-                    onValuesChange={(_, allValues) => onFinish(allValues)}
-                >
-                    <div className={styles.details}>
-                        <div className={styles.categoryDescription}>
-                            {selectedCategory?.Data?.Description}
-                        </div>
-                    </div>
-                    {selectedCategory?.Data?.Questions.map((question: any, index: number) => {
-                        const isOpenAnswer = selectedCategory.Data.OpenAnswer || question.IsOpenAnswer;
-                        const showNote = (isNoteVisible?.categoryIndex === currentKey && isNoteVisible?.questionIndex === index);
-
-                        const questionWrapper = classNames({
-                            [styles.questionWrapperOpenAnswer]: isOpenAnswer || props.addButtons,
-                        }, [styles.questionWrapper]);
-
-                        return (
-                            <div className={questionWrapper} key={index}>
-                                <div className={styles.question}>
-                                    <div className={styles.subject}>
-                                        {`${question.Subject} ${question.IsMandatory ? "*" : ''}`}
-                                    </div>
-
-                                    <div className={styles.description}>
-                                        {question.Description}
-                                    </div>
-
-                                    {props.addButtons &&
-                                        <>
-                                            {(form.getFieldValue(`Questions`)?.[index].Note || (isNoteVisible && showNote)) &&
-                                                <div className={styles.noteContainer}>
-                                                    <span className={styles.note}>{t('components.categoryResponse.note')}: </span>
-
-                                                    <Form.Item name={["Questions", index, "Note"]} className={styles.form}>
-                                                        <TextArea
-                                                            disabled={(!isNoteVisible || !showNote)}
-                                                            variant={showNote ? "outlined" : "borderless"}
-                                                            onBlur={() => setIsNoteVisible(null)}
-                                                            className={styles.textArea}
-                                                        />
-                                                    </Form.Item>
-                                                </div>
-                                            }
-
-                                            {question?.Actions?.length > 0 &&
-                                                <div className={styles.actionContainer}>
-                                                    <span className={styles.note}>{t('components.categoryResponse.actions')}: </span>
-
-                                                    <div className={styles.action}>
-                                                        {question?.Actions?.map((action: any, index: number) => (
-                                                            <a onClick={() => props.openAction!(action.Id)} key={action.Id}>
-                                                                {action.Name}
-                                                            </a>
-                                                        ))}
-                                                    </div>
-                                                </div>
-                                            }
-
-                                            <div className={styles.actionsButtonsContainer}>
-                                                <div className={styles.buttonContainer} onClick={() => setIsNoteVisible({ categoryIndex: currentKey, questionIndex: index })}>
-                                                    <CommentOutlined className={styles.iconStyle} />
-
-                                                    <span className={styles.buttonLabel}>{t('components.categoryResponse.note')}</span>
-                                                </div>
-
-                                                <div className={styles.uploadContainer}>
-                                                    <Upload
-                                                        listType={"picture"}
-                                                        fileList={fileLists[`${selectedCategory.Data.CategoryId}_${question.Id}`] || []}
-                                                        beforeUpload={() => false} // Prevent automatic upload
-                                                        onChange={({ fileList }) => handleFileChange(fileList, selectedCategory.Data.CategoryId, question.Id)}
-                                                        onPreview={onPreview}
-                                                        className={styles.uploadFiles}
-                                                    >
-                                                        <div className={styles.uploadIconContainer}>
-                                                            <PictureOutlined className={styles.iconStyle} />
-
-                                                            <span className={styles.buttonLabel}>{t('components.categoryResponse.loadFile')}</span>
-                                                        </div>
-                                                    </Upload>
-
-                                                    <Modal
-                                                        open={previewVisible}
-                                                        footer={null}
-                                                        onCancel={() => setPreviewVisible(false)}
-                                                        closeIcon={false}
-                                                    >
-                                                        <img alt="Preview" style={{ width: "100%" }} src={previewImage} />
-                                                    </Modal>
-                                                </div>
-
-                                                <div className={styles.buttonContainer} onClick={() => handleAddAction(question.QuestionId, question.Id)}>
-                                                    <FileDoneOutlined className={styles.iconStyle} />
-
-                                                    <span className={styles.buttonLabel}>{t('components.categoryResponse.createAction')}</span>
-                                                </div>
-                                            </div>
-                                        </>
-                                    }
-                                </div>
-                                <div className={styles.answer}>
-                                    {isOpenAnswer
-                                        ? <Form.Item
-                                            name={["Questions", index, "Answer"]}
-                                        >
-                                            <TextArea disabled={question.Disabled} />
-                                        </Form.Item>
-
-                                        : question.IsDate
-                                            ? <Form.Item
-                                                name={["Questions", index, "Answer"]}
-                                            >
-                                                <DatePicker
-                                                    className={styles.datePickerStyle}
-                                                    placeholder={''}
-                                                    format={dateFormatList}
-                                                    value={dataValue}
-                                                    defaultValue={form.getFieldValue(`Questions`)?.[index].Answer}
-                                                    onChange={(value) => setDataValue(value)}
-                                                    disabled={question.Disabled}
-                                                />
-                                            </Form.Item>
-
-                                            : question.IsNumerical
-
-                                                ? <Form.Item
-                                                    name={["Questions", index, "Answer"]}
-                                                >
-                                                    <InputNumber className={styles.inputNumberStyle} />
-                                                </Form.Item>
-
-                                                : <Form.Item
-                                                    name={["Questions", index, "Answer"]}
-                                                >
-                                                    <Select
-                                                        options={selectedCategory.Data.IsYesOrNo
-
-                                                            ? props.selectYesNoOption
-
-                                                            : question?.Options?.length > 0
-
-                                                                ? question?.Options?.map((option: any) => ({
-                                                                    label: form.getFieldValue(`Questions`)?.[index]?.IsMultipleChoise
-                                                                        ?
-                                                                        <Tag style={{
-                                                                            backgroundColor: "rgba(0, 0, 0, 0.06)",
-                                                                            color: "black"
-                                                                        }}>{option?.Value}
-                                                                        </Tag>
-
-                                                                        : option.Value,
-
-                                                                    value: option.Value,
-                                                                }))
-
-                                                                : evaluationOptions[selectedEvaluationOption]
-                                                        }
-                                                        mode={form.getFieldValue(`Questions`)?.[index]?.IsMultipleChoise ? "multiple" : undefined}
-                                                        customClass={styles.selectAnswerStyle}
-                                                        placeholder={form.getFieldValue(`Questions`)?.[index]?.IsMultipleChoise
-                                                            ? t('components.categoryResponse.placeholderForMultiple')
-                                                            : t('components.categoryResponse.placeholderForSingular')}
-                                                    />
-                                                </Form.Item>
-                                    }
-                                </div>
-                            </div>
-                        );
-                    })}
-                </Form>
-            </div >
-        </div >
-    );
-});