QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Re-shape dashboard icons in 16 and 24 grid.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-06-01 18:22:29 +02:00
parent 2a466ce2da
commit b0d53e4fad
25 changed files with 311 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/containers/Items/ItemCategoriesList.js
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useCallback,useMemo } from 'react';
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from 'react-query';
import { Alert, Intent } from '@blueprintjs/core';
@@ -14,7 +14,7 @@ import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
import withDialog from 'connectors/Dialog.connector';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
import { compose } from 'utils';
@@ -45,11 +45,11 @@ const ItemCategoryList = ({
id
? changePageTitle(formatMessage({ id: 'edit_category_details' }))
: changePageTitle(formatMessage({ id: 'category_list' }));
}, [id,changePageTitle,formatMessage]);
}, [id, changePageTitle, formatMessage]);
const fetchCategories = useQuery(
['items-categories-table', filter],
(key, query) => requestFetchItemCategories(query)
(key, query) => requestFetchItemCategories(query),
);
const handleFilterChanged = useCallback(() => {}, []);
@@ -59,7 +59,7 @@ const ItemCategoryList = ({
(itemCategories) => {
setSelectedRows(itemCategories);
},
[setSelectedRows]
[setSelectedRows],
);
// Handle fetch data of accounts datatable.
@@ -107,7 +107,7 @@ const ItemCategoryList = ({
(itemsCategoriesIds) => {
setBulkDelete(itemsCategoriesIds);
},
[setBulkDelete]
[setBulkDelete],
);
// handle confirm itemCategories bulk delete.
@@ -125,22 +125,20 @@ const ItemCategoryList = ({
.catch((errors) => {
setBulkDelete(false);
});
}, [requestDeleteBulkItemCategories, bulkDelete,formatMessage]);
}, [requestDeleteBulkItemCategories, bulkDelete, formatMessage]);
//Handel cancel itemCategories bulk delete.
const handleCancelBulkDelete =useCallback(()=>{
setBulkDelete(false)
},[])
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
selectedRows,
]);
return (
<DashboardInsider name={'item-category-list'}>
<ItemsCategoryActionsBar
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged}
@@ -153,13 +151,12 @@ const ItemCategoryList = ({
onSelectedRowsChange={handleSelectedRowsChange}
onDeleteCategory={handleDeleteCategory}
loading={tableLoading}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon='trash'
icon="trash"
intent={Intent.DANGER}
isOpen={deleteCategory}
onCancel={handleCancelItemDelete}
@@ -174,8 +171,10 @@ const ItemCategoryList = ({
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
icon='trash'
confirmButtonText={`${formatMessage({
id: 'delete',
})} (${selectedRowsCount})`}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
@@ -183,11 +182,12 @@ const ItemCategoryList = ({
>
<p>
<FormattedHTMLMessage
id={'once_delete_these_item_categories_you_will_not_able_restore_them'}
id={
'once_delete_these_item_categories_you_will_not_able_restore_them'
}
/>
</p>
</Alert>
</DashboardInsider>
);
};

164
client/src/containers/Items/ItemCategoriesTable.js
View File

@@ -1,11 +1,5 @@
import React, { useCallback, useMemo } from 'react';
import {
Button,
Popover,
Menu,
MenuItem,
Position,
} from '@blueprintjs/core';
import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import Icon from 'components/Icon';
@@ -15,7 +9,6 @@ import DataTable from 'components/DataTable';
import withItemCategories from './withItemCategories';
const ItemsCategoryList = ({
// #withItemCategories
categoriesList,
@@ -26,78 +19,103 @@ const ItemsCategoryList = ({
onEditCategory,
onSelectedRowsChange,
}) => {
const {formatMessage} = useIntl();
const { formatMessage } = useIntl();
const handelEditCategory=useCallback((category)=>{onEditCategory(category);},[onEditCategory])
const handleDeleteCategory =useCallback((category)=>{onDeleteCategory(category);},[onDeleteCategory])
const actionMenuList = useCallback((category) => (
<Menu>
<MenuItem
text={<T id={'edit_category'} />}
onClick={() => handelEditCategory(category)} />
<MenuItem
text={<T id={'delete_category'}/>}
onClick={() => handleDeleteCategory(category)}
/>
</Menu>
), [handelEditCategory,handleDeleteCategory]);
const columns = useMemo(() => [
{
id: 'name',
Header: formatMessage({ id:'category_name' }),
accessor: 'name',
width: 150,
const handelEditCategory = useCallback(
(category) => {
onEditCategory(category);
},
{
id: 'description',
Header: formatMessage({ id:'description' }),
accessor: 'description',
className: 'description',
width: 150,
[onEditCategory],
);
const handleDeleteCategory = useCallback(
(category) => {
onDeleteCategory(category);
},
{
id: 'count',
Header: formatMessage({ id:'count' }),
accessor: (r) => r.count || '',
className: 'count',
width: 50,
[onDeleteCategory],
);
const actionMenuList = useCallback(
(category) => (
<Menu>
<MenuItem
text={<T id={'edit_category'} />}
onClick={() => handelEditCategory(category)}
/>
<MenuItem
text={<T id={'delete_category'} />}
onClick={() => handleDeleteCategory(category)}
/>
</Menu>
),
[handelEditCategory, handleDeleteCategory],
);
const columns = useMemo(
() => [
{
id: 'name',
Header: formatMessage({ id: 'category_name' }),
accessor: 'name',
width: 150,
},
{
id: 'description',
Header: formatMessage({ id: 'description' }),
accessor: 'description',
className: 'description',
width: 150,
},
{
id: 'count',
Header: formatMessage({ id: 'count' }),
accessor: (r) => r.count || '',
className: 'count',
width: 50,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: false,
},
],
[actionMenuList, formatMessage],
);
const handelFetchData = useCallback(
(...params) => {
onFetchData && onFetchData(...params);
},
{
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: false
[onFetchData],
);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectedRows.map((s) => s.original));
},
], [actionMenuList,formatMessage]);
const handelFetchData = useCallback((...params) => {
onFetchData && onFetchData(...params);
}, [onFetchData]);
const handleSelectedRowsChange = useCallback((selectedRows) => {
onSelectedRowsChange && onSelectedRowsChange(selectedRows.map(s => s.original));
}, [onSelectedRowsChange]);
const selectionColumn = useMemo(() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}), []);
[onSelectedRowsChange],
);
const selectionColumn = useMemo(
() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}),
[],
);
return (
<LoadingIndicator mount={false} >
<LoadingIndicator mount={false}>
<DataTable
noInitialFetch={true}
columns={columns}
@@ -108,7 +126,7 @@ const ItemsCategoryList = ({
expandable={true}
onSelectedRowsChange={handleSelectedRowsChange}
treeGraph={true}
spinnerProps={{size:30}}
spinnerProps={{ size: 30 }}
/>
</LoadingIndicator>
);

46
client/src/containers/Items/ItemsActionsBar.js
View File

@@ -44,7 +44,6 @@ const ItemsActionsBar = ({
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
));
const onClickNewItem = useCallback(() => {
history.push('/items/new');
}, [history]);
@@ -61,14 +60,13 @@ const ItemsActionsBar = ({
},
});
const onClickNewCategory = useCallback(() => {
openDialog('item-form', {});
}, [openDialog]);
const handleBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
}, [onBulkDelete, selectedRows]);
// const onClickNewCategory = useCallback(() => {
// openDialog('item-form', {});
// }, [openDialog]);
const handleBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
return (
<DashboardActionsBar>
@@ -81,7 +79,7 @@ const ItemsActionsBar = ({
>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon='table' />}
icon={<Icon icon="table-16" iconSize={16} />}
text={<T id={'table_views'} />}
rightIcon={'caret-down'}
/>
@@ -91,17 +89,11 @@ const ItemsActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
icon={<Icon icon="plus" />}
text={<T id={'new_item'} />}
onClick={onClickNewItem}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
text={<T id={'new_category'} />}
onClick={onClickNewCategory}
/>
<NavbarDivider />
<Popover
content={filterDropdown}
@@ -111,21 +103,19 @@ const ItemsActionsBar = ({
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={
filterCount <= 0 ? (
<T id={'filter'} />
) : (
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
)
filterCount <= 0 ?
(<T id={'filter'} />) :
(`${filterCount} ${formatMessage({ id: 'filters_applied' })}`)
}
icon={<Icon icon='filter' />}
icon={<Icon icon="filter-16" iconSize={16} />}
/>
</Popover>
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text={<T id={'delete'}/>}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleBulkDelete}
/>
@@ -133,12 +123,12 @@ const ItemsActionsBar = ({
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
icon={<Icon icon="file-import-16" iconSize={16} />}
text={<T id={'import'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
icon={<Icon icon="file-export-16" iconSize={16} />}
text={<T id={'export'} />}
/>
</NavbarGroup>
@@ -153,5 +143,5 @@ export default compose(
})),
withResourceDetail(({ resourceFields }) => ({
resourceFields,
}))
})),
)(ItemsActionsBar);

2
client/src/containers/Items/ItemsCategoryActionsBar.js
View File

@@ -79,7 +79,7 @@ const ItemsCategoryActionsBar = ({
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
text={ filterCount <= 0 ? <T id={'filter'}/> : `${filterCount} filters applied`}
icon={<Icon icon='filter' />}
icon={<Icon icon='filter-18' iconSize={18} />}
/>
</Popover>

6
client/src/containers/Items/ItemsDataTable.js
View File

@@ -29,9 +29,7 @@ const ItemsDataTable = ({
onFetchData,
onSelectedRowsChange,
}) => {
const {formatMessage} = useIntl();
const { formatMessage } = useIntl();
const [initialMount, setInitialMount] = useState(false);
useEffect(() => {
@@ -106,7 +104,7 @@ const ItemsDataTable = ({
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}>
<Button icon={<Icon icon="ellipsis-h" />} />
<Button icon={<Icon icon='more-h-16' iconSize={16} />} />
</Popover>
),
className: 'actions',