@omniumretail/component-library 1.0.64 → 1.0.66

package/src/components/Category/CategoryContent/index.tsx

@@ -1,188 +1,188 @@
-import { Form, Select } from 'antd';
-import { useForm } from 'antd/es/form/Form';
-import { Button } from '../../Button';
-import { InputField } from '../../Input';
-import { Label } from '../../Label';
-import { Questions } from '../../Questions';
-import { Switch } from '../../Switch';
-import { useCallback, useEffect, useState } from 'react';
-import styles from './styles.module.scss';
-import { t } from 'i18next';
-
-interface categoryContent {
-    categoryContentShow: boolean;
-    categoryContentInfo: any;
-    categorySidebarData: any;
-}
-
-const defaultInitialValues = {
-    generalEvaluationLevel: "0",
-    questions: [],
-    openAnswer: false,
-};
-
-export const CategoryContent = (props: categoryContent) => {
-    const {
-        categoryContentShow,
-        categorySidebarData
-    } = props;
-
-    const [submitForm, setSubmitForm] = useState<boolean>(false);
-    const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
-    const [switchStatus, setSwitchStatus] = useState<boolean>(false);
-    const [initialValues, setInitialValues] = useState<any>(categorySidebarData?.data || defaultInitialValues)
-    const [form] = useForm();
-
-    const onFinish = (values: any) => {
-        setContentInfo(values);
-    };
-
-    const switchHandler = (enabled: boolean) => {
-        setSwitchStatus(enabled);
-        handleInputChange();
-    }
-
-    const handleInputChange = useCallback(() => {
-        // Check if all required fields are filled
-        const allRequiredFieldsFilled = form.getFieldsError().every(fieldError => !fieldError.errors.length);
-    
-        if (allRequiredFieldsFilled) {
-            // Add a small delay before submitting the form
-            setTimeout(() => {
-                form.submit();
-            }, 100);
-        }
-    }, [form]);
-
-    useEffect(() => {
-        props.categoryContentInfo(contentInfo);
-    }, [contentInfo]);
-
-    useEffect(() => {
-        setInitialValues(categorySidebarData?.data?.data);
-    }, [categorySidebarData]);
-
-    useEffect(() => {
-        form.resetFields();
-        form.setFieldsValue(initialValues);
-        setSwitchStatus(initialValues?.openAnswer || false);
-    }, [form, initialValues]);
-
-    return (
-        <div className={styles.categoryContent}>
-            <div className={styles.title}>Editar Categoria</div>
-
-            {
-                !categoryContentShow
-                    ? <div className={styles.uncheckedCategory}>
-                        { t('components.categoryContent.message') }
-                    </div>
-
-                    : <>
-                        <Form
-                            initialValues={defaultInitialValues}
-                            name="dynamic_form_nest_item"
-                            onFinish={onFinish}
-                            autoComplete="off"
-                            form={form}
-                        >
-                            <div className={styles.formHeader}>
-                                <div className={styles.category}>
-                                    <Label isUppercase>
-                                        { t('components.categoryContent.categoryName') }
-                                    </Label>
-                                    <Form.Item
-                                        name={['categoryName']}
-                                        rules={[{ required: true, message: 'Category Name is Missing' }]}
-                                        validateTrigger="onBlur"
-                                    >
-                                        <InputField placeholder={'Category Name'} onBlur={handleInputChange} />
-                                    </Form.Item>
-                                </div>
-
-                                {categorySidebarData?.data?.children?.length > 0 &&
-                                    <div className={styles.grade}>
-                                        <Label isUppercase>
-                                            { t('components.categoryContent.weighting') }
-                                        </Label>
-                                        <Form.Item
-                                            name={['grade']}
-                                        >
-                                            <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
-                                        </Form.Item>
-                                    </div>
-                                }
-
-                                {!categorySidebarData?.data?.children?.length &&
-                                    <>
-                                        <div className={styles.openAnswer}>
-                                            <Label isUppercase>
-                                                { t('components.categoryContent.openAnswer') }
-                                            </Label>
-                                            <Form.Item
-                                                name={['openAnswer']}
-                                            >
-                                                <Switch onChange={(enabled: boolean) => {switchHandler(enabled)}} checked={switchStatus} />
-                                            </Form.Item>
-                                        </div>
-
-                                        {
-                                            !switchStatus &&
-                                            <>
-                                                <div className={styles.generalEvaluationLevel}>
-                                                    <Label isUppercase>
-                                                        { t('components.categoryContent.answerOption') }
-                                                    </Label>
-                                                    <Form.Item
-                                                        name={['generalEvaluationLevel']}
-                                                    >
-                                                        <Select options={[
-                                                            {
-                                                                value: '0',
-                                                                label: '1 a 5',
-                                                            },
-                                                            {
-                                                                value: '1',
-                                                                label: '1 a 4',
-                                                            },
-                                                            {
-                                                                value: '2',
-                                                                label: '1 a 5 ou “Não Aplicável”',
-                                                            },
-                                                        ]} onBlur={handleInputChange}
-                                                        />
-                                                    </Form.Item>
-                                                </div>
-
-                                                <div className={styles.grade}>
-                                                    <Label isUppercase>
-                                                        { t('components.categoryContent.weighting') }
-                                                    </Label>
-                                                    <Form.Item
-                                                        name={['grade']}
-                                                    >
-                                                        <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
-                                                    </Form.Item>
-                                                </div>
-                                            </>
-                                        }
-                                    </>
-                                }
-                            </div>
-
-                            {!categorySidebarData?.data?.children?.length &&
-                                <div className={styles.questionsWrapper}>
-                                    <Label isUppercase>
-                                        { t('components.categoryContent.answers') }
-                                    </Label>
-                                    <Form.Item>
-                                        <Questions showGrade={!switchStatus} handleChanges={handleInputChange}></Questions>
-                                    </Form.Item>
-                                </div>
-                            }
-                        </Form>
-                    </>
-            }
-        </div>
-    );
-};
+import { Form, Select } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { Button } from '../../Button';
+import { InputField } from '../../Input';
+import { Label } from '../../Label';
+import { Questions } from '../../Questions';
+import { Switch } from '../../Switch';
+import { useCallback, useEffect, useState } from 'react';
+import styles from './styles.module.scss';
+import { t } from 'i18next';
+
+interface categoryContent {
+    categoryContentShow: boolean;
+    categoryContentInfo: any;
+    categorySidebarData: any;
+}
+
+const defaultInitialValues = {
+    generalEvaluationLevel: "0",
+    questions: [],
+    openAnswer: false,
+};
+
+export const CategoryContent = (props: categoryContent) => {
+    const {
+        categoryContentShow,
+        categorySidebarData
+    } = props;
+
+    const [submitForm, setSubmitForm] = useState<boolean>(false);
+    const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
+    const [switchStatus, setSwitchStatus] = useState<boolean>(false);
+    const [initialValues, setInitialValues] = useState<any>(categorySidebarData?.data || defaultInitialValues)
+    const [form] = useForm();
+
+    const onFinish = (values: any) => {
+        setContentInfo(values);
+    };
+
+    const switchHandler = (enabled: boolean) => {
+        setSwitchStatus(enabled);
+        handleInputChange();
+    }
+
+    const handleInputChange = useCallback(() => {
+        // Check if all required fields are filled
+        const allRequiredFieldsFilled = form.getFieldsError().every(fieldError => !fieldError.errors.length);
+    
+        if (allRequiredFieldsFilled) {
+            // Add a small delay before submitting the form
+            setTimeout(() => {
+                form.submit();
+            }, 100);
+        }
+    }, [form]);
+
+    useEffect(() => {
+        props.categoryContentInfo(contentInfo);
+    }, [contentInfo]);
+
+    useEffect(() => {
+        setInitialValues(categorySidebarData?.data?.data);
+    }, [categorySidebarData]);
+
+    useEffect(() => {
+        form.resetFields();
+        form.setFieldsValue(initialValues);
+        setSwitchStatus(initialValues?.openAnswer || false);
+    }, [form, initialValues]);
+
+    return (
+        <div className={styles.categoryContent}>
+            <div className={styles.title}>Editar Categoria</div>
+
+            {
+                !categoryContentShow
+                    ? <div className={styles.uncheckedCategory}>
+                        { t('components.categoryContent.message') }
+                    </div>
+
+                    : <>
+                        <Form
+                            initialValues={defaultInitialValues}
+                            name="dynamic_form_nest_item"
+                            onFinish={onFinish}
+                            autoComplete="off"
+                            form={form}
+                        >
+                            <div className={styles.formHeader}>
+                                <div className={styles.category}>
+                                    <Label isUppercase>
+                                        { t('components.categoryContent.categoryName') }
+                                    </Label>
+                                    <Form.Item
+                                        name={['categoryName']}
+                                        rules={[{ required: true, message: t('components.categoryContent.categoryNameError')! }]}
+                                        validateTrigger="onBlur"
+                                    >
+                                        <InputField placeholder={t('components.categoryContent.categoryName')!} onBlur={handleInputChange} />
+                                    </Form.Item>
+                                </div>
+
+                                {categorySidebarData?.data?.children?.length > 0 &&
+                                    <div className={styles.grade}>
+                                        <Label isUppercase>
+                                            { t('components.categoryContent.weighting') }
+                                        </Label>
+                                        <Form.Item
+                                            name={['grade']}
+                                        >
+                                            <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
+                                        </Form.Item>
+                                    </div>
+                                }
+
+                                {!categorySidebarData?.data?.children?.length &&
+                                    <>
+                                        <div className={styles.openAnswer}>
+                                            <Label isUppercase>
+                                                { t('components.categoryContent.openAnswer') }
+                                            </Label>
+                                            <Form.Item
+                                                name={['openAnswer']}
+                                            >
+                                                <Switch onChange={(enabled: boolean) => {switchHandler(enabled)}} checked={switchStatus} />
+                                            </Form.Item>
+                                        </div>
+
+                                        {
+                                            !switchStatus &&
+                                            <>
+                                                <div className={styles.generalEvaluationLevel}>
+                                                    <Label isUppercase>
+                                                        { t('components.categoryContent.answerOption') }
+                                                    </Label>
+                                                    <Form.Item
+                                                        name={['generalEvaluationLevel']}
+                                                    >
+                                                        <Select options={[
+                                                            {
+                                                                value: '0',
+                                                                label: '1 a 5',
+                                                            },
+                                                            {
+                                                                value: '1',
+                                                                label: '1 a 4',
+                                                            },
+                                                            {
+                                                                value: '2',
+                                                                label: '1 a 5 ou “Não Aplicável”',
+                                                            },
+                                                        ]} onBlur={handleInputChange}
+                                                        />
+                                                    </Form.Item>
+                                                </div>
+
+                                                <div className={styles.grade}>
+                                                    <Label isUppercase>
+                                                        { t('components.categoryContent.weighting') }
+                                                    </Label>
+                                                    <Form.Item
+                                                        name={['grade']}
+                                                    >
+                                                        <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
+                                                    </Form.Item>
+                                                </div>
+                                            </>
+                                        }
+                                    </>
+                                }
+                            </div>
+
+                            {!categorySidebarData?.data?.children?.length &&
+                                <div className={styles.questionsWrapper}>
+                                    <Label isUppercase>
+                                        { t('components.categoryContent.answers') }
+                                    </Label>
+                                    <Form.Item>
+                                        <Questions showGrade={!switchStatus} handleChanges={handleInputChange}></Questions>
+                                    </Form.Item>
+                                </div>
+                            }
+                        </Form>
+                    </>
+            }
+        </div>
+    );
+};

package/src/components/Category/CategoryContent/styles.module.scss

@@ -1,51 +1,51 @@
-.title {
-    font-size: var(--font-size-body-4);
-    font-weight: 600;
-    line-height: 100%;
-    color: var(--color-blue);
-    text-transform: uppercase;
-    margin-bottom: 32px;
-}
-
-.uncheckedCategory {
-    font-size: var(--font-size-body-2);
-    color: var(--color-black);
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-.formHeader {
-    display: grid;
-    grid-template-columns: minmax(200px, 1fr) auto 1fr auto;
-    gap: 46px;
-}
-
-.questionsWrapper {
-    margin-top: 16px;
-}
-
-Label {
-    margin-bottom: 8px;
-}
-
-.categoryContent {
-    :global {
-        .ant-select {
-            width: 100%;
-        }
-
-        .ant-select-selector {
-            border-color: rgba(var(--color-black-rgb), .5) !important;
-            height: 50px !important;
-            display: flex;
-            align-items: center;
-        }
-        .ant-select-arrow {
-            color: var(--color-black);
-        }
-
-        .ant-switch {
-            width: 30px;
-        }
-    }
-}
+.title {
+    font-size: var(--font-size-body-4);
+    font-weight: 600;
+    line-height: 100%;
+    color: var(--color-blue);
+    text-transform: uppercase;
+    margin-bottom: 32px;
+}
+
+.uncheckedCategory {
+    font-size: var(--font-size-body-2);
+    color: var(--color-black);
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.formHeader {
+    display: grid;
+    grid-template-columns: minmax(200px, 1fr) auto 1fr auto;
+    gap: 46px;
+}
+
+.questionsWrapper {
+    margin-top: 16px;
+}
+
+Label {
+    margin-bottom: 8px;
+}
+
+.categoryContent {
+    :global {
+        .ant-select {
+            width: 100%;
+        }
+
+        .ant-select-selector {
+            border-color: rgba(var(--color-black-rgb), .5) !important;
+            height: 50px !important;
+            display: flex;
+            align-items: center;
+        }
+        .ant-select-arrow {
+            color: var(--color-black);
+        }
+
+        .ant-switch {
+            width: 30px;
+        }
+    }
+}