Minor UI refactoring

2025-06-26 04:50:36 +03:00 · 2024-06-21 19:27:36 +03:00 · 2024-06-21 19:27:36 +03:00 · 100abf082d
commit 100abf082d
parent fa8e38b2ad
18 changed files with 76 additions and 42 deletions
--- a/rsconcept/frontend/src/components/select/PickConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
@ -12,7 +12,7 @@ import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';

 import BadgeConstituenta from '../info/BadgeConstituenta';
-import FlexColumn from '../ui/FlexColumn';
+import NoData from '../ui/NoData';

 interface PickConstituentaProps {
  id?: string;
@ -106,10 +106,10 @@ function PickConstituenta({
        columns={columns}
        conditionalRowStyles={conditionalRowStyles}
        noDataComponent={
-          <FlexColumn className='p-3 items-center min-h-[6rem]'>
+          <NoData className='min-h-[6rem]'>
            <p>Список конституент пуст</p>
            <p>Измените параметры фильтра</p>
-          </FlexColumn>
+          </NoData>
        }
        onRowClicked={onSelectValue}
      />
--- a/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx
@ -10,7 +10,7 @@ import { isBasicConcept } from '@/models/rsformAPI';
 import { describeConstituenta } from '@/utils/labels';

 import BadgeConstituenta from '../info/BadgeConstituenta';
-import FlexColumn from '../ui/FlexColumn';
+import NoData from '../ui/NoData';
 import GraphSelectionToolbar from './GraphSelectionToolbar';

 interface PickMultiConstituentaProps {
@ -103,9 +103,9 @@ function PickMultiConstituenta({ id, schema, prefixID, rows, selected, setSelect
        rowSelection={rowSelection}
        onRowSelectionChange={handleRowSelection}
        noDataComponent={
-          <FlexColumn className='items-center p-3'>
+          <NoData>
            <p>Список пуст</p>
-          </FlexColumn>
+          </NoData>
        }
      />
    </div>
--- a/rsconcept/frontend/src/components/select/PickSchema.tsx
+++ b/rsconcept/frontend/src/components/select/PickSchema.tsx
@ -104,7 +104,7 @@ function PickSchema({ id, initialFilter = '', rows = 4, value, onSelectValue }:
        columns={columns}
        conditionalRowStyles={conditionalRowStyles}
        noDataComponent={
-          <FlexColumn className='p-3 items-center min-h-[6rem]'>
+          <FlexColumn className='dense p-3 items-center min-h-[6rem]'>
            <p>Список схем пуст</p>
            <p>Измените параметры фильтра</p>
          </FlexColumn>
--- a/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
+++ b/rsconcept/frontend/src/components/select/PickSubstitutions.tsx
@ -23,6 +23,7 @@ import {
  IconRemove,
  IconReplace
 } from '../Icons';
+import NoData from '../ui/NoData';

 interface PickSubstitutionsProps {
  prefixID: string;
@ -259,10 +260,10 @@ function PickSubstitutions({
        columns={columns}
        headPosition='0'
        noDataComponent={
-          <span className='p-2 text-center min-h-[2rem]'>
+          <NoData className='min-h-[2rem]'>
            <p>Список пуст</p>
            <p>Добавьте отождествление</p>
-          </span>
+          </NoData>
        }
      />
    </div>
--- a/rsconcept/frontend/src/components/select/SelectLocationHead.tsx
+++ b/rsconcept/frontend/src/components/select/SelectLocationHead.tsx
@ -14,7 +14,7 @@ import DropdownButton from '../ui/DropdownButton';

 interface SelectLocationHeadProps {
  value: LocationHead;
-  onChange: (value: LocationHead) => void;
+  onChange: (newValue: LocationHead) => void;
  excluded?: LocationHead[];
 }

--- a/rsconcept/frontend/src/components/ui/FlexColumn.tsx
+++ b/rsconcept/frontend/src/components/ui/FlexColumn.tsx
@ -2,9 +2,7 @@ import clsx from 'clsx';

 import { CProps } from '../props';

-export interface FlexColumnProps extends CProps.Div {}
-
-function FlexColumn({ className, children, ...restProps }: FlexColumnProps) {
+function FlexColumn({ className, children, ...restProps }: CProps.Div) {
  return (
    <div className={clsx('cc-column', className)} {...restProps}>
      {children}
--- a/rsconcept/frontend/src/components/ui/NoData.tsx
+++ b/rsconcept/frontend/src/components/ui/NoData.tsx
@ -0,0 +1,13 @@
+import clsx from 'clsx';
+
+import { CProps } from '../props';
+
+function NoData({ className, children, ...restProps }: CProps.Div) {
+  return (
+    <div className={clsx('p-3 flex flex-col items-center text-center select-none w-full', className)} {...restProps}>
+      {children}
+    </div>
+  );
+}
+
+export default NoData;
--- a/rsconcept/frontend/src/components/ui/TextURL.tsx
+++ b/rsconcept/frontend/src/components/ui/TextURL.tsx
@ -18,9 +18,9 @@ function TextURL({ text, href, title, color = 'clr-text-url', onClick }: TextURL
    );
  } else if (onClick) {
    return (
-      <span tabIndex={-1} className={design} onClick={onClick}>
+      <button type='button' tabIndex={-1} className={design} onClick={onClick}>
        {text}
-      </span>
+      </button>
    );
  } else {
    return null;
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
@ -9,6 +9,7 @@ import RSInput from '@/components/RSInput';
 import PickConstituenta from '@/components/select/PickConstituenta';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
+import NoData from '@/components/ui/NoData';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
@ -160,7 +161,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
        data={state.arguments}
        columns={columns}
        conditionalRowStyles={conditionalRowStyles}
-        noDataComponent={<p className={clsx('min-h-[3.6rem]', 'p-2', 'text-center')}>Аргументы отсутствуют</p>}
+        noDataComponent={<NoData className='min-h-[3.6rem]'>Аргументы отсутствуют</NoData>}
        onRowClicked={handleSelectArgument}
      />

--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
@ -7,6 +7,7 @@ import { IconRemove } from '@/components/Icons';
 import BadgeWordForm from '@/components/info/BadgeWordForm';
 import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
+import NoData from '@/components/ui/NoData';
 import { IWordForm } from '@/models/language';

 interface WordFormsTableProps {
@ -78,10 +79,10 @@ function WordFormsTable({ forms, setForms, onFormSelect }: WordFormsTableProps)
      columns={columns}
      headPosition='0'
      noDataComponent={
-        <span className='p-2 text-center min-h-[2rem]'>
+        <NoData className='min-h-[2rem]'>
          <p>Список пуст</p>
          <p>Добавьте словоформу</p>
-        </span>
+        </NoData>
      }
      onRowClicked={onFormSelect}
    />
--- a/rsconcept/frontend/src/pages/LibraryPage/LibraryTable.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryTable.tsx
@ -164,7 +164,7 @@ function LibraryTable({ items, resetQuery, folderMode, toggleFolderMode }: Libra
      className={clsx('text-xs sm:text-sm cc-scroll-y', { 'border-l border-b': folderMode })}
      style={{ maxHeight: tableHeight }}
      noDataComponent={
-        <FlexColumn className='p-3 items-center min-h-[6rem]'>
+        <FlexColumn className='dense p-3 items-center min-h-[6rem]'>
          <p>Список схем пуст</p>
          <p className='flex gap-6'>
            <TextURL text='Создать схему' href='/library/create' />
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@ -221,8 +221,8 @@ function FormConstituenta({
            <button
              key='cst_disable_comment'
              id='cst_disable_comment'
-              tabIndex={-1}
              type='button'
+              tabIndex={-1}
              className='self-start cc-label clr-text-url hover:underline'
              onClick={() => setForceComment(true)}
            >
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
@ -13,6 +13,7 @@ import useDropdown from '@/hooks/useDropdown';
 import { ILibraryItemData, ILibraryItemEditor } from '@/models/library';
 import { UserID, UserLevel } from '@/models/user';
 import { prefixes } from '@/utils/constants';
+import { prompts } from '@/utils/labels';

 import LabeledValue from '../../../components/ui/LabeledValue';

@ -34,11 +35,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
      if (newValue === item?.owner) {
        return;
      }
-      if (
-        !window.confirm(
-          'Вы уверены, что хотите изменить владельца? Вы потеряете право управления данной схемой. Данное действие отменить нельзя'
-        )
-      ) {
+      if (!window.confirm(prompts.ownerChange)) {
        return;
      }
      controller.setOwner(newValue);
@ -59,7 +56,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
          />
        </Overlay>
      ) : null}
-      <LabeledValue className='max-w-[30rem] sm:mb-1 text-ellipsis' label='Путь' text={item?.location ?? ''} />
+      <LabeledValue
+        className='max-w-[30rem] sm:mb-1 text-ellipsis' //
+        label='Путь'
+        text={item?.location ?? ''}
+      />

      {accessLevel >= UserLevel.OWNER ? (
        <Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
@ -82,7 +83,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
          </div>
        </Overlay>
      ) : null}
-      <LabeledValue className='sm:mb-1' label='Владелец' text={getUserLabel(item?.owner ?? null)} />
+      <LabeledValue
+        className='sm:mb-1' //
+        label='Владелец'
+        text={getUserLabel(item?.owner ?? null)}
+      />

      {accessLevel >= UserLevel.OWNER ? (
        <Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
@ -97,12 +102,22 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
          </div>
        </Overlay>
      ) : null}
-      <LabeledValue id='editor_stats' className='sm:mb-1' label='Редакторы' text={item?.editors.length ?? 0} />
+      <LabeledValue
+        id='editor_stats' //
+        className='sm:mb-1'
+        label='Редакторы'
+        text={item?.editors.length ?? 0}
+      />
      <Tooltip anchorSelect='#editor_stats' layer='z-modalTooltip'>
        <InfoUsers items={item?.editors ?? []} prefix={prefixes.user_editors} />
      </Tooltip>

-      <LabeledValue id='sub_stats' className='sm:mb-1' label='Отслеживают' text={item?.subscribers.length ?? 0} />
+      <LabeledValue
+        id='sub_stats' //
+        className='sm:mb-1'
+        label='Отслеживают'
+        text={item?.subscribers.length ?? 0}
+      />
      <Tooltip anchorSelect='#sub_stats' layer='z-modalTooltip'>
        <InfoUsers items={item?.subscribers ?? []} prefix={prefixes.user_subs} />
      </Tooltip>
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx
@ -6,7 +6,8 @@ import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
 import DataTable, { createColumnHelper, RowSelectionState, VisibilityState } from '@/components/ui/DataTable';
-import FlexColumn from '@/components/ui/FlexColumn';
+import NoData from '@/components/ui/NoData';
+import TextURL from '@/components/ui/TextURL';
 import { useConceptOptions } from '@/context/OptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
@ -135,12 +136,12 @@ function RSTable({ items, maxHeight, enableSelection, selected, setSelected, onE
      rowSelection={selected}
      onRowSelectionChange={setSelected}
      noDataComponent={
-        <FlexColumn className='items-center p-3'>
+        <NoData>
          <p>Список пуст</p>
-          <p className='cursor-pointer clr-text-primary hover:underline' onClick={() => onCreateNew()}>
-            Создать новую конституенту
+          <p>
+            <TextURL text='Создать конституенту...' onClick={onCreateNew} />
          </p>
-        </FlexColumn>
+        </NoData>
      }
    />
  );
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
@ -98,10 +98,11 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
          const id = `${prefixes.cst_hidden_list}${cst.alias}`;
          return (
            <div key={`wrap-${id}`}>
-              <div
+              <button
+                type='button'
                key={id}
                id={id}
-                className='min-w-[3rem] rounded-md text-center cursor-pointer select-none'
+                className='min-w-[3rem] rounded-md text-center select-none'
                style={{
                  backgroundColor: colorBgGraphNode(cst, adjustedColoring, colors),
                  ...(localSelected.includes(cstID) ? { outlineWidth: '2px', outlineStyle: 'solid' } : {})
@ -110,7 +111,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
                onDoubleClick={() => onEdit(cstID)}
              >
                {cst.alias}
-              </div>
+              </button>
              <ConstituentaTooltip data={cst} anchor={`#${id}`} />
            </div>
          );
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsTable.tsx
@ -1,10 +1,10 @@
 'use client';

-import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';

 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } from '@/components/ui/DataTable';
+import NoData from '@/components/ui/NoData';
 import { useConceptOptions } from '@/context/OptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
@ -155,10 +155,10 @@ function ConstituentsTable({ items, activeCst, onOpenEdit, maxHeight, denseThres
      columnVisibility={columnVisibility}
      onColumnVisibilityChange={setColumnVisibility}
      noDataComponent={
-        <div className={clsx('min-h-[5rem]', 'p-3', 'text-center', 'select-none')}>
+        <NoData className='min-h-[5rem]'>
          <p>Список конституент пуст</p>
          <p>Измените параметры фильтра</p>
-        </div>
+        </NoData>
      }
      onRowClicked={handleRowClicked}
    />
--- a/rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/ViewSubscriptions.tsx
@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';

 import { urls } from '@/app/urls';
 import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
+import NoData from '@/components/ui/NoData';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { ILibraryItem } from '@/models/library';
 import { animateSideView } from '@/styling/animations';
@ -74,7 +75,7 @@ function ViewSubscriptions({ items }: ViewSubscriptionsProps) {
          id: 'time_update',
          desc: true
        }}
-        noDataComponent={<div className='h-[10rem]'>Отслеживаемые схемы отсутствуют</div>}
+        noDataComponent={<NoData className='h-[10rem]'>Отслеживаемые схемы отсутствуют</NoData>}
        onRowClicked={openRSForm}
      />
    </motion.div>
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@ -942,7 +942,9 @@ export const prompts = {
  promptUnsaved: 'Присутствуют несохраненные изменения. Продолжить без их учета?',
  deleteLibraryItem: 'Вы уверены, что хотите удалить данную схему?',
  generateWordforms: 'Данное действие приведет к перезаписи словоформ при совпадении граммем. Продолжить?',
-  restoreArchive: 'При восстановлении архивной версии актуальная схему будет заменена. Продолжить?'
+  restoreArchive: 'При восстановлении архивной версии актуальная схему будет заменена. Продолжить?',
+  ownerChange:
+    'Вы уверены, что хотите изменить владельца? Вы потеряете право управления данной схемой. Данное действие отменить нельзя'
 };

 // ============== INTERNAL LABELS FOR DEVELOPERS TEXT ================