From 87bdf9f2e613610fa0160fb8b63221efebbeb8a6 Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Wed, 21 Aug 2024 21:36:02 +0300 Subject: [PATCH] M: Improve LibraryItem editor --- rsconcept/frontend/src/components/Icons.tsx | 2 + .../src/components/info/InfoUsers.tsx | 1 + .../frontend/src/components/ui/IconValue.tsx | 48 +++++++ .../EditorRSFormCard/EditorLibraryItem.tsx | 128 +++++++++--------- 4 files changed, 113 insertions(+), 66 deletions(-) create mode 100644 rsconcept/frontend/src/components/ui/IconValue.tsx diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx index 0343ab82..7bffbdf3 100644 --- a/rsconcept/frontend/src/components/Icons.tsx +++ b/rsconcept/frontend/src/components/Icons.tsx @@ -49,6 +49,8 @@ export { BiChevronLeft as IconPageLeft } from 'react-icons/bi'; export { BiChevronRight as IconPageRight } from 'react-icons/bi'; export { BiFirstPage as IconPageFirst } from 'react-icons/bi'; export { BiLastPage as IconPageLast } from 'react-icons/bi'; +export { TbCalendarPlus as IconDateCreate } from 'react-icons/tb'; +export { TbCalendarRepeat as IconDateUpdate } from 'react-icons/tb'; // ==== User status ======= export { LuUserCircle2 as IconUser } from 'react-icons/lu'; diff --git a/rsconcept/frontend/src/components/info/InfoUsers.tsx b/rsconcept/frontend/src/components/info/InfoUsers.tsx index eeea4a84..b0e8f723 100644 --- a/rsconcept/frontend/src/components/info/InfoUsers.tsx +++ b/rsconcept/frontend/src/components/info/InfoUsers.tsx @@ -18,6 +18,7 @@ function InfoUsers({ items, className, prefix, ...restProps }: InfoUsersProps) { {items.map((user, index) => (
{getUserLabel(user)}
))} + {items.length === 0 ?
Пользователи не выбраны
: null} ); } diff --git a/rsconcept/frontend/src/components/ui/IconValue.tsx b/rsconcept/frontend/src/components/ui/IconValue.tsx new file mode 100644 index 00000000..cc76fc1a --- /dev/null +++ b/rsconcept/frontend/src/components/ui/IconValue.tsx @@ -0,0 +1,48 @@ +import clsx from 'clsx'; + +import { CProps } from '../props'; +import MiniButton from './MiniButton'; + +interface IconValueProps extends CProps.Styling, CProps.Titled { + id?: string; + icon: React.ReactNode; + value: string | number; + onClick?: (event: CProps.EventMouse) => void; + dense?: boolean; + disabled?: boolean; +} + +function IconValue({ + id, + dense, + value, + icon, + disabled = true, + title, + titleHtml, + hideTitle, + className, + onClick, + ...restProps +}: IconValueProps) { + return ( +
+ + {value} +
+ ); +} + +export default IconValue; diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx index 0a599304..b3c32872 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx @@ -1,11 +1,10 @@ import { useCallback } from 'react'; import { useIntl } from 'react-intl'; -import { IconEdit } from '@/components/Icons'; +import { IconDateCreate, IconDateUpdate, IconEditor, IconFolder, IconOwner } from '@/components/Icons'; import InfoUsers from '@/components/info/InfoUsers'; import SelectUser from '@/components/select/SelectUser'; -import LabeledValue from '@/components/ui/LabeledValue'; -import MiniButton from '@/components/ui/MiniButton'; +import IconValue from '@/components/ui/IconValue'; import Overlay from '@/components/ui/Overlay'; import Tooltip from '@/components/ui/Tooltip'; import { useAccessMode } from '@/context/AccessModeContext'; @@ -42,79 +41,76 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr [controller, item?.owner, ownerSelector] ); + if (!item) { + return null; + } + return (
- {accessLevel >= UserLevel.OWNER ? ( - - controller.promptLocation()} - icon={} - disabled={isModified || controller.isProcessing || controller.isAttachedToOSS} - /> - - ) : null} - } + value={item.location} + title={controller.isAttachedToOSS ? 'Путь наследуется от ОСС' : 'Путь'} + onClick={controller.promptLocation} + disabled={isModified || controller.isProcessing || controller.isAttachedToOSS || accessLevel < UserLevel.OWNER} /> - {accessLevel >= UserLevel.OWNER ? ( - -
- ownerSelector.toggle()} - icon={} - disabled={isModified || controller.isProcessing || controller.isAttachedToOSS} + {ownerSelector.isOpen ? ( + + {ownerSelector.isOpen ? ( + - {ownerSelector.isOpen ? ( - - ) : null} -
+ ) : null} ) : null} - } + value={getUserLabel(item.owner)} + title={controller.isAttachedToOSS ? 'Владелец наследуется от ОСС' : 'Владелец'} + onClick={ownerSelector.toggle} + disabled={isModified || controller.isProcessing || controller.isAttachedToOSS || accessLevel < UserLevel.OWNER} /> - {accessLevel >= UserLevel.OWNER ? ( - - controller.promptEditors()} - icon={} - disabled={isModified || controller.isProcessing} - /> - - ) : null} - - - - +
+ } + value={item.editors.length} + title='Редакторы' + onClick={controller.promptEditors} + disabled={isModified || controller.isProcessing || accessLevel < UserLevel.OWNER} + /> + + + - - + } + value={new Date(item.time_update).toLocaleString(intl.locale)} + title='Дата обновления' + /> + + } + value={new Date(item.time_create).toLocaleString(intl.locale, { + year: '2-digit', + month: '2-digit', + day: '2-digit' + })} + title='Дата создания' + /> +
); }