gitea_admin/krishna_sales
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added sorting

Browse Source
This commit is contained in:
suryac 2026-08-05 12:40:32 +05:30
parent 2f159af60b
commit 9ba93f6690
1 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/rv/RecordView.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import { Search, X } from 'lucide-react'; import { Search, X, ChevronUp, ChevronDown } from 'lucide-react';
import { cn } from '../../lib/cn'; import { cn } from '../../lib/cn';
import { formatValue } from '../../lib/format'; import { formatValue } from '../../lib/format';
import type { ZinoClient } from '../../api/client'; import type { ZinoClient } from '../../api/client';
@ -75,6 +75,29 @@ export function RecordView({
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [debounced, setDebounced] = useState(''); const [debounced, setDebounced] = useState('');
const [internalSortBy, setInternalSortBy] = useState<string | undefined>(sortBy);
const [internalSortDir, setInternalSortDir] = useState<'asc' | 'desc' | undefined>(sortDir);
useEffect(() => {
setInternalSortBy(sortBy);
setInternalSortDir(sortDir);
}, [sortBy, sortDir]);
const handleSort = (fieldKey: string) => {
if (internalSortBy === fieldKey) {
if (internalSortDir === 'asc') {
setInternalSortDir('desc');
} else {
setInternalSortBy(undefined);
setInternalSortDir(undefined);
}
} else {
setInternalSortBy(fieldKey);
setInternalSortDir('asc');
}
setPage(1);
};
const initialFiltersNormalized = useMemo(() => { const initialFiltersNormalized = useMemo(() => {
const res: Record<string, string[]> = {}; const res: Record<string, string[]> = {};
if (initialFilters) { if (initialFilters) {
@ -131,8 +154,8 @@ export function RecordView({
limit: internalPageSize, limit: internalPageSize,
search: debounced, search: debounced,
filters: filtersParam, filters: filtersParam,
sortBy, sortBy: internalSortBy,
sortDir, sortDir: internalSortDir,
presetAlias presetAlias
}); });
@ -147,7 +170,7 @@ export function RecordView({
return () => { return () => {
live = false; live = false;
}; };
}, [client, rvUid, page, internalPageSize, debounced, filtersParam, refreshKey, sortBy, sortDir]); }, [client, rvUid, page, internalPageSize, debounced, filtersParam, refreshKey, internalSortBy, internalSortDir]);
const fields: RecordViewField[] = useMemo(() => { const fields: RecordViewField[] = useMemo(() => {
const all = resp?.config.fields ?? []; const all = resp?.config.fields ?? [];
@ -331,9 +354,15 @@ export function RecordView({
{fields.map((f) => ( {fields.map((f) => (
<th <th
key={f.field_key} key={f.field_key}
className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-[var(--z-rv-table-header)]" onClick={() => handleSort(f.field_key)}
className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-[var(--z-rv-table-header)] cursor-pointer select-none hover:bg-black/5 transition-colors"
> >
<div className="flex items-center gap-1.5">
{f.output_label} {f.output_label}
{internalSortBy === f.field_key && (
internalSortDir === 'asc' ? <ChevronUp size={14} className="text-ruby-600" /> : <ChevronDown size={14} className="text-ruby-600" />
)}
</div>
</th> </th>
))} ))}
{rowActions && ( {rowActions && (