WIP feature/Currencies

client/src/components/DialogsContainer.js

@@ -2,10 +2,12 @@ import React from 'react';
 import AccountFormDialog from 'containers/Dashboard/Dialogs/AccountFormDialog';
 import UserFormDialog from 'containers/Dashboard/Dialogs/UserFormDialog';
 import ItemCategoryDialog from 'containers/Dashboard/Dialogs/ItemCategoryDialog';
+import CurrencyDialog from 'containers/Dashboard/Dialogs/CurrencyDialog';
 
 export default function DialogsContainer() {
   return (
     <React.Fragment>
+      <CurrencyDialog />
       <ItemCategoryDialog />
       <AccountFormDialog />
       <UserFormDialog />

client/src/config/preferencesMenu.js

@@ -1,4 +1,3 @@
-
 export default [
   {
     text: 'General',
@@ -9,6 +8,11 @@ export default [
     text: 'Users',
     href: '/dashboard/preferences/users',
   },
+  {
+    text: 'Currencies',
+   
+    href: '/dashboard/preferences/currencies',
+  },
   {
     text: 'Accountant',
     disabled: false,
@@ -49,4 +53,4 @@ export default [
     disabled: false,
     href: '/dashboard/preferences/debit_note',
   },
-]
+];

client/src/connectors/CurrencyFromDialog.connect.js

@@ -0,0 +1,35 @@
+import { connect } from 'react-redux';
+import {
+  fetchCurrencies,
+  submitCurrencies,
+  deleteCurrency,
+  editCurrency,
+} from 'store/currencies/currencies.actions';
+import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
+import { getCurrencyById } from 'store/currencies/currencies.selector';
+
+export const mapStateToProps = (state, props) => {
+  const dialogPayload = getDialogPayload(state, 'currency-form');
+
+  return {
+    currencies: state.currencies.preferences.currencies,
+    name: 'currency-form',
+    payload: { action: 'new', id: null, ...dialogPayload },
+    editCurrency:
+      dialogPayload && dialogPayload.action === 'edit'
+        ? state.currencies.preferences.currencies[dialogPayload.currency_code]
+        : {},
+    getCurrencyId: (id) =>
+      getCurrencyById(state.currencies.preferences.currencies, id),
+  };
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  requestFetchCurrencies: () => dispatch(fetchCurrencies({})),
+  requestSubmitCurrencies: (form) => dispatch(submitCurrencies({ form })),
+  requestEditCurrency: (id, form) => dispatch(editCurrency({ id, form })),
+  requestDeleteCurrency: (currency_code) =>
+    dispatch(deleteCurrency({ currency_code })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps);

client/src/containers/Dashboard/Dialogs/CurrencyDialog.js

@@ -0,0 +1,182 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+  Button,
+  Classes,
+  FormGroup,
+  InputGroup,
+  Intent,
+} from '@blueprintjs/core';
+import * as Yup from 'yup';
+import { useIntl } from 'react-intl';
+import { useFormik } from 'formik';
+import { compose } from 'utils';
+import Dialog from 'components/Dialog';
+import useAsync from 'hooks/async';
+import AppToaster from 'components/AppToaster';
+import DialogConnect from 'connectors/Dialog.connector';
+import DialogReduxConnect from 'components/DialogReduxConnect';
+import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
+import ErrorMessage from 'components/ErrorMessage';
+import classNames from 'classnames';
+import { pick } from 'lodash';
+
+function CurrencyDialog({
+  name,
+  payload,
+  isOpen,
+  closeDialog,
+  requestFetchCurrencies,
+  requestSubmitCurrencies,
+  requestEditCurrency,
+  editCurrency,
+}) {
+  const intl = useIntl();
+
+  const ValidationSchema = Yup.object().shape({
+    currency_name: Yup.string().required(
+      intl.formatMessage({ id: 'required' })
+    ),
+    currency_code: Yup.string()
+      .max(4)
+      .required(intl.formatMessage({ id: 'required' })),
+  });
+  const initialValues = useMemo(
+    () => ({
+      currency_name: '',
+      currency_code: '',
+    }),
+    []
+  );
+
+  const formik = useFormik({
+    enableReinitialize: true,
+
+    initialValues: {
+      ...(payload.action === 'edit' &&
+        pick(editCurrency, Object.keys(initialValues))),
+    },
+
+    validationSchema: ValidationSchema,
+    onSubmit: (values, { setSubmitting }) => {
+      if (payload.action === 'edit') {
+        requestEditCurrency(editCurrency.id, values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_currency_has_been_edited',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      } else {
+        requestSubmitCurrencies(values)
+          .then((response) => {
+            closeDialog(name);
+            AppToaster.show({
+              message: 'the_currency_has_been_submit',
+            });
+            setSubmitting(false);
+          })
+          .catch((error) => {
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const { values, errors, touched } = useMemo(() => formik, [formik]);
+
+  const handleClose = useCallback(() => {
+    closeDialog(name);
+  }, [name, closeDialog]);
+
+  const fetchHook = useAsync(async () => {
+    await Promise.all([requestFetchCurrencies()]);
+  });
+
+  const onDialogOpening = useCallback(() => {
+    fetchHook.execute();
+  }, [fetchHook]);
+
+  const onDialogClosed = useCallback(() => {
+    formik.resetForm();
+    closeDialog(name);
+  }, [formik, closeDialog, name]);
+
+  const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
+
+  return (
+    <Dialog
+      name={name}
+      title={payload.action === 'edit' ? 'Edit Currency' : ' New Currency'}
+      className={classNames(
+        {
+          'dialog--loading': fetchHook.pending,
+        },
+        'dialog--currency-form'
+      )}
+      isOpen={isOpen}
+      onClosed={onDialogClosed}
+      onOpening={onDialogOpening}
+      isLoading={fetchHook.pending}
+      onClose={handleClose}
+    >
+      <form onSubmit={formik.handleSubmit}>
+        <div className={Classes.DIALOG_BODY}>
+          <FormGroup
+            label={'Currency Name'}
+            labelInfo={requiredSpan}
+            className={'form-group--currency-name'}
+            intent={
+              errors.currency_name && touched.currency_name && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='currency_name' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={
+                errors.currency_name && touched.currency_name && Intent.DANGER
+              }
+              {...formik.getFieldProps('currency_name')}
+            />
+          </FormGroup>
+          <FormGroup
+            label={'Currency Code'}
+            labelInfo={requiredSpan}
+            className={'form-group--currency-code'}
+            intent={
+              errors.currency_code && touched.currency_code && Intent.DANGER
+            }
+            helperText={<ErrorMessage name='currency_code' {...formik} />}
+            inline={true}
+          >
+            <InputGroup
+              medium={true}
+              intent={
+                errors.currency_code && touched.currency_code && Intent.DANGER
+              }
+              {...formik.getFieldProps('currency_code')}
+            />
+          </FormGroup>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button onClick={handleClose}>Close</Button>
+            <Button intent={Intent.PRIMARY} type='submit'>
+              {payload.action === 'edit' ? 'Edit' : 'Submit'}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+export default compose(
+  CurrencyFromDialogConnect,
+  DialogConnect,
+  DialogReduxConnect
+)(CurrencyDialog);

client/src/containers/Dashboard/Preferences/Currencies.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { compose } from 'utils';
+import DialogConnect from 'connectors/Dialog.connector';
+import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
+function Currencies({ openDialog }) {
+  const onClickNewCurrency = () => {
+    openDialog('currency-form',{});
+  };
+
+  return (
+    <div className={'preferences__inside-content'}>
+      <div className={'preferences__tabs'}>
+        <Button intent={Intent.PRIMARY} onClick={onClickNewCurrency}>
+          New Currency
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(DialogConnect, CurrencyFromDialogConnect)(Currencies);

client/src/containers/Dashboard/Preferences/CurrenciesList.js

@@ -0,0 +1,146 @@
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Classes,
+  Tooltip,
+  Alert,
+  Intent,
+} from '@blueprintjs/core';
+import Icon from 'components/Icon';
+import { snakeCase } from 'lodash';
+import { compose } from 'utils';
+import CurrencyFromDialogConnect from 'connectors/CurrencyFromDialog.connect';
+import DialogConnect from 'connectors/Dialog.connector';
+import DashboardConnect from 'connectors/Dashboard.connector';
+import LoadingIndicator from 'components/LoadingIndicator';
+import DataTable from 'components/DataTable';
+import Currencies from './Currencies';
+import useAsync from 'hooks/async';
+import AppToaster from 'components/AppToaster';
+
+function CurrenciesList({
+  currencies,
+  openDialog,
+  onFetchData,
+  requestDeleteCurrency,
+}) {
+  const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
+
+  const handleEditCurrency = (currency) => () => {
+    openDialog('currency-form', {
+      action: 'edit',
+      currency_code: currency.currency_code,
+    });
+  };
+
+  const onDeleteCurrency = (currency) => {
+    setDeleteCurrencyState(currency);
+  };
+  const handleCancelCurrencyDelete = () => {
+    setDeleteCurrencyState(false);
+  };
+
+  const handleConfirmCurrencyDelete = useCallback(() => {
+    requestDeleteCurrency(deleteCurrencyState.currency_code).then(
+      (response) => {
+        setDeleteCurrencyState(false);
+        AppToaster.show({
+          message: 'the_Currency_has_been_deleted',
+        });
+      }
+    );
+  }, [deleteCurrencyState]);
+
+  const actionMenuList = useCallback(
+    (currency) => (
+      <Menu>
+        <MenuItem text='Edit Currency' onClick={handleEditCurrency(currency)} />
+
+        <MenuItem
+          text='Delete Currency'
+          onClick={() => onDeleteCurrency(currency)}
+        />
+      </Menu>
+    ),
+    []
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        id: 'currency_name',
+        Header: 'Currency Name',
+        accessor: 'currency_name',
+        width: 100,
+      },
+      {
+        id: 'currency_code',
+        Header: 'Currency Code',
+        accessor: 'currency_code',
+        className: 'currency_code',
+        width: 100,
+      },
+      {
+        Header: 'Currency sign',
+        width: 50,
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ({ cell }) => (
+          <Popover
+            content={actionMenuList(cell.row.original)}
+            position={Position.RIGHT_TOP}
+          >
+            <Button icon={<Icon icon='ellipsis-h' />} />
+          </Popover>
+        ),
+        className: 'actions',
+        width: 50,
+      },
+    ],
+    [actionMenuList]
+  );
+  const handleDatatableFetchData = useCallback(() => {
+    onFetchData && onFetchData();
+  }, []);
+  console.log({ currencies }, 'X');
+
+  return (
+    <LoadingIndicator>
+      <Currencies />
+      <DataTable
+        columns={columns}
+        data={Object.values(currencies)}
+        onFetchData={handleDatatableFetchData()}
+        selectionColumn={true}
+      />
+
+      <Alert
+        cancelButtonText='Cancel'
+        confirmButtonText='Move to Trash'
+        icon='trash'
+        intent={Intent.DANGER}
+        isOpen={deleteCurrencyState}
+        onCancel={handleCancelCurrencyDelete}
+        onConfirm={handleConfirmCurrencyDelete}
+      >
+        <p>
+          Are you sure you want to move <b>filename</b> to Trash? You will be
+          able to restore it later, but it will become private to you.
+        </p>
+      </Alert>
+    </LoadingIndicator>
+  );
+}
+
+export default compose(
+  CurrencyFromDialogConnect,
+  DialogConnect,
+  DashboardConnect
+)(CurrenciesList);

client/src/routes/preferences.js

@@ -2,6 +2,7 @@ import General from 'containers/Dashboard/Preferences/General';
 import Users from 'containers/Dashboard/Preferences/Users';
 import Accountant from 'containers/Dashboard/Preferences/Accountant';
 import Accounts from 'containers/Dashboard/Preferences/Accounts';
+import CurrenciesList from 'containers/Dashboard/Preferences/CurrenciesList'
 
 const BASE_URL = '/dashboard/preferences';
 
@@ -18,6 +19,11 @@ export default [
     component: Users,
     exact: true,
   },
+  {
+    path: `${BASE_URL}/currencies`,
+    component: CurrenciesList,
+    exact: true,
+  },
   {
     path: `${BASE_URL}/accountant`,
     name: 'dashboard.preferences.accountant',
@@ -29,4 +35,4 @@ export default [
     name: 'dashboard.preferences.accounts',
     component: Accounts,
   },
-];
+];

client/src/store/currencies/currencies.actions.js

@@ -1,26 +1,51 @@
-import ApiService from "services/ApiService";
+import ApiService from 'services/ApiService';
 import t from 'store/types';
 
-export const fetchCurrencies = () => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.get(`currencies/registered`).then((response) => {
-      dispatch({
-        type: t.CURRENCIES_REGISTERED_SET,
-        currencies: response.data.currencies,
-      });
-      resolve(response);
-    }).catch(error => { reject(error); });
-  });
+export const submitCurrencies = ({ form }) => {
+  return (dispatch) => {
+    return ApiService.post('currencies', form);
+  };
 };
 
-export const fetchAllCurrencies = () => {
-  return (dispatch) => new Promise((resolve, reject) => {
-    ApiService.get(`currencies/all`).then((response) => {
-      dispatch({
-        type: t.CURRENCIES_ALL_SET,
-        currencies: response.data.currencies,
-      });
-      resolve(response);
-    }).catch(error => { reject(error); });
-  });
-};
+export const deleteCurrency = ({ currency_code }) => {
+  return (dispatch) => ApiService.delete(`currencies/${currency_code}`);
+};
+
+export const editCurrency = ({ id, form }) => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.post(`currencies/${id}`, form)
+        .then((response) => {
+          dispatch({ type: t.CLEAR_CURRENCY_FORM_ERRORS });
+          resolve(response);
+        })
+        .catch((error) => {
+          const { response } = error;
+          const { data } = response;
+          const { errors } = data;
+
+          dispatch({ type: t.CLEAR_CURRENCY_FORM_ERRORS });
+          if (errors) {
+            dispatch({ type: t.CLEAR_CURRENCY_FORM_ERRORS, errors });
+          }
+          reject(error);
+        });
+    });
+};
+
+export const fetchCurrencies = () => {
+  return (dispatch) =>
+    new Promise((resolve, reject) => {
+      ApiService.get('currencies')
+        .then((response) => {
+          dispatch({
+            type: t.CURRENCIES_REGISTERED_SET,
+            currencies: response.data.currencies,
+          });
+          resolve(response);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+};

client/src/store/currencies/currencies.reducer.js

@@ -1,18 +1,22 @@
-import {createReducer} from '@reduxjs/toolkit'
+import { createReducer } from '@reduxjs/toolkit';
 import t from 'store/types';
 
 const initialState = {
-  all: [],
-  registered: [],
+  preferences: {
+    currencies: [],
+  },
 };
 
 export default createReducer(initialState, {
   [t.CURRENCIES_REGISTERED_SET]: (state, action) => {
-    state.registered = action.currencies;
-  },
+    const _currencies = {};
 
-  [t.CURRENCIES_ALL_SET]: (state, action) => {
-    state.all = action.currencies;
+    action.currencies.forEach((currency) => {
+      _currencies[currency.currency_code] = currency;
+    });
+    state.preferences.currencies = {
+      ...state.preferences.currencies,
+      ..._currencies,
+    };
   },
 });
-

client/src/store/currencies/currencies.selector.js

@@ -0,0 +1,3 @@
+export const getCurrencyById = (items, id) => {
+  return items[id] || null;
+};

client/src/store/currencies/currencies.types.js

@@ -1,5 +1,4 @@
-
 export default {
   CURRENCIES_REGISTERED_SET: 'CURRENCIES_REGISTERED_SET',
-  CURRENCIES_ALL_SET: 'CURRENCIES_ALL_SET',
-};
+  CLEAR_CURRENCY_FORM_ERRORS: 'CLEAR_CURRENCY_FORM_ERRORS',
+};

client/src/style/App.scss

@@ -42,7 +42,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 @import "pages/manual-journals";
 @import "pages/item-category";
 @import "pages/items";
-
+@import "pages/currency";
 // Views
 @import "views/filter-dropdown";
 @import "views/sidebar";

client/src/style/pages/currency.scss

@@ -0,0 +1,12 @@
+.dialog--currency-form {
+  .bp3-dialog-body {
+    .bp3-form-group.bp3-inline {
+      .bp3-label {
+        min-width: 140px;
+      }
+      .bp3-form-content {
+        width: 250px;
+      }
+    }
+  }
+}