Skip to content
This repository was archived by the owner on Sep 22, 2025. It is now read-only.

Commit 032c97b

Browse files
azdakazdak
committed
Fixed table navigation styling on pages and property detail page
1 parent 6713e15 commit 032c97b

File tree

2 files changed

+116
-62
lines changed

2 files changed

+116
-62
lines changed

‎src/routes/protected/pages/pages.tsx‎

Lines changed: 62 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -288,18 +288,19 @@ const Pages = () => {
288288
};
289289

290290
// handlers for updating property on pages
291-
const [selectedProperty, setSelectedProperty] = useState("Select a Property");
291+
const [selectedProperty, setSelectedProperty] = useState('Select a Property');
292292
useEffect(() => {
293293
updateSelectedPagesProperty();
294294
return;
295295
}, [selectedProperty]);
296-
296+
297297
const updateSelectedPagesProperty = async () => {
298298
const urlsToSend = table.getSelectedRowModel().flatRows.map((row) => {
299299
return row.original.id;
300300
});
301-
if(urlsToSend.length === 0 || selectedProperty == "Select a Property") return;
302-
console.log("Updating property...");
301+
if (urlsToSend.length === 0 || selectedProperty == 'Select a Property')
302+
return;
303+
console.log('Updating property...');
303304
console.log(urlsToSend, selectedProperty);
304305

305306
try {
@@ -329,8 +330,8 @@ const Pages = () => {
329330
});
330331
console.log(urlsToSend, selectedProperty);
331332
throw error;
332-
}
333-
setSelectedProperty("Select a Property");
333+
}
334+
setSelectedProperty('Select a Property');
334335
table.resetRowSelection();
335336
dataQuery.refetch();
336337
};
@@ -429,12 +430,14 @@ const Pages = () => {
429430
<ChevronUpIcon />
430431
</Select.ScrollUpButton>
431432
<Select.Viewport className="SelectViewport">
432-
<Select.Item
433+
<Select.Item
433434
value="Select a Property"
434435
key="Select a Property"
435436
className="cursor-pointer p-2 hover:bg-green-100"
436437
>
437-
<Select.ItemText>Select a Property...</Select.ItemText>
438+
<Select.ItemText>
439+
Select a Property...
440+
</Select.ItemText>
438441
</Select.Item>
439442
<Select.Item
440443
value="null"
@@ -512,45 +515,42 @@ const Pages = () => {
512515
<nav
513516
role="navigation"
514517
aria-label="Pagination Navigation"
515-
className="flex items-center gap-2"
518+
className="flex items-center gap-2 pt-2"
516519
>
517520
<button
518-
className="rounded border p-1"
521+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
519522
onClick={() => table.firstPage()}
520523
disabled={!table.getCanPreviousPage()}
521524
>
522525
{'<<'}
523526
</button>
524527
<button
525-
className="rounded border p-1"
528+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
526529
onClick={() => table.previousPage()}
527530
disabled={!table.getCanPreviousPage()}
528531
>
529532
{'<'}
530533
</button>
531534
<button
532-
className="rounded border p-1"
535+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
533536
onClick={() => table.nextPage()}
534537
disabled={!table.getCanNextPage()}
535538
>
536539
{'>'}
537540
</button>
538541
<button
539-
className="rounded border p-1"
542+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
540543
onClick={() => table.lastPage()}
541544
disabled={!table.getCanNextPage()}
542545
>
543546
{'>>'}
544547
</button>
545-
<span className="flex items-center gap-1">
546-
<div>Page</div>
547-
<strong>
548-
{table.getState().pagination.pageIndex + 1} of{' '}
549-
{table.getPageCount().toLocaleString()}
550-
</strong>
548+
<span className="flex w-[100px] items-center justify-center text-sm font-medium">
549+
Page {table.getState().pagination.pageIndex + 1} of{' '}
550+
{table.getPageCount().toLocaleString()}
551551
</span>
552-
<span className="flex items-center gap-1">
553-
| Go to page:
552+
{/* <span className="flex w-[100px] items-center justify-center text-sm font-medium">
553+
<span>| Go to page:</span>
554554
<input
555555
type="number"
556556
min="1"
@@ -564,26 +564,52 @@ const Pages = () => {
564564
}}
565565
className="w-16 rounded border p-1"
566566
/>
567-
</span>
568-
<select
569-
value={table.getState().pagination.pageSize}
570-
onChange={(e) => {
571-
table.setPageSize(Number(e.target.value));
567+
</span> */}
568+
<Select.Root
569+
value={table.getState().pagination.pageSize.toString()}
570+
onValueChange={(val) => {
571+
table.setPageSize(Number(val));
572572
}}
573573
>
574-
{[10, 20, 30, 40, 50].map((pageSize) => (
575-
<option key={pageSize} value={pageSize}>
576-
Show {pageSize}
577-
</option>
578-
))}
579-
</select>
580-
{dataQuery.isFetching ? 'Loading...' : null}
581-
</nav>
582-
583-
<div>
574+
<Select.Trigger
575+
className="SelectTrigger border border-slate-200"
576+
aria-label="Pagination Page Size"
577+
>
578+
<Select.Value placeholder="Select Pages to Show…" />
579+
<Select.Icon className="SelectIcon">
580+
<ChevronDownIcon />
581+
</Select.Icon>
582+
</Select.Trigger>
583+
<Select.Portal>
584+
<Select.Content className="SelectContent">
585+
<Select.ScrollUpButton className="SelectScrollButton">
586+
<ChevronUpIcon />
587+
</Select.ScrollUpButton>
588+
<Select.Viewport className="SelectViewport">
589+
{[10, 20, 30, 40, 50].map((pageSize) => (
590+
<Select.Item
591+
value={pageSize.toString()}
592+
key={pageSize}
593+
className="cursor-pointer p-2 hover:bg-green-100"
594+
>
595+
<Select.ItemText>Show {pageSize}</Select.ItemText>
596+
</Select.Item>
597+
))}
598+
</Select.Viewport>
599+
<Select.ScrollDownButton className="SelectScrollButton">
600+
<ChevronDownIcon />
601+
</Select.ScrollDownButton>
602+
</Select.Content>
603+
</Select.Portal>
604+
</Select.Root>
605+
{dataQuery.isFetching ? <ReloadIcon aria-label="Loading..." className="animate-spin" /> : null}
606+
<div className="w-[200px] items-center justify-center text-sm font-medium">
584607
Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
585608
{dataQuery.data?.total.toLocaleString()}
586609
</div>
610+
</nav>
611+
612+
587613
</div>
588614
</div>
589615
<a id="downloadReportLink" style={{ display: 'none' }}></a>

‎src/routes/protected/properties/edit-property.tsx‎

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { CheckCircledIcon, DownloadIcon, ExclamationTriangleIcon, ReloadIcon } from '@radix-ui/react-icons';
2+
import { CheckCircledIcon, ChevronDownIcon, ChevronUpIcon, DownloadIcon, ExclamationTriangleIcon, ReloadIcon } from '@radix-ui/react-icons';
33
import {
44
keepPreviousData,
55
QueryClient,
@@ -23,6 +23,8 @@ import {
2323
TableHeader,
2424
TableRow,
2525
} from '~/components/tables';
26+
27+
import * as Select from '@radix-ui/react-select';
2628
import { toast } from '~/components/alerts';
2729
import { Button } from '~/components/buttons';
2830
import { DangerDialog } from '~/components/dialogs';
@@ -463,45 +465,42 @@ const EditProperty = () => {
463465
<nav
464466
role="navigation"
465467
aria-label="Pagination Navigation"
466-
className="flex items-center gap-2"
468+
className="flex items-center gap-2 pt-2"
467469
>
468470
<button
469-
className="rounded border p-1"
471+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
470472
onClick={() => table.firstPage()}
471473
disabled={!table.getCanPreviousPage()}
472474
>
473475
{'<<'}
474476
</button>
475477
<button
476-
className="rounded border p-1"
478+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
477479
onClick={() => table.previousPage()}
478480
disabled={!table.getCanPreviousPage()}
479481
>
480482
{'<'}
481483
</button>
482484
<button
483-
className="rounded border p-1"
485+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
484486
onClick={() => table.nextPage()}
485487
disabled={!table.getCanNextPage()}
486488
>
487489
{'>'}
488490
</button>
489491
<button
490-
className="rounded border p-1"
492+
className="hover:bg-accent hover:text-accent-foreground hidden h-8 w-8 items-center justify-center whitespace-nowrap rounded-md border border-gray-300 bg-transparent p-0 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 lg:flex"
491493
onClick={() => table.lastPage()}
492494
disabled={!table.getCanNextPage()}
493495
>
494496
{'>>'}
495497
</button>
496-
<span className="flex items-center gap-1">
497-
<div>Page</div>
498-
<strong>
499-
{table.getState().pagination.pageIndex + 1} of{' '}
500-
{table.getPageCount().toLocaleString()}
501-
</strong>
498+
<span className="flex w-[100px] items-center justify-center text-sm font-medium">
499+
Page {table.getState().pagination.pageIndex + 1} of{' '}
500+
{table.getPageCount().toLocaleString()}
502501
</span>
503-
<span className="flex items-center gap-1">
504-
| Go to page:
502+
{/* <span className="flex w-[100px] items-center justify-center text-sm font-medium">
503+
<span>| Go to page:</span>
505504
<input
506505
type="number"
507506
min="1"
@@ -515,20 +514,49 @@ const EditProperty = () => {
515514
}}
516515
className="w-16 rounded border p-1"
517516
/>
518-
</span>
519-
<select
520-
value={table.getState().pagination.pageSize}
521-
onChange={(e) => {
522-
table.setPageSize(Number(e.target.value));
517+
</span> */}
518+
<Select.Root
519+
value={table.getState().pagination.pageSize.toString()}
520+
onValueChange={(val) => {
521+
table.setPageSize(Number(val));
523522
}}
524523
>
525-
{[10, 20, 30, 40, 50].map((pageSize) => (
526-
<option key={pageSize} value={pageSize}>
527-
Show {pageSize}
528-
</option>
529-
))}
530-
</select>
531-
524+
<Select.Trigger
525+
className="SelectTrigger border border-slate-200"
526+
aria-label="Pagination Page Size"
527+
>
528+
<Select.Value placeholder="Select Pages to Show…" />
529+
<Select.Icon className="SelectIcon">
530+
<ChevronDownIcon />
531+
</Select.Icon>
532+
</Select.Trigger>
533+
<Select.Portal>
534+
<Select.Content className="SelectContent">
535+
<Select.ScrollUpButton className="SelectScrollButton">
536+
<ChevronUpIcon />
537+
</Select.ScrollUpButton>
538+
<Select.Viewport className="SelectViewport">
539+
{[10, 20, 30, 40, 50].map((pageSize) => (
540+
<Select.Item
541+
value={pageSize.toString()}
542+
key={pageSize}
543+
className="cursor-pointer p-2 hover:bg-green-100"
544+
>
545+
<Select.ItemText>Show {pageSize}</Select.ItemText>
546+
</Select.Item>
547+
))}
548+
</Select.Viewport>
549+
<Select.ScrollDownButton className="SelectScrollButton">
550+
<ChevronDownIcon />
551+
</Select.ScrollDownButton>
552+
</Select.Content>
553+
</Select.Portal>
554+
</Select.Root>
555+
{dataQuery.isFetching ? <ReloadIcon aria-label="Loading..." className="animate-spin" /> : null}
556+
<div className="w-[200px] items-center justify-center text-sm font-medium">
557+
Showing {table.getRowModel().rows.length.toLocaleString()} of{' '}
558+
{dataQuery.data?.urls_aggregate.aggregate.count.toLocaleString()}
559+
</div>
532560
</nav>
533561

534562

0 commit comments

Comments
 (0)