rez-table-listing-mui 1.2.8 → 1.2.10

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.
Files changed (11) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/common/confirm-modal/index.tsx +5 -1
  7. package/src/components/filter/components/attributes-filter.tsx +7 -20
  8. package/src/components/filter/components/forms/index.tsx +5 -1
  9. package/src/components/topbar/index.tsx +133 -22
  10. package/src/components/viewmore/index.tsx +262 -151
  11. package/src/libs/utils/common.ts +3 -3
package/src/components/viewmore/index.tsx CHANGED
@@ -12,14 +12,201 @@ import { CloseIcon, ViewMoreIcon } from "../../assets/svg";
12
12
  import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
13
13
  import { CraftTableOptionsProps } from "../../types/table-options";
14
14
 
15
- interface ViewMorePopoverProps {
15
+ // interface ViewMorePopoverProps {
16
+ // compactMode: boolean;
17
+ // onCompactToggle: (value: string) => void;
18
+ // isFullscreen: boolean;
19
+ // onFullscreenToggle: () => void;
20
+ // groupBy: string;
21
+ // onGroupByChange: (value: string) => void;
22
+ // tableStates: CraftTableOptionsProps;
23
+ // }
24
+
25
+ // const ViewMore = ({
26
+ // compactMode,
27
+ // onCompactToggle,
28
+ // isFullscreen,
29
+ // onFullscreenToggle,
30
+ // // groupBy,
31
+ // // onGroupByChange,
32
+ // tableStates,
33
+ // }: ViewMorePopoverProps) => {
34
+ // const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
35
+
36
+ // const open = Boolean(anchorEl);
37
+ // const { container: fullscreenContainer } = useFullscreenPopoverContainer();
38
+
39
+ // const handleClick = (event: React.MouseEvent<HTMLElement>) => {
40
+ // setAnchorEl(event.currentTarget);
41
+ // };
42
+
43
+ // const handleClose = () => {
44
+ // setAnchorEl(null);
45
+ // };
46
+
47
+ // const { wrapColumns, setWrapColumns } = tableStates;
48
+
49
+ // const onWrapCellToggle = () => {
50
+ // setWrapColumns((prev: Record<string, boolean>) => ({
51
+ // all_wrap: !prev["all_wrap"],
52
+ // }));
53
+ // };
54
+
55
+ // return (
56
+ // <>
57
+ // <div onClick={handleClick}>
58
+ // <ViewMoreIcon />
59
+ // </div>
60
+
61
+ // <Popover
62
+ // open={open}
63
+ // anchorEl={anchorEl}
64
+ // onClose={handleClose}
65
+ // container={fullscreenContainer}
66
+ // anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
67
+ // transformOrigin={{ vertical: "top", horizontal: "left" }}
68
+ // PaperProps={{
69
+ // sx: {
70
+ // mt: 2,
71
+ // padding: 3,
72
+ // width: 380,
73
+ // borderRadius: 1,
74
+ // boxShadow: 4,
75
+ // },
76
+ // }}
77
+ // >
78
+ // <Box
79
+ // display="flex"
80
+ // justifyContent="space-between"
81
+ // alignItems="center"
82
+ // px={2}
83
+ // py={2}
84
+ // sx={{
85
+ // backgroundColor: "#F9FAFB",
86
+ // // borderBottom: "1px solid #E0E0E0",
87
+ // // borderTopLeftRadius: 4,
88
+ // // borderTopRightRadius: 4,
89
+ // margin: "-24px -24px 24px -24px",
90
+ // }}
91
+ // >
92
+ // <Typography fontSize="18px" fontWeight={400} color="#0C2033">
93
+ // View
94
+ // </Typography>
95
+ // <IconButton size="small" onClick={handleClose}>
96
+ // <CloseIcon />
97
+ // </IconButton>
98
+ // </Box>
99
+
100
+ // {/* Wrap Cell */}
101
+ // <Box
102
+ // display="flex"
103
+ // justifyContent="space-between"
104
+ // alignItems="center"
105
+ // mb={2}
106
+ // >
107
+ // <Typography fontSize="14px" fontWeight={400} color="#000000DE">
108
+ // Wrap Cell
109
+ // </Typography>
110
+ // <MUISwitch
111
+ // checked={wrapColumns?.all_wrap || false}
112
+ // onChange={onWrapCellToggle}
113
+ // />
114
+ // </Box>
115
+
116
+ // {/* List View */}
117
+ // <Box
118
+ // display="flex"
119
+ // justifyContent="space-between"
120
+ // alignItems="center"
121
+ // mb={2}
122
+ // >
123
+ // <Typography fontSize="14px" fontWeight={400} color="#000000DE">
124
+ // List View
125
+ // </Typography>
126
+ // <Select
127
+ // size="small"
128
+ // value={compactMode ? "Compact" : "Comfy"}
129
+ // onChange={(e) => onCompactToggle(e.target.value)}
130
+ // sx={{
131
+ // minWidth: 120,
132
+ // fontWeight: 400,
133
+ // color: "#000",
134
+ // fontSize: "13px",
135
+ // }}
136
+ // MenuProps={{
137
+ // container: fullscreenContainer,
138
+ // disablePortal: false,
139
+ // PaperProps: {
140
+ // style: {
141
+ // zIndex: 1500,
142
+ // },
143
+ // },
144
+ // }}
145
+ // >
146
+ // <MenuItem value="Comfy">Comfy</MenuItem>
147
+ // <MenuItem value="Compact">Compact</MenuItem>
148
+ // </Select>
149
+ // </Box>
150
+
151
+ // {/* Group By */}
152
+ // {/* <Box
153
+ // display="flex"
154
+ // justifyContent="space-between"
155
+ // alignItems="center"
156
+ // mb={2}
157
+ // >
158
+ // <Typography fontSize="14px" fontWeight={400} color="#000000DE">
159
+ // Group By
160
+ // </Typography>
161
+ // <Select
162
+ // size="small"
163
+ // value={groupBy}
164
+ // onChange={(e) => onGroupByChange(e.target.value)}
165
+ // sx={{
166
+ // minWidth: 120,
167
+ // fontWeight: 400,
168
+ // color: "#000",
169
+ // fontSize: "13px",
170
+ // }}
171
+ // MenuProps={{
172
+ // container: fullscreenContainer,
173
+ // disablePortal: false,
174
+ // PaperProps: {
175
+ // style: {
176
+ // zIndex: 1500,
177
+ // },
178
+ // },
179
+ // }}
180
+ // >
181
+ // <MenuItem value="None">None</MenuItem>
182
+ // <MenuItem value="Status">Status</MenuItem>
183
+ // <MenuItem value="Owner">Owner</MenuItem>
184
+ // </Select>
185
+ // </Box> */}
186
+
187
+ // {/* Fullscreen */}
188
+ // <Box display="flex" justifyContent="space-between" alignItems="center">
189
+ // <Typography fontSize="14px" fontWeight={400} color="#000000DE">
190
+ // Fullscreen
191
+ // </Typography>
192
+ // <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
193
+ // </Box>
194
+ // </Popover>
195
+ // </>
196
+ // );
197
+ // };
198
+
199
+ // export default ViewMore;
200
+
201
+ interface ViewMoreProps {
16
202
  compactMode: boolean;
17
203
  onCompactToggle: (value: string) => void;
18
204
  isFullscreen: boolean;
19
205
  onFullscreenToggle: () => void;
20
- groupBy: string;
21
- onGroupByChange: (value: string) => void;
206
+ groupBy?: string;
207
+ onGroupByChange?: (value: string) => void;
22
208
  tableStates: CraftTableOptionsProps;
209
+ onClose?: () => void;
23
210
  }
24
211
 
25
212
  const ViewMore = ({
@@ -30,20 +217,9 @@ const ViewMore = ({
30
217
  // groupBy,
31
218
  // onGroupByChange,
32
219
  tableStates,
33
- }: ViewMorePopoverProps) => {
34
- const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
35
-
36
- const open = Boolean(anchorEl);
220
+ onClose,
221
+ }: ViewMoreProps) => {
37
222
  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
38
-
39
- const handleClick = (event: React.MouseEvent<HTMLElement>) => {
40
- setAnchorEl(event.currentTarget);
41
- };
42
-
43
- const handleClose = () => {
44
- setAnchorEl(null);
45
- };
46
-
47
223
  const { wrapColumns, setWrapColumns } = tableStates;
48
224
 
49
225
  const onWrapCellToggle = () => {
@@ -53,146 +229,81 @@ const ViewMore = ({
53
229
  };
54
230
 
55
231
  return (
56
- <>
57
- <div onClick={handleClick}>
58
- <ViewMoreIcon />
59
- </div>
60
-
61
- <Popover
62
- open={open}
63
- anchorEl={anchorEl}
64
- onClose={handleClose}
65
- container={fullscreenContainer}
66
- anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
67
- transformOrigin={{ vertical: "top", horizontal: "left" }}
68
- PaperProps={{
69
- sx: {
70
- mt: 2,
71
- padding: 3,
72
- width: 380,
73
- borderRadius: 1,
74
- boxShadow: 4,
75
- },
76
- }}
232
+ <Box sx={{ p: 3, width: 380 }}>
233
+ {/* Header */}
234
+ <Box
235
+ display="flex"
236
+ justifyContent="space-between"
237
+ alignItems="center"
238
+ mb={3}
239
+ >
240
+ <Typography fontSize="18px" fontWeight={400} color="#0C2033">
241
+ View
242
+ </Typography>
243
+ <IconButton size="small" onClick={onClose}>
244
+ <CloseIcon />
245
+ </IconButton>
246
+ </Box>
247
+
248
+ {/* Wrap Cell */}
249
+ <Box
250
+ display="flex"
251
+ justifyContent="space-between"
252
+ alignItems="center"
253
+ mb={2}
77
254
  >
78
- <Box
79
- display="flex"
80
- justifyContent="space-between"
81
- alignItems="center"
82
- px={2}
83
- py={2}
255
+ <Typography fontSize="14px" fontWeight={400} color="#000000DE">
256
+ Wrap Cell
257
+ </Typography>
258
+ <MUISwitch
259
+ checked={wrapColumns?.all_wrap || false}
260
+ onChange={onWrapCellToggle}
261
+ />
262
+ </Box>
263
+
264
+ {/* List View */}
265
+ <Box
266
+ display="flex"
267
+ justifyContent="space-between"
268
+ alignItems="center"
269
+ mb={2}
270
+ >
271
+ <Typography fontSize="14px" fontWeight={400} color="#000000DE">
272
+ List View
273
+ </Typography>
274
+ <Select
275
+ size="small"
276
+ value={compactMode ? "Compact" : "Comfy"}
277
+ onChange={(e) => onCompactToggle(e.target.value)}
84
278
  sx={{
85
- backgroundColor: "#F9FAFB",
86
- // borderBottom: "1px solid #E0E0E0",
87
- // borderTopLeftRadius: 4,
88
- // borderTopRightRadius: 4,
89
- margin: "-24px -24px 24px -24px",
279
+ minWidth: 120,
280
+ fontWeight: 400,
281
+ color: "#000",
282
+ fontSize: "13px",
90
283
  }}
91
- >
92
- <Typography fontSize="18px" fontWeight={400} color="#0C2033">
93
- View
94
- </Typography>
95
- <IconButton size="small" onClick={handleClose}>
96
- <CloseIcon />
97
- </IconButton>
98
- </Box>
99
-
100
- {/* Wrap Cell */}
101
- <Box
102
- display="flex"
103
- justifyContent="space-between"
104
- alignItems="center"
105
- mb={2}
106
- >
107
- <Typography fontSize="14px" fontWeight={400} color="#000000DE">
108
- Wrap Cell
109
- </Typography>
110
- <MUISwitch
111
- checked={wrapColumns?.all_wrap || false}
112
- onChange={onWrapCellToggle}
113
- />
114
- </Box>
115
-
116
- {/* List View */}
117
- <Box
118
- display="flex"
119
- justifyContent="space-between"
120
- alignItems="center"
121
- mb={2}
122
- >
123
- <Typography fontSize="14px" fontWeight={400} color="#000000DE">
124
- List View
125
- </Typography>
126
- <Select
127
- size="small"
128
- value={compactMode ? "Compact" : "Comfy"}
129
- onChange={(e) => onCompactToggle(e.target.value)}
130
- sx={{
131
- minWidth: 120,
132
- fontWeight: 400,
133
- color: "#000",
134
- fontSize: "13px",
135
- }}
136
- MenuProps={{
137
- container: fullscreenContainer,
138
- disablePortal: false,
139
- PaperProps: {
140
- style: {
141
- zIndex: 1500,
142
- },
284
+ MenuProps={{
285
+ container: fullscreenContainer,
286
+ disablePortal: false,
287
+ PaperProps: {
288
+ style: {
289
+ zIndex: 1500,
143
290
  },
144
- }}
145
- >
146
- <MenuItem value="Comfy">Comfy</MenuItem>
147
- <MenuItem value="Compact">Compact</MenuItem>
148
- </Select>
149
- </Box>
150
-
151
- {/* Group By */}
152
- {/* <Box
153
- display="flex"
154
- justifyContent="space-between"
155
- alignItems="center"
156
- mb={2}
291
+ },
292
+ }}
157
293
  >
158
- <Typography fontSize="14px" fontWeight={400} color="#000000DE">
159
- Group By
160
- </Typography>
161
- <Select
162
- size="small"
163
- value={groupBy}
164
- onChange={(e) => onGroupByChange(e.target.value)}
165
- sx={{
166
- minWidth: 120,
167
- fontWeight: 400,
168
- color: "#000",
169
- fontSize: "13px",
170
- }}
171
- MenuProps={{
172
- container: fullscreenContainer,
173
- disablePortal: false,
174
- PaperProps: {
175
- style: {
176
- zIndex: 1500,
177
- },
178
- },
179
- }}
180
- >
181
- <MenuItem value="None">None</MenuItem>
182
- <MenuItem value="Status">Status</MenuItem>
183
- <MenuItem value="Owner">Owner</MenuItem>
184
- </Select>
185
- </Box> */}
186
-
187
- {/* Fullscreen */}
188
- <Box display="flex" justifyContent="space-between" alignItems="center">
189
- <Typography fontSize="14px" fontWeight={400} color="#000000DE">
190
- Fullscreen
191
- </Typography>
192
- <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
193
- </Box>
194
- </Popover>
195
- </>
294
+ <MenuItem value="Comfy">Comfy</MenuItem>
295
+ <MenuItem value="Compact">Compact</MenuItem>
296
+ </Select>
297
+ </Box>
298
+
299
+ {/* Fullscreen */}
300
+ <Box display="flex" justifyContent="space-between" alignItems="center">
301
+ <Typography fontSize="14px" fontWeight={400} color="#000000DE">
302
+ Fullscreen
303
+ </Typography>
304
+ <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
305
+ </Box>
306
+ </Box>
196
307
  );
197
308
  };
198
309
 
package/src/libs/utils/common.ts CHANGED
@@ -77,8 +77,8 @@ export function customDebounce<T extends (...args: any[]) => any>(
77
77
  }
78
78
 
79
79
  //ENTITY TYPE
80
- const ENVIRONMENT = "adm_dev";
81
- export const ENTITY_TYPE = "ROL";
80
+ const ENVIRONMENT = "uat";
81
+ export const ENTITY_TYPE = "NTM";
82
82
 
83
83
  const environments = {
84
84
  adm_dev: "http://localhost:4010/api",
@@ -86,7 +86,7 @@ const environments = {
86
86
  uat: "http://13.200.182.92:4010/api",
87
87
  };
88
88
 
89
- const getBaseUrl = () => environments[ENVIRONMENT]
89
+ const getBaseUrl = () => environments[ENVIRONMENT];
90
90
 
91
91
  // uat http://13.200.182.92:4010/api
92
92
  // local http://localhost:4010/api