+
);
diff --git a/src/containers/Dialogs/BranchFormDialog/index.js b/src/containers/Dialogs/BranchFormDialog/index.js
index fca572330..f5b611148 100644
--- a/src/containers/Dialogs/BranchFormDialog/index.js
+++ b/src/containers/Dialogs/BranchFormDialog/index.js
@@ -12,18 +12,28 @@ const BranchFormDialogContent = React.lazy(() =>
/**
* Branch form form dialog.
*/
-function BranchFormDialog({ dialogName, payload = {}, isOpen }) {
+function BranchFormDialog({
+ dialogName,
+ payload: { branchId, action },
+ isOpen,
+}) {
return (
}
+ title={
+ action === 'edit' ? (
+
+ ) : (
+
+ )
+ }
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
className={'dialog--branch-form'}
>
-
+
);
diff --git a/src/containers/Preferences/Branches/BranchesActions.js b/src/containers/Preferences/Branches/BranchesActions.js
index a73c4bb93..a59309d69 100644
--- a/src/containers/Preferences/Branches/BranchesActions.js
+++ b/src/containers/Preferences/Branches/BranchesActions.js
@@ -20,7 +20,7 @@ function BranchesActions({
onClick={handleClickNewBranche}
intent={Intent.PRIMARY}
>
-
+
);
diff --git a/src/containers/Preferences/Branches/BranchesAlerts.js b/src/containers/Preferences/Branches/BranchesAlerts.js
new file mode 100644
index 000000000..c444030db
--- /dev/null
+++ b/src/containers/Preferences/Branches/BranchesAlerts.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BranchDeleteAlert = React.lazy(() =>
+ import('../../Alerts/Branches/BranchDeleteAlert'),
+);
+
+export default [{ name: 'branch-delete', component: BranchDeleteAlert }];
diff --git a/src/containers/Preferences/Branches/BranchesDataTable.js b/src/containers/Preferences/Branches/BranchesDataTable.js
index 91e992a10..2f238fafa 100644
--- a/src/containers/Preferences/Branches/BranchesDataTable.js
+++ b/src/containers/Preferences/Branches/BranchesDataTable.js
@@ -4,8 +4,11 @@ import styled from 'styled-components';
import { DataTable } from 'components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import { useBranchesTableColumns, ActionsMenu } from './components';
+import { useBranchesContext } from './BranchesProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
import { compose } from 'utils';
/**
@@ -14,23 +17,42 @@ import { compose } from 'utils';
function BranchesDataTable({
// #withDialogAction
openDialog,
+
+ // #withAlertActions
+ openAlert,
}) {
// Table columns.
const columns = useBranchesTableColumns();
+ const { branches, isBranchesLoading, isBranchesFetching } =
+ useBranchesContext();
+
+ const handleEditBranch = ({ id }) => {
+ openDialog('branch-form', { branchId: id, action: 'edit' });
+ };
+
+ const handleDeleteBranch = ({ id }) => {
+ openAlert('branch-delete', { branchId: id });
+ };
+
return (
);
}
-export default compose(withDialogActions)(BranchesDataTable);
+export default compose(withDialogActions, withAlertActions)(BranchesDataTable);
const BranchesTable = styled(DataTable)``;
diff --git a/src/containers/Preferences/Branches/BranchesProvider.js b/src/containers/Preferences/Branches/BranchesProvider.js
index a8fdea708..eb6f47f3a 100644
--- a/src/containers/Preferences/Branches/BranchesProvider.js
+++ b/src/containers/Preferences/Branches/BranchesProvider.js
@@ -3,6 +3,8 @@ import styled from 'styled-components';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { Card } from 'components';
+import { useBranches } from 'hooks/query';
+import PreferencesPageLoader from '../PreferencesPageLoader';
const BranchesContext = React.createContext();
@@ -10,8 +12,19 @@ const BranchesContext = React.createContext();
* Branches data provider.
*/
function BranchesProvider({ ...props }) {
+ // Fetches the branches list.
+ const {
+ isLoading: isBranchesLoading,
+ isFetching: isBranchesFetching,
+ data: branches,
+ } = useBranches();
+
// Provider state.
- const provider = {};
+ const provider = {
+ branches,
+ isBranchesLoading,
+ isBranchesFetching,
+ };
return (
[
{
- id: 'branch_name',
+ id: 'name',
Header: intl.get('branches.column.branch_name'),
- accessor: 'branch_name',
- className: 'branch_name',
+ accessor: 'name',
+ className: 'name',
width: '120',
disableSortBy: true,
textOverview: true,
},
+ {
+ id: 'code',
+ Header: intl.get('branches.column.code'),
+ accessor: 'code',
+ className: 'code',
+ width: '100',
+ disableSortBy: true,
+ textOverview: true,
+ },
{
Header: intl.get('branches.column.address'),
accessor: 'address',
diff --git a/src/hooks/query/branches.js b/src/hooks/query/branches.js
new file mode 100644
index 000000000..b4cbb7daf
--- /dev/null
+++ b/src/hooks/query/branches.js
@@ -0,0 +1,99 @@
+import { useQueryClient, useMutation } from 'react-query';
+import { useRequestQuery } from '../useQueryRequest';
+import useApiRequest from '../useRequest';
+import t from './types';
+
+// Common invalidate queries.
+const commonInvalidateQueries = (queryClient) => {
+ // Invalidate warehouses.
+ queryClient.invalidateQueries(t.BRANCHES);
+ queryClient.invalidateQueries(t.BRANCH);
+};
+
+/**
+ * Create a new branch.
+ */
+export function useCreateBranch(props) {
+ const queryClient = useQueryClient();
+ const apiRequest = useApiRequest();
+
+ return useMutation((values) => apiRequest.post('branches', values), {
+ onSuccess: (res, values) => {
+ // Common invalidate queries.
+ commonInvalidateQueries(queryClient);
+ },
+ ...props,
+ });
+}
+
+/**
+ * Edits the given branch.
+ */
+export function useEditBranch(props) {
+ const queryClient = useQueryClient();
+ const apiRequest = useApiRequest();
+
+ return useMutation(
+ ([id, values]) => apiRequest.post(`branches/${id}`, values),
+ {
+ onSuccess: (res, [id, values]) => {
+ // Invalidate specific branch.
+ queryClient.invalidateQueries([t.BRANCH, id]);
+
+ // Common invalidate queries.
+ commonInvalidateQueries(queryClient);
+ },
+ ...props,
+ },
+ );
+}
+
+/**
+ * Deletes the given branch.
+ */
+export function useDeleteBranch(props) {
+ const queryClient = useQueryClient();
+ const apiRequest = useApiRequest();
+
+ return useMutation((id) => apiRequest.delete(`branches/${id}`), {
+ onSuccess: (res, id) => {
+ // Invalidate specific branch.
+ queryClient.invalidateQueries([t.BRANCH, id]);
+
+ // Common invalidate queries.
+ commonInvalidateQueries(queryClient);
+ },
+ ...props,
+ });
+}
+
+/**
+ * Retrieve Branches list.
+ */
+export function useBranches(query, props) {
+ return useRequestQuery(
+ [t.BRANCHES, query],
+ { method: 'get', url: 'branches', params: query },
+ {
+ select: (res) => res.data.branches,
+ defaultData: [],
+ ...props,
+ },
+ );
+}
+
+/**
+ * Retrieve the branch details.
+ * @param {number}
+ */
+export function useBranch(id, props, requestProps) {
+ return useRequestQuery(
+ [t.BRANCH, id],
+ { method: 'get', url: `branches/${id}`, ...requestProps },
+ {
+ select: (res) => res.data.branch,
+ defaultData: {},
+ ...props,
+ },
+ );
+}
diff --git a/src/hooks/query/index.js b/src/hooks/query/index.js
index 629f4f1b4..433717958 100644
--- a/src/hooks/query/index.js
+++ b/src/hooks/query/index.js
@@ -33,3 +33,4 @@ export * from './roles';
export * from './creditNote';
export * from './vendorCredit';
export * from './transactionsLocking';
+export * from './branches';
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index d98f99db8..afa6a21ef 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -191,6 +191,11 @@ const TARNSACTIONS_LOCKING = {
TRANSACTIONS_LOCKING: 'TRANSACTIONS_LOCKING',
};
+const BRANCHES = {
+ BRANCHES: 'BRANCHES',
+ BRANCH: 'BRANCH',
+};
+
export default {
...ACCOUNTS,
...BILLS,
@@ -218,4 +223,5 @@ export default {
...CREDIT_NOTES,
...VENDOR_CREDIT_NOTES,
...TARNSACTIONS_LOCKING,
+ ...BRANCHES,
};
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index eb7b674b3..c61dcb604 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1750,20 +1750,25 @@
"credit_note_preview.dialog.title": "Credit Note PDF Preview",
"payment_receive_preview.dialog.title": "Payment Receive PDF Preview",
"branches.label": "Branches",
- "branches.label.new_branche": "New Branch",
+ "branches.label.new_branch": "New Branch",
"branches.action.edit_branch": "Edit Branch",
- "branches.action.delete_branch": "Edit Branch",
+ "branches.action.delete_branch": "Delete Branch",
"branches.column.branch_name": "Branch name",
"branches.column.address": "Address",
"branches.column.phone_number": "Phone number",
- "branch.dialog.label": "New Branch",
+ "branches.column.code": "Code",
+ "branch.dialog.label_new_branch": "New Branch",
+ "branch.dialog.label_edit_branch": "New Branch",
"branch.dialog.label.branch_name": "Branch Name",
+ "branch.dialog.label.branch_code": "Code",
"branch.dialog.label.branch_address": "Branch Address",
- "branch.dialog.label.address_1": "Address 1",
- "branch.dialog.label.address_2": "Address 2",
+ "branch.dialog.label.address_1": "Address",
"branch.dialog.label.city": "City",
"branch.dialog.label.country": "Country",
"branch.dialog.label.phone_number": "Phone Number",
"branch.dialog.label.email": "Email",
- "branch.dialog.label.website": "Website"
+ "branch.dialog.label.website": "Website",
+ "branch.dialog.success_message": "The branch has been created successfully.",
+ "branch.alert.delete_message":"The branch has been deleted successfully",
+ "branch.once_delete_this_branch":"Once you delete this branch, you won't be able to restore it later. Are you sure you want to delete this branch?"
}
\ No newline at end of file