125 lines
4.1 KiB
JavaScript
125 lines
4.1 KiB
JavaScript
import { useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { toast } from 'react-toastify';
|
||
import { PrimaryButton } from '../components/common/Buttons/Buttons';
|
||
|
||
// Data for tables
|
||
const tablesData = {
|
||
Form1: [
|
||
{ sheet_name: 'АХР', skip_rows: 2, n_rows: 2, alias: 'AHR' },
|
||
{ sheet_name: 'Смета_2026', skip_rows: 4, n_rows: 4, alias: 'Estimate_2026' },
|
||
{ sheet_name: 'АХР_лимит', skip_rows: 2, n_rows: 2, alias: 'AHR_limit' },
|
||
],
|
||
Form2: [
|
||
{ sheet_name: 'АХР_аренда', skip_rows: 10, n_rows: 4, alias: 'AHR_rent' },
|
||
{ sheet_name: 'АХР_коммунал', skip_rows: 10, n_rows: 4, alias: 'AHR_utilities' },
|
||
{ sheet_name: 'АХР_охрана', skip_rows: 10, n_rows: 4, alias: 'AHR_security' },
|
||
{ sheet_name: 'КВ_П', skip_rows: 6, n_rows: 3, alias: 'KV_P' },
|
||
{ sheet_name: 'Отч.9ф', skip_rows: 8, n_rows: 3, alias: 'Report_9f' },
|
||
{ sheet_name: 'Операц', skip_rows: 6, n_rows: 3, alias: 'Operational' },
|
||
],
|
||
};
|
||
|
||
export default function TablesTest() {
|
||
const navigate = useNavigate();
|
||
const [selectedForm, setSelectedForm] = useState('');
|
||
const [selectedTable, setSelectedTable] = useState('');
|
||
const [availableTables, setAvailableTables] = useState([]);
|
||
const [selectedTableData, setSelectedTableData] = useState(null);
|
||
|
||
// Handle form selection change
|
||
const handleFormChange = (event) => {
|
||
const formValue = event.target.value;
|
||
setSelectedForm(formValue);
|
||
setSelectedTable('');
|
||
setSelectedTableData(null);
|
||
|
||
if (formValue) {
|
||
setAvailableTables(tablesData[formValue] || []);
|
||
} else {
|
||
setAvailableTables([]);
|
||
}
|
||
};
|
||
|
||
const handleTableChange = (event) => {
|
||
const tableValue = event.target.value;
|
||
setSelectedTable(tableValue);
|
||
|
||
if (tableValue) {
|
||
const tableData = availableTables.find((table) => table.alias === tableValue);
|
||
setSelectedTableData(tableData);
|
||
console.log('Selected table data:', tableData);
|
||
} else {
|
||
setSelectedTableData(null);
|
||
}
|
||
};
|
||
|
||
const handleShowClick = () => {
|
||
if (!selectedForm || !selectedTableData) {
|
||
toast.error('Пожалуйста, выберите форму и таблицу');
|
||
return;
|
||
}
|
||
|
||
// Encode the parameters for URL
|
||
const encodedForm = encodeURIComponent(selectedForm);
|
||
const encodedSheetName = encodeURIComponent(selectedTableData.alias);
|
||
|
||
// Navigate to the route with parameters
|
||
navigate(`/tables/${encodedForm}/${encodedSheetName}`);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
|
||
<h2>Выбор формы и таблицы</h2>
|
||
|
||
{/* First dropdown - Form selection */}
|
||
<div style={{ marginBottom: '20px' }}>
|
||
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Выберите форму:</label>
|
||
<select
|
||
value={selectedForm}
|
||
onChange={handleFormChange}
|
||
style={{
|
||
width: '100%',
|
||
padding: '8px 12px',
|
||
borderRadius: '4px',
|
||
border: '1px solid #ccc',
|
||
fontSize: '14px',
|
||
}}>
|
||
<option value=''>-- Выберите форму --</option>
|
||
<option value='Form1'>Форма 1</option>
|
||
<option value='Form2'>Форма 2</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* Second dropdown - Table selection (depends on form) */}
|
||
<div style={{ marginBottom: '20px' }}>
|
||
<label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Выберите таблицу:</label>
|
||
<select
|
||
value={selectedTable}
|
||
onChange={handleTableChange}
|
||
disabled={!selectedForm}
|
||
style={{
|
||
width: '100%',
|
||
padding: '8px 12px',
|
||
borderRadius: '4px',
|
||
border: '1px solid #ccc',
|
||
fontSize: '14px',
|
||
backgroundColor: !selectedForm ? '#f5f5f5' : 'white',
|
||
cursor: !selectedForm ? 'not-allowed' : 'pointer',
|
||
}}>
|
||
<option value=''>-- Выберите таблицу --</option>
|
||
{availableTables.map((table, index) => (
|
||
<option key={index} value={table.alias}>
|
||
{table.sheet_name} ({table.alias})
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<PrimaryButton onClick={handleShowClick}>показать</PrimaryButton>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|