__ __ __ __ _____ _ _ _____ _ _ _
| \/ | \ \ / / | __ \ (_) | | / ____| | | | |
| \ / |_ __\ V / | |__) | __ ___ ____ _| |_ ___ | (___ | |__ ___| | |
| |\/| | '__|> < | ___/ '__| \ \ / / _` | __/ _ \ \___ \| '_ \ / _ \ | |
| | | | |_ / . \ | | | | | |\ V / (_| | || __/ ____) | | | | __/ | |
|_| |_|_(_)_/ \_\ |_| |_| |_| \_/ \__,_|\__\___| |_____/|_| |_|\___V 2.1
if you need WebShell for Seo everyday contact me on Telegram
Telegram Address : @jackleet
For_More_Tools:
import { Button, Flex, Modal, Select, Typography } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import styles from './DeleteArticleGroupModal.module.scss';
import { useState, useEffect } from 'react';
import { deleteArticleCash } from '@/entities/article/api/deleteArticle';
import { deleteGroupArticle } from '@/entities/article/api/deleteGroupArticle';
import checkIcon from "@shared/assets/images/icons/check-test.svg";
const { Text, Title } = Typography;
interface IDeleteArticleGroupModal {
open: boolean;
onCancel: () => void;
onCancelDrawe?: () => void;
projectDetails?: any;
projectId?: number;
options: any;
articleCurrent?: any;
updateTable: any;
optionsArticles: any[]; // Убедитесь, что это массив объектов с id
}
export const DeleteArticleGroupModal = ({
open,
onCancel,
projectDetails,
onCancelDrawe,
optionsArticles,
options,
articleCurrent,
projectId,
updateTable,
}: IDeleteArticleGroupModal) => {
// Состояние для хранения выбранных значений для каждой статьи
const [selectedValues, setSelectedValues] = useState<Record<string, number | null>>({});
const { Option } = Select;
useEffect(() => {
if (open) {
const initialValues: Record<string, number | null> = {};
optionsArticles.forEach(article => {
initialValues[article.id] = null;
});
setSelectedValues(initialValues);
}
}, [open, optionsArticles]);
// Обработчик изменения для конкретной статьи
const handleSelectChange = (articleId: string, value: number) => {
setSelectedValues(prev => ({
...prev,
[articleId]: value
}));
};
const onDelete = async() => {
if(!articleCurrent) return;
// Формируем объект с выбранными значениями
const articlesPayload = optionsArticles.map(article => ({
article_id: parseInt(article.id),
group_id: selectedValues[article.id]
}));
const body = { articles: articlesPayload }
await deleteGroupArticle(articleCurrent, body);
setSelectedValues({})
onCancel();
updateTable();
}
console.log(options, '[]]')
return (
<Modal
centered
open={open}
onCancel={onCancel}
footer={null}
closable={false}
>
<div className={styles.disbandModalContent}>
<Title className={styles.modalTitle}>Удаление группы</Title>
<Flex vertical gap={16}>
<Text className={styles.groupName}>
{projectDetails?.article || 'статья'}
</Text>
<Flex vertical gap={8}>
<Text>Выберите новые группы для вложенных статей:</Text>
<Flex vertical gap={8} style={{ maxHeight: '420px', overflowY: 'auto' }}>
{optionsArticles.map((article, index) => (
<Flex style={{ flexDirection: 'column' }} gap={4} key={index}>
<span style={{ color: '#667085'}}>{article.name}</span>
<Select
placeholder="Выберите группу"
onChange={(value) => handleSelectChange(article.id, value)}
className={styles.select}
value={selectedValues[article.id] || null}
optionLabelProp="label"
optionFilterProp="label"
notFoundContent="Ничего не найдено"
showSearch
allowClear
>
{options.map((item: any) => (
<Option
key={item.value}
value={item.value}
label={item.label}
title={item.label}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: 'calc(100% - 24px)'
}}
>
{item.label}
</span>
{selectedValues[article.id] === item.value && (
<img src={checkIcon} alt="Выбрано" style={{ width: 20, height: 20 }} />
)}
</div>
</Option>
))}
</Select>
</Flex>
))}
</Flex>
</Flex>
<Text className={styles.listItem}>
<InfoCircleOutlined style={{ marginRight: '5px' }} /> Статьи без указания групп попадут в общую группу
</Text>
</Flex>
<Flex gap={32} vertical className={styles.modalFooter}>
<Button onClick={onDelete} className={styles.buttonModalSend}>
Применить
</Button>
<Button className={styles.buttonModal} onClick={onCancel}>
Отменить
</Button>
</Flex>
</div>
</Modal>
)};