fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

services table dnd to fix

Browse Source
This commit is contained in:
AlexSserb
2025-09-30 23:21:34 +04:00
parent b51467cbf6
commit f3a0179467
13 changed files with 334 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -14,6 +14,7 @@
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/modifiers": "^9.0.0",
"@dnd-kit/sortable": "^10.0.0",
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "8.1.2",
"@mantine/dates": "^8.2.7",
"@mantine/dropzone": "^8.3.1",

4
src/app/services/components/shared/ServicesTable/ServicesTable.module.css Normal file
View File

@ -0,0 +1,4 @@
.draggable-row[data-is-dragging='true'] td {
opacity: 0.75;
border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

83
src/app/services/components/shared/ServicesTable/ServicesTable.tsx
View File

@ -1,13 +1,20 @@
"use client";
import { FC, useMemo, useState } from "react";
import useServicesInnerTableColumns from "@/app/services/components/shared/ServicesTable/hooks/servicesInnerTableColumns";
import { DragDropContext, Draggable } from "@hello-pangea/dnd";
import { IconGripVertical } from "@tabler/icons-react";
import clsx from "clsx";
import { DataTableDraggableRow } from "mantine-datatable";
import { Center, TableTd } from "@mantine/core";
import InnerServicesTableDndWrapper from "@/app/services/components/shared/ServicesTable/components/InnerServicesTableDndWrapper";
import useServicesOuterTableColumns from "@/app/services/components/shared/ServicesTable/hooks/servicesOuterTableColumns";
import { GroupedServices } from "@/app/services/components/shared/ServicesTable/types/GroupedServices";
import { useServicesContext } from "@/app/services/contexts/ServicesContext";
import { useServicesDndContext } from "@/app/services/contexts/ServicesDndContext";
import Droppable from "@/components/dnd-pangea/Droppable/Droppable";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ServiceType } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/types/service";
import classes from "./ServicesTable.module.css";
type Props = {
serviceType: ServiceType;
@ -15,13 +22,12 @@ type Props = {
const ServicesTable: FC<Props> = ({ serviceType }) => {
const { servicesList } = useServicesContext();
const isMobile = useIsMobile();
const { onDragEnd, onDragStart } = useServicesDndContext();
const [expandedCategoryIds, setExpandedCategoryIds] = useState<number[]>(
[]
);
const innerColumns = useServicesInnerTableColumns();
const outerColumns = useServicesOuterTableColumns({
expandedCategoryIds,
setExpandedCategoryIds,
@ -48,16 +54,25 @@ const ServicesTable: FC<Props> = ({ serviceType }) => {
}, [servicesList.services, serviceType]);
return (
<DragDropContext
onDragEnd={onDragEnd}
onDragStart={onDragStart}>
<BaseTable
withTableBorder
columns={outerColumns}
records={groupedServices}
verticalSpacing={"md"}
groups={undefined}
records={groupedServices}
withTableBorder
idAccessor={"category.id"}
styles={{
header: { zIndex: 100 },
}}
tableWrapper={({ children }) => (
<Droppable
droppableId={"categories"}
// isDropDisabled={
// dragState !== ServiceDragState.DRAG_CATEGORY
// }
>
{children}
</Droppable>
)}
rowExpansion={{
allowMultiple: true,
expanded: {
@ -65,19 +80,49 @@ const ServicesTable: FC<Props> = ({ serviceType }) => {
onRecordIdsChange: setExpandedCategoryIds,
},
content: ({ record }) => (
<BaseTable
withTableBorder
columns={innerColumns}
records={record.services}
verticalSpacing={"md"}
groups={undefined}
<InnerServicesTableDndWrapper
services={record.services}
/>
),
}}
style={{
marginInline: isMobile ? "var(--mantine-spacing-xs)" : "0",
}}
styles={{ table: { tableLayout: "fixed" } }}
rowFactory={({
record,
index,
rowProps,
children,
expandedElement,
}) => (
<>
<Draggable
key={record.category.id}
draggableId={`category-${record.category.id.toString()}`}
index={index}>
{(provided, snapshot) => (
<DataTableDraggableRow
isDragging={snapshot.isDragging}
{...rowProps}
className={clsx(
rowProps.className,
classes["draggable-row"]
)}
{...provided.draggableProps}>
<TableTd>
<Center
{...provided.dragHandleProps}
ref={provided.innerRef}>
<IconGripVertical />
</Center>
</TableTd>
{children}
</DataTableDraggableRow>
)}
</Draggable>
{expandedElement}
</>
)}
/>
</DragDropContext>
);
};

57
src/app/services/components/shared/ServicesTable/components/InnerServicesTable.tsx Normal file
View File

@ -0,0 +1,57 @@
import { FC } from "react";
import { Draggable } from "@hello-pangea/dnd";
import { IconGripVertical } from "@tabler/icons-react";
import clsx from "clsx";
import { DataTableDraggableRow } from "mantine-datatable";
import { Center, TableTd } from "@mantine/core";
import useServicesInnerTableColumns from "@/app/services/components/shared/ServicesTable/hooks/servicesInnerTableColumns";
import classes from "@/app/services/components/shared/ServicesTable/ServicesTable.module.css";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { ServiceSchema } from "@/lib/client";
type Props = {
services: ServiceSchema[];
};
const InnerServicesTable: FC<Props> = ({ services }) => {
const innerColumns = useServicesInnerTableColumns();
return (
<BaseTable
withTableBorder
columns={innerColumns}
records={services}
verticalSpacing={"md"}
groups={undefined}
styles={{ table: { width: "100%" } }}
rowFactory={({ record, index, rowProps, children }) => (
<Draggable
key={record.id}
draggableId={`service-${record.id}`}
index={index}>
{(provided, snapshot) => (
<DataTableDraggableRow
isDragging={snapshot.isDragging}
{...rowProps}
className={clsx(
rowProps.className,
classes["draggable-row"]
)}
{...provided.draggableProps}>
<TableTd>
<Center
{...provided.dragHandleProps}
ref={provided.innerRef}>
<IconGripVertical />
</Center>
</TableTd>
{children}
</DataTableDraggableRow>
)}
</Draggable>
)}
/>
);
};
export default InnerServicesTable;

21
src/app/services/components/shared/ServicesTable/components/InnerServicesTableDndWrapper.tsx Normal file
View File

@ -0,0 +1,21 @@
import { FC } from "react";
import InnerServicesTable from "@/app/services/components/shared/ServicesTable/components/InnerServicesTable";
import Droppable from "@/components/dnd-pangea/Droppable/Droppable";
import { ServiceSchema } from "@/lib/client";
type Props = {
services: ServiceSchema[];
};
const InnerServicesTableDndWrapper: FC<Props> = ({ services }) => {
return (
<Droppable
droppableId={"services"}
// isDropDisabled={dragState !== ServiceDragState.DRAG_SERVICE}
>
<InnerServicesTable services={services} />
</Droppable>
);
};
export default InnerServicesTableDndWrapper;

10
src/app/services/components/shared/ServicesTable/hooks/servicesInnerTableColumns.tsx
View File

@ -2,7 +2,7 @@
import { useMemo } from "react";
import { DataTableColumn } from "mantine-datatable";
import { List, Text } from "@mantine/core";
import { Center, List, Text } from "@mantine/core";
import { useServicesContext } from "@/app/services/contexts/ServicesContext";
import useServicesActions from "@/app/services/hooks/useServicesActions";
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
@ -34,32 +34,38 @@ const useServicesInnerTableColumns = () => {
return useMemo(
() =>
[
{ accessor: "", hiddenContent: true, width: 0 },
{
accessor: "name",
title: "Название",
width: 350,
},
{
accessor: "price",
title: "Цена",
render: service => getPriceRow(service),
width: 200,
},
{
accessor: "cost",
title: isMobile ? "Себестоим." : "Себестоимость",
render: service => `${service.cost?.toLocaleString("ru")}₽`,
width: 200,
},
{
accessor: "actions",
title: isMobile ? "" : "Действия",
sortable: false,
textAlign: "center",
width: "0%",
width: 70,
render: service => (
<Center>
<UpdateDeleteTableActions
onDelete={() => servicesCrud.onDelete(service)}
onChange={() => onChangeService(service)}
dotsForMobile
/>
</Center>
),
},
] as DataTableColumn<ServiceSchema>[],

19
src/app/services/components/shared/ServicesTable/hooks/servicesOuterTableColumns.tsx
View File

@ -7,11 +7,12 @@ import {
IconChevronUp,
} from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { Box, Group, Text } from "@mantine/core";
import { Box, Center, Group, Text } from "@mantine/core";
import { GroupedServices } from "@/app/services/components/shared/ServicesTable/types/GroupedServices";
import { useServicesContext } from "@/app/services/contexts/ServicesContext";
import useCategoriesActions from "@/app/services/hooks/useCategoriesActions";
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
import useIsMobile from "@/hooks/utils/useIsMobile";
type Props = {
expandedCategoryIds: number[];
@ -22,6 +23,7 @@ const useServicesOuterTableColumns = ({
expandedCategoryIds,
setExpandedCategoryIds,
}: Props) => {
const isMobile = useIsMobile();
const { onChangeCategory } = useCategoriesActions();
const { categoriesCrud, categories } = useServicesContext();
@ -43,8 +45,9 @@ const useServicesOuterTableColumns = ({
return useMemo(
() =>
[
{ accessor: "", hiddenContent: true, width: 3 },
{
accessor: "name",
accessor: "category.name",
title: (
<Group>
<Box
@ -66,19 +69,25 @@ const useServicesOuterTableColumns = ({
<Text>{name}</Text>
</Group>
),
width: 450,
},
{
accessor: "actions",
title: "Действия",
title: isMobile ? "" : "Действия",
sortable: false,
textAlign: "center",
width: "0%",
render: ({ category }) => (
<Center>
<UpdateDeleteTableActions
onDelete={() => categoriesCrud.onDelete(category)}
onDelete={() =>
categoriesCrud.onDelete(category)
}
onChange={() => onChangeCategory(category)}
dotsForMobile
/>
</Center>
),
width: 50,
},
] as DataTableColumn<GroupedServices>[],
[expandedCategoryIds, categories]

7
src/app/services/contexts/ServicesContext.tsx
View File

@ -30,7 +30,7 @@ type ServicesContextState = {
categories: ServiceCategorySchema[];
};
const useFulfillmentBaseContextState = (): ServicesContextState => {
const useServicesContextState = (): ServicesContextState => {
const servicesList = useServicesList();
const servicesCrud = useServicesCrud(servicesList);
@ -54,7 +54,4 @@ const useFulfillmentBaseContextState = (): ServicesContextState => {
};
export const [ServicesContextProvider, useServicesContext] =
makeContext<ServicesContextState>(
useFulfillmentBaseContextState,
"Services"
);
makeContext<ServicesContextState>(useServicesContextState, "Services");

60
src/app/services/contexts/ServicesDndContext.tsx Normal file
View File

@ -0,0 +1,60 @@
"use client";
import { Dispatch, SetStateAction, useState } from "react";
import type { DragStart, DropResult } from "@hello-pangea/dnd";
import ServiceDragState from "@/app/services/enums/DragState";
import makeContext from "@/lib/contextFactory/contextFactory";
type ServicesDndContextState = {
onDragStart: (start: DragStart) => void;
onDragEnd: (result: DropResult) => void;
dragState: ServiceDragState;
setDragState: Dispatch<SetStateAction<ServiceDragState>>;
};
const useServiceDndContextState = (): ServicesDndContextState => {
const [dragState, setDragState] = useState<ServiceDragState>(
ServiceDragState.DRAG_ENDED
);
const [value, setValue] = useState<boolean>(false);
const onDragStart = (start: DragStart) => {
setValue(prev => !prev);
};
const onDragEnd = (result: DropResult) => {
if (!result.destination) return;
const sourceId = result.source.droppableId;
const destinationId = result.destination.droppableId;
console.log(destinationId);
// const items = Array.from(records);
// const sourceIndex = result.source.index;
// const destinationIndex = result.destination.index;
// const [reorderedItem] = items.splice(sourceIndex, 1);
// items.splice(destinationIndex, 0, reorderedItem);
//
// setRecords(items);
// notifications.show({
// title: 'Table reordered',
// message: `The company named "${items[sourceIndex].name}" has been moved from position ${sourceIndex + 1} to ${destinationIndex + 1}.`,
// color: 'blue',
// });
};
return {
dragState,
setDragState,
onDragStart,
onDragEnd,
};
};
export const [ServicesDndContextProvider, useServicesDndContext] =
makeContext<ServicesDndContextState>(
useServiceDndContextState,
"ServicesDnd"
);

7
src/app/services/enums/DragState.ts Normal file
View File

@ -0,0 +1,7 @@
enum ServiceDragState {
DRAG_ENDED,
DRAG_SERVICE,
DRAG_CATEGORY,
}
export default ServiceDragState;

3
src/app/services/page.tsx
View File

@ -2,6 +2,7 @@ import { Suspense } from "react";
import { Center, Loader } from "@mantine/core";
import PageBody from "@/app/services/components/shared/PageBody/PageBody";
import { ServicesContextProvider } from "@/app/services/contexts/ServicesContext";
import { ServicesDndContextProvider } from "@/app/services/contexts/ServicesDndContext";
import PageContainer from "@/components/layout/PageContainer/PageContainer";
export default async function ServicesPage() {
@ -13,9 +14,11 @@ export default async function ServicesPage() {
</Center>
}>
<ServicesContextProvider>
<ServicesDndContextProvider>
<PageContainer>
<PageBody />
</PageContainer>
</ServicesDndContextProvider>
</ServicesContextProvider>
</Suspense>
);

26
src/components/dnd-pangea/Droppable/Droppable.tsx Normal file
View File

@ -0,0 +1,26 @@
"use client";
import { FC, ReactNode } from "react";
import {
Droppable as DroppablePangea,
DroppableProps,
} from "@hello-pangea/dnd";
type Props = Omit<DroppableProps, "children"> & {
children: ReactNode;
};
const Droppable: FC<Props> = ({ children, ...restProps }) => (
<DroppablePangea {...restProps}>
{provided => (
<div
{...provided.droppableProps}
ref={provided.innerRef}>
{children}
{provided.placeholder}
</div>
)}
</DroppablePangea>
);
export default Droppable;

42
yarn.lock
View File

@ -1418,6 +1418,13 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.26.7":
version: 7.28.4
resolution: "@babel/runtime@npm:7.28.4"
checksum: 10c0/792ce7af9750fb9b93879cc9d1db175701c4689da890e6ced242ea0207c9da411ccf16dc04e689cc01158b28d7898c40d75598f4559109f761c12ce01e959bf7
languageName: node
linkType: hard
"@babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2":
version: 7.27.2
resolution: "@babel/template@npm:7.27.2"
@ -1950,6 +1957,22 @@ __metadata:
languageName: node
linkType: hard
"@hello-pangea/dnd@npm:^18.0.1":
version: 18.0.1
resolution: "@hello-pangea/dnd@npm:18.0.1"
dependencies:
"@babel/runtime": "npm:^7.26.7"
css-box-model: "npm:^1.2.1"
raf-schd: "npm:^4.0.3"
react-redux: "npm:^9.2.0"
redux: "npm:^5.0.1"
peerDependencies:
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
checksum: 10c0/30c47ac8048f85e5c6d39c0b5a492cf2cc9e5f532cee12c5ecc77688596c8846670be142bd716212db789f161cd769601a5da135fa99ac65824fbb6a07d4d137
languageName: node
linkType: hard
"@hey-api/client-axios@npm:^0.9.1":
version: 0.9.1
resolution: "@hey-api/client-axios@npm:0.9.1"
@ -6123,6 +6146,7 @@ __metadata:
"@dnd-kit/modifiers": "npm:^9.0.0"
"@dnd-kit/sortable": "npm:^10.0.0"
"@eslint/js": "npm:^9.29.0"
"@hello-pangea/dnd": "npm:^18.0.1"
"@hey-api/client-axios": "npm:^0.9.1"
"@hey-api/client-next": "npm:^0.5.1"
"@hey-api/openapi-ts": "npm:^0.80.1"
@ -6230,6 +6254,15 @@ __metadata:
languageName: node
linkType: hard
"css-box-model@npm:^1.2.1":
version: 1.2.1
resolution: "css-box-model@npm:1.2.1"
dependencies:
tiny-invariant: "npm:^1.0.6"
checksum: 10c0/611e56d76b16e4e21956ed9fa53f1936fbbfaccd378659587e9c929f342037fc6c062f8af9447226e11fe7c95e31e6c007a37e592f9bff4c2d40e6915553104a
languageName: node
linkType: hard
"css-functions-list@npm:^3.2.3":
version: 3.2.3
resolution: "css-functions-list@npm:3.2.3"
@ -11629,6 +11662,13 @@ __metadata:
languageName: node
linkType: hard
"raf-schd@npm:^4.0.3":
version: 4.0.3
resolution: "raf-schd@npm:4.0.3"
checksum: 10c0/ecabf0957c05fad059779bddcd992f1a9d3a35dfea439a6f0935c382fcf4f7f7fa60489e467b4c2db357a3665167d2a379782586b59712bb36c766e02824709b
languageName: node
linkType: hard
"randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0":
version: 2.1.0
resolution: "randombytes@npm:2.1.0"
@ -13452,7 +13492,7 @@ __metadata:
languageName: node
linkType: hard
"tiny-invariant@npm:^1.3.3":
"tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.3":
version: 1.3.3
resolution: "tiny-invariant@npm:1.3.3"
checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a