89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
'use client';
|
||
|
||
import clsx from 'clsx';
|
||
|
||
import { urls, useConceptNavigation } from '@/app';
|
||
|
||
import { TextURL } from '@/components/Control';
|
||
import { DataTable, type IConditionalStyle, type VisibilityState } from '@/components/DataTable';
|
||
import { useWindowSize } from '@/hooks/useWindowSize';
|
||
import { useFitHeight } from '@/stores/appLayout';
|
||
import { usePreferencesStore } from '@/stores/preferences';
|
||
import { APP_COLORS } from '@/styling/colors';
|
||
|
||
import { type ILibraryItem, LibraryItemType } from '../../backend/types';
|
||
import { useLibrarySearchStore } from '../../stores/librarySearch';
|
||
|
||
import { useLibraryColumns } from './useLibraryColumns';
|
||
|
||
interface TableLibraryItemsProps {
|
||
items: ILibraryItem[];
|
||
}
|
||
|
||
export function TableLibraryItems({ items }: TableLibraryItemsProps) {
|
||
const router = useConceptNavigation();
|
||
const { isSmall } = useWindowSize();
|
||
|
||
const folderMode = useLibrarySearchStore(state => state.folderMode);
|
||
const resetFilter = useLibrarySearchStore(state => state.resetFilter);
|
||
|
||
const itemsPerPage = usePreferencesStore(state => state.libraryPagination);
|
||
const setItemsPerPage = usePreferencesStore(state => state.setLibraryPagination);
|
||
|
||
const columns = useLibraryColumns();
|
||
const columnVisibility: VisibilityState = { owner: !isSmall };
|
||
const conditionalRowStyles: IConditionalStyle<ILibraryItem>[] = [
|
||
{
|
||
when: (item: ILibraryItem) => item.item_type === LibraryItemType.OSS,
|
||
style: {
|
||
color: APP_COLORS.fgGreen
|
||
}
|
||
}
|
||
];
|
||
const tableHeight = useFitHeight('2.25rem');
|
||
|
||
function handleOpenItem(item: ILibraryItem, event: React.MouseEvent<Element>) {
|
||
const selection = window.getSelection();
|
||
if (!!selection && selection.toString().length > 0) {
|
||
return;
|
||
}
|
||
if (item.item_type === LibraryItemType.RSFORM) {
|
||
router.push({ path: urls.schema(item.id), newTab: event.ctrlKey || event.metaKey });
|
||
} else if (item.item_type === LibraryItemType.OSS) {
|
||
router.push({ path: urls.oss(item.id), newTab: event.ctrlKey || event.metaKey });
|
||
}
|
||
}
|
||
|
||
return (
|
||
<DataTable
|
||
id='library_data'
|
||
columns={columns}
|
||
data={items}
|
||
headPosition='0'
|
||
className={clsx('text-xs sm:text-sm cc-scroll-y h-fit border-b', { 'border-l': folderMode })}
|
||
style={{ maxHeight: tableHeight }}
|
||
noDataComponent={
|
||
<div className='cc-column dense p-3 items-center min-h-[6rem]'>
|
||
<p>Список схем пуст</p>
|
||
<p className='flex gap-6'>
|
||
<TextURL text='Создать схему' href='/library/create' />
|
||
<TextURL text='Очистить фильтр' onClick={resetFilter} />
|
||
</p>
|
||
</div>
|
||
}
|
||
columnVisibility={columnVisibility}
|
||
onRowClicked={handleOpenItem}
|
||
enableSorting
|
||
initialSorting={{
|
||
id: 'time_update',
|
||
desc: true
|
||
}}
|
||
enablePagination
|
||
paginationPerPage={itemsPerPage}
|
||
onChangePaginationOption={setItemsPerPage}
|
||
paginationOptions={[10, 20, 30, 50, 100]}
|
||
conditionalRowStyles={conditionalRowStyles}
|
||
/>
|
||
);
|
||
}
|