AssetsSectionHeader.tsx

import * as React from 'react';

import {
    Icon,
    MainSectionLayoutTypes,
    MainSectionLayout,
    Button
} from 'osp-ui-components';
import { FormattedMessage } from 'react-intl';

const { SectionHeader } = MainSectionLayout;
const { HeaderMenu, Section } = SectionHeader;
const HeaderTitle = SectionHeader.Title;
const HeaderMenuItem = HeaderMenu.Item;

export interface AssetsSectionHeaderProps {
    slot: MainSectionLayoutTypes['Slot'];
}

export const AssetsSectionHeader: React.FunctionComponent<
    AssetsSectionHeaderProps
> = () => {
    return (
        <SectionHeader>
            <HeaderTitle>
                <FormattedMessage
                    id="section.assets.header.title"
                    defaultMessage="Assets"
                />
            </HeaderTitle>
            <HeaderMenu defaultSelectedKeys={['1']}>
                <HeaderMenuItem key="1">
                    <Icon type="asset" />
                    <FormattedMessage
                        id="section.assets.header.menu.item.list"
                        defaultMessage="List"
                    />
                </HeaderMenuItem>
            </HeaderMenu>
            <Section>
                <Button type="primary" disabled={true}>
                    <Icon type="export" />
                    <FormattedMessage
                        id="section.issues.header.btn.export"
                        defaultMessage="Export Reports"
                    />
                </Button>
            </Section>
        </SectionHeader>
    );
};

export default AssetsSectionHeader;
import * as React from 'react';

import {
    Icon,
    MainSectionLayoutTypes,
    MainSectionLayout,
    Button,
    Menu,
    Dropdown,
    Notification
} from 'osp-ui-components';
import { FormattedMessage } from 'react-intl';

import { useMutation } from 'react-apollo-hooks';
import { AssetsStore, IAssetsStore } from '../store/assets.store';
//import REPORT_ASSET_EXTENDED from '../queries/reportAssetExtendedMutation';
//import REPORT_ASSET_SUMMARY from '../queries/reportAssetSummaryMutation';

const { useContext } = React;
const { SectionHeader } = MainSectionLayout;
const { HeaderMenu, Section } = SectionHeader;
const HeaderTitle = SectionHeader.Title;
const HeaderMenuItem = HeaderMenu.Item;

export interface AssetsSectionHeaderProps {
    slot: MainSectionLayoutTypes['Slot'];
}

export const AssetsSectionHeader: React.FunctionComponent<
    AssetsSectionHeaderProps
> = () => {
    const { state } = useContext<IAssetsStore>(AssetsStore);
    // const downloadReportExtendedMutation = useMutation(REPORT_ISSUES_EXTENDED, {
    //     context: { clientName: "reports" }
    // });
    
    // const downloadReportSummaryMutation = useMutation(REPORT_ISSUES_SUMMARY, {
    //     context: { clientName: "reports" }
    // });
    // @ts-ignore TODO FIXME Better type on State
    const variables = {
        format: "CSV",  // Temporal
        order_by: state.orderBy
    };

    if(state.statusFilter && state.statusFilter.length > 0) {
        // @ts-ignore TODO FIXME Better type on State
        variables.status_in = state.statusFilter;
    }

    if(state.stackFilter && state.stackFilter.length > 0) {
        // @ts-ignore TODO FIXME Better type on State
        variables.stack_in = state.stackFilter;
    }

    if(state.stackFilter && state.stackFilter.length > 0) {
        // @ts-ignore TODO FIXME Better type on State
        variables.stack_in = state.stackFilter;
    }

    const downloadReport = () => {
        Notification.info({
            message: <span data-cy='NOTIFICATION_TITLE-REPORT_ASSETS_EXTENDED'>
                {'Preparing File...'}</span>,
            description: <span data-cy='NOTIFICATION_DESCRIPTION-REPORT_ASSETS_EXTENDED'>
                We are preparing the Assets Extended report.</span>
        });
        // downloadReportExtendedMutation({
        //     variables,
        //     context: { clientName: "reports" },
        // })
    };

    const downloadReportSummary = () => {
        Notification.info({
            message: <span data-cy='NOTIFICATION_TITLE-REPORT_ASSETS_SUMMARY'>
                {'Preparing File...'}</span>,
            description: <span data-cy='NOTIFICATION_DESCRIPTION-REPORT_ASSETS_SUMMARY'>
                We are preparing the Assets Summary report.</span>
        });
        // downloadReportSummaryMutation({
        //     variables,
        //     context: { clientName: "reports" }
        // })
    };

    return (
        <SectionHeader>
            <HeaderTitle>
                <FormattedMessage
                    id="section.assets.header.title"
                    defaultMessage="Assets"
                />
            </HeaderTitle>
            <HeaderMenu defaultSelectedKeys={['1']}>
                <HeaderMenuItem key="1">
                    <Icon type="asset" />
                    <FormattedMessage
                        id="section.assets.header.menu.item.list"
                        defaultMessage="List"
                    />
                </HeaderMenuItem>
            </HeaderMenu>
            <Section>
                {
                    /* <Button type="primary" disabled={true}>
                        <Icon type="export" />
                        <FormattedMessage
                            id="section.issues.header.btn.export"
                            defaultMessage="Export Reports"
                        />
                
                        </Button>
                    */ 
                }
                <Dropdown
                    mouseEnterDelay={0.15}
                    mouseLeaveDelay={0.1}
                    overlay={<Menu>
                        <Menu.ItemGroup title="General Asset Report">
                            <Menu.Item onClick={downloadReportSummary} >Assets - Summary Report</Menu.Item>
                            <Menu.Item onClick={downloadReport}>Assets - Extended Report</Menu.Item>
                        </Menu.ItemGroup>
                    </Menu>}
                    placement="bottomLeft"
                >
                    <Button type="primary">
                        <Icon type="export" />
                        <span>Export Report</span>
                    </Button>
                </Dropdown>
            </Section>
        </SectionHeader>
    );
};

export default AssetsSectionHeader;