From a5f35397988d5b476ffd4ba73ebff1cf7f65c770 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Sat, 3 Feb 2024 15:49:23 +0300 Subject: [PATCH] Refactor constituenta move functionality --- .../ConstituentaToolbar.tsx | 18 ++++- .../EditorConstituenta/EditorConstituenta.tsx | 10 ++- .../RSFormPage/EditorRSList/EditorRSList.tsx | 65 ++++--------------- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 62 +++++++++++++++++- 4 files changed, 97 insertions(+), 58 deletions(-) diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx index d3194db5..b089c0fe 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx @@ -1,7 +1,7 @@ 'use client'; import { useMemo } from 'react'; -import { BiDuplicate, BiPlusCircle, BiReset, BiTrash } from 'react-icons/bi'; +import { BiDownvote, BiDuplicate, BiPlusCircle, BiReset, BiTrash, BiUpvote } from 'react-icons/bi'; import { FiSave } from 'react-icons/fi'; import HelpButton from '@/components/Help/HelpButton'; @@ -16,6 +16,8 @@ interface ConstituentaToolbarProps { onSubmit: () => void; onReset: () => void; + onMoveUp: () => void; + onMoveDown: () => void; onDelete: () => void; onClone: () => void; onCreate: () => void; @@ -26,6 +28,8 @@ function ConstituentaToolbar({ isModified, onSubmit, onReset, + onMoveUp, + onMoveDown, onDelete, onClone, onCreate @@ -63,6 +67,18 @@ function ConstituentaToolbar({ onClick={onDelete} icon={} /> + } + disabled={!isMutable} + onClick={onMoveUp} + /> + } + disabled={!isMutable} + onClick={onMoveDown} + /> ); diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx index c16965c8..9835f45d 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx @@ -26,6 +26,8 @@ interface EditorConstituentaProps { isModified: boolean; setIsModified: React.Dispatch>; + onMoveUp: () => void; + onMoveDown: () => void; onOpenEdit: (cstID: number) => void; onClone: () => void; onCreate: (type?: CstType) => void; @@ -40,11 +42,13 @@ function EditorConstituenta({ isModified, setIsModified, activeCst, - onEditTerm, + onMoveUp, + onMoveDown, + onOpenEdit, onClone, onCreate, onRename, - onOpenEdit, + onEditTerm, onDelete }: EditorConstituentaProps) { const windowSize = useWindowSize(); @@ -99,6 +103,8 @@ function EditorConstituenta({ setToggleReset(prev => !prev)} onDelete={onDelete} diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx index 18a9eabe..a4e54374 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx @@ -4,16 +4,18 @@ import { useLayoutEffect, useState } from 'react'; import { type RowSelectionState } from '@/components/DataTable'; import SelectedCounter from '@/components/SelectedCounter'; -import { useRSForm } from '@/context/RSFormContext'; -import { CstType, ICstMovetoData } from '@/models/rsform'; +import { CstType, IRSForm } from '@/models/rsform'; import RSListToolbar from './RSListToolbar'; import RSTable from './RSTable'; interface EditorRSListProps { + schema?: IRSForm; isMutable: boolean; selected: number[]; setSelected: React.Dispatch>; + onMoveUp: () => void; + onMoveDown: () => void; onOpenEdit: (cstID: number) => void; onClone: () => void; onCreate: (type?: CstType) => void; @@ -21,16 +23,17 @@ interface EditorRSListProps { } function EditorRSList({ + schema, selected, setSelected, isMutable, + onMoveUp, + onMoveDown, onOpenEdit, onClone, onCreate, onDelete }: EditorRSListProps) { - const { schema, cstMoveTo } = useRSForm(); - const [rowSelection, setRowSelection] = useState({}); useLayoutEffect(() => { @@ -60,52 +63,6 @@ function EditorRSList({ } } - // Move selected cst up - function handleMoveUp() { - if (!schema?.items || selected.length === 0) { - return; - } - const currentIndex = schema.items.reduce((prev, cst, index) => { - if (!selected.includes(cst.id)) { - return prev; - } else if (prev === -1) { - return index; - } - return Math.min(prev, index); - }, -1); - const target = Math.max(0, currentIndex - 1) + 1; - const data = { - items: selected, - move_to: target - }; - cstMoveTo(data); - } - - // Move selected cst down - function handleMoveDown() { - if (!schema?.items || selected.length === 0) { - return; - } - let count = 0; - const currentIndex = schema.items.reduce((prev, cst, index) => { - if (!selected.includes(cst.id)) { - return prev; - } else { - count += 1; - if (prev === -1) { - return index; - } - return Math.max(prev, index); - } - }, -1); - const target = Math.min(schema.items.length - 1, currentIndex - count + 2) + 1; - const data: ICstMovetoData = { - items: selected, - move_to: target - }; - cstMoveTo(data); - } - // Implement hotkeys for working with constituents table function handleTableKey(event: React.KeyboardEvent) { if (!isMutable) { @@ -129,8 +86,8 @@ function EditorRSList({ if (selected.length > 0) { // prettier-ignore switch (code) { - case 'ArrowUp': handleMoveUp(); return true; - case 'ArrowDown': handleMoveDown(); return true; + case 'ArrowUp': onMoveUp(); return true; + case 'ArrowDown': onMoveDown(); return true; case 'KeyV': onClone(); return true; } } @@ -161,8 +118,8 @@ function EditorRSList({ resetAliases(() => toast.success('Имена конституент обновлены')), [resetAliases]); + // Move selected cst up + function handleMoveUp() { + if (!schema?.items || selected.length === 0) { + return; + } + const currentIndex = schema.items.reduce((prev, cst, index) => { + if (!selected.includes(cst.id)) { + return prev; + } else if (prev === -1) { + return index; + } + return Math.min(prev, index); + }, -1); + const target = Math.max(0, currentIndex - 1) + 1; + const data = { + items: selected, + move_to: target + }; + cstMoveTo(data); + } + + // Move selected cst down + function handleMoveDown() { + if (!schema?.items || selected.length === 0) { + return; + } + let count = 0; + const currentIndex = schema.items.reduce((prev, cst, index) => { + if (!selected.includes(cst.id)) { + return prev; + } else { + count += 1; + if (prev === -1) { + return index; + } + return Math.max(prev, index); + } + }, -1); + const target = Math.min(schema.items.length - 1, currentIndex - count + 2) + 1; + const data: ICstMovetoData = { + items: selected, + move_to: target + }; + cstMoveTo(data); + } + const handleDeleteCst = useCallback( (deleted: number[]) => { if (!schema) { @@ -479,9 +534,12 @@ function RSTabs() { promptCreateCst(type, type !== undefined)} @@ -496,6 +554,8 @@ function RSTabs() { isModified={isModified} setIsModified={setIsModified} activeCst={activeCst} + onMoveUp={handleMoveUp} + onMoveDown={handleMoveDown} onOpenEdit={onOpenCst} onClone={handleCloneCst} onCreate={type => promptCreateCst(type, false)}