ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI: table improvements

Browse Source
This commit is contained in:
IRBorisov 2024-06-04 11:19:21 +03:00
parent 2c1dace17f
commit 0e174c971b
11 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
rsconcept/frontend/src/components/DomainIcons.tsx
View File

@ -67,18 +67,16 @@ export function SubscribeIcon({ value, size = '1.25rem', className }: DomIconPro
}
}
export function LocationHeadIcon({ value: value, size = '1.25rem', className }: DomIconProps<LocationHead>) {
switch (value) {
case undefined:
return <IconFilter size={size} className={className ?? 'clr-text-primary'} />;
export function LocationIcon({ value, size = '1.25rem', className }: DomIconProps<string>) {
switch (value.substring(0, 2) as LocationHead) {
case LocationHead.COMMON:
return <IconPublic size={size} className={className ?? 'clr-text-primary'} />;
case LocationHead.LIBRARY:
return <IconTemplates size={size} className={className ?? 'clr-text-primary'} />;
return <IconTemplates size={size} className={className ?? 'clr-text-red'} />;
case LocationHead.PROJECTS:
return <IconBusiness size={size} className={className ?? 'clr-text-primary'} />;
case LocationHead.USER:
return <IconUser size={size} className={className ?? 'clr-text-primary'} />;
return <IconUser size={size} className={className ?? 'clr-text-green'} />;
}
}

17
rsconcept/frontend/src/components/info/BadgeLocation.tsx Normal file
View File

@ -0,0 +1,17 @@
import { globals } from '@/utils/constants';
import { LocationIcon } from '../DomainIcons';
interface BadgeLocationProps {
location: string;
}
function BadgeLocation({ location }: BadgeLocationProps) {
return (
<div className='pl-2' data-tooltip-id={globals.tooltip} data-tooltip-content={location}>
<LocationIcon value={location} size='1.25rem' />
</div>
);
}
export default BadgeLocation;

2
rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
View File

@ -60,7 +60,7 @@ function PickMultiConstituenta({ id, schema, prefixID, rows, selected, setSelect
() => [
columnHelper.accessor('alias', {
id: 'alias',
header: 'Имя',
header: () => <span className='pl-3'>Имя</span>,
size: 65,
cell: props => <BadgeConstituenta theme={colors} value={props.row.original} prefixID={prefixID} />
}),

4
rsconcept/frontend/src/components/select/PickSubstitutions.tsx
View File

@ -120,7 +120,7 @@ function PickSubstitutions({
}),
columnHelper.accessor(item => item.leftCst.alias, {
id: 'left_alias',
header: 'Имя',
header: () => <span className='pl-3'>Имя</span>,
size: 65,
cell: props => (
<BadgeConstituenta theme={colors} value={props.row.original.leftCst} prefixID={`${prefixID}_1_`} />
@ -134,7 +134,7 @@ function PickSubstitutions({
}),
columnHelper.accessor(item => item.rightCst.alias, {
id: 'right_alias',
header: 'Имя',
header: () => <span className='pl-3'>Имя</span>,
size: 65,
cell: props => (
<BadgeConstituenta theme={colors} value={props.row.original.rightCst} prefixID={`${prefixID}_2_`} />

6
rsconcept/frontend/src/components/select/SelectLocationHead.tsx
View File

@ -9,7 +9,7 @@ import { LocationHead } from '@/models/library';
import { prefixes } from '@/utils/constants';
import { describeLocationHead, labelLocationHead } from '@/utils/labels';
import { LocationHeadIcon } from '../DomainIcons';
import { LocationIcon } from '../DomainIcons';
import DropdownButton from '../ui/DropdownButton';
interface SelectLocationHeadProps {
@ -37,7 +37,7 @@ function SelectLocationHead({ value, excluded = [], onChange }: SelectLocationHe
title={describeLocationHead(value)}
hideTitle={menu.isOpen}
className='h-full'
icon={<LocationHeadIcon value={value} size='1rem' />}
icon={<LocationIcon value={value} size='1rem' />}
text={labelLocationHead(value)}
onClick={menu.toggle}
/>
@ -54,7 +54,7 @@ function SelectLocationHead({ value, excluded = [], onChange }: SelectLocationHe
title={describeLocationHead(head)}
>
<div className='inline-flex items-center gap-3'>
<LocationHeadIcon value={head} size='1rem' />
<LocationIcon value={head} size='1rem' />
{labelLocationHead(head)}
</div>
</DropdownButton>

2
rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
View File

@ -39,7 +39,7 @@ function TableHeader<TData>({
colSpan={header.colSpan}
className='px-2 py-2 text-xs font-medium select-none whitespace-nowrap'
style={{
textAlign: 'center',
textAlign: 'start',
width: header.getSize(),
cursor: enableSorting && header.column.getCanSort() ? 'pointer' : 'auto'
}}

2
rsconcept/frontend/src/models/library.ts
View File

@ -26,8 +26,8 @@ export enum AccessPolicy {
*/
export enum LocationHead {
USER = '/U',
COMMON = '/S',
LIBRARY = '/L',
COMMON = '/S',
PROJECTS = '/P'
}

6
rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
View File

@ -3,7 +3,7 @@
import clsx from 'clsx';
import { useCallback } from 'react';
import { LocationHeadIcon, SubscribeIcon, VisibilityIcon } from '@/components/DomainIcons';
import { LocationIcon, SubscribeIcon, VisibilityIcon } from '@/components/DomainIcons';
import { IconEditor, IconFolder, IconOwner } from '@/components/Icons';
import BadgeHelp from '@/components/info/BadgeHelp';
import Dropdown from '@/components/ui/Dropdown';
@ -128,7 +128,7 @@ function SearchPanel({
hideTitle={headMenu.isOpen}
icon={
head ? (
<LocationHeadIcon value={head} size='1.25rem' />
<LocationIcon value={head} size='1.25rem' />
) : (
<IconFolder size='1.25rem' className='clr-text-controls' />
)
@ -153,7 +153,7 @@ function SearchPanel({
title={describeLocationHead(head)}
>
<div className='inline-flex items-center gap-3'>
<LocationHeadIcon value={head} size='1rem' />
<LocationIcon value={head} size='1rem' />
{labelLocationHead(head)}
</div>
</DropdownButton>

18
rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
View File

@ -4,6 +4,8 @@ import { useLayoutEffect, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import { urls } from '@/app/urls';
import { IconFolder } from '@/components/Icons';
import BadgeLocation from '@/components/info/BadgeLocation';
import { CProps } from '@/components/props';
import DataTable, { createColumnHelper, VisibilityState } from '@/components/ui/DataTable';
import FlexColumn from '@/components/ui/FlexColumn';
@ -46,6 +48,20 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
const columns = useMemo(
() => [
columnHelper.accessor('location', {
id: 'location',
header: () => (
<span className='pl-2'>
<IconFolder size='1.25rem' className='clr-text-controls' />
</span>
),
size: 50,
minSize: 50,
maxSize: 50,
enableSorting: true,
cell: props => <BadgeLocation location={props.getValue()} />,
sortingFn: 'text'
}),
columnHelper.accessor('alias', {
id: 'alias',
header: 'Шифр',
@ -53,7 +69,7 @@ function ViewLibrary({ items, resetQuery }: ViewLibraryProps) {
minSize: 80,
maxSize: 150,
enableSorting: true,
cell: props => <div className='pl-2'>{props.getValue()}</div>,
cell: props => <div className='min-w-[5rem]'>{props.getValue()}</div>,
sortingFn: 'text'
}),
columnHelper.accessor('title', {

2
rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
View File

@ -67,7 +67,7 @@ function RSTable({ items, maxHeight, enableSelection, selected, setSelected, onE
() => [
columnHelper.accessor('alias', {
id: 'alias',
header: 'Имя',
header: () => <span className='pl-3'>Имя</span>,
size: 65,
minSize: 65,
maxSize: 65,

2
rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
View File

@ -68,7 +68,7 @@ function ConstituentsTable({ items, activeCst, onOpenEdit, maxHeight, denseThres
() => [
columnHelper.accessor('alias', {
id: 'alias',
header: 'Имя',
header: () => <span className='pl-3'>Имя</span>,
size: 65,
minSize: 65,
footer: undefined,