From d3270a35324d3f0fc498f2b6d0c4c20c30955bba Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Wed, 5 Nov 2025 20:52:08 +0400 Subject: [PATCH] feat: dnd for options in select editor --- package.json | 1 - .../AttrSelectEditorDrawer.tsx | 49 +++++++++++ .../components/CommonInfoEditor.tsx | 2 +- .../components/CreateOptionButton.tsx | 16 ++-- .../components/EditorBody.tsx | 22 +++++ .../components/OptionTableRow.tsx | 82 ++++++++++++++++++ .../components/OptionsTable.tsx | 38 +++++++++ .../contexts/SelectEditorContext.tsx | 10 ++- .../hooks/useAttrOptionsCrud.tsx | 25 ++++-- .../hooks/useAttrOptionsList.ts | 3 +- .../hooks/useOptionsActions.tsx | 15 +++- .../attributes/hooks/useSelectsActions.tsx | 9 +- .../AttrSelectEditorModal.tsx | 24 ------ .../components/EditorBody.tsx | 20 ----- .../components/OptionsTable.tsx | 38 --------- .../hooks/useOptionsTableColumns.tsx | 84 ------------------- .../BoardsMobileEditorDrawer.tsx | 4 +- .../DraggableTableRow/DraggableTableRow.tsx | 10 ++- src/drawers/drawersRegistry.tsx | 2 + src/lib/client/types.gen.ts | 14 +++- src/lib/client/zod.gen.ts | 5 +- src/modals/modals.ts | 2 - yarn.lock | 19 ----- 23 files changed, 279 insertions(+), 215 deletions(-) create mode 100644 src/app/attributes/drawers/AttrSelectEditorDrawer/AttrSelectEditorDrawer.tsx rename src/app/attributes/{modals/AttrSelectEditorModal => drawers/AttrSelectEditorDrawer}/components/CommonInfoEditor.tsx (90%) rename src/app/attributes/{modals/AttrSelectEditorModal => drawers/AttrSelectEditorDrawer}/components/CreateOptionButton.tsx (70%) create mode 100644 src/app/attributes/drawers/AttrSelectEditorDrawer/components/EditorBody.tsx create mode 100644 src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow.tsx create mode 100644 src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionsTable.tsx rename src/app/attributes/{modals/AttrSelectEditorModal => drawers/AttrSelectEditorDrawer}/contexts/SelectEditorContext.tsx (78%) rename src/app/attributes/{modals/AttrSelectEditorModal => drawers/AttrSelectEditorDrawer}/hooks/useAttrOptionsCrud.tsx (62%) rename src/app/attributes/{modals/AttrSelectEditorModal => drawers/AttrSelectEditorDrawer}/hooks/useAttrOptionsList.ts (89%) rename src/app/attributes/{modals/AttrSelectEditorModal => drawers/AttrSelectEditorDrawer}/hooks/useOptionsActions.tsx (84%) delete mode 100644 src/app/attributes/modals/AttrSelectEditorModal/AttrSelectEditorModal.tsx delete mode 100644 src/app/attributes/modals/AttrSelectEditorModal/components/EditorBody.tsx delete mode 100644 src/app/attributes/modals/AttrSelectEditorModal/components/OptionsTable.tsx delete mode 100644 src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsTableColumns.tsx diff --git a/package.json b/package.json index cc83082..1309a79 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ "next": "15.4.7", "phone": "^3.1.67", "react": "19.1.0", - "react-dom": "19.1.0", "react-imask": "^7.6.1", "react-redux": "^9.2.0", "redux-persist": "^6.0.0", diff --git a/src/app/attributes/drawers/AttrSelectEditorDrawer/AttrSelectEditorDrawer.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/AttrSelectEditorDrawer.tsx new file mode 100644 index 0000000..f5c1c65 --- /dev/null +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/AttrSelectEditorDrawer.tsx @@ -0,0 +1,49 @@ +"use client"; + +import React, { FC } from "react"; +import { Drawer } from "@mantine/core"; +import EditorBody from "@/app/attributes/drawers/AttrSelectEditorDrawer/components/EditorBody"; +import { SelectEditorContextProvider } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext"; +import { DrawerProps } from "@/drawers/types"; +import useIsMobile from "@/hooks/utils/useIsMobile"; +import { AttrSelectSchema, UpdateAttrSelectSchema } from "@/lib/client"; + +type Props = { + select: AttrSelectSchema; + onSelectChange: ( + values: UpdateAttrSelectSchema, + onSuccess: () => void + ) => void; +}; + +const AttrSelectEditorDrawer: FC> = ({ + onClose, + opened, + props, +}) => { + const isMobile = useIsMobile(); + + return ( + + + + + + ); +}; + +export default AttrSelectEditorDrawer; diff --git a/src/app/attributes/modals/AttrSelectEditorModal/components/CommonInfoEditor.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/CommonInfoEditor.tsx similarity index 90% rename from src/app/attributes/modals/AttrSelectEditorModal/components/CommonInfoEditor.tsx rename to src/app/attributes/drawers/AttrSelectEditorDrawer/components/CommonInfoEditor.tsx index fc8028f..502ef2e 100644 --- a/src/app/attributes/modals/AttrSelectEditorModal/components/CommonInfoEditor.tsx +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/CommonInfoEditor.tsx @@ -1,6 +1,6 @@ import { Button, Flex, TextInput } from "@mantine/core"; import { useForm } from "@mantine/form"; -import { useSelectEditorContext } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext"; +import { useSelectEditorContext } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext"; import { UpdateAttrSelectSchema } from "@/lib/client"; const CommonInfoEditor = () => { diff --git a/src/app/attributes/modals/AttrSelectEditorModal/components/CreateOptionButton.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/CreateOptionButton.tsx similarity index 70% rename from src/app/attributes/modals/AttrSelectEditorModal/components/CreateOptionButton.tsx rename to src/app/attributes/drawers/AttrSelectEditorDrawer/components/CreateOptionButton.tsx index 97480d0..ae8306c 100644 --- a/src/app/attributes/modals/AttrSelectEditorModal/components/CreateOptionButton.tsx +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/CreateOptionButton.tsx @@ -1,6 +1,6 @@ import { IconCheck } from "@tabler/icons-react"; import { Flex, TextInput } from "@mantine/core"; -import { useSelectEditorContext } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext"; +import { useSelectEditorContext } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext"; import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip"; import InlineButton from "@/components/ui/InlineButton/InlineButton"; @@ -16,14 +16,20 @@ const CreateOptionButton = () => { if (!isCreatingOption) { return ( - - Добавить опцию - + + + Добавить опцию + + ); } return ( - + { + return ( + + + + + + + ); +}; + +export default EditorBody; diff --git a/src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow.tsx new file mode 100644 index 0000000..de5eac9 --- /dev/null +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow.tsx @@ -0,0 +1,82 @@ +import React, { FC, ReactNode } from "react"; +import { IconCheck, IconEdit, IconTrash } from "@tabler/icons-react"; +import { Divider, Flex, Group, Stack, TextInput } from "@mantine/core"; +import { useSelectEditorContext } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext"; +import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip"; +import { AttrOptionSchema } from "@/lib/client"; + +type Props = { + option: AttrOptionSchema; + renderDraggable?: (item: AttrOptionSchema) => ReactNode; +}; + +const OptionTableRow: FC = ({ option, renderDraggable }) => { + const { + optionsActions: { + onStartEditing, + onFinishEditing, + onDelete, + editingOptionsData, + setEditingOptionsData, + }, + } = useSelectEditorContext(); + + const onChange = ( + e: React.ChangeEvent, + optionId: number + ) => { + setEditingOptionsData(prev => { + prev.set(optionId, e.currentTarget.value); + return new Map(prev); + }); + }; + + return ( + + + + {renderDraggable && renderDraggable(option)} + {editingOptionsData.has(option.id) ? ( + onChange(e, option.id)} + /> + ) : ( + option.name + )} + + + {editingOptionsData.has(option.id) ? ( + onFinishEditing(option)} + tipLabel={"Сохранить"}> + + + ) : ( + onStartEditing(option)} + tipLabel={"Редактировать"}> + + + )} + + onDelete(option)} + tipLabel={"Удалить"}> + + + + + + + ); +}; + +export default OptionTableRow; diff --git a/src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionsTable.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionsTable.tsx new file mode 100644 index 0000000..c4b9eb9 --- /dev/null +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionsTable.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { IconGripVertical } from "@tabler/icons-react"; +import { Box, Divider, Stack } from "@mantine/core"; +import OptionTableRow from "@/app/attributes/drawers/AttrSelectEditorDrawer/components/OptionTableRow"; +import { useSelectEditorContext } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext"; +import SortableDnd from "@/components/dnd/SortableDnd"; + +const OptionsTable = () => { + const { options } = useSelectEditorContext(); + const { onDragEnd } = useSelectEditorContext(); + + const renderDraggable = () => ( + + + + ); + + return ( + + + ( + + )} + renderDraggable={renderDraggable} + dragHandleStyle={{ width: "auto" }} + vertical + /> + + ); +}; + +export default OptionsTable; diff --git a/src/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext.tsx similarity index 78% rename from src/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext.tsx rename to src/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext.tsx index 663a6f7..68a6000 100644 --- a/src/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext.tsx +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext.tsx @@ -1,6 +1,6 @@ "use client"; -import useAttrOptionsList from "@/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsList"; +import useAttrOptionsList from "@/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsList"; import { AttrOptionSchema, AttrSelectSchema, @@ -15,6 +15,7 @@ type SelectEditorContextState = { onSelectChange: (values: UpdateAttrSelectSchema) => void; options: AttrOptionSchema[]; optionsActions: OptionsActions; + onDragEnd: (itemId: number, newLexorank: string) => void; }; type Props = { @@ -31,7 +32,7 @@ const useSelectEditorContextState = ({ }: Props): SelectEditorContextState => { const { options, queryKey } = useAttrOptionsList({ selectId: select.id }); - const optionsActions = useOptionsActions({ queryKey, select }); + const optionsActions = useOptionsActions({ queryKey, select, options }); const onSelectChangeWithMsg = (values: UpdateAttrSelectSchema) => { onSelectChange(values, () => { @@ -41,11 +42,16 @@ const useSelectEditorContextState = ({ }); }; + const onDragEnd = (itemId: number, newLexorank: string) => { + optionsActions.onUpdate(itemId, { lexorank: newLexorank }); + }; + return { select, onSelectChange: onSelectChangeWithMsg, options, optionsActions, + onDragEnd, }; }; diff --git a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsCrud.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsCrud.tsx similarity index 62% rename from src/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsCrud.tsx rename to src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsCrud.tsx index 93a6763..ad93163 100644 --- a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsCrud.tsx +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsCrud.tsx @@ -1,3 +1,4 @@ +import { LexoRank } from "lexorank"; import { useCrudOperations } from "@/hooks/cruds/baseCrud"; import { AttrOptionSchema, @@ -9,9 +10,12 @@ import { deleteAttrOptionMutation, updateAttrOptionMutation, } from "@/lib/client/@tanstack/react-query.gen"; +import { getNewLexorank } from "@/utils/lexorank/generation"; +import { getMaxByLexorank } from "@/utils/lexorank/max"; type Props = { queryKey: any[]; + options: AttrOptionSchema[]; }; export type AttrOptionsCrud = { @@ -27,7 +31,10 @@ export type AttrOptionsCrud = { onDelete: (option: AttrOptionSchema, onSuccess?: () => void) => void; }; -export const useAttrOptionsCrud = ({ queryKey }: Props): AttrOptionsCrud => { +export const useAttrOptionsCrud = ({ + queryKey, + options, +}: Props): AttrOptionsCrud => { return useCrudOperations< AttrOptionSchema, UpdateAttrOptionSchema, @@ -40,13 +47,21 @@ export const useAttrOptionsCrud = ({ queryKey }: Props): AttrOptionsCrud => { update: updateAttrOptionMutation(), delete: deleteAttrOptionMutation(), }, - getCreateEntity: data => ({ - name: data.name!, - selectId: data.selectId!, - }), + getCreateEntity: data => { + const lastOption = getMaxByLexorank(options); + const newLexorank = getNewLexorank( + lastOption ? LexoRank.parse(lastOption.lexorank) : null + ); + return { + name: data.name!, + selectId: data.selectId!, + lexorank: newLexorank.toString(), + }; + }, getUpdateEntity: (old, update) => ({ ...old, name: update.name ?? old.name, + lexorank: update.lexorank ?? old.lexorank, }), getDeleteConfirmTitle: () => "Удаление опции", }); diff --git a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsList.ts b/src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsList.ts similarity index 89% rename from src/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsList.ts rename to src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsList.ts index 51cf17f..8138cf3 100644 --- a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsList.ts +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsList.ts @@ -4,6 +4,7 @@ import { getAttrOptionsOptions, getAttrOptionsQueryKey, } from "@/lib/client/@tanstack/react-query.gen"; +import { sortByLexorank } from "@/utils/lexorank/sort"; type Props = { selectId: number; @@ -27,7 +28,7 @@ const useAttrOptionsList = ({ selectId }: Props) => { }; return { - options: data?.items ?? [], + options: sortByLexorank(data?.items ?? []), setOptions, refetch, queryKey, diff --git a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsActions.tsx b/src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useOptionsActions.tsx similarity index 84% rename from src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsActions.tsx rename to src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useOptionsActions.tsx index 9812b0f..875b9a1 100644 --- a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsActions.tsx +++ b/src/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useOptionsActions.tsx @@ -1,16 +1,18 @@ import { Dispatch, SetStateAction, useState } from "react"; import { useForm, UseFormReturnType } from "@mantine/form"; -import { useAttrOptionsCrud } from "@/app/attributes/modals/AttrSelectEditorModal/hooks/useAttrOptionsCrud"; import { AttrOptionSchema, AttrSelectSchema, CreateAttrOptionSchema, + UpdateAttrOptionSchema, } from "@/lib/client"; import { notifications } from "@/lib/notifications"; +import { useAttrOptionsCrud } from "@/app/attributes/drawers/AttrSelectEditorDrawer/hooks/useAttrOptionsCrud"; type Props = { queryKey: any[]; select: AttrSelectSchema; + options: AttrOptionSchema[]; }; export type OptionsActions = { @@ -22,10 +24,11 @@ export type OptionsActions = { setEditingOptionsData: Dispatch>>; onStartEditing: (option: AttrOptionSchema) => void; onFinishEditing: (option: AttrOptionSchema) => void; + onUpdate: (optionId: number, data: UpdateAttrOptionSchema) => void; onDelete: (option: AttrOptionSchema) => void; }; -const useOptionsActions = ({ queryKey, select }: Props) => { +const useOptionsActions = ({ queryKey, select, options }: Props) => { const [isCreatingOption, setIsCreatingOption] = useState(false); const [editingOptionsData, setEditingOptionsData] = useState< Map @@ -34,6 +37,7 @@ const useOptionsActions = ({ queryKey, select }: Props) => { const createOptionForm = useForm({ initialValues: { name: "", + lexorank: "", selectId: select.id, }, validate: { @@ -41,7 +45,7 @@ const useOptionsActions = ({ queryKey, select }: Props) => { }, }); - const optionCrud = useAttrOptionsCrud({ queryKey }); + const optionCrud = useAttrOptionsCrud({ queryKey, options }); const onStartCreating = () => { setIsCreatingOption(true); @@ -69,7 +73,7 @@ const useOptionsActions = ({ queryKey, select }: Props) => { notifications.error({ message: "Название не может быть пустым" }); return; } - optionCrud.onUpdate(option.id, { name: newName }, () => { + optionCrud.onUpdate(option.id, { ...option, name: newName }, () => { notifications.success({ message: "Опция сохранена" }); setEditingOptionsData(prev => { prev.delete(option.id); @@ -84,6 +88,8 @@ const useOptionsActions = ({ queryKey, select }: Props) => { ); }; + const onUpdate = optionCrud.onUpdate; + return { isCreatingOption, createOptionForm, @@ -94,6 +100,7 @@ const useOptionsActions = ({ queryKey, select }: Props) => { onStartEditing, onFinishEditing, onDelete, + onUpdate, }; }; diff --git a/src/app/attributes/hooks/useSelectsActions.tsx b/src/app/attributes/hooks/useSelectsActions.tsx index 117abb5..bc91084 100644 --- a/src/app/attributes/hooks/useSelectsActions.tsx +++ b/src/app/attributes/hooks/useSelectsActions.tsx @@ -1,4 +1,5 @@ import { modals } from "@mantine/modals"; +import { useDrawersContext } from "@/drawers/DrawersContext"; import { useAttrSelectsCrud } from "@/hooks/cruds/useSelectsCrud"; import { AttrSelectSchema } from "@/lib/client"; @@ -14,6 +15,7 @@ export type SelectsActions = { const useSelectsActions = (props: Props): SelectsActions => { const attrSelectsCrud = useAttrSelectsCrud(props); + const { openDrawer } = useDrawersContext(); const onCreate = () => { modals.openContextModal({ @@ -26,10 +28,9 @@ const useSelectsActions = (props: Props): SelectsActions => { }; const onUpdate = (select: AttrSelectSchema) => { - modals.openContextModal({ - modal: "attrSelectEditorModal", - title: "Редактирование справочника", - innerProps: { + openDrawer({ + key: "attrSelectEditorDrawer", + props: { onSelectChange: (values, onSuccess) => attrSelectsCrud.onUpdate(select.id, values, onSuccess), select, diff --git a/src/app/attributes/modals/AttrSelectEditorModal/AttrSelectEditorModal.tsx b/src/app/attributes/modals/AttrSelectEditorModal/AttrSelectEditorModal.tsx deleted file mode 100644 index 47c3e13..0000000 --- a/src/app/attributes/modals/AttrSelectEditorModal/AttrSelectEditorModal.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client"; - -import { ContextModalProps } from "@mantine/modals"; -import EditorBody from "@/app/attributes/modals/AttrSelectEditorModal/components/EditorBody"; -import { SelectEditorContextProvider } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext"; -import { AttrSelectSchema, UpdateAttrSelectSchema } from "@/lib/client"; - -type Props = { - select: AttrSelectSchema; - onSelectChange: ( - values: UpdateAttrSelectSchema, - onSuccess: () => void - ) => void; -}; - -const AttrSelectEditorModal = ({ innerProps }: ContextModalProps) => { - return ( - - - - ); -}; - -export default AttrSelectEditorModal; diff --git a/src/app/attributes/modals/AttrSelectEditorModal/components/EditorBody.tsx b/src/app/attributes/modals/AttrSelectEditorModal/components/EditorBody.tsx deleted file mode 100644 index 87aeab5..0000000 --- a/src/app/attributes/modals/AttrSelectEditorModal/components/EditorBody.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Divider, Stack } from "@mantine/core"; -import CommonInfoEditor from "@/app/attributes/modals/AttrSelectEditorModal/components/CommonInfoEditor"; -import CreateOptionButton from "@/app/attributes/modals/AttrSelectEditorModal/components/CreateOptionButton"; -import OptionsTable from "@/app/attributes/modals/AttrSelectEditorModal/components/OptionsTable"; - -const EditorBody = () => { - return ( - - - - - - - ); -}; - -export default EditorBody; diff --git a/src/app/attributes/modals/AttrSelectEditorModal/components/OptionsTable.tsx b/src/app/attributes/modals/AttrSelectEditorModal/components/OptionsTable.tsx deleted file mode 100644 index 45feeda..0000000 --- a/src/app/attributes/modals/AttrSelectEditorModal/components/OptionsTable.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { IconMoodSad } from "@tabler/icons-react"; -import { Group, Text } from "@mantine/core"; -import { useSelectEditorContext } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext"; -import useOptionsTableColumns from "@/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsTableColumns"; -import BaseTable from "@/components/ui/BaseTable/BaseTable"; -import useIsMobile from "@/hooks/utils/useIsMobile"; - -const OptionsTable = () => { - const { options } = useSelectEditorContext(); - const isMobile = useIsMobile(); - const columns = useOptionsTableColumns(); - - return ( - - Нет опций - - - } - groups={undefined} - styles={{ - table: { - width: "100%", - minHeight: options.length === 0 ? "150px" : "auto", - }, - header: { zIndex: 1 }, - }} - mx={isMobile ? "xs" : 0} - /> - ); -}; - -export default OptionsTable; diff --git a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsTableColumns.tsx b/src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsTableColumns.tsx deleted file mode 100644 index 1ac44c1..0000000 --- a/src/app/attributes/modals/AttrSelectEditorModal/hooks/useOptionsTableColumns.tsx +++ /dev/null @@ -1,84 +0,0 @@ -"use client"; - -import React, { useMemo } from "react"; -import { IconCheck, IconEdit, IconTrash } from "@tabler/icons-react"; -import { DataTableColumn } from "mantine-datatable"; -import { Center, Flex, TextInput } from "@mantine/core"; -import { useSelectEditorContext } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext"; -import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip"; -import useIsMobile from "@/hooks/utils/useIsMobile"; -import { AttrOptionSchema } from "@/lib/client"; - -const useSelectsTableColumns = () => { - const isMobile = useIsMobile(); - const { - optionsActions: { - onStartEditing, - onFinishEditing, - onDelete, - editingOptionsData, - setEditingOptionsData, - }, - } = useSelectEditorContext(); - - const onChange = ( - e: React.ChangeEvent, - optionId: number - ) => { - setEditingOptionsData(prev => { - prev.set(optionId, e.currentTarget.value); - return new Map(prev); - }); - }; - - return useMemo( - () => - [ - { - title: "Название опции", - accessor: "name", - render: option => - editingOptionsData.has(option.id) ? ( - onChange(e, option.id)} - /> - ) : ( - option.name - ), - }, - { - accessor: "actions", - title:
Действия
, - width: "0%", - render: option => ( - - {editingOptionsData.has(option.id) ? ( - onFinishEditing(option)} - tipLabel={"Сохранить"}> - - - ) : ( - onStartEditing(option)} - tipLabel={"Редактировать"}> - - - )} - - onDelete(option)} - tipLabel={"Удалить"}> - - - - ), - }, - ] as DataTableColumn[], - [isMobile, editingOptionsData] - ); -}; - -export default useSelectsTableColumns; diff --git a/src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx b/src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx index b667d1c..1c2f587 100644 --- a/src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx +++ b/src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx @@ -18,8 +18,8 @@ const BoardsMobileEditorDrawer: FC> = ({ }) => { return ( = ({ rowProps.className, classes["draggable-row"] )} - {...provided.draggableProps}> + {...provided.draggableProps} + // style={{ + // ...provided.draggableProps.style, + // left: "auto !important", + // top: "auto !important", + // + // // does not work after scroll + // }} + >