1
1
2
- import React , { useRef , useState , useCallback , useEffect } from "react" ;
3
-
4
2
import React , { useRef , useState , useCallback , useEffect } from "react" ;
5
3
import { Responsive , WidthProvider } from "react-grid-layout" ;
6
4
import "react-grid-layout/css/styles.css" ;
@@ -13,9 +11,19 @@ import {
13
11
Typography ,
14
12
Box ,
15
13
Grid ,
16
- IconButton } from '@mui/material' ;
14
+ // Select,
15
+ // MenuItem,
16
+ IconButton ,
17
+ // Tooltip,
18
+ // Pagination,
19
+ // Toolbar
20
+ } from '@mui/material' ;
17
21
import EditIcon from '@mui/icons-material/Edit' ;
18
22
import DeleteIcon from '@mui/icons-material/Delete' ;
23
+ // import VisibilityIcon from '@mui/icons-material/Visibility';
24
+ // import { makeStyles } from '@mui/styles';
25
+ // import { ChevronRight, ChevronRightSharp, Visibility } from "@mui/icons-material";
26
+ // import { config } from "process";
19
27
const ResponsiveGridLayout = WidthProvider ( Responsive ) ;
20
28
// Conversion of DefaultGridTest class component
21
29
@@ -54,6 +62,198 @@ export const CustomGridLayoutDynamicV3 = ({
54
62
return true ;
55
63
} ) ;
56
64
65
+ // return (
66
+ // <Card
67
+ // variant="outlined"
68
+ // sx={{
69
+ // height: totalHeight,
70
+ // display: 'flex',
71
+ // flexDirection: 'column'
72
+ // }}
73
+ // >
74
+ // <CardHeader
75
+ // title={rowData.checklist_name || 'Item'}
76
+ // subheader={rowData.createdAt ? `Created: ${rowData.createdAt}` : ''}
77
+ // sx={{
78
+ // backgroundColor: '#f5f5f5',
79
+ // borderBottom: '1px solid #ccc'
80
+ // }}
81
+ // />
82
+
83
+ // <CardContent sx={{ flexGrow: 1, overflowY: 'auto' }}>
84
+ // <Grid container spacing={2}>
85
+ // {visibleColumns.map((column, index) => {
86
+ // // Render the cell content
87
+ // const cellContent = column.renderCell
88
+ // ? column.renderCell({ row: rowData, field: column.field })
89
+ // : rowData[column.field];
90
+
91
+ // return (
92
+ // <Grid item xs={12} sm={6} md={4} key={index}>
93
+ // <Box display="flex" flexDirection="column">
94
+ // <Typography variant="body2" fontWeight="bold">
95
+ // {column.headerName || column.field}
96
+ // </Typography>
97
+ // <Typography variant="body2">
98
+ // {cellContent}
99
+ // </Typography>
100
+ // </Box>
101
+ // </Grid>
102
+ // );
103
+ // }) }
104
+ // </Grid>
105
+ // </CardContent>
106
+ // </Card>
107
+ // );
108
+
109
+
110
+
111
+
112
+ // return (
113
+ // <Card
114
+ // variant="outlined"
115
+ // sx={{
116
+ // height: totalHeight,
117
+ // display: 'flex',
118
+ // flexDirection: 'column'
119
+ // }}
120
+ // >
121
+ // <CardContent sx={{ flexGrow: 1, overflowY: 'auto', p: 2 }}>
122
+
123
+ // {(() => {
124
+ // // Find the 'checklist_name' column for the avatar
125
+ // const checklistNameCol = visibleColumns.find(col => col.field === 'checklist_name');
126
+ // const createdAtCol = visibleColumns.find(col => col.field === 'createdAt');
127
+
128
+ // // We assume the next columns after 'checklist_name' can be used for title/snippet
129
+ // const otherCols = visibleColumns.filter(col => col.field !== 'checklist_name' && col.field !== 'createdAt');
130
+
131
+ // // The primary text column could be the first column after checklist_name
132
+ // const primaryCol = otherCols[0];
133
+ // // The snippet column could be the second column after checklist_name
134
+ // const snippetCol = otherCols[1];
135
+
136
+ // // Render cell for checklist_name
137
+ // let avatarContent = checklistNameCol
138
+ // ? (checklistNameCol.renderCell
139
+ // ? checklistNameCol.renderCell({ row: rowData, field: checklistNameCol.field })
140
+ // : rowData[checklistNameCol.field])
141
+ // : null;
142
+
143
+ // // If avatarContent is a string, assume it's a URL and render an img
144
+ // const isAvatarUrl = typeof avatarContent === 'string';
145
+
146
+ // const primaryContent = primaryCol
147
+ // ? (primaryCol.renderCell
148
+ // ? primaryCol.renderCell({ row: rowData, field: primaryCol.field })
149
+ // : rowData[primaryCol.field])
150
+ // : null;
151
+
152
+ // const snippetContent = snippetCol
153
+ // ? (snippetCol.renderCell
154
+ // ? snippetCol.renderCell({ row: rowData, field: snippetCol.field })
155
+ // : rowData[snippetCol.field])
156
+ // : null;
157
+
158
+ // const timeContent = createdAtCol
159
+ // ? (createdAtCol.renderCell
160
+ // ? createdAtCol.renderCell({ row: rowData, field: createdAtCol.field })
161
+ // : rowData[createdAtCol.field])
162
+ // : null;
163
+
164
+ // return (
165
+ // <Box display="flex" alignItems="center" justifyContent="space-between">
166
+ // {/* Left side - Avatar and text */}
167
+ // <Box display="flex" alignItems="center">
168
+ // <Box
169
+ // sx={{
170
+ // width: 40,
171
+ // height: 40,
172
+ // borderRadius: '50%',
173
+ // backgroundColor: '#ccc',
174
+ // mr: 2,
175
+ // overflow: 'hidden',
176
+ // display: 'flex',
177
+ // alignItems: 'center',
178
+ // justifyContent: 'center'
179
+ // }}
180
+ // >
181
+ // {isAvatarUrl ? (
182
+ // <img
183
+ // src={avatarContent}
184
+ // alt="Avatar"
185
+ // style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
186
+ // />
187
+ // ) : (
188
+ // // If not a string URL, just render the content directly (e.g., an icon or element)
189
+ // <Box>{avatarContent}</Box>
190
+ // )}
191
+ // </Box>
192
+
193
+ // <Box display="flex" flexDirection="column">
194
+ // {/* Primary text (e.g., name) */}
195
+ // {primaryContent && (
196
+ // <Typography variant="body1" fontWeight="bold" sx={{ lineHeight: 1.2 }}>
197
+ // {primaryContent}
198
+ // </Typography>
199
+ // )}
200
+ // {/* Snippet text */}
201
+ // {snippetContent && (
202
+ // <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.2 }}>
203
+ // {snippetContent}
204
+ // </Typography>
205
+ // )}
206
+ // </Box>
207
+ // </Box>
208
+
209
+ // {/* Right side - Time */}
210
+ // {timeContent && (
211
+ // <Typography variant="caption" color="text.secondary" sx={{ whiteSpace: 'nowrap', ml: 2 }}>
212
+ // {timeContent}
213
+ // </Typography>
214
+ // )}
215
+ // </Box>
216
+ // );
217
+ // })() }
218
+ // </CardContent>
219
+ // </Card>
220
+ // );
221
+
222
+ //Working version
223
+
224
+ // return (
225
+ // <Card
226
+ // variant="outlined"
227
+ // sx={{
228
+ // height: totalHeight,
229
+ // display: 'flex',
230
+ // flexDirection: 'column'
231
+ // }}
232
+ // >
233
+ // <CardContent sx={{ flexGrow: 1, overflowY: 'auto' }}>
234
+ // <Grid container spacing={2}>
235
+ // {visibleColumns.map((column, index) => {
236
+ // const cellContent = column.renderCell
237
+ // ? column.renderCell({ row: rowData, field: column.field })
238
+ // : rowData[column.field];
239
+
240
+ // return (
241
+ // <Grid item xs={12} sm={6} md={4} key={index}>
242
+ // <Box display="flex" flexDirection="column">
243
+ // <Typography variant="body2" fontWeight="bold">
244
+ // {column.headerName || column.field}
245
+ // </Typography>
246
+ // <Typography variant="body2">
247
+ // {cellContent}
248
+ // </Typography>
249
+ // </Box>
250
+ // </Grid>
251
+ // );
252
+ // }) }
253
+ // </Grid>
254
+ // </CardContent>
255
+ // </Card>
256
+ // );
57
257
58
258
// Dynamic Renderer using chatgpt
59
259
return (
@@ -647,8 +847,6 @@ export const CustomGridLayoutDynamicV2 = ({
647
847
} ;
648
848
console . log ( 'Filtered Columns' , JSON . stringify ( filteredColumns , null , 2 ) ) ;
649
849
console . log ( 'config' , JSON . stringify ( filteredColumns , null , 2 ) ) ;
650
- console . log ( 'Filtered Columns' , JSON . stringify ( filteredColumns , null , 2 ) ) ;
651
- console . log ( 'config' , JSON . stringify ( filteredColumns , null , 2 ) ) ;
652
850
const totalHeight = calculateTotalHeight ( layoutItems , 30 ) ; // Assuming rowHeight is 30
653
851
654
852
return (
@@ -831,7 +1029,3 @@ function useStyles() {
831
1029
throw new Error ( "Function not implemented." ) ;
832
1030
}
833
1031
834
- function useStyles ( ) {
835
- throw new Error ( "Function not implemented." ) ;
836
- }
837
-
0 commit comments