From aaa362f2f8db29caee53383ee5b8f5b32ce1ee56 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Wed, 1 Jul 2020 13:24:18 +0200 Subject: [PATCH] WIP / fix_accounts --- .../src/containers/Accounts/AccountsChart.js | 48 +-- .../containers/Accounts/AccountsDataTable.js | 7 +- .../Accounts/withAccountsActions.js | 10 +- .../Dialogs/AccountFormDialog.container.js | 1 - .../containers/Dialogs/AccountFormDialog.js | 75 +++-- .../containers/Dialogs/ExchangeRateDialog.js | 6 +- client/src/containers/Views/ViewForm.js | 4 +- client/src/lang/en/index.js | 11 +- client/src/store/accounts/accounts.actions.js | 312 +++++++++--------- 9 files changed, 266 insertions(+), 208 deletions(-) diff --git a/client/src/containers/Accounts/AccountsChart.js b/client/src/containers/Accounts/AccountsChart.js index 67be2af30..814bd73fb 100644 --- a/client/src/containers/Accounts/AccountsChart.js +++ b/client/src/containers/Accounts/AccountsChart.js @@ -1,7 +1,7 @@ import React, { useEffect, useState, useMemo, useCallback } from 'react'; import { Route, Switch } from 'react-router-dom'; import { Alert, Intent } from '@blueprintjs/core'; -import { useQuery } from 'react-query'; +import { useQuery, queryCache } from 'react-query'; import { FormattedMessage as T, FormattedHTMLMessage, @@ -136,16 +136,22 @@ function AccountsChart({ }, []); // Handle confirm account activation. + const handleConfirmAccountActive = useCallback(() => { - requestInactiveAccount(inactiveAccount.id).then(() => { - setInactiveAccount(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_account_has_been_successfully_inactivated', - }), - intent: Intent.SUCCESS, + requestInactiveAccount(inactiveAccount.id) + .then(() => { + setInactiveAccount(false); + AppToaster.show({ + message: formatMessage({ + id: 'the_account_has_been_successfully_inactivated', + }), + intent: Intent.SUCCESS, + }); + queryCache.refetchQueries('accounts-table', { force: true }); + }) + .catch((error) => { + setInactiveAccount(false); }); - }); }, [inactiveAccount, requestInactiveAccount, formatMessage]); // Handle activate account click. @@ -160,16 +166,21 @@ function AccountsChart({ // Handle activate account confirm. const handleConfirmAccountActivate = useCallback(() => { - requestActivateAccount(activateAccount.id).then(() => { - setActivateAccount(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_account_has_been_successfully_activated', - }), - intent: Intent.SUCCESS, + requestActivateAccount(activateAccount.id) + .then(() => { + setActivateAccount(false); + AppToaster.show({ + message: formatMessage({ + id: 'the_account_has_been_successfully_activated', + }), + intent: Intent.SUCCESS, + }); + queryCache.refetchQueries('accounts-table', { force: true }); + }) + .catch((error) => { + setActivateAccount(false); }); - }); - }); + }, [activateAccount, requestActivateAccount, formatMessage]); const handleRestoreAccount = (account) => {}; @@ -341,7 +352,6 @@ function AccountsChart({ onEditAccount={handleEditAccount} onFetchData={handleFetchData} onSelectedRowsChange={handleSelectedRowsChange} - /> diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js index ed49953da..7d6e0fb96 100644 --- a/client/src/containers/Accounts/AccountsDataTable.js +++ b/client/src/containers/Accounts/AccountsDataTable.js @@ -69,7 +69,12 @@ function AccountsDataTable({ const handleNewParentAccount = useCallback( (account) => { - openDialog('account-form', { action: 'new_child', id: account.id }); + openDialog('account-form', { + action: 'new_child', + parentAccountId: account.id, + accountTypeId: account.account_type_id, + subaccount: true, + }); }, [openDialog], ); diff --git a/client/src/containers/Accounts/withAccountsActions.js b/client/src/containers/Accounts/withAccountsActions.js index d366ff664..1fc68e5f1 100644 --- a/client/src/containers/Accounts/withAccountsActions.js +++ b/client/src/containers/Accounts/withAccountsActions.js @@ -10,7 +10,7 @@ import { deleteBulkAccounts, bulkActivateAccounts, bulkInactiveAccounts, - editAccount + editAccount, } from 'store/accounts/accounts.actions'; const mapActionsToProps = (dispatch) => ({ @@ -22,9 +22,9 @@ const mapActionsToProps = (dispatch) => ({ requestActivateAccount: (id) => dispatch(activateAccount({ id })), requestFetchAccount: (id) => dispatch(fetchAccount({ id })), requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })), - requestBulkActivateAccounts:(ids)=>dispatch(bulkActivateAccounts({ids})), - requestBulkInactiveAccounts:(ids)=>dispatch(bulkInactiveAccounts({ids})), - requestEditAccount:({id,form}) => dispatch(editAccount({id,form})) + requestBulkActivateAccounts: (ids) => dispatch(bulkActivateAccounts({ ids })), + requestBulkInactiveAccounts: (ids) => dispatch(bulkInactiveAccounts({ ids })), + requestEditAccount: (id, form) => dispatch(editAccount(id, form)), }); -export default connect(null, mapActionsToProps); \ No newline at end of file +export default connect(null, mapActionsToProps); diff --git a/client/src/containers/Dialogs/AccountFormDialog.container.js b/client/src/containers/Dialogs/AccountFormDialog.container.js index 1be339b4f..2e0ea17e2 100644 --- a/client/src/containers/Dialogs/AccountFormDialog.container.js +++ b/client/src/containers/Dialogs/AccountFormDialog.container.js @@ -9,7 +9,6 @@ import withAccounts from 'containers/Accounts/withAccounts'; export const mapStateToProps = (state, props) => { const dialogPayload = getDialogPayload(state, 'account-form'); - return { name: 'account-form', payload: { action: 'new', id: null, ...dialogPayload }, diff --git a/client/src/containers/Dialogs/AccountFormDialog.js b/client/src/containers/Dialogs/AccountFormDialog.js index 0d8e4dde5..2730e54b1 100644 --- a/client/src/containers/Dialogs/AccountFormDialog.js +++ b/client/src/containers/Dialogs/AccountFormDialog.js @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { Button, Classes, @@ -13,7 +13,7 @@ import { import * as Yup from 'yup'; import { useFormik } from 'formik'; import { FormattedMessage as T, useIntl } from 'react-intl'; - +import { If } from 'components'; import { omit, pick } from 'lodash'; import { useQuery, queryCache } from 'react-query'; @@ -59,14 +59,16 @@ function AccountFormDialog({ .nullable() .required() .label(formatMessage({ id: 'account_type_id' })), - description: Yup.string().trim(), + description: Yup.string().nullable().trim(), + // parent_account_id: Yup.string().nullable(), }); - const initialValues = useMemo( () => ({ account_type_id: null, name: '', description: '', + code: '', + type: '', }), [], ); @@ -92,7 +94,11 @@ function AccountFormDialog({ } = useFormik({ enableReinitialize: true, initialValues: { - ...(payload.action === 'edit' && account ? account : initialValues), + // ...initialValues, + // ...(payload.action === 'edit' && account ? account : initialValues), + + ...(payload.action === 'edit' && + pick(account, Object.keys(initialValues))), }, validationSchema: accountFormValidationSchema, onSubmit: (values, { setSubmitting, setErrors }) => { @@ -102,22 +108,12 @@ function AccountFormDialog({ : values.name; if (payload.action === 'edit') { - requestEditAccount({ - payload: payload.id, - // form: { ...omit(values, [...exclude, 'account_type_id']) }, - form: { - ...pick(values, [ - ...exclude, - 'account_type_id', - 'name', - 'description', - ]), - }, - }) + requestEditAccount(payload.id, values) .then((response) => { - closeDialog(name); queryCache.refetchQueries('accounts-table', { force: true }); + closeDialog(name); + AppToaster.show({ message: formatMessage( { id: 'service_has_been_successful_edited' }, @@ -135,7 +131,10 @@ function AccountFormDialog({ setSubmitting(false); }); } else { - requestSubmitAccount({ form: { ...omit(values, exclude) } }) + requestSubmitAccount({ + payload: payload.parent_account_id, + form: { ...omit(values, exclude) }, + }) .then((response) => { closeDialog(name); queryCache.refetchQueries('accounts-table', { force: true }); @@ -161,6 +160,9 @@ function AccountFormDialog({ }, }); + const handlechange = useCallback((newChecked) => { + setChecked(newChecked); + }, []); // Filtered accounts based on the given account type. const filteredAccounts = useMemo( () => @@ -190,7 +192,12 @@ function AccountFormDialog({ // Account item of select accounts field. const accountItem = (item, { handleClick, modifiers, query }) => { return ( - + ); }; @@ -211,6 +218,8 @@ function AccountFormDialog({ [], ); + console.log(values, 'Values'); + // Handles dialog close. const handleClose = useCallback(() => { closeDialog(name); @@ -234,7 +243,15 @@ function AccountFormDialog({ // Fetch the given account id on edit mode. const fetchAccount = useQuery( - payload.action === 'edit' && ['account', payload.id], + (payload.action === 'edit' && ['account', payload.id]) || + (payload.action === 'new_child' && ['account', payload.parentAccountId]), + // payload.action === 'new_child' || + // (payload.action === 'edit' && [ + // 'account', + + // payload.id, + // payload.parentAccountId, + // ]), (key, id) => requestFetchAccount(id), { manual: true }, ); @@ -249,6 +266,13 @@ function AccountFormDialog({ fetchAccountsList.refetch(); fetchAccountsTypes.refetch(); fetchAccount.refetch(); + + if (payload.action === 'new_child') { + // sub account checkbox should be equal true. + setFieldValue('subaccount', payload.subaccount); + setFieldValue('parent_account_id', payload.parentAccountId); + setFieldValue('account_type_id', payload.accountTypeId); + } }, [fetchAccount, fetchAccountsList, fetchAccountsTypes]); const onChangeAccountType = useCallback( @@ -376,10 +400,11 @@ function AccountFormDialog({ inline={true} label={subAccountLabel} {...getFieldProps('subaccount')} + checked={values.subaccount} /> - - {values.subaccount && ( + + {/* {values.subaccount && ( */} } className={classNames( @@ -402,8 +427,8 @@ function AccountFormDialog({ labelProp={'name'} /> - )} - + {/* )} */} + } className={'form-group--description'} diff --git a/client/src/containers/Dialogs/ExchangeRateDialog.js b/client/src/containers/Dialogs/ExchangeRateDialog.js index 4df64e802..a41f620ba 100644 --- a/client/src/containers/Dialogs/ExchangeRateDialog.js +++ b/client/src/containers/Dialogs/ExchangeRateDialog.js @@ -67,8 +67,10 @@ function ExchangeRateDialog({ [], ); - const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog', () => - requestFetchExchangeRates(), + const fetchExchangeRatesDialog = useQuery( + 'exchange-rates-dialog', + () => requestFetchExchangeRates(), + { manual: true }, ); const { diff --git a/client/src/containers/Views/ViewForm.js b/client/src/containers/Views/ViewForm.js index 4c022e691..58fa48c93 100644 --- a/client/src/containers/Views/ViewForm.js +++ b/client/src/containers/Views/ViewForm.js @@ -78,8 +78,8 @@ function ViewForm({ const validationSchema = Yup.object().shape({ resource_name: Yup.string().required(), - name: Yup.string().required(), - logic_expression: Yup.string().required(), + name: Yup.string().required().label(intl.formatMessage({id:'name_'})), + logic_expression: Yup.string().required().label(intl.formatMessage({id:'logic_expression'})), roles: Yup.array().of( Yup.object().shape({ comparator: Yup.string().required(), diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 4f6393dda..e7769a632 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -447,6 +447,7 @@ export default { as_date: 'As Date', aging_before_days: 'Aging before days', aging_periods: 'Aging periods', + name_:'name', as: 'As', receivable_aging_summary: 'Receivable Aging Summary', customers: 'Customers', @@ -457,7 +458,7 @@ export default { customer_type: 'Customer Type', business: 'business', individual: 'Individual', - display_name:'Display Name', + display_name: 'Display Name', the_customer_has_been_successfully_created: 'The customer has been successfully created.', select_contact: 'Select contact', @@ -470,7 +471,8 @@ export default { all_reports: 'All Reports', next: 'Next', previous: 'Previous', - showing_current_page_to_total: 'Showing {currentPage} to {totalPages} of {total} entries', + showing_current_page_to_total: + 'Showing {currentPage} to {totalPages} of {total} entries', new_child_account: 'New Child Account', display_name: 'Display Name', contact_name: 'Contact Name', @@ -489,14 +491,14 @@ export default { shipping_address: 'Shipping Address', customers_list: 'Customers List', edit_customer_details: 'Edit Customer Details', - receivable_balance:'Receivable balance', + receivable_balance: 'Receivable balance', the_customer_has_been_successfully_created: 'The customer has been successfully created.', the_customer_has_been_successfully_deleted: 'The customer has been successfully deleted.', the_customers_has_been_successfully_deleted: 'The customers have been successfully deleted.', - the_item_customer_has_been_successfully_edited: + the_item_customer_has_been_successfully_edited: 'The item customer has been successfully edited.', once_delete_this_customer_you_will_able_to_restore_it: `Once you delete this customer, you won\'t be able to restore it later. Are you sure you want to delete this cusomter?`, once_delete_these_customers_you_will_not_able_restore_them: @@ -510,4 +512,5 @@ export default { create_a_new_view: 'Create a new view', in: 'In', not_equals: 'Not Equals', + logic_expression: 'logic expression ', }; diff --git a/client/src/store/accounts/accounts.actions.js b/client/src/store/accounts/accounts.actions.js index 6847186d6..11b4a6e6b 100644 --- a/client/src/store/accounts/accounts.actions.js +++ b/client/src/store/accounts/accounts.actions.js @@ -6,44 +6,48 @@ export const fetchAccountTypes = () => { return (dispatch, getState) => new Promise((resolve, reject) => { ApiService.get('account_types') - .then(response => { + .then((response) => { dispatch({ type: t.ACCOUNT_TYPES_LIST_SET, - account_types: response.data.account_types + account_types: response.data.account_types, }); resolve(response); }) - .catch(error => { reject(error); }); + .catch((error) => { + reject(error); + }); }); }; export const fetchAccountsList = ({ query } = {}) => { - return dispatch => new Promise((resolve, reject) => { - dispatch({ - type: t.SET_DASHBOARD_REQUEST_LOADING, + return (dispatch) => + new Promise((resolve, reject) => { + dispatch({ + type: t.SET_DASHBOARD_REQUEST_LOADING, + }); + ApiService.get('accounts', { params: query }) + .then((response) => { + dispatch({ + type: t.ACCOUNTS_PAGE_SET, + accounts: response.data.accounts, + customViewId: response.data.customViewId, + }); + dispatch({ + type: t.ACCOUNTS_ITEMS_SET, + accounts: response.data.accounts, + }); + dispatch({ + type: t.SET_DASHBOARD_REQUEST_COMPLETED, + }); + resolve(response); + }) + .catch((error) => { + dispatch({ + type: t.SET_DASHBOARD_REQUEST_COMPLETED, + }); + reject(error); + }); }); - ApiService.get('accounts', { params: query }).then(response => { - dispatch({ - type: t.ACCOUNTS_PAGE_SET, - accounts: response.data.accounts, - customViewId: response.data.customViewId - }); - dispatch({ - type: t.ACCOUNTS_ITEMS_SET, - accounts: response.data.accounts - }); - dispatch({ - type: t.SET_DASHBOARD_REQUEST_COMPLETED, - }); - resolve(response); - }) - .catch((error) => { - dispatch({ - type: t.SET_DASHBOARD_REQUEST_COMPLETED, - }); - reject(error); - }); - }); }; export const fetchAccountsTable = ({ query } = {}) => { @@ -54,7 +58,8 @@ export const fetchAccountsTable = ({ query } = {}) => { if (pageQuery.filter_roles) { pageQuery = { ...omit(pageQuery, ['filter_roles']), - stringified_filter_roles: JSON.stringify(pageQuery.filter_roles) || '', + stringified_filter_roles: + JSON.stringify(pageQuery.filter_roles) || '', }; } dispatch({ @@ -69,11 +74,11 @@ export const fetchAccountsTable = ({ query } = {}) => { dispatch({ type: t.ACCOUNTS_PAGE_SET, accounts: response.data.accounts, - customViewId: response.data.customViewId + customViewId: response.data.customViewId, }); dispatch({ type: t.ACCOUNTS_ITEMS_SET, - accounts: response.data.accounts + accounts: response.data.accounts, }); dispatch({ type: t.ACCOUNTS_TABLE_LOADING, @@ -94,29 +99,29 @@ export const fetchAccountsTable = ({ query } = {}) => { }; export const fetchAccountsDataTable = ({ query }) => { - return dispatch => + return (dispatch) => new Promise((resolve, reject) => { ApiService.get('accounts') - .then(response => { + .then((response) => { dispatch({ type: t.ACCOUNTS_DATA_TABLE, - data: response.data + data: response.data, }); }) - .catch(error => { + .catch((error) => { reject(error); }); }); }; export const submitAccount = ({ form }) => { - return dispatch => + return (dispatch) => new Promise((resolve, reject) => { dispatch({ type: t.SET_DASHBOARD_REQUEST_LOADING, }); ApiService.post('accounts', form) - .then(response => { + .then((response) => { dispatch({ type: t.ACCOUNT_ERRORS_CLEAR, }); @@ -125,140 +130,149 @@ export const submitAccount = ({ form }) => { }); resolve(response); }) - .catch(error => { + .catch((error) => { const { response } = error; const { data } = response; - const { errors } = data; + // const { errors } = data; + dispatch({ type: t.ACCOUNT_ERRORS_CLEAR, }); - if (errors) { + if (error) { dispatch({ type: t.ACCOUNT_ERRORS_SET, - payload: { errors }, + payload: { error }, }); } dispatch({ type: t.SET_DASHBOARD_REQUEST_COMPLETED, }); - reject(errors); + reject(data?.errors); }); }); }; -export const editAccount = ({ id, form }) => { - return dispatch => new Promise((resolve, reject) => { - dispatch({ - type: t.SET_DASHBOARD_REQUEST_LOADING, - }); - ApiService.post(`accounts/${id}`, form) - .then(response => { - dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS }); - dispatch({ - type: t.SET_DASHBOARD_REQUEST_COMPLETED, - }); - resolve(response); - }) - .catch(error => { - const { response } = error; - const { data } = response; - const { errors } = data; - - dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS }); - if (errors) { - dispatch({ type: t.ACCOUNT_FORM_ERRORS, errors }); - } - dispatch({ - type: t.SET_DASHBOARD_REQUEST_COMPLETED, - }); - reject(errors); - }); - }); -}; - -export const activateAccount = ({ id }) => { - return dispatch => ApiService.post(`accounts/${id}/active`); -}; - -export const inactiveAccount = ({ id }) => { - return dispatch => ApiService.post(`accounts/${id}/inactive`); -}; - -export const bulkActivateAccounts =({ids})=>{ - - return dispatch => new Promise((resolve, reject) => { - - ApiService.post(`accounts/bulk/activate`, null, { params: { ids }}).then((response) => { - dispatch({ - type: t.BULK_ACTIVATE_ACCOUNTS, - payload: { ids } - }); - resolve(response); - }).catch((error) => { - reject(error); - }); - }); -} - -export const bulkInactiveAccounts =({ids})=>{ - - return dispatch => new Promise((resolve, reject) => { - - ApiService.post(`accounts/bulk/inactivate`, null, { params: { ids }}).then((response) => { - dispatch({ - type: t.BULK_INACTIVATE_ACCOUNTS, - payload: { ids } - }); - resolve(response); - }).catch((error) => { - reject(error); - }); - }); -} - - -export const deleteAccount = ({ id }) => { - return dispatch => new Promise((resolve, reject) => { - ApiService.delete(`accounts/${id}`).then((response) => { - dispatch({ type: t.ACCOUNT_DELETE, id }); - resolve(response); - }).catch((error) => { - reject(error.response.data.errors || []); - }); - }); -}; - -export const deleteBulkAccounts = ({ ids }) => { - return dispatch => new Promise((resolve, reject) => { - ApiService.delete(`accounts`, { params: { ids }}).then((response) => { - dispatch({ - type: t.ACCOUNTS_BULK_DELETE, - payload: { ids } - }); - resolve(response); - }).catch((error) => { - const { response } = error; - const { data } = response; - const { errors } = data; - - reject(errors); - }); - }); -}; - -export const fetchAccount = ({ id }) => { - return dispatch => +export const editAccount = (id, form) => { + return (dispatch) => new Promise((resolve, reject) => { - ApiService.get(`accounts/${id}`) - .then(response => { + dispatch({ + type: t.SET_DASHBOARD_REQUEST_LOADING, + }); + ApiService.post(`accounts/${id}`, form) + .then((response) => { + dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS }); dispatch({ - type: t.ACCOUNT_SET, - account: response.data.account + type: t.SET_DASHBOARD_REQUEST_COMPLETED, }); resolve(response); }) - .catch(error => { + .catch((error) => { + const { response } = error; + const { data } = response; + // const { errors } = data; + + dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS }); + if (error) { + dispatch({ type: t.ACCOUNT_FORM_ERRORS, error }); + } + dispatch({ + type: t.SET_DASHBOARD_REQUEST_COMPLETED, + }); + reject(data?.errors); + }); + }); +}; + +export const activateAccount = ({ id }) => { + return (dispatch) => ApiService.post(`accounts/${id}/active`); +}; + +export const inactiveAccount = ({ id }) => { + return (dispatch) => ApiService.post(`accounts/${id}/inactive`); +}; + +export const bulkActivateAccounts = ({ ids }) => { + return (dispatch) => + new Promise((resolve, reject) => { + ApiService.post(`accounts/bulk/activate`, null, { params: { ids } }) + .then((response) => { + dispatch({ + type: t.BULK_ACTIVATE_ACCOUNTS, + payload: { ids }, + }); + resolve(response); + }) + .catch((error) => { + reject(error); + }); + }); +}; + +export const bulkInactiveAccounts = ({ ids }) => { + return (dispatch) => + new Promise((resolve, reject) => { + ApiService.post(`accounts/bulk/inactivate`, null, { params: { ids } }) + .then((response) => { + dispatch({ + type: t.BULK_INACTIVATE_ACCOUNTS, + payload: { ids }, + }); + resolve(response); + }) + .catch((error) => { + reject(error); + }); + }); +}; + +export const deleteAccount = ({ id }) => { + return (dispatch) => + new Promise((resolve, reject) => { + ApiService.delete(`accounts/${id}`) + .then((response) => { + dispatch({ type: t.ACCOUNT_DELETE, id }); + resolve(response); + }) + .catch((error) => { + reject(error.response.data.errors || []); + }); + }); +}; + +export const deleteBulkAccounts = ({ ids }) => { + return (dispatch) => + new Promise((resolve, reject) => { + ApiService.delete(`accounts`, { params: { ids } }) + .then((response) => { + dispatch({ + type: t.ACCOUNTS_BULK_DELETE, + payload: { ids }, + }); + resolve(response); + }) + .catch((error) => { + const { response } = error; + const { data } = response; + // const { errors } = data; + + reject(data?.errors); + }); + }); +}; + +export const fetchAccount = ({ id }) => { + return (dispatch) => + new Promise((resolve, reject) => { + ApiService.get(`accounts/${id}`) + .then((response) => { + dispatch({ + type: t.ACCOUNT_SET, + account: response.data.account, + }); + resolve(response); + }) + .catch((error) => { reject(error); }); });