fix: Invoice View.

client/src/containers/Sales/Invoice/InvoiceActionsBar.js

@@ -3,8 +3,6 @@ import Icon from 'components/Icon';
 import {
   Button,
   Classes,
-  Menu,
-  MenuItem,
   Popover,
   NavbarDivider,
   NavbarGroup,
@@ -40,13 +38,12 @@ function InvoiceActionsBar({
 
   // #withInvoiceActions
   addInvoiceTableQueries,
-
+  changeInvoiceView,
   // #own Porps
   onFilterChanged,
   selectedRows = [],
 }) {
   const history = useHistory();
-  const { path } = useRouteMatch();
   const [filterCount, setFilterCount] = useState(0);
   const { formatMessage } = useIntl();
 
@@ -54,10 +51,21 @@ function InvoiceActionsBar({
     history.push('/invoices/new');
   }, [history]);
 
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    selectedRows,
+  ]);
+
+  const handleTabChange = (viewId) => {
+    changeInvoiceView(viewId.id || -1);
+    addInvoiceTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   // const filterDropdown = FilterDropdown({
   //   initialCondition: {
-  //     fieldKey: 'reference_no',
-  //     compatator: 'contains',
+  //     fieldKey: '',
+  //     compatator: '',
   //     value: '',
   //   },
   //   fields: resourceFields,
@@ -69,16 +77,13 @@ function InvoiceActionsBar({
   //   },
   // });
 
-  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    selectedRows,
-  ]);
-
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <DashboardActionViewsList
-          resourceName={'sales_invoices'}
+          resourceName={'invoices'}
           views={invoicesViews}
+          onChange={handleTabChange}
         />
         <NavbarDivider />
         <Button

client/src/containers/Sales/Invoice/InvoiceList.js

@@ -51,18 +51,19 @@ function InvoiceList({
     changePageTitle(formatMessage({ id: 'invoice_list' }));
   }, [changePageTitle, formatMessage]);
 
-  // const fetchResourceViews = useQuery(
-  //   ['resource-views', 'sales_invoices'],
-  //   (key, resourceName) => requestFetchResourceViews(resourceName),
-  // );
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'sale_invoice'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
 
-  // const fetchResourceFields = useQuery(
-  //   ['resource-fields', 'sales_invoices'],
-  //   (key, resourceName) => requestFetchResourceFields(resourceName),
-  // );
+  const fetchResourceFields = useQuery(
+    ['resource-fields', 'sale_invoice'],
+    (key, resourceName) => requestFetchResourceFields(resourceName),
+  );
 
-  const fetchInvoices = useQuery(['invoices-table', invoicesTableQuery], () =>
-    requestFetchInvoiceTable(),
+  const fetchInvoices = useQuery(
+    ['invoices-table', invoicesTableQuery],
+    (key, query) => requestFetchInvoiceTable({ ...query }),
   );
   //handle dalete Invoice
   const handleDeleteInvoice = useCallback(
@@ -139,7 +140,7 @@ function InvoiceList({
   );
   return (
     <DashboardInsider
-      // loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
+      loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
       name={'sales_invoices'}
     >
       <InvoiceActionsBar

client/src/containers/Sales/Invoice/InvoiceViewTabs.js

@@ -15,6 +15,9 @@ import withViewDetails from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
+/**
+ * Invoices views tabs.
+ */
 function InvoiceViewTabs({
   //#withInvoices
   invoicesViews,
@@ -38,54 +41,34 @@ function InvoiceViewTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeInvoiceView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addInvoiceTableQueries({
-      custom_view_id: customViewId,
-    });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeInvoiceView(null);
-    };
-  }, [customViewId, addInvoiceTableQueries, changeInvoiceView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-
-
-  const debounceChangeHistory = useRef(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/invoices/${toPath}`);
-    setTopbarEditView(viewId);
-  };
   const tabs = invoicesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
+  const handleTabsChange = (viewId) => {
+    changeInvoiceView(viewId || -1);
+    addInvoiceTableQueries({
+      custom_view_id: customViewId || null,
+    });
+    setTopbarEditView(viewId);
+  };
+
   // Handle click a new view tab.
   const handleClickNewView = () => {
     setTopbarEditView(null);
     history.push('/custom_views/invoices/new');
   };
-  console.log(invoicesViews, 'invoicesViews');
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/invoices'}
+          resourceName={'invoices'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
           onChange={handleTabsChange}

client/src/containers/Sales/Invoice/withInvoices.js

@@ -25,7 +25,7 @@ export default (mapState) => {
       invoicesCurrentPage: getInvoicesItems(state, props, query),
       invoicesCurrentViewId: getInvoicesCurrentViewId(state, props),
 
-      invoicesViews: getResourceViews(state, props, 'sales_invoices'),
+      invoicesViews: getResourceViews(state, props, 'sale_invoice'),
       invoicesItems: state.salesInvoices.items,
       invoicesTableQuery: query,
       invoicesPageination: getInvoicesPaginationMeta(state, props, query),