File "CashPage.tsx"

Full Path: /var/www/html/gitep_front/src/pages/CashPage/CashPage.tsx
File size: 3.32 KB
MIME-type: text/html
Charset: utf-8

import React, { useEffect, useState } from 'react'
import styles from './CashPage.module.scss'
import { HeaderCash } from './HeaderCash/HederCash'
import { SortableBlock } from './SortableBlock/SortableBlock'
import { Flex } from 'antd'
import { FinanceTable } from './FinanceTable/FinanceTable'
import { exportToFile } from '@/entities/cash/api/exportToFile'
import { fetchAccounts } from "@/entities/account/lib";
import {Helmet} from "react-helmet";

export const CashPage = () => {
    const [segmentTab, setSegmentTab] = useState('period')
    const [segmentDate, setSegmentDate] = useState<"period" | "quarter" | "month" | "days">('period')

    const [visibleArticleIds, setVisibleArticleIds] = useState<number[]>([]);
    const [isEditMode, setIsEditMode] = useState(false);
    const [selectedDate, setSelectedDate] = useState<string>();
    const [selectedStatus, setSelectedStatus] = useState<string>();

    useEffect(() => {
        fetchAccounts();
    }, [])

    const handleSegmentChange = (value: string) => {
        if(value === 'project') {
            setSegmentTab('project')
        } else {
            setSegmentTab('period')
        }
    };
    const segmentChangeDate = (value: string) => {
        if(value === 'period') {
            setSegmentDate('period')
        }
        if(value === 'quarter') {
            setSegmentDate('quarter')
        }
        if(value === 'month') {
            setSegmentDate('month')
        }
        if(value === 'days')  {
            setSegmentDate('days')
        }
      };


    const downloadExcelHadler = async () => {
        if (visibleArticleIds.length > 0) {
            try {
                const { data } = await exportToFile({ articleIds: visibleArticleIds });
                const originalUrl = data.url;

                // const modifiedUrl = originalUrl
                // .replace('gitep.dev-top-it.ru', 'gitep.dev-top-it.ru:8080');
                const relativePath = originalUrl?.split('://')[1]?.split('/').slice(1).join('/');
                const modifiedUrl = originalUrl
                    ? new URL(`/${relativePath}`, import.meta.env.VITE_BASE_URL).href
                    : undefined;
                const encodedUrl = modifiedUrl ? encodeURI(modifiedUrl) : '';

                if (encodedUrl) {
                    window.open(encodedUrl, '_blank');
                }
            } catch (error) {
                console.error('Export error:', error);
            }
        }
    };

    return (
        <div className={styles.wrapper}>
            <Helmet>
                <title>ДДС | Платежи</title>
            </Helmet>
            <HeaderCash segmentTab={segmentTab} downloadExcelHadler={downloadExcelHadler} handleSegmentChange={handleSegmentChange} isEditMode={isEditMode} clickEditPage={() => setIsEditMode(!isEditMode)}/>
            <Flex className={styles.sortable}>
                <SortableBlock setSelectedStatus={setSelectedStatus} selectedStatus={selectedStatus} setSelectedDate={setSelectedDate} selectedDate={selectedDate} segmentPage={segmentTab} segmentTab={segmentDate} handleSegmentChange={segmentChangeDate} />
            </Flex>

            <FinanceTable selectedStatus={selectedStatus} selectedDate={selectedDate} isEditMode={isEditMode} segmentDate={segmentDate} segmentTab={segmentTab} setVisibleArticleIds={setVisibleArticleIds}/>
        </div>
    )
}