From 0e174c971bf183b2fc00645dc8c3f0e259a726e1 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 4 Jun 2024 11:19:21 +0300
Subject: [PATCH] UI: table improvements

---
 .../frontend/src/components/DomainIcons.tsx    | 10 ++++------
 .../src/components/info/BadgeLocation.tsx      | 17 +++++++++++++++++
 .../select/PickMultiConstituenta.tsx           |  2 +-
 .../components/select/PickSubstitutions.tsx    |  4 ++--
 .../components/select/SelectLocationHead.tsx   |  6 +++---
 .../components/ui/DataTable/TableHeader.tsx    |  2 +-
 rsconcept/frontend/src/models/library.ts       |  2 +-
 .../src/pages/LibraryPage/SearchPanel.tsx      |  6 +++---
 .../src/pages/LibraryPage/ViewLibrary.tsx      | 18 +++++++++++++++++-
 .../pages/RSFormPage/EditorRSList/RSTable.tsx  |  2 +-
 .../ViewConstituents/ConstituentsTable.tsx     |  2 +-
 11 files changed, 51 insertions(+), 20 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/info/BadgeLocation.tsx

diff --git a/rsconcept/frontend/src/components/DomainIcons.tsx b/rsconcept/frontend/src/components/DomainIcons.tsx
index 61b51c28..065961f0 100644
--- a/rsconcept/frontend/src/components/DomainIcons.tsx
+++ b/rsconcept/frontend/src/components/DomainIcons.tsx
@@ -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'} />;
   }
 }
 
diff --git a/rsconcept/frontend/src/components/info/BadgeLocation.tsx b/rsconcept/frontend/src/components/info/BadgeLocation.tsx
new file mode 100644
index 00000000..47811d93
--- /dev/null
+++ b/rsconcept/frontend/src/components/info/BadgeLocation.tsx
@@ -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;
diff --git a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
index 7ce80163..e9f679df 100644
--- a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
@@ -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} />
       }),
diff --git a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
index 387813ce..c6fdcba1 100644
--- a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
@@ -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_`} />
diff --git a/rsconcept/frontend/src/components/select/SelectLocationHead.tsx b/rsconcept/frontend/src/components/select/SelectLocationHead.tsx
index 6acf7485..bc6038c4 100644
--- a/rsconcept/frontend/src/components/select/SelectLocationHead.tsx
+++ b/rsconcept/frontend/src/components/select/SelectLocationHead.tsx
@@ -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>
diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
index 9055b79a..cf064bab 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
@@ -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'
               }}
diff --git a/rsconcept/frontend/src/models/library.ts b/rsconcept/frontend/src/models/library.ts
index db94d298..6864c9d4 100644
--- a/rsconcept/frontend/src/models/library.ts
+++ b/rsconcept/frontend/src/models/library.ts
@@ -26,8 +26,8 @@ export enum AccessPolicy {
  */
 export enum LocationHead {
   USER = '/U',
-  COMMON = '/S',
   LIBRARY = '/L',
+  COMMON = '/S',
   PROJECTS = '/P'
 }
 
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index ffd1c355..d47d7060 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -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>
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
index cd66128f..6d4ba68f 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
@@ -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', {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
index 55d2f9f8..991bec09 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
@@ -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,
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
index 70ba61f8..6839cb72 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
@@ -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,