@campxdev/react-blueprint 1.2.21 → 1.3.1
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/package.json +3 -3
- package/src/App.tsx +2 -33
- package/src/components/Assets/Icons/IconComponents/AdmissionsIcon.tsx +17 -0
- package/src/components/Assets/Icons/IconComponents/CertificatesIcon.tsx +56 -0
- package/src/components/Assets/Icons/IconComponents/CetIcon.tsx +60 -0
- package/src/components/Assets/Icons/IconComponents/ConcessionsIcon.tsx +67 -0
- package/src/components/Assets/Icons/IconComponents/CounsellorsIcon.tsx +46 -0
- package/src/components/Assets/Icons/IconComponents/LeadsIcon.tsx +53 -0
- package/src/components/Assets/Icons/IconComponents/QuizIcon.tsx +8 -1
- package/src/components/Assets/Icons/IconComponents/ReportsIcon.tsx +53 -0
- package/src/components/Assets/Icons/Icons.tsx +14 -0
- package/src/components/DataDisplay/EditableDataTable/EditableDataTable.tsx +29 -51
- package/src/components/Input/SingleSelect/SingleSelect.tsx +141 -15
- package/src/components/Input/components/{FetchingOptionsLoader.tsx → OptionsLoader.tsx} +10 -2
- package/src/components/Input/styles.tsx +1 -1
- package/src/themes/commonTheme.ts +8 -0
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campxdev/react-blueprint",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"main": "./export.ts",
|
|
5
5
|
"private": false,
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@campxdev/campx-web-utils": "0.1.5",
|
|
8
8
|
"@emotion/react": "^11.11.4",
|
|
9
9
|
"@emotion/styled": "^11.11.5",
|
|
10
|
-
"@mui/icons-material": "^
|
|
11
|
-
"@mui/material": "^
|
|
10
|
+
"@mui/icons-material": "^6.1.5",
|
|
11
|
+
"@mui/material": "^6.1.5",
|
|
12
12
|
"@mui/x-data-grid": "^7.5.1",
|
|
13
13
|
"@mui/x-date-pickers": "7.16.0",
|
|
14
14
|
"@reduxjs/toolkit": "^2.2.7",
|
package/src/App.tsx
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import { GridColDef
|
|
1
|
+
import { GridColDef } from '@mui/x-data-grid';
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import './App.css';
|
|
4
|
-
import {
|
|
5
|
-
EditableDataTable,
|
|
6
|
-
Select,
|
|
7
|
-
SingleSelect,
|
|
8
|
-
TextField,
|
|
9
|
-
} from './components/export';
|
|
4
|
+
import { EditableDataTable, Select, SingleSelect } from './components/export';
|
|
10
5
|
import { usePageHeader } from './hooks/usePageHeader';
|
|
11
6
|
|
|
12
7
|
interface RowType {
|
|
@@ -94,35 +89,9 @@ function App() {
|
|
|
94
89
|
{
|
|
95
90
|
field: 'age',
|
|
96
91
|
headerName: 'Age',
|
|
97
|
-
preProcessEditCellProps: (params: GridPreProcessEditCellProps) => {
|
|
98
|
-
const hasError = params.props.value < 3;
|
|
99
|
-
return {
|
|
100
|
-
...params.props,
|
|
101
|
-
error: hasError,
|
|
102
|
-
};
|
|
103
|
-
},
|
|
104
92
|
width: 230,
|
|
105
93
|
editable: true,
|
|
106
94
|
type: 'number',
|
|
107
|
-
renderEditCell: (params) => {
|
|
108
|
-
return (
|
|
109
|
-
<>
|
|
110
|
-
<TextField
|
|
111
|
-
value={params.value}
|
|
112
|
-
error={params.error}
|
|
113
|
-
helperText={params.error && 'Age is at least 3'}
|
|
114
|
-
type="number"
|
|
115
|
-
onChange={(e) => {
|
|
116
|
-
params.api.setEditCellValue({
|
|
117
|
-
id: params.id,
|
|
118
|
-
field: 'age',
|
|
119
|
-
value: e.target.value,
|
|
120
|
-
});
|
|
121
|
-
}}
|
|
122
|
-
/>
|
|
123
|
-
</>
|
|
124
|
-
);
|
|
125
|
-
},
|
|
126
95
|
},
|
|
127
96
|
];
|
|
128
97
|
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export const AdmissionIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width={size}
|
|
6
|
+
height={size}
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
id="users_3_"
|
|
11
|
+
data-name="users (3)"
|
|
12
|
+
d="M5,8.667a3,3,0,1,1,3-3,3,3,0,0,1-3,3ZM5,4A1.667,1.667,0,1,0,6.667,5.667,1.667,1.667,0,0,0,5,4Zm5,11.333V15A5,5,0,0,0,0,15v.333a.667.667,0,0,0,1.333,0V15a3.667,3.667,0,0,1,7.333,0v.333a.667.667,0,0,0,1.333,0ZM16,12A4.667,4.667,0,0,0,8.222,8.522a.667.667,0,1,0,.889.993A3.333,3.333,0,0,1,14.667,12,.667.667,0,0,0,16,12ZM11.667,6a3,3,0,1,1,3-3,3,3,0,0,1-3,3Zm0-4.667A1.667,1.667,0,1,0,13.333,3,1.667,1.667,0,0,0,11.667,1.333Z"
|
|
13
|
+
fill="#121212"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
export const CertificateIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
id="vuesax_outline_subtitle"
|
|
5
|
+
data-name="vuesax/outline/subtitle"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
width={size}
|
|
8
|
+
height={size}
|
|
9
|
+
viewBox="0 0 16 16"
|
|
10
|
+
>
|
|
11
|
+
<g id="subtitle">
|
|
12
|
+
<path
|
|
13
|
+
id="Vector"
|
|
14
|
+
d="M5.767,0h4.465C14.273,0,16,1.726,16,5.767v4.465C16,14.273,14.273,16,10.232,16H5.767C1.726,16,0,14.273,0,10.232V5.767C0,1.726,1.726,0,5.767,0Zm4.465,14.883c3.43,0,4.651-1.22,4.651-4.651V5.767c0-3.431-1.22-4.651-4.651-4.651H5.767c-3.43,0-4.651,1.22-4.651,4.651v4.465c0,3.431,1.22,4.651,4.651,4.651Z"
|
|
15
|
+
transform="translate(0 0)"
|
|
16
|
+
fill="#121212"
|
|
17
|
+
/>
|
|
18
|
+
<path
|
|
19
|
+
id="Vector-2"
|
|
20
|
+
data-name="Vector"
|
|
21
|
+
d="M.558,0H1.935a.562.562,0,0,1,.558.558.562.562,0,0,1-.558.558H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0Z"
|
|
22
|
+
transform="translate(3.349 3.661)"
|
|
23
|
+
fill="#121212"
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
id="Vector-3"
|
|
27
|
+
data-name="Vector"
|
|
28
|
+
d="M.558,0H5.373a.562.562,0,0,1,.558.558.562.562,0,0,1-.558.558H.558A.558.558,0,0,1,.558,0Z"
|
|
29
|
+
transform="translate(6.72 3.661)"
|
|
30
|
+
fill="#121212"
|
|
31
|
+
/>
|
|
32
|
+
<path
|
|
33
|
+
id="Vector-4"
|
|
34
|
+
data-name="Vector"
|
|
35
|
+
d="M.558,0H4.673a.562.562,0,0,1,.558.558.562.562,0,0,1-.558.558H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0Z"
|
|
36
|
+
transform="translate(3.349 6.46)"
|
|
37
|
+
fill="#121212"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
id="Vector-5"
|
|
41
|
+
data-name="Vector"
|
|
42
|
+
d="M.558,0H2.619a.562.562,0,0,1,.558.558.562.562,0,0,1-.558.558H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0Z"
|
|
43
|
+
transform="translate(9.474 6.46)"
|
|
44
|
+
fill="#121212"
|
|
45
|
+
/>
|
|
46
|
+
<path
|
|
47
|
+
id="Vector-6"
|
|
48
|
+
data-name="Vector"
|
|
49
|
+
d="M16,16H0V0H16Z"
|
|
50
|
+
fill="none"
|
|
51
|
+
opacity="0"
|
|
52
|
+
/>
|
|
53
|
+
</g>
|
|
54
|
+
</svg>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export const CetIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width={size}
|
|
6
|
+
height={size}
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<g
|
|
10
|
+
id="vuesax_outline_document-text"
|
|
11
|
+
data-name="vuesax/outline/document-text"
|
|
12
|
+
transform="translate(-492 -252)"
|
|
13
|
+
>
|
|
14
|
+
<g id="document-text" transform="translate(492 252)">
|
|
15
|
+
<path
|
|
16
|
+
id="Vector"
|
|
17
|
+
d="M10.232,16H4.279A3.9,3.9,0,0,1,0,11.721V4.279A3.9,3.9,0,0,1,4.279,0h5.953a3.9,3.9,0,0,1,4.279,4.279v7.442A3.9,3.9,0,0,1,10.232,16ZM4.279,1.116c-2.128,0-3.163,1.034-3.163,3.163v7.442c0,2.128,1.034,3.163,3.163,3.163h5.953c2.128,0,3.163-1.034,3.163-3.163V4.279c0-2.128-1.034-3.163-3.163-3.163Z"
|
|
18
|
+
transform="translate(0.744)"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
id="Vector-2"
|
|
23
|
+
data-name="Vector"
|
|
24
|
+
d="M3.535,4.093H2.046A2.045,2.045,0,0,1,0,2.046V.558A.562.562,0,0,1,.558,0a.562.562,0,0,1,.558.558V2.046a.931.931,0,0,0,.93.93H3.535a.558.558,0,1,1,0,1.116Z"
|
|
25
|
+
transform="translate(9.303 1.861)"
|
|
26
|
+
fill="#121212"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-3"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M3.535,1.116H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0H3.535a.562.562,0,0,1,.558.558A.562.562,0,0,1,3.535,1.116Z"
|
|
32
|
+
transform="translate(4.465 8.186)"
|
|
33
|
+
fill="#121212"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-4"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M6.512,1.116H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0H6.512A.562.562,0,0,1,7.07.558.562.562,0,0,1,6.512,1.116Z"
|
|
39
|
+
transform="translate(4.465 11.163)"
|
|
40
|
+
fill="#121212"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
id="Vector-5"
|
|
44
|
+
data-name="Vector"
|
|
45
|
+
d="M0,0H16V16H0Z"
|
|
46
|
+
fill="none"
|
|
47
|
+
opacity="0"
|
|
48
|
+
/>
|
|
49
|
+
<path
|
|
50
|
+
id="Vector-6"
|
|
51
|
+
data-name="Vector"
|
|
52
|
+
d="M0,0H16V16H0Z"
|
|
53
|
+
fill="none"
|
|
54
|
+
opacity="0"
|
|
55
|
+
/>
|
|
56
|
+
</g>
|
|
57
|
+
</g>
|
|
58
|
+
</svg>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
export const ConcessionIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width={size}
|
|
6
|
+
height={size}
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<g
|
|
10
|
+
id="vuesax_outline_empty-wallet-add"
|
|
11
|
+
data-name="vuesax/outline/empty-wallet-add"
|
|
12
|
+
transform="translate(-492 -188)"
|
|
13
|
+
>
|
|
14
|
+
<g id="empty-wallet-add" transform="translate(492 188)">
|
|
15
|
+
<path
|
|
16
|
+
id="Vector"
|
|
17
|
+
d="M10.66,10.493H3.92a.507.507,0,0,1-.473-.327.5.5,0,0,1,.147-.553,1.852,1.852,0,0,0,.413-.493A2.1,2.1,0,0,0,4.327,8,2.162,2.162,0,0,0,.807,6.313a.5.5,0,0,1-.527.06A.5.5,0,0,1,0,5.92V3.007A3.007,3.007,0,0,1,3.007,0H10.66a3.007,3.007,0,0,1,3.007,3.007v.96a.5.5,0,0,1-.5.5H11.82a.82.82,0,0,0-.6.247l-.007.007a.842.842,0,0,0-.253.68.929.929,0,0,0,.94.793h1.267a.5.5,0,0,1,.5.5v.793A3.007,3.007,0,0,1,10.66,10.493Zm-5.707-1H10.66a2.009,2.009,0,0,0,2.007-2.007V7.193H11.9A1.919,1.919,0,0,1,9.96,5.487,1.877,1.877,0,0,1,11.82,3.46h.847V3A2.009,2.009,0,0,0,10.66.993H3.007A2.009,2.009,0,0,0,1,3V5.053a3.158,3.158,0,0,1,4.333,2.94A3.152,3.152,0,0,1,4.953,9.493Z"
|
|
18
|
+
transform="translate(1.167 4.673)"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
id="Vector-2"
|
|
23
|
+
data-name="Vector"
|
|
24
|
+
d="M.5,7.909a.5.5,0,0,1-.5-.5V4.362A2.419,2.419,0,0,1,1.553,2.115l5.293-2a1.748,1.748,0,0,1,1.627.2,1.763,1.763,0,0,1,.76,1.453V4.3a.5.5,0,1,1-1,0V1.769A.761.761,0,0,0,7.9,1.135a.745.745,0,0,0-.707-.087l-5.293,2A1.416,1.416,0,0,0,.993,4.362V7.409A.49.49,0,0,1,.5,7.909Z"
|
|
25
|
+
transform="translate(1.167 0.865)"
|
|
26
|
+
fill="#121212"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-3"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M1.948,3.733A1.919,1.919,0,0,1,.008,2.027,1.83,1.83,0,0,1,.555.54,1.818,1.818,0,0,1,1.862,0H3.248A1.184,1.184,0,0,1,4.415,1.18V2.553a1.18,1.18,0,0,1-1.147,1.18ZM3.235,1H1.868a.82.82,0,0,0-.6.247.84.84,0,0,0-.26.693.929.929,0,0,0,.94.793H3.255a.177.177,0,0,0,.167-.18V1.18A.185.185,0,0,0,3.235,1Z"
|
|
32
|
+
transform="translate(11.118 8.133)"
|
|
33
|
+
fill="#121212"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-4"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M5.167,1H.5A.5.5,0,0,1,0,.5.5.5,0,0,1,.5,0H5.167a.5.5,0,0,1,.5.5A.5.5,0,0,1,5.167,1Z"
|
|
39
|
+
transform="translate(4.167 7.5)"
|
|
40
|
+
fill="#121212"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
id="Vector-5"
|
|
44
|
+
data-name="Vector"
|
|
45
|
+
d="M3.167,6.333A3.148,3.148,0,0,1,.46,4.793,3.075,3.075,0,0,1,0,3.167,3.141,3.141,0,0,1,1.187.693,3.169,3.169,0,0,1,6.333,3.167,3.115,3.115,0,0,1,5.873,4.8a2.817,2.817,0,0,1-.633.747A3.062,3.062,0,0,1,3.167,6.333ZM3.167,1A2.177,2.177,0,0,0,1,3.167,2.112,2.112,0,0,0,1.313,4.28a2.149,2.149,0,0,0,3.273.513,1.919,1.919,0,0,0,.427-.507,2.1,2.1,0,0,0,.32-1.12A2.171,2.171,0,0,0,3.167,1Z"
|
|
46
|
+
transform="translate(0.167 9.5)"
|
|
47
|
+
fill="#121212"
|
|
48
|
+
/>
|
|
49
|
+
<path
|
|
50
|
+
id="Vector-6"
|
|
51
|
+
data-name="Vector"
|
|
52
|
+
d="M2.493,1H.5A.5.5,0,0,1,0,.5.5.5,0,0,1,.5,0H2.493a.5.5,0,0,1,0,1Z"
|
|
53
|
+
transform="translate(1.833 12.153)"
|
|
54
|
+
fill="#121212"
|
|
55
|
+
/>
|
|
56
|
+
<path
|
|
57
|
+
id="Vector-7"
|
|
58
|
+
data-name="Vector"
|
|
59
|
+
d="M0,0H16V16H0Z"
|
|
60
|
+
fill="none"
|
|
61
|
+
opacity="0"
|
|
62
|
+
/>
|
|
63
|
+
</g>
|
|
64
|
+
</g>
|
|
65
|
+
</svg>
|
|
66
|
+
);
|
|
67
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export const CounsellorIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width={size}
|
|
6
|
+
height={size}
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<g
|
|
10
|
+
id="vuesax_outline_user-octagon"
|
|
11
|
+
data-name="vuesax/outline/user-octagon"
|
|
12
|
+
transform="translate(-620 -188)"
|
|
13
|
+
>
|
|
14
|
+
<g id="user-octagon" transform="translate(620 188)">
|
|
15
|
+
<path
|
|
16
|
+
id="Vector"
|
|
17
|
+
d="M7.32,16a2.885,2.885,0,0,1-1.451-.387L1.451,13.059A2.921,2.921,0,0,1,0,10.544V5.456A2.921,2.921,0,0,1,1.451,2.942L5.869.391a2.889,2.889,0,0,1,2.9,0l4.419,2.551a2.921,2.921,0,0,1,1.451,2.514v5.088a2.921,2.921,0,0,1-1.451,2.514L8.77,15.61A2.885,2.885,0,0,1,7.32,16Zm0-14.877a1.823,1.823,0,0,0-.893.238L2.008,3.909a1.79,1.79,0,0,0-.893,1.547v5.088a1.8,1.8,0,0,0,.893,1.547l4.419,2.551a1.781,1.781,0,0,0,1.785,0l4.419-2.551a1.79,1.79,0,0,0,.893-1.547V5.456a1.8,1.8,0,0,0-.893-1.547L8.212,1.358A1.823,1.823,0,0,0,7.32,1.12Z"
|
|
18
|
+
transform="translate(0.681)"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
id="Vector-2"
|
|
23
|
+
data-name="Vector"
|
|
24
|
+
d="M2.291,4.582A2.291,2.291,0,1,1,4.582,2.291,2.292,2.292,0,0,1,2.291,4.582Zm0-3.466A1.175,1.175,0,1,0,3.466,2.291,1.178,1.178,0,0,0,2.291,1.116Z"
|
|
25
|
+
transform="translate(5.708 3.232)"
|
|
26
|
+
fill="#121212"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-3"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M6.509,3.541a.562.562,0,0,1-.558-.558A2.2,2.2,0,0,0,3.533,1.116,2.2,2.2,0,0,0,1.116,2.983a.562.562,0,0,1-.558.558A.562.562,0,0,1,0,2.983,3.3,3.3,0,0,1,3.533,0,3.3,3.3,0,0,1,7.067,2.983.562.562,0,0,1,6.509,3.541Z"
|
|
32
|
+
transform="translate(4.466 8.484)"
|
|
33
|
+
fill="#121212"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-4"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M0,0H16V16H0Z"
|
|
39
|
+
fill="none"
|
|
40
|
+
opacity="0"
|
|
41
|
+
/>
|
|
42
|
+
</g>
|
|
43
|
+
</g>
|
|
44
|
+
</svg>
|
|
45
|
+
);
|
|
46
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export const LeadsIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width={size}
|
|
6
|
+
height={size}
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<g
|
|
10
|
+
id="vuesax_outline_profile-add"
|
|
11
|
+
data-name="vuesax/outline/profile-add"
|
|
12
|
+
transform="translate(-364 -252)"
|
|
13
|
+
>
|
|
14
|
+
<g id="profile-add" transform="translate(364 252)">
|
|
15
|
+
<path
|
|
16
|
+
id="Vector"
|
|
17
|
+
d="M3.538,1.117H.559A.563.563,0,0,1,0,.559.563.563,0,0,1,.559,0h2.98A.563.563,0,0,1,4.1.559.563.563,0,0,1,3.538,1.117Z"
|
|
18
|
+
transform="translate(9.317 13.035)"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
id="Vector-2"
|
|
23
|
+
data-name="Vector"
|
|
24
|
+
d="M.559,4.1A.563.563,0,0,1,0,3.538V.559A.563.563,0,0,1,.559,0a.563.563,0,0,1,.559.559V3.538A.563.563,0,0,1,.559,4.1Z"
|
|
25
|
+
transform="translate(10.807 11.546)"
|
|
26
|
+
fill="#121212"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-3"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M3.985,7.724h-.06a.4.4,0,0,0-.134,0A3.849,3.849,0,0,1,0,3.866,3.794,3.794,0,0,1,1.125,1.14a3.861,3.861,0,0,1,6.6,2.726A3.841,3.841,0,0,1,4.008,7.724ZM3.859,1.117A2.734,2.734,0,0,0,1.117,3.858,2.724,2.724,0,0,0,3.762,6.6,1.24,1.24,0,0,1,4,6.6,2.727,2.727,0,0,0,6.607,3.858,2.755,2.755,0,0,0,3.859,1.117Z"
|
|
32
|
+
transform="translate(4.148)"
|
|
33
|
+
fill="#121212"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-4"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M5.646,7.546A7.316,7.316,0,0,1,1.6,6.421,3.23,3.23,0,0,1,0,3.762,3.214,3.214,0,0,1,1.6,1.117a7.853,7.853,0,0,1,8.075,0,.563.563,0,0,1,.156.775.556.556,0,0,1-.775.156,6.766,6.766,0,0,0-6.838,0,2.13,2.13,0,0,0-1.1,1.713A2.152,2.152,0,0,0,2.22,5.49a6.2,6.2,0,0,0,3.419.931.562.562,0,0,1,.007,1.125Z"
|
|
39
|
+
transform="translate(2.359 8.328)"
|
|
40
|
+
fill="#121212"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
id="Vector-5"
|
|
44
|
+
data-name="Vector"
|
|
45
|
+
d="M0,0H16V16H0Z"
|
|
46
|
+
fill="none"
|
|
47
|
+
opacity="0"
|
|
48
|
+
/>
|
|
49
|
+
</g>
|
|
50
|
+
</g>
|
|
51
|
+
</svg>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import { useTheme } from '@mui/material';
|
|
2
|
+
|
|
1
3
|
const QuizIcon = ({ size = 16 }) => {
|
|
4
|
+
const theme = useTheme();
|
|
5
|
+
const color = theme.palette.text.black;
|
|
2
6
|
return (
|
|
3
7
|
<svg
|
|
4
8
|
width={size}
|
|
5
9
|
height={size}
|
|
6
10
|
viewBox="0 0 20 20"
|
|
7
|
-
|
|
11
|
+
style={{
|
|
12
|
+
fill: color,
|
|
13
|
+
stroke: color,
|
|
14
|
+
}}
|
|
8
15
|
xmlns="http://www.w3.org/2000/svg"
|
|
9
16
|
>
|
|
10
17
|
<g clip-path="url(#clip0_1305_893)">
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export const ReportIcon = ({ size = 16 }) => {
|
|
2
|
+
return (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width={size}
|
|
6
|
+
height={size}
|
|
7
|
+
viewBox="0 0 16 16"
|
|
8
|
+
>
|
|
9
|
+
<g
|
|
10
|
+
id="vuesax_outline_document-text"
|
|
11
|
+
data-name="vuesax/outline/document-text"
|
|
12
|
+
transform="translate(-172 -188)"
|
|
13
|
+
>
|
|
14
|
+
<g id="document-text" transform="translate(172 188)">
|
|
15
|
+
<path
|
|
16
|
+
id="Vector"
|
|
17
|
+
d="M10.232,16H5.767C1.726,16,0,14.273,0,10.232V5.767C0,1.726,1.726,0,5.767,0H9.488a.562.562,0,0,1,.558.558.562.562,0,0,1-.558.558H5.767c-3.43,0-4.651,1.22-4.651,4.651v4.465c0,3.431,1.22,4.651,4.651,4.651h4.465c3.43,0,4.651-1.22,4.651-4.651V6.511a.558.558,0,1,1,1.116,0v3.721C16,14.273,14.273,16,10.232,16Z"
|
|
18
|
+
transform="translate(0 0)"
|
|
19
|
+
fill="#121212"
|
|
20
|
+
/>
|
|
21
|
+
<path
|
|
22
|
+
id="Vector-2"
|
|
23
|
+
data-name="Vector"
|
|
24
|
+
d="M6.511,7.068H3.535C.99,7.068,0,6.079,0,3.534V.557A.551.551,0,0,1,.342.044a.563.563,0,0,1,.61.119L6.906,6.116a.559.559,0,0,1-.394.953ZM1.116,1.9v1.63c0,1.92.5,2.418,2.418,2.418h1.63Z"
|
|
25
|
+
transform="translate(8.93 0.001)"
|
|
26
|
+
fill="#121212"
|
|
27
|
+
/>
|
|
28
|
+
<path
|
|
29
|
+
id="Vector-3"
|
|
30
|
+
data-name="Vector"
|
|
31
|
+
d="M5.023,1.116H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0H5.023a.562.562,0,0,1,.558.558A.562.562,0,0,1,5.023,1.116Z"
|
|
32
|
+
transform="translate(3.721 8.186)"
|
|
33
|
+
fill="#121212"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
id="Vector-4"
|
|
37
|
+
data-name="Vector"
|
|
38
|
+
d="M3.535,1.116H.558A.562.562,0,0,1,0,.558.562.562,0,0,1,.558,0H3.535a.562.562,0,0,1,.558.558A.562.562,0,0,1,3.535,1.116Z"
|
|
39
|
+
transform="translate(3.721 11.163)"
|
|
40
|
+
fill="#121212"
|
|
41
|
+
/>
|
|
42
|
+
<path
|
|
43
|
+
id="Vector-5"
|
|
44
|
+
data-name="Vector"
|
|
45
|
+
d="M0,0H16V16H0Z"
|
|
46
|
+
fill="none"
|
|
47
|
+
opacity="0"
|
|
48
|
+
/>
|
|
49
|
+
</g>
|
|
50
|
+
</g>
|
|
51
|
+
</svg>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
@@ -3,6 +3,7 @@ import { AccordionArrow } from './IconComponents/AccordionArrow';
|
|
|
3
3
|
import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
|
|
4
4
|
import { AdminIcon } from './IconComponents/AdminIcon';
|
|
5
5
|
import { AdministratorIcon } from './IconComponents/AdministratorIcon';
|
|
6
|
+
import { AdmissionIcon } from './IconComponents/AdmissionsIcon';
|
|
6
7
|
import { ErrorFilledIcon } from './IconComponents/AlertFilledIcon';
|
|
7
8
|
import { AppsIcon } from './IconComponents/AppsIcon';
|
|
8
9
|
import { ArchiveIcon } from './IconComponents/ArchiveIcon';
|
|
@@ -15,6 +16,8 @@ import { CalendarIcon } from './IconComponents/CalendarIcon';
|
|
|
15
16
|
import { CampxFullLogoIcon } from './IconComponents/CampxFullLogoIcon';
|
|
16
17
|
import { CampxIcon } from './IconComponents/CampxIcon';
|
|
17
18
|
import { CareerIcon } from './IconComponents/CareerIcon';
|
|
19
|
+
import { CertificateIcon } from './IconComponents/CertificatesIcon';
|
|
20
|
+
import { CetIcon } from './IconComponents/CetIcon';
|
|
18
21
|
import { CheckedCheckboxIcon } from './IconComponents/CheckedCheckBoxIcon';
|
|
19
22
|
import { CheckedRadioIcon } from './IconComponents/CheckedRadioIcon';
|
|
20
23
|
import { ClogWheelIcon } from './IconComponents/ClogWheelIcon';
|
|
@@ -24,7 +27,9 @@ import { ComfortableIcon } from './IconComponents/Comfortable';
|
|
|
24
27
|
import { CommutexIcon } from './IconComponents/CommutexIcon';
|
|
25
28
|
import { CompactIcon } from './IconComponents/CompactIcon';
|
|
26
29
|
import { CompletedStateIcon } from './IconComponents/CompletedStateIcon';
|
|
30
|
+
import { ConcessionIcon } from './IconComponents/ConcessionsIcon';
|
|
27
31
|
import { ConfigureIcon } from './IconComponents/ConfigureIcon';
|
|
32
|
+
import { CounsellorIcon } from './IconComponents/CounsellorsIcon';
|
|
28
33
|
import { CourseInfoIcon } from './IconComponents/CourseInfoIcon';
|
|
29
34
|
import { CrossIcon } from './IconComponents/CrossIcon';
|
|
30
35
|
import { CrossIcon2 } from './IconComponents/CrossIcon2';
|
|
@@ -50,6 +55,7 @@ import { ImageIcon } from './IconComponents/ImageIcon';
|
|
|
50
55
|
import { InfoFilledIcon } from './IconComponents/InfoFilledIcon';
|
|
51
56
|
import { InfoIcon } from './IconComponents/InfoIcon';
|
|
52
57
|
import { InstitutionsIcon } from './IconComponents/InstitutionsIcon';
|
|
58
|
+
import { LeadsIcon } from './IconComponents/LeadsIcon';
|
|
53
59
|
import { LeftIcon } from './IconComponents/LeftIcon';
|
|
54
60
|
import { LocationIcon } from './IconComponents/LocationIcon';
|
|
55
61
|
import { LogoutIcon } from './IconComponents/LogoutIcon';
|
|
@@ -65,6 +71,7 @@ import { QuestionsIcon } from './IconComponents/QuestionsIcon';
|
|
|
65
71
|
import QuizIcon from './IconComponents/QuizIcon';
|
|
66
72
|
import { RedirectIcon } from './IconComponents/RedirectIcon';
|
|
67
73
|
import { RedoIcon } from './IconComponents/RedoIcon';
|
|
74
|
+
import { ReportIcon } from './IconComponents/ReportsIcon';
|
|
68
75
|
import { ResourcesIcon } from './IconComponents/ResourcesIcon';
|
|
69
76
|
import { RightIcon } from './IconComponents/RightIcon';
|
|
70
77
|
import { SaveIcon } from './IconComponents/SaveIcon';
|
|
@@ -182,4 +189,11 @@ export const Icons = {
|
|
|
182
189
|
TimeTableIcon,
|
|
183
190
|
TimerIcon,
|
|
184
191
|
QuizIcon,
|
|
192
|
+
LeadsIcon,
|
|
193
|
+
AdmissionIcon,
|
|
194
|
+
CounsellorIcon,
|
|
195
|
+
ConcessionIcon,
|
|
196
|
+
ReportIcon,
|
|
197
|
+
CetIcon,
|
|
198
|
+
CertificateIcon,
|
|
185
199
|
};
|
|
@@ -129,7 +129,7 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
|
|
|
129
129
|
height: '100%',
|
|
130
130
|
},
|
|
131
131
|
'& .MuiDataGrid-cell.MuiDataGrid-cell--editing': {
|
|
132
|
-
padding: '0px 9px
|
|
132
|
+
padding: '0px 9px',
|
|
133
133
|
alignItems: 'center',
|
|
134
134
|
},
|
|
135
135
|
'& .MuiDataGrid-cell': {
|
|
@@ -144,11 +144,6 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
|
|
|
144
144
|
borderColor: theme.palette.primary.main,
|
|
145
145
|
},
|
|
146
146
|
},
|
|
147
|
-
'& .MuiOutlinedInput-root': {
|
|
148
|
-
fieldset: {
|
|
149
|
-
top: '0px !important',
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
147
|
'& .MuiAutocomplete-input': {
|
|
153
148
|
border: 'none',
|
|
154
149
|
},
|
|
@@ -168,53 +163,36 @@ export const EditableTableCore = (props: EditableDataTableProps) => {
|
|
|
168
163
|
width: 150,
|
|
169
164
|
cellClassName: 'actions',
|
|
170
165
|
getActions: (params) => {
|
|
166
|
+
const actions = [];
|
|
171
167
|
if (rowModesModel[params.id]?.mode === GridRowModes.Edit) {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
label="Cancel"
|
|
189
|
-
onClick={() => handleDeleteClick(params)}
|
|
190
|
-
color="inherit"
|
|
191
|
-
/>,
|
|
192
|
-
];
|
|
168
|
+
actions.push(
|
|
169
|
+
<GridActionsCellItem
|
|
170
|
+
icon={<Icons.SaveIcon />}
|
|
171
|
+
label="Save"
|
|
172
|
+
onClick={() => handleSaveClick(params)}
|
|
173
|
+
/>,
|
|
174
|
+
);
|
|
175
|
+
} else {
|
|
176
|
+
actions.push(
|
|
177
|
+
<GridActionsCellItem
|
|
178
|
+
icon={<Icons.EditIcon />}
|
|
179
|
+
label="Edit"
|
|
180
|
+
onClick={() => handleEditClick(params)}
|
|
181
|
+
color="inherit"
|
|
182
|
+
/>,
|
|
183
|
+
);
|
|
193
184
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
<GridActionsCellItem
|
|
206
|
-
icon={<Icons.EditIcon />}
|
|
207
|
-
label="Edit"
|
|
208
|
-
onClick={() => handleEditClick(params)}
|
|
209
|
-
color="inherit"
|
|
210
|
-
/>,
|
|
211
|
-
<GridActionsCellItem
|
|
212
|
-
icon={<Icons.DeleteIcon />}
|
|
213
|
-
label="Delete"
|
|
214
|
-
onClick={() => handleDeleteClick(params)}
|
|
215
|
-
color="inherit"
|
|
216
|
-
/>,
|
|
217
|
-
];
|
|
185
|
+
if (!props.hideDelete) {
|
|
186
|
+
actions.push(
|
|
187
|
+
<GridActionsCellItem
|
|
188
|
+
icon={<Icons.DeleteIcon />}
|
|
189
|
+
label="Delete"
|
|
190
|
+
onClick={() => handleDeleteClick(params)}
|
|
191
|
+
color="inherit"
|
|
192
|
+
/>,
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
return actions;
|
|
218
196
|
},
|
|
219
197
|
} as GridColDef,
|
|
220
198
|
]}
|
|
@@ -5,15 +5,14 @@ import {
|
|
|
5
5
|
Box,
|
|
6
6
|
Autocomplete as MuiAutocomplete,
|
|
7
7
|
Paper,
|
|
8
|
-
PaperProps,
|
|
9
8
|
} from '@mui/material';
|
|
10
9
|
import axios from 'axios';
|
|
11
|
-
import _ from 'lodash';
|
|
12
|
-
import { SyntheticEvent, useEffect, useReducer } from 'react';
|
|
10
|
+
import _, { debounce } from 'lodash';
|
|
11
|
+
import { SyntheticEvent, useEffect, useMemo, useReducer } from 'react';
|
|
13
12
|
import { Typography } from '../../DataDisplay/Typography/Typography';
|
|
14
13
|
import { Spinner } from '../../Feedback/Spinner/Spinner';
|
|
15
14
|
import { TextField } from '../TextField/TextField';
|
|
16
|
-
import {
|
|
15
|
+
import { OptionsLoader } from '../components/OptionsLoader';
|
|
17
16
|
import { OptionContainer } from '../styles';
|
|
18
17
|
|
|
19
18
|
function sleep(duration: number): Promise<void> {
|
|
@@ -24,6 +23,13 @@ function sleep(duration: number): Promise<void> {
|
|
|
24
23
|
});
|
|
25
24
|
}
|
|
26
25
|
|
|
26
|
+
declare module '@mui/material/Autocomplete' {
|
|
27
|
+
interface AutocompletePaperSlotPropsOverrides {
|
|
28
|
+
loadingOptions: boolean;
|
|
29
|
+
isSearch: boolean;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
27
33
|
export type SingleSelectProps = {
|
|
28
34
|
options?: { label: string; subLabel?: string; value: any }[] | any[];
|
|
29
35
|
optionsApiEndPoint?: string;
|
|
@@ -33,7 +39,11 @@ export type SingleSelectProps = {
|
|
|
33
39
|
label?: string;
|
|
34
40
|
name?: string;
|
|
35
41
|
getValue?: (option: any) => any;
|
|
36
|
-
|
|
42
|
+
dbValueProps?: {
|
|
43
|
+
valueKey: string;
|
|
44
|
+
isObjectId?: boolean;
|
|
45
|
+
};
|
|
46
|
+
dbLabelProps?: { labelKey: string; subLabelKey?: string };
|
|
37
47
|
onChange: (value: any) => void;
|
|
38
48
|
error?: any;
|
|
39
49
|
helperText?: string;
|
|
@@ -54,7 +64,7 @@ export type SingleSelectProps = {
|
|
|
54
64
|
| 'renderInput'
|
|
55
65
|
>;
|
|
56
66
|
|
|
57
|
-
const CustomPaper = (props:
|
|
67
|
+
const CustomPaper = (props: any) => (
|
|
58
68
|
<Paper
|
|
59
69
|
{...props}
|
|
60
70
|
sx={{
|
|
@@ -63,7 +73,7 @@ const CustomPaper = (props: PaperProps) => (
|
|
|
63
73
|
}}
|
|
64
74
|
>
|
|
65
75
|
{props.children}
|
|
66
|
-
<
|
|
76
|
+
<OptionsLoader loading={props.loadingOptions} isSearch={props.isSearch} />
|
|
67
77
|
</Paper>
|
|
68
78
|
);
|
|
69
79
|
|
|
@@ -78,6 +88,8 @@ enum SingleSelectActionsTypes {
|
|
|
78
88
|
SET_INTERNAL_OPTIONS = 'set_internal_options',
|
|
79
89
|
APPEND_INTERNAL_OPTIONS = 'append_internal_options',
|
|
80
90
|
CHANGE_HAS_MORE_FLAG = 'change_has_more_flag',
|
|
91
|
+
SET_SEARCH = 'set_search',
|
|
92
|
+
CLEAR_SEARCH = 'clear_search',
|
|
81
93
|
}
|
|
82
94
|
const singleSelectReducer = (
|
|
83
95
|
state: any,
|
|
@@ -108,6 +120,18 @@ const singleSelectReducer = (
|
|
|
108
120
|
case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
|
|
109
121
|
return { ...state, ...stateChanges };
|
|
110
122
|
}
|
|
123
|
+
case SingleSelectActionsTypes.SET_SEARCH: {
|
|
124
|
+
return { ...state, search: stateChanges.search, hasMore: true };
|
|
125
|
+
}
|
|
126
|
+
case SingleSelectActionsTypes.CLEAR_SEARCH: {
|
|
127
|
+
return {
|
|
128
|
+
...state,
|
|
129
|
+
search: null,
|
|
130
|
+
offset: 0,
|
|
131
|
+
internalOptions: [],
|
|
132
|
+
internalOptionsMap: {},
|
|
133
|
+
};
|
|
134
|
+
}
|
|
111
135
|
case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
|
|
112
136
|
return {
|
|
113
137
|
...state,
|
|
@@ -153,7 +177,11 @@ export const SingleSelect = ({
|
|
|
153
177
|
onChange,
|
|
154
178
|
error,
|
|
155
179
|
helperText,
|
|
156
|
-
|
|
180
|
+
dbValueProps = {
|
|
181
|
+
valueKey: 'id',
|
|
182
|
+
isObjectId: false,
|
|
183
|
+
},
|
|
184
|
+
dbLabelProps,
|
|
157
185
|
onOpen,
|
|
158
186
|
onClose,
|
|
159
187
|
...restProps
|
|
@@ -171,6 +199,7 @@ export const SingleSelect = ({
|
|
|
171
199
|
limit: 10,
|
|
172
200
|
offset: 0,
|
|
173
201
|
hasMore: true,
|
|
202
|
+
search: null,
|
|
174
203
|
});
|
|
175
204
|
const {
|
|
176
205
|
open,
|
|
@@ -180,6 +209,7 @@ export const SingleSelect = ({
|
|
|
180
209
|
limit,
|
|
181
210
|
offset,
|
|
182
211
|
hasMore,
|
|
212
|
+
search,
|
|
183
213
|
} = state;
|
|
184
214
|
|
|
185
215
|
const internalAxios = useCampxAxios ? campxAxios : axios;
|
|
@@ -199,7 +229,11 @@ export const SingleSelect = ({
|
|
|
199
229
|
limit,
|
|
200
230
|
offset,
|
|
201
231
|
selectedValueData: value,
|
|
202
|
-
|
|
232
|
+
dbValueProps: {
|
|
233
|
+
...dbValueProps,
|
|
234
|
+
...(dbValueProps.isObjectId && { isObjectId: true }),
|
|
235
|
+
},
|
|
236
|
+
dbLabelProps,
|
|
203
237
|
...optionsApiEndpointParams,
|
|
204
238
|
},
|
|
205
239
|
})
|
|
@@ -248,6 +282,11 @@ export const SingleSelect = ({
|
|
|
248
282
|
dispatch({
|
|
249
283
|
actionType: SingleSelectActionsTypes.CLOSE,
|
|
250
284
|
});
|
|
285
|
+
if (optionsApiEndPoint) {
|
|
286
|
+
dispatch({
|
|
287
|
+
actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
|
|
288
|
+
});
|
|
289
|
+
}
|
|
251
290
|
if (onClose) {
|
|
252
291
|
onClose(event, reason);
|
|
253
292
|
}
|
|
@@ -265,12 +304,17 @@ export const SingleSelect = ({
|
|
|
265
304
|
actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
|
|
266
305
|
});
|
|
267
306
|
const newOptions = await internalAxios
|
|
268
|
-
.get(optionsApiEndPoint
|
|
307
|
+
.get(optionsApiEndPoint, {
|
|
269
308
|
params: {
|
|
270
309
|
limit: limit,
|
|
271
310
|
offset: offset + 10,
|
|
311
|
+
search: search,
|
|
272
312
|
selectedValueData: value,
|
|
273
|
-
|
|
313
|
+
dbValueProps: {
|
|
314
|
+
...dbValueProps,
|
|
315
|
+
...(dbValueProps.isObjectId && { isObjectId: true }),
|
|
316
|
+
},
|
|
317
|
+
dbLabelProps,
|
|
274
318
|
...optionsApiEndpointParams,
|
|
275
319
|
},
|
|
276
320
|
})
|
|
@@ -285,13 +329,81 @@ export const SingleSelect = ({
|
|
|
285
329
|
actionType: SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS,
|
|
286
330
|
stateChanges: {
|
|
287
331
|
newOptions: newOptions,
|
|
288
|
-
|
|
289
332
|
internalOptionsMap: generateOptionsMap(newOptions),
|
|
290
333
|
},
|
|
291
334
|
});
|
|
292
335
|
}
|
|
293
336
|
};
|
|
294
337
|
|
|
338
|
+
const searchDb = async (searchValue: string) => {
|
|
339
|
+
dispatch({
|
|
340
|
+
actionType: SingleSelectActionsTypes.SET_SEARCH,
|
|
341
|
+
stateChanges: {
|
|
342
|
+
search: searchValue,
|
|
343
|
+
},
|
|
344
|
+
});
|
|
345
|
+
if (!searchValue || searchValue.trim() === '') {
|
|
346
|
+
dispatch({
|
|
347
|
+
actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
|
|
348
|
+
});
|
|
349
|
+
}
|
|
350
|
+
if (optionsApiEndPoint) {
|
|
351
|
+
try {
|
|
352
|
+
dispatch({
|
|
353
|
+
actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
|
|
354
|
+
});
|
|
355
|
+
const options = await internalAxios
|
|
356
|
+
.get(optionsApiEndPoint, {
|
|
357
|
+
params: {
|
|
358
|
+
limit,
|
|
359
|
+
offset: 0,
|
|
360
|
+
selectedValueData: value,
|
|
361
|
+
dbValueProps: {
|
|
362
|
+
...dbValueProps,
|
|
363
|
+
...(dbValueProps.isObjectId && { isObjectId: true }),
|
|
364
|
+
},
|
|
365
|
+
dbLabelProps,
|
|
366
|
+
search: searchValue,
|
|
367
|
+
...optionsApiEndpointParams,
|
|
368
|
+
},
|
|
369
|
+
})
|
|
370
|
+
.then((res) => res.data);
|
|
371
|
+
await sleep(700);
|
|
372
|
+
|
|
373
|
+
dispatch({
|
|
374
|
+
actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
|
|
375
|
+
stateChanges: {
|
|
376
|
+
internalOptions: options,
|
|
377
|
+
internalOptionsMap: generateOptionsMap(options),
|
|
378
|
+
},
|
|
379
|
+
});
|
|
380
|
+
} catch (e) {
|
|
381
|
+
dispatch({
|
|
382
|
+
actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
|
|
383
|
+
stateChanges: {
|
|
384
|
+
error: e,
|
|
385
|
+
},
|
|
386
|
+
});
|
|
387
|
+
dispatch({
|
|
388
|
+
actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
|
|
389
|
+
});
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
};
|
|
393
|
+
|
|
394
|
+
const debouncedSendRequest = useMemo(() => {
|
|
395
|
+
return debounce((searchValue) => {
|
|
396
|
+
searchDb(searchValue);
|
|
397
|
+
}, 300);
|
|
398
|
+
}, [searchDb]);
|
|
399
|
+
|
|
400
|
+
const handleSearch = async (
|
|
401
|
+
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
|
402
|
+
) => {
|
|
403
|
+
const searchValue = e.target.value;
|
|
404
|
+
debouncedSendRequest(searchValue);
|
|
405
|
+
};
|
|
406
|
+
|
|
295
407
|
const loadSelectedOptions = async () => {
|
|
296
408
|
dispatch({
|
|
297
409
|
actionType: SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START,
|
|
@@ -302,7 +414,11 @@ export const SingleSelect = ({
|
|
|
302
414
|
limit,
|
|
303
415
|
offset,
|
|
304
416
|
selectedValueData: value,
|
|
305
|
-
|
|
417
|
+
dbValueProps: {
|
|
418
|
+
...dbValueProps,
|
|
419
|
+
...(dbValueProps.isObjectId && { isObjectId: true }),
|
|
420
|
+
},
|
|
421
|
+
dbLabelProps,
|
|
306
422
|
filterBySelectedValues: true,
|
|
307
423
|
},
|
|
308
424
|
});
|
|
@@ -354,11 +470,19 @@ export const SingleSelect = ({
|
|
|
354
470
|
}}
|
|
355
471
|
open={open}
|
|
356
472
|
autoFocus={true}
|
|
473
|
+
filterOptions={(options, state) => {
|
|
474
|
+
if (optionsApiEndPoint) {
|
|
475
|
+
return options;
|
|
476
|
+
}
|
|
477
|
+
return options.filter((option) =>
|
|
478
|
+
option.label.toLowerCase().includes(state.inputValue.toLowerCase()),
|
|
479
|
+
);
|
|
480
|
+
}}
|
|
357
481
|
value={state.internalOptionsMap[value]}
|
|
358
482
|
PaperComponent={CustomPaper}
|
|
359
483
|
renderOption={(props, option: any) => {
|
|
360
484
|
return (
|
|
361
|
-
<Box component="li" {...props}>
|
|
485
|
+
<Box component="li" {...props} key={option.value}>
|
|
362
486
|
<OptionContainer>
|
|
363
487
|
<Typography variant="label1">{option.label}</Typography>
|
|
364
488
|
<Typography variant="caption">{option?.subLabel}</Typography>
|
|
@@ -374,7 +498,8 @@ export const SingleSelect = ({
|
|
|
374
498
|
...restProps.slotProps,
|
|
375
499
|
paper: {
|
|
376
500
|
...restProps.slotProps?.paper,
|
|
377
|
-
|
|
501
|
+
loadingOptions: loadingInternalOptions,
|
|
502
|
+
isSearch: !!state.search,
|
|
378
503
|
},
|
|
379
504
|
}}
|
|
380
505
|
onOpen={handleOpen}
|
|
@@ -386,6 +511,7 @@ export const SingleSelect = ({
|
|
|
386
511
|
label={label}
|
|
387
512
|
required={required}
|
|
388
513
|
name={name}
|
|
514
|
+
onChange={handleSearch}
|
|
389
515
|
error={error}
|
|
390
516
|
helperText={helperText}
|
|
391
517
|
/>
|
|
@@ -2,11 +2,19 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
|
|
|
2
2
|
import { Spinner } from '../../Feedback/Spinner/Spinner';
|
|
3
3
|
import { FetchingOptionsLoaderContainer } from '../styles';
|
|
4
4
|
|
|
5
|
-
export const
|
|
5
|
+
export const OptionsLoader = ({
|
|
6
|
+
loading,
|
|
7
|
+
isSearch,
|
|
8
|
+
}: {
|
|
9
|
+
loading: boolean;
|
|
10
|
+
isSearch: boolean;
|
|
11
|
+
}) => {
|
|
6
12
|
return loading ? (
|
|
7
13
|
<FetchingOptionsLoaderContainer direction="row" alignItems="center">
|
|
8
14
|
<Spinner />
|
|
9
|
-
<Typography variant="caption">
|
|
15
|
+
<Typography variant="caption">
|
|
16
|
+
{isSearch ? 'Searching' : 'Loading Options'}
|
|
17
|
+
</Typography>
|
|
10
18
|
</FetchingOptionsLoaderContainer>
|
|
11
19
|
) : (
|
|
12
20
|
<></>
|
|
@@ -5,7 +5,7 @@ export const OptionContainer = styled(Box)(({ theme }) => ({
|
|
|
5
5
|
flexDirection: 'column',
|
|
6
6
|
borderBottom: `1px solid ${theme.palette.secondary.main}`,
|
|
7
7
|
width: '100%',
|
|
8
|
-
padding: '
|
|
8
|
+
padding: '4px 0px',
|
|
9
9
|
}));
|
|
10
10
|
|
|
11
11
|
export const FetchingOptionsLoaderContainer = styled(Stack)(({ theme }) => ({
|
|
@@ -302,7 +302,15 @@ export const getCommonTheme = (mode: Theme) => {
|
|
|
302
302
|
'& label': {
|
|
303
303
|
display: 'none',
|
|
304
304
|
},
|
|
305
|
+
input: {
|
|
306
|
+
padding: '9px',
|
|
307
|
+
},
|
|
308
|
+
|
|
309
|
+
fieldset: {
|
|
310
|
+
top: '0px',
|
|
311
|
+
},
|
|
305
312
|
'& legend': {
|
|
313
|
+
height: '0px',
|
|
306
314
|
'& span': {
|
|
307
315
|
display: 'none',
|
|
308
316
|
},
|