@omniumretail/component-library 1.0.56 → 1.0.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.css CHANGED
@@ -553,6 +553,9 @@
553
553
  margin-top: 32px;
554
554
  width: 100%;
555
555
  }
556
+ .yBjbWkudwA_AOwhHrnlc button:nth-child(3) {
557
+ margin-top: 12px;
558
+ }
556
559
 
557
560
  .je000VEfsPqZupGr8ymu {
558
561
  font-size: var(--font-size-body-4);
@@ -1 +1 @@
1
- export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, ...restField }: any) => JSX.Element;
1
+ export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => JSX.Element;
@@ -1,4 +1,5 @@
1
1
  export interface QuestionsProps {
2
2
  showGrade?: boolean;
3
+ handleChanges: any;
3
4
  }
4
5
  export declare const Questions: (props: QuestionsProps) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omniumretail/component-library",
3
- "version": "1.0.56",
3
+ "version": "1.0.58",
4
4
  "private": false,
5
5
  "main": "dist/bundle.js",
6
6
  "typings": "./dist/types/index",
@@ -5,6 +5,7 @@ import type { MenuProps } from 'antd';
5
5
  import { Menu } from 'antd';
6
6
  import { AnalyticsBarProps, sortBy } from './interfaces/analyticsBar';
7
7
  import { useCallback, useEffect, useState } from 'react';
8
+ import { t } from 'i18next';
8
9
 
9
10
  export const AnalyticsBar = (props: AnalyticsBarProps) => {
10
11
  const {
@@ -42,7 +43,6 @@ export const AnalyticsBar = (props: AnalyticsBarProps) => {
42
43
  activeListItem(key);
43
44
  };
44
45
 
45
- console.log(sortInfo);
46
46
  return (
47
47
  <div className={styles.analyticsbar}>
48
48
  <div className={styles.header}>
@@ -56,8 +56,8 @@ export const AnalyticsBar = (props: AnalyticsBarProps) => {
56
56
 
57
57
  <div className={styles.sorterWrapper} onClick={() => setSorter()}>
58
58
  {sortInfo === sortBy.desc
59
- ? <>Decrescente <SortDescendingOutlined /></>
60
- : <>Crescente <SortAscendingOutlined /></>
59
+ ? <>{ t('components.analyticsBar.desc') }<SortDescendingOutlined /></>
60
+ : <>{ t('components.analyticsBar.asc') }<SortAscendingOutlined /></>
61
61
  }
62
62
  </div>
63
63
  </div>
@@ -10,68 +10,72 @@ export default {
10
10
  const Template: Story<any> = (args) => {
11
11
  const [serverData, setServerData] = useState<any>();
12
12
 
13
- useEffect(() => {
14
- console.log(serverData);
15
- }, [serverData])
13
+ // useEffect(() => {
14
+ // console.log(serverData);
15
+ // }, [serverData])
16
16
 
17
17
  return <Category {...args} serverReadyData={setServerData} data={[
18
18
  {
19
- "title": "opgg (Q: 1) ",
19
+ "title": "2 (Q: 0) (G: 2)",
20
20
  "key": "0",
21
21
  "data": {
22
- "categoryName": "opgg",
23
- "openAnswer": true,
24
- "questions": [
25
- {
26
- "question": "1",
27
- "info": "2"
28
- }
29
- ]
30
- },
31
- "children": []
32
- },
33
- {
34
- "title": "abcd (Q: 1) (G: 2)",
35
- "key": "1",
36
- "data": {
37
- "categoryName": "abcd",
22
+ "categoryName": "2",
38
23
  "openAnswer": false,
39
- "questions": [
40
- {
41
- "question": "ax1",
42
- "info": "se2",
43
- "grade": "1s"
44
- }
45
- ],
46
- "generalEvaluationLevel": "2",
47
- "grade": "2"
24
+ "generalEvaluationLevel": "0",
25
+ "grade": "2",
26
+ "questions": []
48
27
  },
49
28
  "children": []
50
29
  },
51
30
  {
52
- "title": "hasCHild (Q: 0) (G: 12)",
53
- "key": "2",
31
+ "title": "1 (Q: 0) (G: 1)",
32
+ "key": "1",
54
33
  "data": {
55
- "categoryName": "hasCHild",
34
+ "categoryName": "1",
56
35
  "openAnswer": false,
57
36
  "generalEvaluationLevel": "0",
58
- "grade": "12",
37
+ "grade": "1",
59
38
  "questions": []
60
39
  },
61
40
  "children": [
62
41
  {
63
- "title": "theChild (Q: 0) (G: 12)",
64
- "key": "2.0",
65
- "children": [],
42
+ "title": "1.1 (Q: 0) (G: 1.1)",
43
+ "key": "1.0",
66
44
  "data": {
67
- "categoryName": "theChild",
45
+ "categoryName": "1.1",
68
46
  "openAnswer": false,
69
47
  "generalEvaluationLevel": "0",
70
- "grade": "12",
48
+ "grade": "1.1",
71
49
  "questions": []
72
- }
50
+ },
51
+ "children": [
52
+ {
53
+ "title": "1.1.1 (Q: 0) (G: 1.1.1)",
54
+ "key": "1.0.0",
55
+ "data": {
56
+ "categoryName": "1.1.1",
57
+ "openAnswer": false,
58
+ "generalEvaluationLevel": "0",
59
+ "grade": "1.1.1",
60
+ "questions": []
61
+ },
62
+ "children": []
63
+ }
64
+ ]
73
65
  }
74
66
  ]
67
+ },
68
+ {
69
+ "title": "3 (Q: 0) (G: 3)",
70
+ "key": "2",
71
+ "data": {
72
+ "categoryName": "3",
73
+ "openAnswer": false,
74
+ "generalEvaluationLevel": "0",
75
+ "grade": "3",
76
+ "questions": []
77
+ },
78
+ "children": []
75
79
  }
76
80
  ]}></Category>
77
81
  };
@@ -5,8 +5,9 @@ import { InputField } from '../../Input';
5
5
  import { Label } from '../../Label';
6
6
  import { Questions } from '../../Questions';
7
7
  import { Switch } from '../../Switch';
8
- import { useEffect, useState } from 'react';
8
+ import { useCallback, useEffect, useState } from 'react';
9
9
  import styles from './styles.module.scss';
10
+ import { t } from 'i18next';
10
11
 
11
12
  interface categoryContent {
12
13
  categoryContentShow: boolean;
@@ -26,7 +27,8 @@ export const CategoryContent = (props: categoryContent) => {
26
27
  categorySidebarData
27
28
  } = props;
28
29
 
29
- const [contentInfo, setContentInfo] = useState<any>();
30
+ const [submitForm, setSubmitForm] = useState<boolean>(false);
31
+ const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
30
32
  const [switchStatus, setSwitchStatus] = useState<boolean>(false);
31
33
  const [initialValues, setInitialValues] = useState<any>(categorySidebarData?.data || defaultInitialValues)
32
34
  const [form] = useForm();
@@ -37,11 +39,20 @@ export const CategoryContent = (props: categoryContent) => {
37
39
 
38
40
  const switchHandler = (enabled: boolean) => {
39
41
  setSwitchStatus(enabled);
42
+ handleInputChange();
40
43
  }
41
44
 
42
- const onDelete = () => {
43
- setContentInfo(undefined);
44
- }
45
+ const handleInputChange = useCallback(() => {
46
+ // Check if all required fields are filled
47
+ const allRequiredFieldsFilled = form.getFieldsError().every(fieldError => !fieldError.errors.length);
48
+
49
+ if (allRequiredFieldsFilled) {
50
+ // Add a small delay before submitting the form
51
+ setTimeout(() => {
52
+ form.submit();
53
+ }, 100);
54
+ }
55
+ }, [form]);
45
56
 
46
57
  useEffect(() => {
47
58
  props.categoryContentInfo(contentInfo);
@@ -57,8 +68,6 @@ export const CategoryContent = (props: categoryContent) => {
57
68
  setSwitchStatus(initialValues?.openAnswer || false);
58
69
  }, [form, initialValues]);
59
70
 
60
- // console.log(switchStatus);
61
-
62
71
  return (
63
72
  <div className={styles.categoryContent}>
64
73
  <div className={styles.title}>Editar Categoria</div>
@@ -66,7 +75,7 @@ export const CategoryContent = (props: categoryContent) => {
66
75
  {
67
76
  !categoryContentShow
68
77
  ? <div className={styles.uncheckedCategory}>
69
- Please Select a Category on the sidebar
78
+ { t('components.categoryContent.message') }
70
79
  </div>
71
80
 
72
81
  : <>
@@ -80,26 +89,26 @@ export const CategoryContent = (props: categoryContent) => {
80
89
  <div className={styles.formHeader}>
81
90
  <div className={styles.category}>
82
91
  <Label isUppercase>
83
- Nome Categoria
92
+ { t('components.categoryContent.categoryName') }
84
93
  </Label>
85
94
  <Form.Item
86
95
  name={['categoryName']}
87
96
  rules={[{ required: true, message: 'Category Name is Missing' }]}
97
+ validateTrigger="onBlur"
88
98
  >
89
- <InputField placeholder={'Category Name'} />
99
+ <InputField placeholder={'Category Name'} onBlur={handleInputChange} />
90
100
  </Form.Item>
91
101
  </div>
92
102
 
93
103
  {categorySidebarData?.data?.children?.length > 0 &&
94
104
  <div className={styles.grade}>
95
105
  <Label isUppercase>
96
- Ponderação
106
+ { t('components.categoryContent.weighting') }
97
107
  </Label>
98
108
  <Form.Item
99
109
  name={['grade']}
100
- rules={[{ required: true, message: 'Grade is Missing' }]}
101
110
  >
102
- <InputField placeholder={'EX: 15%'} />
111
+ <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
103
112
  </Form.Item>
104
113
  </div>
105
114
  }
@@ -108,14 +117,12 @@ export const CategoryContent = (props: categoryContent) => {
108
117
  <>
109
118
  <div className={styles.openAnswer}>
110
119
  <Label isUppercase>
111
- Resposta aberta
120
+ { t('components.categoryContent.openAnswer') }
112
121
  </Label>
113
122
  <Form.Item
114
123
  name={['openAnswer']}
115
124
  >
116
- {/* <Switch onChange={(enabled: boolean) => switchHandler(enabled)} defaultChecked={false}checked={false || switchStatus}/> */}
117
-
118
- <Switch onChange={(enabled: boolean) => switchHandler(enabled)} checked={switchStatus} />
125
+ <Switch onChange={(enabled: boolean) => {switchHandler(enabled)}} checked={switchStatus} />
119
126
  </Form.Item>
120
127
  </div>
121
128
 
@@ -124,7 +131,7 @@ export const CategoryContent = (props: categoryContent) => {
124
131
  <>
125
132
  <div className={styles.generalEvaluationLevel}>
126
133
  <Label isUppercase>
127
- Nivel de avaliação Geral
134
+ { t('components.categoryContent.answerOption') }
128
135
  </Label>
129
136
  <Form.Item
130
137
  name={['generalEvaluationLevel']}
@@ -142,20 +149,19 @@ export const CategoryContent = (props: categoryContent) => {
142
149
  value: '2',
143
150
  label: '1 a 5 ou “Não Aplicável”',
144
151
  },
145
- ]}
152
+ ]} onBlur={handleInputChange}
146
153
  />
147
154
  </Form.Item>
148
155
  </div>
149
156
 
150
157
  <div className={styles.grade}>
151
158
  <Label isUppercase>
152
- Ponderação
159
+ { t('components.categoryContent.weighting') }
153
160
  </Label>
154
161
  <Form.Item
155
162
  name={['grade']}
156
- rules={[{ required: true, message: 'Grade is Missing' }]}
157
163
  >
158
- <InputField placeholder={'EX: 15%'} />
164
+ <InputField placeholder={'EX: 15%'} onBlur={handleInputChange}/>
159
165
  </Form.Item>
160
166
  </div>
161
167
  </>
@@ -167,17 +173,14 @@ export const CategoryContent = (props: categoryContent) => {
167
173
  {!categorySidebarData?.data?.children?.length &&
168
174
  <div className={styles.questionsWrapper}>
169
175
  <Label isUppercase>
170
- Questões
176
+ { t('components.categoryContent.answers') }
171
177
  </Label>
172
178
  <Form.Item>
173
- <Questions showGrade={!switchStatus}></Questions>
179
+ <Questions showGrade={!switchStatus} handleChanges={handleInputChange}></Questions>
174
180
  </Form.Item>
175
181
  </div>
176
182
  }
177
183
  </Form>
178
-
179
- <Button onClick={() => form.submit()}>Submit</Button>
180
- <Button onClick={() => onDelete()}>Delete</Button>
181
184
  </>
182
185
  }
183
186
  </div>
@@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react';
2
2
  import { Tree } from 'antd';
3
3
  import type { TreeProps } from 'antd/es/tree';
4
4
  import styles from './styles.module.scss';
5
- import { PlusOutlined } from '@ant-design/icons';
5
+ import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
6
6
  import { Button } from '../../Button';
7
+ import { t } from 'i18next';
7
8
 
8
9
  export interface Questions {
9
10
  grade: string;
@@ -57,6 +58,25 @@ function addPropertyByIndex(data: DataNode[], index: string | number, property:
57
58
  });
58
59
  }
59
60
 
61
+ function remove_element_by_index(data: DataNode[], index: string | number): DataNode[] {
62
+ return data.filter((item) => item.key !== index);
63
+ }
64
+
65
+ function remove_nested_element(data: DataNode[], index: string | number): DataNode[] {
66
+ let newData = [...data] as DataNode[];
67
+
68
+ for (let i = 0; i < newData.length; i++) {
69
+ if (newData[i].key === index) {
70
+ newData = remove_element_by_index(newData, index);
71
+ break;
72
+ } else if (newData[i].children && (newData[i] as any).children.length > 0) {
73
+ newData[i].children = remove_nested_element((newData[i].children as any), index);
74
+ }
75
+ }
76
+
77
+ return newData;
78
+ }
79
+
60
80
  export const CategorySidebar = (props: SidebarProps) => {
61
81
  const {
62
82
  categoryContentData,
@@ -66,11 +86,10 @@ export const CategorySidebar = (props: SidebarProps) => {
66
86
 
67
87
  const [gData, setGData] = useState(data);
68
88
  const [expandedKeys] = useState([]);
69
- const [sidebarInfo, setSidebarInfo] = useState<any>();
89
+ const [sidebarInfo, setSidebarInfo] = useState<any>(undefined);
70
90
 
71
91
  const onDragEnter: TreeProps['onDragEnter'] = (info) => {
72
- // expandedKeys
73
- // setExpandedKeys(info.expandedKeys)
92
+ // drag entered
74
93
  };
75
94
 
76
95
  const onDrop: TreeProps['onDrop'] = (info) => {
@@ -120,7 +139,6 @@ export const CategorySidebar = (props: SidebarProps) => {
120
139
  item.children = item.children || [];
121
140
  // where to insert
122
141
  item.children.unshift(dragObj);
123
- // {...dragObj, key: `${item.key}-${item.children.length}`}
124
142
  });
125
143
  } else if (
126
144
  ((info.node as any).props.children || []).length > 0 && // Has children
@@ -174,6 +192,14 @@ export const CategorySidebar = (props: SidebarProps) => {
174
192
  ])
175
193
  }
176
194
 
195
+ const removeCategory = () => {
196
+ if (sidebarInfo) {
197
+ // Update the state with the new array
198
+ setGData(remove_nested_element(gData, sidebarInfo[0]));
199
+ setSidebarInfo(undefined);
200
+ }
201
+ }
202
+
177
203
  useEffect(() => {
178
204
  props.categorySidebarInfo({
179
205
  selectKey: sidebarInfo,
@@ -214,9 +240,17 @@ export const CategorySidebar = (props: SidebarProps) => {
214
240
  <div className={styles.categorySidebar}>
215
241
  <div className={styles.title}>Categorias</div>
216
242
  <Button icon={<PlusOutlined />} onClick={addCategory}>
217
- Adicionar Categoria
243
+ { t('components.categorySidBar.addCategory') }
218
244
  </Button>
219
245
 
246
+ {
247
+ sidebarInfo &&
248
+ <Button icon={<MinusOutlined />} onClick={removeCategory}>
249
+ { t('components.categorySidBar.removeCategory') }
250
+ </Button>
251
+ }
252
+
253
+
220
254
  <div className={styles.categoryViewer}>
221
255
  <Tree
222
256
  className="draggable-tree"
@@ -8,6 +8,10 @@
8
8
  button {
9
9
  margin-top: 32px;
10
10
  width: 100%;
11
+
12
+ &:nth-child(3) {
13
+ margin-top: 12px;
14
+ }
11
15
  }
12
16
  }
13
17
 
@@ -232,6 +232,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
232
232
  onFinish={onFinish}
233
233
  autoComplete="off"
234
234
  form={form}
235
+ onValuesChange={(_, allValues) => onFinish(allValues)}
235
236
  >
236
237
  <div className={styles.details}>
237
238
  <div className={styles.categoryName}>
@@ -269,12 +270,6 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
269
270
  </div>
270
271
  </div>
271
272
  ))}
272
-
273
- {selectedCategory?.Data?.Questions.length > 0 && (
274
- <Button onClick={() => form.submit()}>{
275
- t('components.categoryResponse.answer')
276
- }</Button>
277
- )}
278
273
  </Form>
279
274
  </div>
280
275
  </div>
@@ -3,7 +3,7 @@ import { Form, Input, Space } from 'antd';
3
3
  import { t } from 'i18next';
4
4
  import styles from './styles.module.scss';
5
5
 
6
- export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, ...restField }: any) => {
6
+ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => {
7
7
  return (
8
8
  <div
9
9
  key={key}
@@ -25,13 +25,12 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
25
25
  <Form.Item
26
26
  {...restField}
27
27
  name={[name, 'question']}
28
- rules={[{ required: true, message: t('components.category.errorQuestion') }]}
29
28
  >
30
- <Input placeholder={`${t('components.category.placeholderQuestion')}`} />
29
+ <Input placeholder={`${t('components.category.placeholderQuestion')}`} onBlur={handleChanges} />
31
30
  </Form.Item>
32
31
  </div>
33
32
  <div className={styles.actions}>
34
- {/* <div className={styles.edit}>
33
+ {/* <div className={styles.edit}>
35
34
  <div className={styles.notEditing}
36
35
  // onClick={() => handleStartEdit(index)}
37
36
  >
@@ -63,9 +62,8 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
63
62
  <Form.Item
64
63
  {...restField}
65
64
  name={[name, 'info']}
66
- rules={[{ required: true, message: t('components.category.errorInfo') }]}
67
65
  >
68
- <Input placeholder={`${t('components.category.placeholderInfo')}`} />
66
+ <Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges}/>
69
67
  </Form.Item>
70
68
  </div>
71
69
  {showGrade &&
@@ -73,9 +71,8 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
73
71
  <Form.Item
74
72
  {...restField}
75
73
  name={[name, 'grade']}
76
- rules={[{ required: true, message: t('components.category.errorGrade') }]}
77
74
  >
78
- <Input placeholder={`${t('components.category.placeholderGrade')}`} />
75
+ <Input placeholder={`${t('components.category.placeholderGrade')}`} onBlur={handleChanges} />
79
76
  </Form.Item>
80
77
  </div>
81
78
  }
@@ -9,11 +9,13 @@ import { t } from 'i18next';
9
9
 
10
10
  export interface QuestionsProps {
11
11
  showGrade?: boolean;
12
+ handleChanges: any;
12
13
  }
13
14
 
14
15
  export const Questions = (props: QuestionsProps) => {
15
16
  const {
16
17
  showGrade = true,
18
+ handleChanges,
17
19
  } = props;
18
20
 
19
21
  const formContext = useContext(FieldContext);
@@ -52,6 +54,7 @@ export const Questions = (props: QuestionsProps) => {
52
54
  remove={remove}
53
55
  name={name}
54
56
  showGrade={showGrade}
57
+ handleChanges={handleChanges}
55
58
  />
56
59
  </>
57
60
  )}
@@ -5,6 +5,7 @@ import { Input, Tag, TagProps } from 'antd';
5
5
  import { TweenOneGroup } from 'rc-tween-one';
6
6
  import styles from './styles.module.scss';
7
7
  import classNames from 'classnames';
8
+ import { t } from 'i18next';
8
9
 
9
10
  export interface customTagProps extends TagProps {
10
11
  customTags?: any,
@@ -86,7 +87,7 @@ export const TagField = (props: customTagProps) => {
86
87
  )}
87
88
  {!inputVisible && (
88
89
  <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
89
- <SearchOutlined /> Procurar
90
+ <SearchOutlined /> { t('components.tag.search') }
90
91
  </Tag>
91
92
  )}
92
93
  <div style={{ marginTop: 16 }}>
@@ -27,13 +27,32 @@
27
27
  "placeholderGrade": "Grade",
28
28
  "errorGrade": "Missing Grade"
29
29
  },
30
+ "categorySidBar": {
31
+ "addCategory": "Add Category",
32
+ "removeCategory": "Remove Category"
33
+ },
34
+ "categoryContent": {
35
+ "message": "Por favor selecione uma categoria na barra lateral EN",
36
+ "categoryName": "Nome Categoria EN",
37
+ "weighting": "Ponderação EN",
38
+ "openAnswer": "Resposta Aberta EN",
39
+ "answerOption": "Opção De Resposta EN",
40
+ "answers": "Questões EN"
41
+ },
30
42
  "categoryResponse": {
31
- "notApplicable": "Not Applicable",
32
- "answer": "Answer"
43
+ "notApplicable": "Não Aplicável EN",
44
+ "answer": "Resposta EN"
33
45
  },
34
46
  "categoryReadOnly": {
35
47
  "categories": "Categories",
36
48
  "categoryAverage": "Category Average"
49
+ },
50
+ "analyticsBar": {
51
+ "desc": "Decrescente EN",
52
+ "asc": "Crescente EN"
53
+ },
54
+ "tag": {
55
+ "search": "Procurar EN"
37
56
  }
38
57
  }
39
58
  }
@@ -45,6 +45,18 @@
45
45
  "placeholderGrade": "Grade PT",
46
46
  "errorGrade": "Missing Grade PT"
47
47
  },
48
+ "categorySidBar": {
49
+ "addCategory": "Adicionar Categoria",
50
+ "removeCategory": "Remover Categoria"
51
+ },
52
+ "categoryContent": {
53
+ "message": "Por favor selecione uma categoria na barra lateral",
54
+ "categoryName": "Nome Categoria",
55
+ "weighting": "Ponderação",
56
+ "openAnswer": "Resposta Aberta",
57
+ "answerOption": "Opção De Resposta",
58
+ "answers": "Questões"
59
+ },
48
60
  "categoryResponse": {
49
61
  "notApplicable": "Não Aplicável",
50
62
  "answer": "Resposta"
@@ -52,6 +64,13 @@
52
64
  "categoryReadOnly": {
53
65
  "categories": "Categories PT",
54
66
  "categoryAverage": "Category Average PT"
67
+ },
68
+ "analyticsBar": {
69
+ "desc": "Decrescente",
70
+ "asc": "Crescente"
71
+ },
72
+ "tag": {
73
+ "search": "Procurar"
55
74
  }
56
75
  }
57
76
  }