Skip to content

Commit c142156

Browse files
tculigtculig
committed
Update preview-page.tsx
1 parent 6ae82a4 commit c142156

File tree

1 file changed

+162
-153
lines changed

1 file changed

+162
-153
lines changed

‎src/views/data-browsing-app/preview-page.tsx‎

Lines changed: 162 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useEffect, useState, useRef, useMemo } from 'react';
22
import {
3-
LeafyGreenProvider,
43
Icon,
54
IconButton,
65
Select,
@@ -118,7 +117,9 @@ const PreviewApp: React.FC = () => {
118117
const [viewType, setViewType] = useState<ViewType>('tree');
119118
const [settingsMenuOpen, setSettingsMenuOpen] = useState(false);
120119
const [isLoading, setIsLoading] = useState(true);
121-
const [totalCountInCollection, setTotalCountInCollection] = useState<number | null>(null);
120+
const [totalCountInCollection, setTotalCountInCollection] = useState<
121+
number | null
122+
>(null);
122123
const darkMode = useDarkMode();
123124

124125
const totalDocuments = documents.length;
@@ -139,7 +140,8 @@ const PreviewApp: React.FC = () => {
139140
}, [documents, currentPage, itemsPerPage]);
140141

141142
// Calculate pagination info
142-
const startItem = totalDocuments === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
143+
const startItem =
144+
totalDocuments === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
143145
const endItem = Math.min(currentPage * itemsPerPage, totalDocuments);
144146

145147
// Track when loading started for minimum loading duration
@@ -226,177 +228,184 @@ const PreviewApp: React.FC = () => {
226228
};
227229

228230
return (
229-
<div
230-
style={{
231-
backgroundColor: darkMode ? '#1E1E1E' : '#FFFFFF',
232-
minHeight: '100vh',
233-
color: darkMode ? '#CCCCCC' : '#000000',
234-
}}
235-
>
236-
{/* Toolbar */}
237-
<div className={toolbarStyles}>
238-
{/* Left side - Insert Document */}
239-
<div className={toolbarGroupStyles}>
240-
<IconButton
241-
aria-label="Insert Document"
242-
title="Insert Document"
243-
onClick={(): void => {
244-
// TODO: Implement insert document functionality
245-
}}
246-
>
247-
<Icon glyph="Plus" />
248-
</IconButton>
249-
<span className={toolbarLabelStyles}>Insert Document</span>
250-
</div>
251-
252-
{/* Right side - Actions */}
253-
<div className={toolbarGroupWideStyles}>
254-
{/* Refresh - single button with icon and text */}
255-
<button
256-
className={refreshButtonStyles}
257-
onClick={handleRefresh}
258-
title="Refresh"
259-
disabled={isLoading}
260-
style={{ opacity: isLoading ? 0.5 : 1, cursor: isLoading ? 'not-allowed' : 'pointer' }}
261-
>
262-
<Icon glyph="Refresh" size="small" />
263-
<span>Refresh</span>
264-
</button>
265-
266-
{/* Sort */}
267-
<div className={toolbarGroupStyles}>
268-
<span className={toolbarLabelStyles}>Sort</span>
269-
<div className={selectWrapperStyles}>
270-
<Select
271-
aria-label="Sort order"
272-
value={sortOption}
273-
onChange={handleSortChange}
274-
size="xsmall"
275-
allowDeselect={false}
276-
dropdownWidthBasis="option"
277-
>
278-
<Option value="default">Default</Option>
279-
<Option value="asc">Ascending</Option>
280-
<Option value="desc">Descending</Option>
281-
</Select>
282-
</div>
283-
</div>
231+
<div
232+
style={{
233+
backgroundColor: darkMode ? '#1E1E1E' : '#FFFFFF',
234+
minHeight: '100vh',
235+
color: darkMode ? '#CCCCCC' : '#000000',
236+
}}
237+
>
238+
{/* Toolbar */}
239+
<div className={toolbarStyles}>
240+
{/* Left side - Insert Document */}
241+
<div className={toolbarGroupStyles}>
242+
<IconButton
243+
aria-label="Insert Document"
244+
title="Insert Document"
245+
onClick={(): void => {
246+
// TODO: Implement insert document functionality
247+
}}
248+
>
249+
<Icon glyph="Plus" />
250+
</IconButton>
251+
<span className={toolbarLabelStyles}>Insert Document</span>
252+
</div>
284253

285-
{/* Items per page */}
254+
{/* Right side - Actions */}
255+
<div className={toolbarGroupWideStyles}>
256+
{/* Refresh - single button with icon and text */}
257+
<button
258+
className={refreshButtonStyles}
259+
onClick={handleRefresh}
260+
title="Refresh"
261+
disabled={isLoading}
262+
style={{
263+
opacity: isLoading ? 0.5 : 1,
264+
cursor: isLoading ? 'not-allowed' : 'pointer',
265+
}}
266+
>
267+
<Icon glyph="Refresh" size="small" />
268+
<span>Refresh</span>
269+
</button>
270+
271+
{/* Sort */}
272+
<div className={toolbarGroupStyles}>
273+
<span className={toolbarLabelStyles}>Sort</span>
286274
<div className={selectWrapperStyles}>
287275
<Select
288-
aria-label="Items per page"
289-
value={itemsPerPage.toString()}
290-
onChange={handleItemsPerPageChange}
276+
aria-label="Sort order"
277+
value={sortOption}
278+
onChange={handleSortChange}
291279
size="xsmall"
292280
allowDeselect={false}
293281
dropdownWidthBasis="option"
294282
>
295-
{ITEMS_PER_PAGE_OPTIONS.map((option) => (
296-
<Option key={option} value={option.toString()}>
297-
{option}
298-
</Option>
299-
))}
283+
<Option value="default">Default</Option>
284+
<Option value="asc">Ascending</Option>
285+
<Option value="desc">Descending</Option>
300286
</Select>
301287
</div>
288+
</div>
302289

303-
{/* Pagination info */}
304-
<span className={paginationInfoStyles}>
305-
{startItem}-{endItem} of {totalCountInCollection ?? totalDocuments}
306-
</span>
290+
{/* Items per page */}
291+
<div className={selectWrapperStyles}>
292+
<Select
293+
aria-label="Items per page"
294+
value={itemsPerPage.toString()}
295+
onChange={handleItemsPerPageChange}
296+
size="xsmall"
297+
allowDeselect={false}
298+
dropdownWidthBasis="option"
299+
>
300+
{ITEMS_PER_PAGE_OPTIONS.map((option) => (
301+
<Option key={option} value={option.toString()}>
302+
{option}
303+
</Option>
304+
))}
305+
</Select>
306+
</div>
307307

308-
{/* Page navigation arrows */}
309-
<div className={paginationArrowsStyles}>
310-
<IconButton
311-
aria-label="Previous page"
312-
title="Previous page"
313-
onClick={handlePrevPage}
314-
disabled={currentPage <= 1}
315-
>
316-
<Icon glyph="CaretLeft" />
317-
</IconButton>
318-
<IconButton
319-
aria-label="Next page"
320-
title="Next page"
321-
onClick={handleNextPage}
322-
disabled={currentPage >= totalPages}
323-
>
324-
<Icon glyph="CaretRight" />
325-
</IconButton>
326-
</div>
308+
{/* Pagination info */}
309+
<span className={paginationInfoStyles}>
310+
{startItem}-{endItem} of {totalCountInCollection ?? totalDocuments}
311+
</span>
327312

328-
{/* View type */}
329-
<div className={selectWrapperStyles}>
330-
<Select
331-
aria-label="View type"
332-
value={viewType}
333-
onChange={handleViewTypeChange}
334-
size="xsmall"
335-
allowDeselect={false}
336-
dropdownWidthBasis="option"
337-
>
338-
<Option value="tree">Tree view</Option>
339-
<Option value="json">JSON view</Option>
340-
<Option value="table">Table view</Option>
341-
</Select>
342-
</div>
313+
{/* Page navigation arrows */}
314+
<div className={paginationArrowsStyles}>
315+
<IconButton
316+
aria-label="Previous page"
317+
title="Previous page"
318+
onClick={handlePrevPage}
319+
disabled={currentPage <= 1}
320+
>
321+
<Icon glyph="CaretLeft" />
322+
</IconButton>
323+
<IconButton
324+
aria-label="Next page"
325+
title="Next page"
326+
onClick={handleNextPage}
327+
disabled={currentPage >= totalPages}
328+
>
329+
<Icon glyph="CaretRight" />
330+
</IconButton>
331+
</div>
343332

344-
{/* Settings dropdown */}
345-
<Menu
346-
open={settingsMenuOpen}
347-
setOpen={setSettingsMenuOpen}
348-
trigger={
349-
<IconButton
350-
aria-label="Settings"
351-
title="Settings"
352-
onClick={toggleSettingsMenu}
353-
>
354-
<Icon glyph="Settings" />
355-
</IconButton>
356-
}
333+
{/* View type */}
334+
<div className={selectWrapperStyles}>
335+
<Select
336+
aria-label="View type"
337+
value={viewType}
338+
onChange={handleViewTypeChange}
339+
size="xsmall"
340+
allowDeselect={false}
341+
dropdownWidthBasis="option"
357342
>
358-
<MenuItem>Show line numbers</MenuItem>
359-
<MenuItem>Expand all</MenuItem>
360-
<MenuItem>Collapse all</MenuItem>
361-
<MenuItem>Copy documents</MenuItem>
362-
</Menu>
343+
<Option value="tree">Tree view</Option>
344+
<Option value="json">JSON view</Option>
345+
<Option value="table">Table view</Option>
346+
</Select>
363347
</div>
348+
349+
{/* Settings dropdown */}
350+
<Menu
351+
open={settingsMenuOpen}
352+
setOpen={setSettingsMenuOpen}
353+
trigger={
354+
<IconButton
355+
aria-label="Settings"
356+
title="Settings"
357+
onClick={toggleSettingsMenu}
358+
>
359+
<Icon glyph="Settings" />
360+
</IconButton>
361+
}
362+
>
363+
<MenuItem>Show line numbers</MenuItem>
364+
<MenuItem>Expand all</MenuItem>
365+
<MenuItem>Collapse all</MenuItem>
366+
<MenuItem>Copy documents</MenuItem>
367+
</Menu>
364368
</div>
369+
</div>
365370

366-
{/* Documents content */}
367-
<div style={{ padding: '16px' }}>
368-
{/* Inject keyframes for spinner animation */}
369-
<style>{spinnerKeyframes}</style>
370-
371-
{isLoading ? (
372-
<div className={loadingOverlayStyles}>
373-
<span className={spinnerStyles}>
374-
<Icon glyph="Refresh" size="large" />
375-
</span>
376-
<span style={{ color: darkMode ? '#888' : '#666' }}>
377-
Loading documents...
378-
</span>
379-
</div>
380-
) : (
381-
<>
382-
{displayedDocuments.map((doc, index) => (
383-
<DocumentTreeView key={`${currentPage}-${index}`} document={doc} />
384-
))}
385-
{displayedDocuments.length === 0 && (
386-
<div style={{
371+
{/* Documents content */}
372+
<div style={{ padding: '16px' }}>
373+
{/* Inject keyframes for spinner animation */}
374+
<style>{spinnerKeyframes}</style>
375+
376+
{isLoading ? (
377+
<div className={loadingOverlayStyles}>
378+
<span className={spinnerStyles}>
379+
<Icon glyph="Refresh" size="large" />
380+
</span>
381+
<span style={{ color: darkMode ? '#888' : '#666' }}>
382+
Loading documents...
383+
</span>
384+
</div>
385+
) : (
386+
<>
387+
{displayedDocuments.map((doc, index) => (
388+
<DocumentTreeView
389+
key={`${currentPage}-${index}`}
390+
document={doc}
391+
/>
392+
))}
393+
{displayedDocuments.length === 0 && (
394+
<div
395+
style={{
387396
textAlign: 'center',
388397
padding: '32px',
389-
color: darkMode ? '#888' : '#666'
390-
}}>
391-
No documents to display
392-
</div>
393-
)}
394-
</>
395-
)}
396-
</div>
398+
color: darkMode ? '#888' : '#666',
399+
}}
400+
>
401+
No documents to display
402+
</div>
403+
)}
404+
</>
405+
)}
397406
</div>
407+
</div>
398408
);
399409
};
400410

401411
export default PreviewApp;
402-

0 commit comments

Comments
 (0)