@omniumretail/component-library 1.1.96 → 1.1.98
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/bundle.js +1 -1
- package/dist/types/components/Questions/SingleQuestion/index.d.ts +1 -1
- package/dist/types/components/Questions/index.d.ts +1 -0
- package/dist/types/components/ResponsiveTable/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/Category/CategoryContent/index.tsx +8 -7
- package/src/components/Category/CategorySidebar/index.tsx +6 -6
- package/src/components/CategoryResponse/CategoryResponse.stories.tsx +3 -2
- package/src/components/CategoryResponse/index.tsx +5 -1
- package/src/components/Questions/SingleQuestion/index.tsx +10 -8
- package/src/components/Questions/index.tsx +4 -1
- package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx +5 -1
- package/src/components/ResponsiveTable/index.tsx +9 -2
- package/src/locales/en.json +4 -1
- package/src/locales/es.json +4 -1
- package/src/locales/pt.json +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, responseTypeComponent, form, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, hasHeader, isTheHeader, responseTypeComponent, form, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -45,5 +45,6 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
|
|
|
45
45
|
buttonActionLabel?: (record: any) => string | null;
|
|
46
46
|
buttonActionMethod?: () => void;
|
|
47
47
|
buttonActionStyle?: string | ((record: any) => any);
|
|
48
|
+
cleanRowSelection?: boolean;
|
|
48
49
|
}
|
|
49
50
|
export declare const ResponsiveTable: (props: ResponsiveTableCustomProps) => import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -108,12 +108,12 @@ export const CategoryContent = (props: categoryContent) => {
|
|
|
108
108
|
<Form.Item
|
|
109
109
|
name={['categoryName']}
|
|
110
110
|
rules={[{ required: true, message: t('components.categoryContent.categoryNameError')! }]}
|
|
111
|
-
validateTrigger="
|
|
111
|
+
validateTrigger="onMouseLeave"
|
|
112
112
|
>
|
|
113
113
|
<InputField
|
|
114
114
|
disabled={categorySidebarData?.data?.key === "0" && hasHeader}
|
|
115
115
|
placeholder={t('components.categoryContent.categoryName')!}
|
|
116
|
-
|
|
116
|
+
onMouseLeave={handleInputChange}
|
|
117
117
|
/>
|
|
118
118
|
</Form.Item>
|
|
119
119
|
</div>
|
|
@@ -126,11 +126,11 @@ export const CategoryContent = (props: categoryContent) => {
|
|
|
126
126
|
<Form.Item
|
|
127
127
|
name={['name']}
|
|
128
128
|
rules={[{ required: true, message: t('components.categoryContent.templateNameError')! }]}
|
|
129
|
-
validateTrigger="
|
|
129
|
+
validateTrigger="onMouseLeave"
|
|
130
130
|
>
|
|
131
131
|
<InputField
|
|
132
132
|
placeholder={t('components.categoryContent.tamplateName')!}
|
|
133
|
-
|
|
133
|
+
onMouseLeave={handleInputChange}
|
|
134
134
|
/>
|
|
135
135
|
</Form.Item>
|
|
136
136
|
</div>
|
|
@@ -145,7 +145,7 @@ export const CategoryContent = (props: categoryContent) => {
|
|
|
145
145
|
<Form.Item
|
|
146
146
|
name={['grade']}
|
|
147
147
|
>
|
|
148
|
-
<InputField placeholder={'EX: 15%'}
|
|
148
|
+
<InputField placeholder={'EX: 15%'} onMouseLeave={handleInputChange} />
|
|
149
149
|
</Form.Item>
|
|
150
150
|
</div>
|
|
151
151
|
}
|
|
@@ -218,7 +218,7 @@ export const CategoryContent = (props: categoryContent) => {
|
|
|
218
218
|
<Form.Item
|
|
219
219
|
name={['grade']}
|
|
220
220
|
>
|
|
221
|
-
<InputField placeholder={'EX: 15%'}
|
|
221
|
+
<InputField placeholder={'EX: 15%'} onMouseLeave={handleInputChange} />
|
|
222
222
|
</Form.Item>
|
|
223
223
|
</div>
|
|
224
224
|
}
|
|
@@ -240,7 +240,8 @@ export const CategoryContent = (props: categoryContent) => {
|
|
|
240
240
|
showCheckbox={chooseResponseType && true}
|
|
241
241
|
handleChanges={handleInputChange}
|
|
242
242
|
responseTypeOptions={responseTypeOptions}
|
|
243
|
-
hasHeader={
|
|
243
|
+
hasHeader={hasHeader}
|
|
244
|
+
isTheHeader={categorySidebarData?.data?.key === "0" && hasHeader}
|
|
244
245
|
form={form}
|
|
245
246
|
/>
|
|
246
247
|
</Form.Item>
|
|
@@ -101,21 +101,21 @@ export const CategorySidebar = (props: SidebarProps) => {
|
|
|
101
101
|
questions: [
|
|
102
102
|
{
|
|
103
103
|
grade: '',
|
|
104
|
-
question: '
|
|
104
|
+
question: t('components.category.store'),
|
|
105
105
|
info: '',
|
|
106
106
|
responseType: '-1'
|
|
107
107
|
},
|
|
108
108
|
{
|
|
109
109
|
grade: '',
|
|
110
|
-
question: '
|
|
110
|
+
question: t('components.category.author'),
|
|
111
111
|
info: '',
|
|
112
112
|
responseType: '-1'
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
115
|
grade: '',
|
|
116
|
-
question: '
|
|
116
|
+
question: t('components.category.date'),
|
|
117
117
|
info: '',
|
|
118
|
-
responseType: '-
|
|
118
|
+
responseType: 'CD8D0F30-6229-4BA9-9888-4398CB333392'
|
|
119
119
|
}
|
|
120
120
|
]
|
|
121
121
|
},
|
|
@@ -265,10 +265,10 @@ export const CategorySidebar = (props: SidebarProps) => {
|
|
|
265
265
|
return categories.map((category: any, index: number) => {
|
|
266
266
|
if (category?.data) {
|
|
267
267
|
const titleWithoutCounts = category.title.replace(/\(Q: \d+\)/g, '').replace(/\(G: \d+\)/g, '').trim();
|
|
268
|
-
const updatedTitle = `${titleWithoutCounts} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' + category.data.grade + ')' : ''}`;
|
|
268
|
+
const updatedTitle = `${category?.data.categoryName ? category?.data.categoryName : titleWithoutCounts} ${category.data.questions ? '(Q: ' + category.data.questions.length + ')' : ''} ${category.data.grade ? '(G: ' + category.data.grade + ')' : ''}`;
|
|
269
269
|
const updatedChildren = category.children ? updateCategoryTitles(category.children) : null;
|
|
270
270
|
|
|
271
|
-
return { ...category, title: updatedTitle, children: updatedChildren };
|
|
271
|
+
return { ...category, title: updatedTitle, categoryName: updatedTitle, children: updatedChildren };
|
|
272
272
|
}
|
|
273
273
|
return category;
|
|
274
274
|
});
|
|
@@ -99,7 +99,7 @@ Primary.args = {
|
|
|
99
99
|
"CategoryAnswers": [
|
|
100
100
|
{
|
|
101
101
|
"Title": "Competências",
|
|
102
|
-
"Key": "
|
|
102
|
+
"Key": "0",
|
|
103
103
|
"Data": {
|
|
104
104
|
"Id": "57A06838-67F9-4726-BC36-719A0C797484",
|
|
105
105
|
"CategoryId": "CATEGORYID1",
|
|
@@ -109,6 +109,7 @@ Primary.args = {
|
|
|
109
109
|
"Grade": "0",
|
|
110
110
|
"Description": "Inserir resposta numa escala numérica entre 1 e 5, sendo que 1 corresponde a “Mau” e 5 corresponde a “Excelente”",
|
|
111
111
|
"Score": "0.000",
|
|
112
|
+
"Key": "0",
|
|
112
113
|
"Questions": [
|
|
113
114
|
{
|
|
114
115
|
"Id": "65562A64-A24B-425A-A345-560238CA2468",
|
|
@@ -135,7 +136,7 @@ Primary.args = {
|
|
|
135
136
|
{
|
|
136
137
|
"Id": "85562A64-A24B-425A-A345-560238CA2468",
|
|
137
138
|
"QuestionId": "8D17A8A5-E299-47D3-AB49-684135DB23A3",
|
|
138
|
-
"Subject": "
|
|
139
|
+
"Subject": "Data",
|
|
139
140
|
"Description": "This is a description ",
|
|
140
141
|
"Grade": "0",
|
|
141
142
|
"Note": "asasas",
|
|
@@ -10,6 +10,7 @@ import React from 'react';
|
|
|
10
10
|
import { t } from 'i18next';
|
|
11
11
|
import { Button } from '../Button';
|
|
12
12
|
import dayjs from 'dayjs';
|
|
13
|
+
import moment from 'moment';
|
|
13
14
|
|
|
14
15
|
interface CategoryResponse {
|
|
15
16
|
data: any;
|
|
@@ -114,7 +115,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
114
115
|
IsYesOrNo
|
|
115
116
|
} = data;
|
|
116
117
|
|
|
117
|
-
const initial = {
|
|
118
|
+
const initial = {
|
|
118
119
|
Questions: Questions.map((question: any) => ({
|
|
119
120
|
Subject: question.Subject,
|
|
120
121
|
Description: question.Description,
|
|
@@ -311,6 +312,8 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
311
312
|
{selectedCategory?.Data?.Questions.map((question: any, index: number) => {
|
|
312
313
|
const isOpenAnswer = selectedCategory.Data.OpenAnswer || question.IsOpenAnswer;
|
|
313
314
|
|
|
315
|
+
const isHeaderDate = question.Subject === t('components.category.date') && selectedCategory.Data.Key === "0";
|
|
316
|
+
|
|
314
317
|
const questionWrapper = classNames({
|
|
315
318
|
[styles.questionWrapperOpenAnswer]: isOpenAnswer || props.addButtons,
|
|
316
319
|
}, [styles.questionWrapper]);
|
|
@@ -396,6 +399,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
|
|
|
396
399
|
value={dataValue}
|
|
397
400
|
defaultValue={form.getFieldValue(`Questions`)?.[index].Answer}
|
|
398
401
|
onChange={(value) => setDataValue(value)}
|
|
402
|
+
disabled={isHeaderDate}
|
|
399
403
|
/>
|
|
400
404
|
</Form.Item>
|
|
401
405
|
|
|
@@ -2,7 +2,7 @@ import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/
|
|
|
2
2
|
import { Checkbox, ColorPicker, Form, Input, Select, Space } from 'antd';
|
|
3
3
|
import { t } from 'i18next';
|
|
4
4
|
import styles from './styles.module.scss';
|
|
5
|
-
import {
|
|
5
|
+
import { useState } from 'react';
|
|
6
6
|
import classnames from 'classnames';
|
|
7
7
|
|
|
8
8
|
export const SingleQuestion = ({
|
|
@@ -16,6 +16,7 @@ export const SingleQuestion = ({
|
|
|
16
16
|
showCheckbox,
|
|
17
17
|
responseTypeOptions,
|
|
18
18
|
hasHeader,
|
|
19
|
+
isTheHeader,
|
|
19
20
|
responseTypeComponent,
|
|
20
21
|
form,
|
|
21
22
|
...restField
|
|
@@ -121,7 +122,7 @@ export const SingleQuestion = ({
|
|
|
121
122
|
>
|
|
122
123
|
<Input
|
|
123
124
|
placeholder={!responseTypeComponent ? `${t('components.category.placeholderQuestion')}` : `${t('components.category.placeholderResponse')}`}
|
|
124
|
-
|
|
125
|
+
onMouseLeave={handleChanges}
|
|
125
126
|
/>
|
|
126
127
|
</Form.Item>
|
|
127
128
|
</div>
|
|
@@ -136,7 +137,7 @@ export const SingleQuestion = ({
|
|
|
136
137
|
{!responseTypeComponent &&
|
|
137
138
|
<div className={styles.information}>
|
|
138
139
|
<div className={styles.infoIcon}>
|
|
139
|
-
<InfoCircleOutlined />
|
|
140
|
+
{!hasHeader && <InfoCircleOutlined />}
|
|
140
141
|
</div>
|
|
141
142
|
|
|
142
143
|
<div className={styles.content}>
|
|
@@ -148,7 +149,7 @@ export const SingleQuestion = ({
|
|
|
148
149
|
{...restField}
|
|
149
150
|
name={[name, 'info']}
|
|
150
151
|
>
|
|
151
|
-
<Input placeholder={`${t('components.category.placeholderInfo')}`}
|
|
152
|
+
<Input placeholder={`${t('components.category.placeholderInfo')}`} onMouseLeave={handleChanges} />
|
|
152
153
|
</Form.Item>
|
|
153
154
|
</div>
|
|
154
155
|
|
|
@@ -158,7 +159,7 @@ export const SingleQuestion = ({
|
|
|
158
159
|
{...restField}
|
|
159
160
|
name={[name, 'grade']}
|
|
160
161
|
>
|
|
161
|
-
<Input placeholder={`${t('components.category.placeholderGrade')}`}
|
|
162
|
+
<Input placeholder={`${t('components.category.placeholderGrade')}`} onMouseLeave={handleChanges} />
|
|
162
163
|
</Form.Item>
|
|
163
164
|
</div>
|
|
164
165
|
}
|
|
@@ -169,7 +170,7 @@ export const SingleQuestion = ({
|
|
|
169
170
|
<div className={styles.questionFooter}>
|
|
170
171
|
<div />
|
|
171
172
|
|
|
172
|
-
{!
|
|
173
|
+
{!isTheHeader &&
|
|
173
174
|
<>
|
|
174
175
|
|
|
175
176
|
<div className={styles.checkboxContainer}>
|
|
@@ -223,10 +224,11 @@ export const SingleQuestion = ({
|
|
|
223
224
|
<Form.Item
|
|
224
225
|
{...restField}
|
|
225
226
|
name={[name, 'responseType']}
|
|
226
|
-
|
|
227
|
+
initialValue={"-1"}
|
|
227
228
|
>
|
|
228
229
|
<Select
|
|
229
230
|
options={answerTypeOptions}
|
|
231
|
+
defaultValue={"-1"}
|
|
230
232
|
className={styles.selectResponseType}
|
|
231
233
|
onChange={handleResponseType}
|
|
232
234
|
dropdownStyle={{ minWidth: 500 }}
|
|
@@ -274,7 +276,7 @@ export const SingleQuestion = ({
|
|
|
274
276
|
{...restField}
|
|
275
277
|
name={[name, 'score']}
|
|
276
278
|
>
|
|
277
|
-
<Input placeholder={`${t('components.category.placeholderScore')}`}
|
|
279
|
+
<Input placeholder={`${t('components.category.placeholderScore')}`} onMouseLeave={handleChanges} />
|
|
278
280
|
</Form.Item>
|
|
279
281
|
</div>
|
|
280
282
|
</div>
|
|
@@ -11,6 +11,7 @@ export interface QuestionsProps {
|
|
|
11
11
|
handleChanges: any;
|
|
12
12
|
responseTypeOptions: any;
|
|
13
13
|
hasHeader?: boolean;
|
|
14
|
+
isTheHeader?: boolean;
|
|
14
15
|
responseTypeComponent?: boolean;
|
|
15
16
|
form?: any
|
|
16
17
|
}
|
|
@@ -22,7 +23,8 @@ export const Questions = (props: QuestionsProps) => {
|
|
|
22
23
|
handleChanges,
|
|
23
24
|
responseTypeOptions,
|
|
24
25
|
hasHeader,
|
|
25
|
-
responseTypeComponent
|
|
26
|
+
responseTypeComponent,
|
|
27
|
+
isTheHeader
|
|
26
28
|
} = props;
|
|
27
29
|
|
|
28
30
|
const items = Form.useWatch('questions');
|
|
@@ -72,6 +74,7 @@ export const Questions = (props: QuestionsProps) => {
|
|
|
72
74
|
handleChanges={handleChanges}
|
|
73
75
|
responseTypeOptions={responseTypeOptions}
|
|
74
76
|
hasHeader={hasHeader}
|
|
77
|
+
isTheHeader={isTheHeader}
|
|
75
78
|
responseTypeComponent={responseTypeComponent}
|
|
76
79
|
form={props.form}
|
|
77
80
|
/>
|
|
@@ -13,6 +13,7 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
|
|
|
13
13
|
const [pageInfo, setPageInfo] = useState<any>({});
|
|
14
14
|
const [rowSelectionInfo, setRowSelectionInfo] = useState<any>({});
|
|
15
15
|
const [sortBy, setSortBy] = useState<string[]>(['id', 'desc']);
|
|
16
|
+
const [clearRowSelection, setClearRowSelection] = useState<boolean>(false);
|
|
16
17
|
|
|
17
18
|
const handleSortByColumnChange = (sortState: any) => {
|
|
18
19
|
console.log('handleSortChange called with:', sortState);
|
|
@@ -24,13 +25,16 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
|
|
|
24
25
|
return (record as any)?.type === "Efetivo" ? "Pog" : null;
|
|
25
26
|
};
|
|
26
27
|
|
|
28
|
+
console.log(rowSelectionInfo);
|
|
29
|
+
|
|
27
30
|
return <ResponsiveTable
|
|
28
31
|
scroll={{ x: 4000 }}
|
|
32
|
+
cleanRowSelection={clearRowSelection}
|
|
29
33
|
columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo}
|
|
30
34
|
actionsArray={[
|
|
31
35
|
{
|
|
32
36
|
key: '1', label: `${t('actions.one')}`, onClick: () => {
|
|
33
|
-
|
|
37
|
+
setClearRowSelection(true);
|
|
34
38
|
}
|
|
35
39
|
},
|
|
36
40
|
{ key: '2', label: `${t('actions.two')}` },
|
|
@@ -51,6 +51,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
|
|
|
51
51
|
buttonActionLabel?: (record: any) => string | null;
|
|
52
52
|
buttonActionMethod?: () => void;
|
|
53
53
|
buttonActionStyle?: string | ((record: any) => any);
|
|
54
|
+
cleanRowSelection?: boolean;
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
@@ -79,7 +80,8 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
79
80
|
buttonActionName,
|
|
80
81
|
buttonActionMethod,
|
|
81
82
|
buttonActionStyle,
|
|
82
|
-
buttonActionLabel
|
|
83
|
+
buttonActionLabel,
|
|
84
|
+
cleanRowSelection
|
|
83
85
|
} = props;
|
|
84
86
|
|
|
85
87
|
const [customFilters, setCustomFilters] = useState<any>([]);
|
|
@@ -89,7 +91,6 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
89
91
|
const [selectedAllRowKeys, setSelectedAllRowKeys] = useState(false);
|
|
90
92
|
const [deselectAll, setDeselectAll] = useState(false);
|
|
91
93
|
|
|
92
|
-
|
|
93
94
|
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
|
|
94
95
|
if (rowSelection.type === 'radio') {
|
|
95
96
|
setselectedRowKeys(newSelectedRowKeys);
|
|
@@ -174,6 +175,12 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
|
|
|
174
175
|
props.rowSelectionInfo(selectedRowKeys);
|
|
175
176
|
}, [selectedRowKeys]);
|
|
176
177
|
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
if (cleanRowSelection) {
|
|
180
|
+
setselectedRowKeys([]);
|
|
181
|
+
}
|
|
182
|
+
}, [cleanRowSelection]);
|
|
183
|
+
|
|
177
184
|
useEffect(() => {
|
|
178
185
|
if (dataSource && (dataSource as any)?.length > 0) {
|
|
179
186
|
// Columns
|
package/src/locales/en.json
CHANGED
|
@@ -58,7 +58,10 @@
|
|
|
58
58
|
"placeholderScore": "Score",
|
|
59
59
|
"answerNameIsMissing": "Missing name",
|
|
60
60
|
"typeResponseNameIsMissing": "Name of the missing answer type",
|
|
61
|
-
"responseTypeName": "Name of response type"
|
|
61
|
+
"responseTypeName": "Name of response type",
|
|
62
|
+
"store": "Store",
|
|
63
|
+
"date": "Date",
|
|
64
|
+
"author": "Author"
|
|
62
65
|
},
|
|
63
66
|
"categorySidBar": {
|
|
64
67
|
"addCategory": "Add Category",
|
package/src/locales/es.json
CHANGED
|
@@ -58,7 +58,10 @@
|
|
|
58
58
|
"placeholderScore": "Puntuación",
|
|
59
59
|
"answerNameIsMissing": "Falta el nombre",
|
|
60
60
|
"typeResponseNameIsMissing": "Nombre del tipo de respuesta que falta",
|
|
61
|
-
"responseTypeName": "Nombre del tipo de respuesta"
|
|
61
|
+
"responseTypeName": "Nombre del tipo de respuesta",
|
|
62
|
+
"store": "Tienda",
|
|
63
|
+
"date": "Fecha",
|
|
64
|
+
"author": "Autor"
|
|
62
65
|
},
|
|
63
66
|
"categorySidBar": {
|
|
64
67
|
"addCategory": "Agregar Categoría",
|
package/src/locales/pt.json
CHANGED
|
@@ -58,7 +58,10 @@
|
|
|
58
58
|
"multipleChoise": "Seleção múltipla",
|
|
59
59
|
"placeholderScore": "Pontuação",
|
|
60
60
|
"typeResponseNameIsMissing": "Nome do tipo de resposta em falta",
|
|
61
|
-
"responseTypeName": "Nome do tipo de resposta"
|
|
61
|
+
"responseTypeName": "Nome do tipo de resposta",
|
|
62
|
+
"store": "Loja",
|
|
63
|
+
"date": "Data",
|
|
64
|
+
"author": "Autor"
|
|
62
65
|
},
|
|
63
66
|
"categorySidBar": {
|
|
64
67
|
"addCategory": "Adicionar categoria",
|