fix: Estimate views.

This commit is contained in:
elforjani3
2020-12-17 15:56:31 +02:00
parent 7a847fc895
commit 19f346beb5
5 changed files with 48 additions and 86 deletions

View File

@@ -3,8 +3,6 @@ import Icon from 'components/Icon';
import { import {
Button, Button,
Classes, Classes,
Menu,
MenuItem,
Popover, Popover,
NavbarDivider, NavbarDivider,
NavbarGroup, NavbarGroup,
@@ -38,7 +36,7 @@ function EstimateActionsBar({
// #withEstimateActions // #withEstimateActions
addEstimatesTableQueries, addEstimatesTableQueries,
changeEstimateView,
// #own Porps // #own Porps
onFilterChanged, onFilterChanged,
selectedRows = [], selectedRows = [],
@@ -52,48 +50,25 @@ function EstimateActionsBar({
history.push('/estimates/new'); history.push('/estimates/new');
}, [history]); }, [history]);
// const filterDropdown = FilterDropdown({
// fields: resourceFields,
// initialCondition: {
// fieldKey: 'estimate_number',
// compatator: 'contains',
// value: '',
// },
// onFilterChange: (filterConditions) => {
// setFilterCount(filterConditions.length || 0);
// addEstimatesTableQueries({
// filter_roles: filterConditions || '',
// });
// onFilterChanged && onFilterChanged(filterConditions);
// },
// });
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [ const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows, selectedRows,
]); ]);
const viewsMenuItems = estimateViews.map((view) => { const handleTabChange = (viewId) => {
return ( changeEstimateView(viewId.id || -1);
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} /> addEstimatesTableQueries({
); custom_view_id: viewId.id || null,
}); });
};
return ( return (
<DashboardActionsBar> <DashboardActionsBar>
<NavbarGroup> <NavbarGroup>
<Popover <DashboardActionViewsList
content={<Menu>{viewsMenuItems}</Menu>} resourceName={'estimates'}
minimal={true} views={estimateViews}
interactionKind={PopoverInteractionKind.HOVER} onChange={handleTabChange}
position={Position.BOTTOM_LEFT} />
>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="table-16" iconSize={16} />}
text={<T id={'table_views'} />}
rightIcon={'caret-down'}
/>
</Popover>
<NavbarDivider /> <NavbarDivider />
<Button <Button
@@ -151,7 +126,7 @@ function EstimateActionsBar({
} }
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
resourceName: 'sales_estimates', resourceName: 'sale_estimate',
}); });
const withEstimateActionsBar = connect(mapStateToProps); const withEstimateActionsBar = connect(mapStateToProps);

View File

@@ -49,18 +49,19 @@ function EstimateList({
const [selectedRows, setSelectedRows] = useState([]); const [selectedRows, setSelectedRows] = useState([]);
// const fetchResourceViews = useQuery( const fetchResourceViews = useQuery(
// ['resource-views', 'sales_estimates'], ['resource-views', 'sale_estimate'],
// (key, resourceName) => requestFetchResourceViews(resourceName), (key, resourceName) => requestFetchResourceViews(resourceName),
// ); );
// const fetchResourceFields = useQuery( const fetchResourceFields = useQuery(
// ['resource-fields', 'sales_estimates'], ['resource-fields', 'sale_estimate'],
// (key, resourceName) => requestFetchResourceFields(resourceName), (key, resourceName) => requestFetchResourceFields(resourceName),
// ); );
const fetchEstimate = useQuery(['estimates-table', estimatesTableQuery], () => const fetchEstimate = useQuery(
requestFetchEstimatesTable(), ['estimates-table', estimatesTableQuery],
(key, _query) => requestFetchEstimatesTable({ ..._query }),
); );
useEffect(() => { useEffect(() => {
@@ -117,7 +118,7 @@ function EstimateList({
queryCache.invalidateQueries('estimates-table'); queryCache.invalidateQueries('estimates-table');
}) })
.catch((error) => { .catch((error) => {
// setDeliverEstimate(false); setDeliverEstimate(false);
}); });
}, [deliverEstimate, requestDeliverdEstimate, formatMessage]); }, [deliverEstimate, requestDeliverdEstimate, formatMessage]);
@@ -145,7 +146,7 @@ function EstimateList({
queryCache.invalidateQueries('estimates-table'); queryCache.invalidateQueries('estimates-table');
}) })
.catch((error) => { .catch((error) => {
// setApproveEstimate(false); setApproveEstimate(false);
}); });
}, [approveEstimate, requestApproveEstimate, formatMessage]); }, [approveEstimate, requestApproveEstimate, formatMessage]);
@@ -176,7 +177,7 @@ function EstimateList({
}, [rejectEstimate, requestRejectEstimate, formatMessage]); }, [rejectEstimate, requestRejectEstimate, formatMessage]);
// Handle filter change to re-fetch data-table. // Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {}, [fetchEstimate]); const handleFilterChanged = useCallback(() => {}, []);
// Calculates the selected rows // Calculates the selected rows
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [ const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
@@ -198,8 +199,8 @@ function EstimateList({
); );
return ( return (
<DashboardInsider <DashboardInsider
// loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching} loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
name={'sales_estimates'} name={'sale_estimate'}
> >
<EstimateActionsBar <EstimateActionsBar
// onBulkDelete={} // onBulkDelete={}

View File

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
import { pick, debounce } from 'lodash'; import { pick, debounce } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
import { useUpdateEffect } from 'hooks';
import withEstimates from './withEstimates'; import withEstimates from './withEstimates';
import withEstimateActions from './withEstimateActions'; import withEstimateActions from './withEstimateActions';
@@ -15,6 +14,9 @@ import withViewDetails from 'containers/Views/withViewDetails';
import { compose } from 'utils'; import { compose } from 'utils';
/**
* Estimates views tabs.
*/
function EstimateViewTabs({ function EstimateViewTabs({
// #withExpenses // #withExpenses
estimateViews, estimateViews,
@@ -37,39 +39,22 @@ function EstimateViewTabs({
const { custom_view_id: customViewId = null } = useParams(); const { custom_view_id: customViewId = null } = useParams();
useEffect(() => { useEffect(() => {
changeEstimateView(customViewId || -1);
setTopbarEditView(customViewId); setTopbarEditView(customViewId);
changePageSubtitle(customViewId && viewItem ? viewItem.name : ''); changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
addEstimatesTableQueries({
custom_view_id: customViewId,
});
return () => {
setTopbarEditView(null);
changePageSubtitle('');
changeEstimateView(null);
};
}, [customViewId, addEstimatesTableQueries, changeEstimateView]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]); }, [customViewId]);
const debounceChangeHistory = useRef(
debounce((toUrl) => {
history.push(toUrl);
}, 250),
);
const handleTabsChange = (viewId) => {
const toPath = viewId ? `${viewId}/custom_view` : '';
debounceChangeHistory.current(`/estimates/${toPath}`);
setTopbarEditView(viewId);
};
const tabs = estimateViews.map((view) => ({ const tabs = estimateViews.map((view) => ({
...pick(view, ['name', 'id']), ...pick(view, ['name', 'id']),
})); }));
const handleTabsChange = (viewId) => {
changeEstimateView(viewId || -1);
addEstimatesTableQueries({
custom_view_id: viewId || null,
});
setTopbarEditView(viewId);
};
// Handle click a new view tab. // Handle click a new view tab.
const handleClickNewView = () => { const handleClickNewView = () => {
setTopbarEditView(null); setTopbarEditView(null);
@@ -81,9 +66,8 @@ function EstimateViewTabs({
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
initialViewId={customViewId} initialViewId={customViewId}
baseUrl={'/estimates'} resourceName={'estimates'}
tabs={tabs} tabs={tabs}
onNewViewTabClick={handleClickNewView}
onChange={handleTabsChange} onChange={handleTabsChange}
/> />
</NavbarGroup> </NavbarGroup>

View File

@@ -20,7 +20,7 @@ export default (mapState) => {
estimatesCurrentPage: getEstimatesItems(state, props, query), estimatesCurrentPage: getEstimatesItems(state, props, query),
estimatesCurrentViewId: getEstimatesCurrentViewId(state, props), estimatesCurrentViewId: getEstimatesCurrentViewId(state, props),
estimateViews: getResourceViews(state, props, 'sales_estimates'), estimateViews: getResourceViews(state, props, 'sale_estimate'),
estimateItems: state.salesEstimates.items, estimateItems: state.salesEstimates.items,
estimatesTableQuery: query, estimatesTableQuery: query,

View File

@@ -92,7 +92,8 @@ export const fetchEstimatesTable = ({ query = {} }) => {
payload: { payload: {
sales_estimates: response.data.sales_estimates, sales_estimates: response.data.sales_estimates,
pagination: response.data.pagination, pagination: response.data.pagination,
customViewId: response.data.customViewId || -1, customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
}, },
}); });
dispatch({ dispatch({
@@ -105,7 +106,8 @@ export const fetchEstimatesTable = ({ query = {} }) => {
type: t.ESTIMATES_PAGINATION_SET, type: t.ESTIMATES_PAGINATION_SET,
payload: { payload: {
pagination: response.data.pagination, pagination: response.data.pagination,
customViewId: response.data.customViewId || -1, customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
}, },
}); });
dispatch({ dispatch({