11
2- import React , { useRef , useState , useCallback , useEffect } from "react" ;
3-
42import React , { useRef , useState , useCallback , useEffect } from "react" ;
53import { Responsive , WidthProvider } from "react-grid-layout" ;
64import "react-grid-layout/css/styles.css" ;
@@ -13,9 +11,19 @@ import {
1311 Typography ,
1412 Box ,
1513 Grid ,
16- IconButton } from '@mui/material' ;
14+ // Select,
15+ // MenuItem,
16+ IconButton ,
17+ // Tooltip,
18+ // Pagination,
19+ // Toolbar
20+ } from '@mui/material' ;
1721import EditIcon from '@mui/icons-material/Edit' ;
1822import 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";
1927const ResponsiveGridLayout = WidthProvider ( Responsive ) ;
2028// Conversion of DefaultGridTest class component
2129
@@ -54,6 +62,198 @@ export const CustomGridLayoutDynamicV3 = ({
5462 return true ;
5563 } ) ;
5664
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+ // );
57257
58258// Dynamic Renderer using chatgpt
59259 return (
@@ -647,8 +847,6 @@ export const CustomGridLayoutDynamicV2 = ({
647847 } ;
648848 console . log ( 'Filtered Columns' , JSON . stringify ( filteredColumns , null , 2 ) ) ;
649849 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 ) ) ;
652850 const totalHeight = calculateTotalHeight ( layoutItems , 30 ) ; // Assuming rowHeight is 30
653851
654852 return (
@@ -831,7 +1029,3 @@ function useStyles() {
8311029 throw new Error ( "Function not implemented." ) ;
8321030}
8331031
834- function useStyles ( ) {
835- throw new Error ( "Function not implemented." ) ;
836- }
837-
0 commit comments