mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
Merge branch 'feature/manual-journals' of https://github.com/abouolia/Ratteb
This commit is contained in:
Ahmed Bouhuolia
111
client/src/components/JournalEntry/ManualJournalActionsBar.js
Normal file
111
client/src/components/JournalEntry/ManualJournalActionsBar.js
Normal file
@@ -0,0 +1,111 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
Button,
|
||||
NavbarGroup,
|
||||
Classes,
|
||||
NavbarDivider,
|
||||
MenuItem,
|
||||
Menu,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
Intent
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { useRouteMatch, useHistory } from 'react-router-dom';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import { compose } from 'utils';
|
||||
import FilterDropdown from 'components/FilterDropdown';
|
||||
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
|
||||
import ResourceConnect from 'connectors/Resource.connector';
|
||||
|
||||
function ManualJournalActionsBar({
|
||||
views,
|
||||
getResourceFields,
|
||||
addManualJournalsTableQueries,
|
||||
onFilterChanged
|
||||
}) {
|
||||
const { path } = useRouteMatch();
|
||||
const history = useHistory();
|
||||
|
||||
const manualJournalFields = getResourceFields('manual_journals');
|
||||
const viewsMenuItems = views.map(view => {
|
||||
return (
|
||||
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
|
||||
);
|
||||
});
|
||||
|
||||
const onClickNewManualJournal = () => {
|
||||
history.push('/dashboard/accounting/make-journal-entry');
|
||||
};
|
||||
const filterDropdown = FilterDropdown({
|
||||
fields: manualJournalFields,
|
||||
onFilterChange: filterConditions => {
|
||||
addManualJournalsTableQueries({
|
||||
filter_roles: filterConditions || ''
|
||||
});
|
||||
onFilterChanged && onFilterChanged(filterConditions);
|
||||
}
|
||||
});
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Popover
|
||||
content={<Menu>{viewsMenuItems}</Menu>}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.HOVER}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={<Icon icon='table' />}
|
||||
text='Table Views'
|
||||
rightIcon={'caret-down'}
|
||||
/>
|
||||
</Popover>
|
||||
<NavbarDivider />
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='plus' />}
|
||||
text='New Journal'
|
||||
onClick={onClickNewManualJournal}
|
||||
/>
|
||||
<Popover
|
||||
content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text='Filter'
|
||||
icon={<Icon icon='filter' />}
|
||||
/>
|
||||
</Popover>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='trash' iconSize={15} />}
|
||||
text='Delete'
|
||||
intent={Intent.DANGER}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-import' />}
|
||||
text='Import'
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon='file-export' />}
|
||||
text='Export'
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
ManualJournalsConnect,
|
||||
ResourceConnect
|
||||
)(ManualJournalActionsBar);
|
||||
167
client/src/components/JournalEntry/ManualJournalsDataTable.js
Normal file
167
client/src/components/JournalEntry/ManualJournalsDataTable.js
Normal file
@@ -0,0 +1,167 @@
|
||||
import React, { useEffect, useCallback, useState, useMemo } from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import Icon from 'components/Icon';
|
||||
import { compose } from 'utils';
|
||||
import moment from 'moment';
|
||||
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ViewConnect from 'connectors/View.connector';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import DataTable from 'components/DataTable';
|
||||
import Money from 'components/Money';
|
||||
|
||||
function ManualJournalsDataTable({
|
||||
manualJournals,
|
||||
changeCurrentView,
|
||||
changePageSubtitle,
|
||||
getViewItem,
|
||||
setTopbarEditView,
|
||||
manualJournalsLoading,
|
||||
onFetchData,
|
||||
onEditJournal,
|
||||
onDeleteJournal,
|
||||
onPublishJournal,
|
||||
}) {
|
||||
const { custom_view_id: customViewId } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
const viewMeta = getViewItem(customViewId);
|
||||
|
||||
if (customViewId) {
|
||||
changeCurrentView(customViewId);
|
||||
setTopbarEditView(customViewId);
|
||||
}
|
||||
changePageSubtitle(customViewId && viewMeta ? viewMeta.name : '');
|
||||
}, [customViewId]);
|
||||
|
||||
const actionMenuList = (journal) => (
|
||||
<Menu>
|
||||
<MenuItem text='View Details' />
|
||||
<MenuDivider />
|
||||
{!journal.status && (
|
||||
<MenuItem
|
||||
text="Publish Journal"
|
||||
onClick={() => {
|
||||
onPublishJournal && onPublishJournal(journal);
|
||||
}} />
|
||||
)}
|
||||
<MenuItem
|
||||
text='Edit Journal'
|
||||
onClick={() => {
|
||||
onEditJournal && onEditJournal(journal);
|
||||
}} />
|
||||
<MenuItem
|
||||
text='Delete Journal'
|
||||
intent={Intent.DANGER}
|
||||
onClick={() => {
|
||||
onDeleteJournal && onDeleteJournal(journal);
|
||||
}} />
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const columns = useMemo(() => [
|
||||
{
|
||||
id: 'date',
|
||||
Header: 'Date',
|
||||
accessor: r => moment().format('YYYY-MM-DD'),
|
||||
disableResizing: true,
|
||||
width: 150,
|
||||
className: 'date',
|
||||
},
|
||||
{
|
||||
id: 'amount',
|
||||
Header: 'Amount',
|
||||
accessor: r => (<Money amount={r.amount} currency={'USD'} />),
|
||||
disableResizing: true,
|
||||
className: 'amount',
|
||||
},
|
||||
{
|
||||
id: 'journal_number',
|
||||
Header: 'Journal No.',
|
||||
accessor: 'journal_number',
|
||||
disableResizing: true,
|
||||
className: 'journal_number',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
Header: 'Status',
|
||||
accessor: (r) => {
|
||||
return r.status ? 'Published' : 'Draft';
|
||||
},
|
||||
disableResizing: true,
|
||||
width: 100,
|
||||
className: 'status',
|
||||
},
|
||||
{
|
||||
id: 'note',
|
||||
Header: 'Note',
|
||||
accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
|
||||
disableResizing: true,
|
||||
width: 100,
|
||||
className: 'note',
|
||||
},
|
||||
{
|
||||
id: 'transaction_type',
|
||||
Header: 'Transaction type ',
|
||||
accessor: 'transaction_type',
|
||||
width: 100,
|
||||
className: 'transaction_type',
|
||||
},
|
||||
{
|
||||
id: 'created_at',
|
||||
Header: 'Created At',
|
||||
accessor: r => moment().format('YYYY-MM-DD'),
|
||||
disableResizing: true,
|
||||
width: 150,
|
||||
className: 'created_at',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon='ellipsis-h' />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
], []);
|
||||
|
||||
const handleDataTableFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, [onFetchData]);
|
||||
|
||||
return (
|
||||
<LoadingIndicator loading={manualJournalsLoading} spinnerSize={30}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={manualJournals}
|
||||
onFetchData={handleDataTableFetchData}
|
||||
manualSortBy={true}
|
||||
selectionColumn={true}
|
||||
/>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
DashboardConnect,
|
||||
ViewConnect,
|
||||
ManualJournalsConnect,
|
||||
)(ManualJournalsDataTable);
|
||||
98
client/src/components/JournalEntry/ManualJournalsViewTabs.js
Normal file
98
client/src/components/JournalEntry/ManualJournalsViewTabs.js
Normal file
@@ -0,0 +1,98 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import {
|
||||
Alignment,
|
||||
Navbar,
|
||||
NavbarGroup,
|
||||
Tabs,
|
||||
Tab,
|
||||
Button,
|
||||
} from '@blueprintjs/core';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import Icon from 'components/Icon';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { compose } from 'utils';
|
||||
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import { useUpdateEffect } from 'hooks';
|
||||
|
||||
function ManualJournalsViewTabs({
|
||||
views,
|
||||
manualJournals,
|
||||
setTopbarEditView,
|
||||
customViewChanged,
|
||||
addManualJournalsTableQueries,
|
||||
onViewChanged,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { custom_view_id: customViewId } = useParams();
|
||||
|
||||
const handleClickNewView = () => {
|
||||
setTopbarEditView(null);
|
||||
history.push('/dashboard/custom_views/manual_journals/new');
|
||||
};
|
||||
const handleViewLinkClick = () => {
|
||||
setTopbarEditView(customViewId);
|
||||
};
|
||||
|
||||
useUpdateEffect(() => {
|
||||
customViewChanged && customViewChanged(customViewId);
|
||||
|
||||
addManualJournalsTableQueries({
|
||||
custom_view_id: customViewId || null,
|
||||
});
|
||||
onViewChanged && onViewChanged(customViewId);
|
||||
}, [customViewId]);
|
||||
|
||||
useEffect(() => {
|
||||
addManualJournalsTableQueries({
|
||||
custom_view_id: customViewId,
|
||||
});
|
||||
}, [customViewId]);
|
||||
|
||||
const tabs = views.map((view) => {
|
||||
//FIXME: dashboard/accounting/make-journal-entry
|
||||
|
||||
const baseUrl = '/dashboard/accounting/manual-journals';
|
||||
const link = (
|
||||
<Link
|
||||
to={`${baseUrl}/${view.id}/custom_view`}
|
||||
onClick={handleViewLinkClick}
|
||||
>
|
||||
{view.name}
|
||||
</Link>
|
||||
);
|
||||
return <Tab id={`custom_view_${view.id}`} title={link} />;
|
||||
});
|
||||
|
||||
return (
|
||||
<Navbar className='navbar--dashboard-views'>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<Tabs
|
||||
id='navbar'
|
||||
large={true}
|
||||
selectedTabId={`custom_view_${customViewId}`}
|
||||
className='tabs--dashboard-views'
|
||||
>
|
||||
<Tab
|
||||
id='all'
|
||||
title={
|
||||
<Link to={`/dashboard/accounting/manual-journals`}>All</Link>
|
||||
}
|
||||
/>
|
||||
{tabs}
|
||||
<Button
|
||||
className='button--new-view'
|
||||
icon={<Icon icon='plus' />}
|
||||
onClick={handleClickNewView}
|
||||
/>
|
||||
</Tabs>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
ManualJournalsConnect,
|
||||
DashboardConnect
|
||||
)(ManualJournalsViewTabs);
|
||||
Reference in New Issue
Block a user