serty/rmser
1
0
Fork 0
mirror of https://github.com/serty2005/rmser.git synced 2026-02-04 19:02:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

2801-опция для перетаскивания строк в черновике.

Browse Source 
пофиксил синк накладных
свайп убрал
внешний номер теперь ок
This commit is contained in:
SERTY
2026-01-28 03:58:43 +03:00
parent 326aabd91d
commit a536b3ff3c
10 changed files with 374 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

501
rmser-view/project_context.md
View File

@@ -1,6 +1,6 @@
# ===================================================================
# Полный контекст React Typescript проекта
# Сгенерировано: 2026-01-27 11:40:29
# Сгенерировано: 2026-01-28 02:48:31
# ===================================================================
Это полный дамп исходного кода React Typescript (Vite) проекта.
@@ -5106,6 +5106,7 @@ interface Props {
onDelete: (itemId: string) => void;
isUpdating: boolean;
recommendations?: Recommendation[];
isReordering: boolean;
}
type FieldType = "quantity" | "price" | "sum";
@@ -5117,6 +5118,7 @@ export const DraftItemRow: React.FC<Props> = ({
onDelete,
isUpdating,
recommendations = [],
isReordering,
}) => {
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -5359,224 +5361,228 @@ export const DraftItemRow: React.FC<Props> = ({
return (
<>
<Draggable draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
style={{
...provided.draggableProps.style,
display: "table",
width: "100%",
marginBottom: "8px",
backgroundColor: snapshot.isDragging ? "#e6f7ff" : "transparent",
boxShadow: snapshot.isDragging
? "0 4px 12px rgba(0, 0, 0, 0.15)"
: "none",
borderRadius: "4px",
transition: "background-color 0.2s ease, box-shadow 0.2s ease",
}}
>
<Card
size="small"
style={{
display: "flex",
alignItems: "center",
padding: "12px 16px",
borderLeft: `4px solid ${cardBorderColor}`,
border: snapshot.isDragging
? "2px solid #1890ff"
: "1px solid #d9d9d9",
background: item.product_id ? "#fff" : "#fff1f0",
borderRadius: "4px",
}}
bodyStyle={{ padding: 0 }}
<Draggable draggableId={item.id} index={index} isDragDisabled={!isReordering}>
{(provided, snapshot) => {
const style = {
marginBottom: "8px",
backgroundColor: snapshot.isDragging ? "#e6f7ff" : "transparent",
boxShadow: snapshot.isDragging
? "0 4px 12px rgba(0, 0, 0, 0.15)"
: "none",
borderRadius: "4px",
transition: "background-color 0.2s ease, box-shadow 0.2s ease",
...provided.draggableProps.style,
};
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
style={style}
>
{/* Drag handle - иконка для перетаскивания */}
<div
{...provided.dragHandleProps}
<Card
size="small"
style={{
cursor: "grab",
padding: "4px 8px 4px 0",
color: "#8c8c8c",
display: "flex",
alignItems: "center",
transition: "color 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "#1890ff";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "#8c8c8c";
padding: "12px 16px",
borderLeft: `4px solid ${cardBorderColor}`,
border: snapshot.isDragging
? "2px solid #1890ff"
: "1px solid #d9d9d9",
background: item.product_id ? "#fff" : "#fff1f0",
borderRadius: "4px",
}}
bodyStyle={{ padding: 0 }}
>
<GripVertical size={20} />
</div>
<Flex vertical gap={10} style={{ flex: 1 }}>
<Flex justify="space-between" align="start">
<div style={{ flex: 1 }}>
<Text
type="secondary"
style={{
fontSize: 12,
lineHeight: 1.2,
display: "block",
}}
>
{item.raw_name || "Новая позиция"}
</Text>
{item.raw_amount > 0 && (
<Text
type="secondary"
style={{ fontSize: 10, display: "block" }}
>
(чек: {item.raw_amount} x {item.raw_price})
</Text>
)}
</div>
{/* Drag handle - иконка для перетаскивания (показываем только в режиме перетаскивания) */}
{isReordering && (
<div
{...provided.dragHandleProps}
style={{
marginLeft: 8,
cursor: "grab",
padding: "4px 8px 4px 0",
color: "#8c8c8c",
display: "flex",
alignItems: "center",
gap: 6,
transition: "color 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "#1890ff";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "#8c8c8c";
}}
>
{isUpdating && (
<SyncOutlined spin style={{ color: "#1890ff" }} />
)}
{activeWarning && (
<WarningFilled
style={{
color: "#faad14",
fontSize: 16,
cursor: "pointer",
}}
onClick={showWarningModal}
/>
)}
{!item.product_id && (
<Tag color="error" style={{ margin: 0 }}>
?
</Tag>
)}
<Popconfirm
title="Удалить строку?"
onConfirm={() => onDelete(item.id)}
okText="Да"
cancelText="Нет"
placement="left"
>
<Button
type="text"
size="small"
icon={<DeleteOutlined />}
danger
style={{ marginLeft: 4 }}
/>
</Popconfirm>
<GripVertical size={20} />
</div>
</Flex>
<CatalogSelect
value={item.product_id || undefined}
onChange={handleProductChange}
initialProduct={activeProduct}
/>
{activeProduct && (
<Select
style={{ width: "100%" }}
placeholder="Выберите единицу измерения"
options={containerOptions}
value={item.container_id || "BASE_UNIT"}
onChange={handleContainerChange}
dropdownRender={(menu) => (
<>
{menu}
<Divider style={{ margin: "4px 0" }} />
<Button
type="text"
block
icon={<PlusOutlined />}
onClick={() => setIsModalOpen(true)}
style={{ textAlign: "left" }}
>
Добавить фасовку...
</Button>
</>
)}
/>
)}
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
background: "#fafafa",
margin: "0 -12px -12px -12px",
padding: "8px 12px",
borderTop: "1px solid #f0f0f0",
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
}}
>
<Flex vertical gap={10} style={{ flex: 1 }}>
<Flex justify="space-between" align="start">
<div style={{ flex: 1 }}>
<Text
type="secondary"
style={{
fontSize: 12,
lineHeight: 1.2,
display: "block",
}}
>
{item.raw_name || "Новая позиция"}
</Text>
{item.raw_amount > 0 && (
<Text
type="secondary"
style={{ fontSize: 10, display: "block" }}
>
(чек: {item.raw_amount} x {item.raw_price})
</Text>
)}
</div>
<div
style={{
marginLeft: 8,
display: "flex",
alignItems: "center",
gap: 6,
}}
>
{isUpdating && (
<SyncOutlined spin style={{ color: "#1890ff" }} />
)}
{activeWarning && (
<WarningFilled
style={{
color: "#faad14",
fontSize: 16,
cursor: "pointer",
}}
onClick={showWarningModal}
/>
)}
{!item.product_id && (
<Tag color="error" style={{ margin: 0 }}>
?
</Tag>
)}
<Popconfirm
title="Удалить строку?"
onConfirm={() => onDelete(item.id)}
okText="Да"
cancelText="Нет"
placement="left"
>
<Button
type="text"
size="small"
icon={<DeleteOutlined />}
danger
style={{ marginLeft: 4 }}
/>
</Popconfirm>
</div>
</Flex>
<CatalogSelect
value={item.product_id || undefined}
onChange={handleProductChange}
initialProduct={activeProduct}
/>
{activeProduct && (
<Select
style={{ width: "100%" }}
placeholder="Выберите единицу измерения"
options={containerOptions}
value={item.container_id || "BASE_UNIT"}
onChange={handleContainerChange}
dropdownRender={(menu) => (
<>
{menu}
<Divider style={{ margin: "4px 0" }} />
<Button
type="text"
block
icon={<PlusOutlined />}
onClick={() => setIsModalOpen(true)}
style={{ textAlign: "left" }}
>
Добавить фасовку...
</Button>
</>
)}
/>
)}
<div
style={{
display: "flex",
gap: 8,
alignItems: "center",
flex: 1,
justifyContent: "space-between",
background: "#fafafa",
margin: "0 -12px -12px -12px",
padding: "8px 12px",
borderTop: "1px solid #f0f0f0",
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
}}
>
<InputNumber
style={{ width: 70 }}
controls={false}
placeholder="Кол"
min={0}
value={localQty}
onChange={(val) => handleValueChange("quantity", val)}
onBlur={() => handleBlur("quantity")}
precision={3}
/>
<Text type="secondary">x</Text>
<InputNumber
style={{ width: 80 }}
controls={false}
placeholder="Цена"
min={0}
value={localPrice}
onChange={(val) => handleValueChange("price", val)}
onBlur={() => handleBlur("price")}
precision={2}
/>
</div>
<div
style={{
display: "flex",
gap: 8,
alignItems: "center",
flex: 1,
}}
>
<InputNumber
style={{ width: 70 }}
controls={false}
placeholder="Кол"
min={0}
value={localQty}
onChange={(val) => handleValueChange("quantity", val)}
onBlur={() => handleBlur("quantity")}
precision={3}
/>
<Text type="secondary">x</Text>
<InputNumber
style={{ width: 80 }}
controls={false}
placeholder="Цена"
min={0}
value={localPrice}
onChange={(val) => handleValueChange("price", val)}
onBlur={() => handleBlur("price")}
precision={2}
/>
</div>
<div
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<Text type="secondary">=</Text>
<InputNumber
style={{ width: 90, fontWeight: "bold" }}
controls={false}
placeholder="Сумма"
min={0}
value={localSum}
onChange={(val) => handleValueChange("sum", val)}
onBlur={() => handleBlur("sum")}
precision={2}
/>
<div
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<Text type="secondary">=</Text>
<InputNumber
style={{ width: 90, fontWeight: "bold" }}
controls={false}
placeholder="Сумма"
min={0}
value={localSum}
onChange={(val) => handleValueChange("sum", val)}
onBlur={() => handleBlur("sum")}
precision={2}
/>
</div>
</div>
</div>
</Flex>
</Card>
</div>
)}
</Flex>
</Card>
</div>
);
}}
</Draggable>
{activeProduct && (
<CreateContainerModal
@@ -7135,7 +7141,7 @@ export const Dashboard: React.FC = () => {
```
// src/pages/DraftsList.tsx
import React, { useState, useMemo, useCallback, useRef } from "react";
import React, { useState, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import {
List,
@@ -7209,9 +7215,6 @@ export const DraftsList: React.FC = () => {
);
const [endDate, setEndDate] = useState<dayjs.Dayjs | null>(dayjs());
const touchStartX = useRef<number>(0);
const touchEndX = useRef<number>(0);
const {
data: invoices,
isLoading,
@@ -7316,14 +7319,6 @@ export const DraftsList: React.FC = () => {
setCurrentPage(1);
};
const handleTouchStart = useCallback((e: React.TouchEvent) => {
touchStartX.current = e.changedTouches[0].screenX;
}, []);
const handleTouchMove = useCallback((e: React.TouchEvent) => {
touchEndX.current = e.changedTouches[0].screenX;
}, []);
const getItemDate = (item: UnifiedInvoice) =>
item.type === "DRAFT" ? item.created_at : item.date_incoming;
@@ -7361,21 +7356,6 @@ export const DraftsList: React.FC = () => {
return result;
}, [invoices, filterType]);
const handleTouchEnd = useCallback(() => {
const diff = touchStartX.current - touchEndX.current;
const totalPages = Math.ceil(
(filteredAndSortedInvoices.length || 0) / pageSize
);
if (Math.abs(diff) > 50) {
if (diff > 0 && currentPage < totalPages) {
setCurrentPage((prev) => prev + 1);
} else if (diff < 0 && currentPage > 1) {
setCurrentPage((prev) => prev - 1);
}
}
}, [currentPage, pageSize, filteredAndSortedInvoices]);
const paginatedInvoices = useMemo(() => {
const startIndex = (currentPage - 1) * pageSize;
return filteredAndSortedInvoices.slice(startIndex, startIndex + pageSize);
@@ -7482,11 +7462,7 @@ export const DraftsList: React.FC = () => {
<Empty description="Нет данных" />
) : (
<>
<div
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
>
<div>
{Object.entries(groupedInvoices).map(([dateKey, items]) => (
<div key={dateKey}>
<DayDivider date={dateKey} />
@@ -7707,6 +7683,7 @@ import {
RestOutlined,
PlusOutlined,
FileImageOutlined,
SwapOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { api, getStaticUrl } from "../services/api";
@@ -7730,6 +7707,8 @@ export const InvoiceDraftPage: React.FC = () => {
const [updatingItems, setUpdatingItems] = useState<Set<string>>(new Set());
const [itemsOrder, setItemsOrder] = useState<Record<string, number>>({});
const [isDragging, setIsDragging] = useState(false);
const [isReordering, setIsReordering] = useState(false);
// Состояние для просмотра фото чека
const [previewVisible, setPreviewVisible] = useState(false);
@@ -7752,6 +7731,7 @@ export const InvoiceDraftPage: React.FC = () => {
queryFn: () => api.getDraft(id!),
enabled: !!id,
refetchInterval: (query) => {
if (isDragging) return false;
const status = query.state.data?.status;
return status === "PROCESSING" ? 3000 : false;
},
@@ -7849,6 +7829,7 @@ export const InvoiceDraftPage: React.FC = () => {
});
// --- ЭФФЕКТЫ ---
useEffect(() => {
if (draft) {
const currentValues = form.getFieldsValue();
@@ -7939,7 +7920,12 @@ export const InvoiceDraftPage: React.FC = () => {
});
};
const handleDragStart = () => {
setIsDragging(true);
};
const handleDragEnd = async (result: DropResult) => {
setIsDragging(false);
const { source, destination } = result;
// Если нет назначения или позиция не изменилась
@@ -8059,7 +8045,7 @@ export const InvoiceDraftPage: React.FC = () => {
</div>
</div>
{/* Правая часть хедера: Кнопка чека и Кнопка удаления */}
{/* Правая часть хедера: Кнопка чека, Кнопка перетаскивания и Кнопка удаления */}
<div style={{ display: "flex", gap: 8 }}>
{/* Кнопка просмотра чека (только если есть URL) */}
{draft.photo_url && (
@@ -8072,6 +8058,16 @@ export const InvoiceDraftPage: React.FC = () => {
</Button>
)}
{/* Кнопка переключения режима перетаскивания */}
<Button
type={isReordering ? "primary" : "default"}
icon={<SwapOutlined rotate={90} />}
onClick={() => setIsReordering(!isReordering)}
size="small"
>
{isReordering ? "Ок" : ""}
</Button>
<Button
danger={isCanceled}
type={isCanceled ? "primary" : "default"}
@@ -8195,7 +8191,7 @@ export const InvoiceDraftPage: React.FC = () => {
</div>
{/* Items List */}
<DragDropContext onDragEnd={handleDragEnd}>
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="draft-items">
{(provided, snapshot) => (
<div
@@ -8222,6 +8218,7 @@ export const InvoiceDraftPage: React.FC = () => {
onDelete={(itemId) => deleteItemMutation.mutate(itemId)}
isUpdating={updatingItems.has(item.id)}
recommendations={recommendationsQuery.data || []}
isReordering={isReordering}
/>
))}
{provided.placeholder}
@@ -8700,6 +8697,7 @@ import {
Spin,
message,
Tabs,
Popconfirm,
} from "antd";
import {
SaveOutlined,
@@ -8758,6 +8756,17 @@ export const SettingsPage: React.FC = () => {
},
});
const deleteAllDraftsMutation = useMutation({
mutationFn: () => api.deleteAllDrafts(),
onSuccess: (data) => {
message.success(`Удалено черновиков: ${data.count}`);
queryClient.invalidateQueries({ queryKey: ["stats"] });
},
onError: () => {
message.error("Не удалось удалить черновики");
},
});
// --- Эффекты ---
useEffect(() => {
@@ -8871,6 +8880,33 @@ export const SettingsPage: React.FC = () => {
>
Сохранить настройки
</Button>
{currentUserRole === "OWNER" && (
<Card
size="small"
style={{
marginTop: 24,
borderColor: "#ff4d4f",
borderWidth: 2,
}}
>
<Title level={5} style={{ color: "#ff4d4f", marginBottom: 16 }}>
Опасная зона
</Title>
<Popconfirm
title="Вы уверены?"
description="Это удалит ВСЕ черновики, которые еще не были отправлены в iiko. Это действие необратимо."
onConfirm={() => deleteAllDraftsMutation.mutate()}
okText="Удалить"
cancelText="Отмена"
okButtonProps={{ danger: true }}
>
<Button danger block loading={deleteAllDraftsMutation.isPending}>
Удалить все черновики
</Button>
</Popconfirm>
</Card>
)}
</Form>
);
@@ -9193,6 +9229,11 @@ export const api = {
deleteDraft: async (id: string): Promise<void> => {
await apiClient.delete(`/drafts/${id}`);
},
deleteAllDrafts: async (): Promise<{ count: number }> => {
const { data } = await apiClient.delete<{ count: number }>('/drafts');
return data;
},
// --- Настройки и Статистика ---

46
rmser-view/src/components/invoices/DraftItemRow.tsx
View File

@@ -38,6 +38,7 @@ interface Props {
onDelete: (itemId: string) => void;
isUpdating: boolean;
recommendations?: Recommendation[];
isReordering: boolean;
}
type FieldType = "quantity" | "price" | "sum";
@@ -49,6 +50,7 @@ export const DraftItemRow: React.FC<Props> = ({
onDelete,
isUpdating,
recommendations = [],
isReordering,
}) => {
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -291,7 +293,7 @@ export const DraftItemRow: React.FC<Props> = ({
return (
<>
<Draggable draggableId={item.id} index={index}>
<Draggable draggableId={item.id} index={index} isDragDisabled={!isReordering}>
{(provided, snapshot) => {
const style = {
marginBottom: "8px",
@@ -325,26 +327,28 @@ export const DraftItemRow: React.FC<Props> = ({
}}
bodyStyle={{ padding: 0 }}
>
{/* Drag handle - иконка для перетаскивания */}
<div
{...provided.dragHandleProps}
style={{
cursor: "grab",
padding: "4px 8px 4px 0",
color: "#8c8c8c",
display: "flex",
alignItems: "center",
transition: "color 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "#1890ff";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "#8c8c8c";
}}
>
<GripVertical size={20} />
</div>
{/* Drag handle - иконка для перетаскивания (показываем только в режиме перетаскивания) */}
{isReordering && (
<div
{...provided.dragHandleProps}
style={{
cursor: "grab",
padding: "4px 8px 4px 0",
color: "#8c8c8c",
display: "flex",
alignItems: "center",
transition: "color 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = "#1890ff";
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = "#8c8c8c";
}}
>
<GripVertical size={20} />
</div>
)}
<Flex vertical gap={10} style={{ flex: 1 }}>
<Flex justify="space-between" align="start">

34
rmser-view/src/pages/DraftsList.tsx
View File

@@ -1,6 +1,6 @@
// src/pages/DraftsList.tsx
import React, { useState, useMemo, useCallback, useRef } from "react";
import React, { useState, useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import {
List,
@@ -74,9 +74,6 @@ export const DraftsList: React.FC = () => {
);
const [endDate, setEndDate] = useState<dayjs.Dayjs | null>(dayjs());
const touchStartX = useRef<number>(0);
const touchEndX = useRef<number>(0);
const {
data: invoices,
isLoading,
@@ -181,14 +178,6 @@ export const DraftsList: React.FC = () => {
setCurrentPage(1);
};
const handleTouchStart = useCallback((e: React.TouchEvent) => {
touchStartX.current = e.changedTouches[0].screenX;
}, []);
const handleTouchMove = useCallback((e: React.TouchEvent) => {
touchEndX.current = e.changedTouches[0].screenX;
}, []);
const getItemDate = (item: UnifiedInvoice) =>
item.type === "DRAFT" ? item.created_at : item.date_incoming;
@@ -226,21 +215,6 @@ export const DraftsList: React.FC = () => {
return result;
}, [invoices, filterType]);
const handleTouchEnd = useCallback(() => {
const diff = touchStartX.current - touchEndX.current;
const totalPages = Math.ceil(
(filteredAndSortedInvoices.length || 0) / pageSize
);
if (Math.abs(diff) > 50) {
if (diff > 0 && currentPage < totalPages) {
setCurrentPage((prev) => prev + 1);
} else if (diff < 0 && currentPage > 1) {
setCurrentPage((prev) => prev - 1);
}
}
}, [currentPage, pageSize, filteredAndSortedInvoices]);
const paginatedInvoices = useMemo(() => {
const startIndex = (currentPage - 1) * pageSize;
return filteredAndSortedInvoices.slice(startIndex, startIndex + pageSize);
@@ -347,11 +321,7 @@ export const DraftsList: React.FC = () => {
<Empty description="Нет данных" />
) : (
<>
<div
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
>
<div>
{Object.entries(groupedInvoices).map(([dateKey, items]) => (
<div key={dateKey}>
<DayDivider date={dateKey} />

15
rmser-view/src/pages/InvoiceDraftPage.tsx
View File

@@ -26,6 +26,7 @@ import {
RestOutlined,
PlusOutlined,
FileImageOutlined,
SwapOutlined,
} from "@ant-design/icons";
import dayjs from "dayjs";
import { api, getStaticUrl } from "../services/api";
@@ -50,6 +51,7 @@ export const InvoiceDraftPage: React.FC = () => {
const [updatingItems, setUpdatingItems] = useState<Set<string>>(new Set());
const [itemsOrder, setItemsOrder] = useState<Record<string, number>>({});
const [isDragging, setIsDragging] = useState(false);
const [isReordering, setIsReordering] = useState(false);
// Состояние для просмотра фото чека
const [previewVisible, setPreviewVisible] = useState(false);
@@ -386,7 +388,7 @@ export const InvoiceDraftPage: React.FC = () => {
</div>
</div>
{/* Правая часть хедера: Кнопка чека и Кнопка удаления */}
{/* Правая часть хедера: Кнопка чека, Кнопка перетаскивания и Кнопка удаления */}
<div style={{ display: "flex", gap: 8 }}>
{/* Кнопка просмотра чека (только если есть URL) */}
{draft.photo_url && (
@@ -399,6 +401,16 @@ export const InvoiceDraftPage: React.FC = () => {
</Button>
)}
{/* Кнопка переключения режима перетаскивания */}
<Button
type={isReordering ? "primary" : "default"}
icon={<SwapOutlined rotate={90} />}
onClick={() => setIsReordering(!isReordering)}
size="small"
>
{isReordering ? "Ок" : ""}
</Button>
<Button
danger={isCanceled}
type={isCanceled ? "primary" : "default"}
@@ -549,6 +561,7 @@ export const InvoiceDraftPage: React.FC = () => {
onDelete={(itemId) => deleteItemMutation.mutate(itemId)}
isUpdating={updatingItems.has(item.id)}
recommendations={recommendationsQuery.data || []}
isReordering={isReordering}
/>
))}
{provided.placeholder}

39
rmser-view/src/pages/SettingsPage.tsx
View File

@@ -13,6 +13,7 @@ import {
Spin,
message,
Tabs,
Popconfirm,
} from "antd";
import {
SaveOutlined,
@@ -71,6 +72,17 @@ export const SettingsPage: React.FC = () => {
},
});
const deleteAllDraftsMutation = useMutation({
mutationFn: () => api.deleteAllDrafts(),
onSuccess: (data) => {
message.success(`Удалено черновиков: ${data.count}`);
queryClient.invalidateQueries({ queryKey: ["stats"] });
},
onError: () => {
message.error("Не удалось удалить черновики");
},
});
// --- Эффекты ---
useEffect(() => {
@@ -184,6 +196,33 @@ export const SettingsPage: React.FC = () => {
>
Сохранить настройки
</Button>
{currentUserRole === "OWNER" && (
<Card
size="small"
style={{
marginTop: 24,
borderColor: "#ff4d4f",
borderWidth: 2,
}}
>
<Title level={5} style={{ color: "#ff4d4f", marginBottom: 16 }}>
Опасная зона
</Title>
<Popconfirm
title="Вы уверены?"
description="Это удалит ВСЕ черновики, которые еще не были отправлены в iiko. Это действие необратимо."
onConfirm={() => deleteAllDraftsMutation.mutate()}
okText="Удалить"
cancelText="Отмена"
okButtonProps={{ danger: true }}
>
<Button danger block loading={deleteAllDraftsMutation.isPending}>
Удалить все черновики
</Button>
</Popconfirm>
</Card>
)}
</Form>
);

5
rmser-view/src/services/api.ts
View File

@@ -221,6 +221,11 @@ export const api = {
deleteDraft: async (id: string): Promise<void> => {
await apiClient.delete(`/drafts/${id}`);
},
deleteAllDrafts: async (): Promise<{ count: number }> => {
const { data } = await apiClient.delete<{ count: number }>('/drafts');
return data;
},
// --- Настройки и Статистика ---