mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: add unlocking partail transactions dialog.
This commit is contained in:
elforjani13
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
import { UnlockingPartialTransactionsFormProvider } from './UnlockingPartialTransactionsFormProvider';
|
||||
import UnlockingPartialTransactionsForm from './UnlockingPartialTransactionsForm';
|
||||
|
||||
/**
|
||||
* Unlocking partail transactions dialog content.
|
||||
*/
|
||||
export default function UnlockingPartialTransactionsDialogContent({
|
||||
// #ownProps
|
||||
dialogName,
|
||||
}) {
|
||||
return (
|
||||
<UnlockingPartialTransactionsFormProvider dialogName={dialogName}>
|
||||
<UnlockingPartialTransactionsForm />
|
||||
</UnlockingPartialTransactionsFormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { Formik } from 'formik';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
import '../../../style/pages/TransactionsLocking/TransactionsLockingDialog.scss';
|
||||
|
||||
import { AppToaster } from 'components';
|
||||
import { CreateUnLockingPartialTransactionsFormSchema } from './UnlockingPartialTransactionsForm.schema';
|
||||
|
||||
import { useUnlockingPartialTransactionsContext } from './UnlockingPartialTransactionsFormProvider';
|
||||
import UnlockingPartialTransactionsFormContent from './UnlockingPartialTransactionsFormContent';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const defaultInitialValues = {
|
||||
module: 'all',
|
||||
unlock_from_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
unlock_to_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
reason: '',
|
||||
};
|
||||
|
||||
/**
|
||||
* Partial Unlocking transactions form.
|
||||
*/
|
||||
function UnlockingPartialTransactionsForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { dialogName, createUnlockingPartialTransactionsMutate } =
|
||||
useUnlockingPartialTransactionsContext();
|
||||
|
||||
// Initial form values.
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
};
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
setSubmitting(true);
|
||||
|
||||
// Handle request response success.
|
||||
const onSuccess = (response) => {
|
||||
AppToaster.show({
|
||||
message: intl.get(
|
||||
'unlocking_partial_transactions.dialog.success_message',
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
// Handle request response errors.
|
||||
const onError = ({
|
||||
response: {
|
||||
data: { errors },
|
||||
},
|
||||
}) => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
createUnlockingPartialTransactionsMutate(values)
|
||||
.then(onSuccess)
|
||||
.catch(onError);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={CreateUnLockingPartialTransactionsFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
component={UnlockingPartialTransactionsFormContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(UnlockingPartialTransactionsForm);
|
||||
@@ -0,0 +1,15 @@
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DATATYPES_LENGTH } from 'common/dataTypes';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
unlock_from_date: Yup.date().required().label(intl.get('date')),
|
||||
unlock_to_date: Yup.date().required().label(intl.get('date')),
|
||||
module: Yup.string().required(),
|
||||
reason: Yup.string()
|
||||
.required()
|
||||
.min(3)
|
||||
.max(DATATYPES_LENGTH.TEXT)
|
||||
.label(intl.get('reason')),
|
||||
});
|
||||
export const CreateUnLockingPartialTransactionsFormSchema = Schema;
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'formik';
|
||||
|
||||
import UnlockingPartialTransactionsFormFields from './UnlockingPartialTransactionsFormFields';
|
||||
import UnlockingPartialTransactionsFormFloatingActions from './UnlockingPartialTransactionsFormFloatingActions';
|
||||
|
||||
/**
|
||||
* Partial Unlocking trsnactions form content.
|
||||
*/
|
||||
export default function PartialUnlockingTransactionsFormContent() {
|
||||
return (
|
||||
<Form>
|
||||
<UnlockingPartialTransactionsFormFields />
|
||||
<UnlockingPartialTransactionsFormFloatingActions />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import React from 'react';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { FieldRequiredHint, Col, Row, FormattedMessage as T } from 'components';
|
||||
import {
|
||||
inputIntent,
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
} from 'utils';
|
||||
|
||||
/**
|
||||
* Parial Unlocking transactions form fields.
|
||||
*/
|
||||
export default function UnlockingPartialTransactionsFormFields() {
|
||||
return (
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<Row>
|
||||
<Col xs={6}>
|
||||
{/*------------ Unlocking from date -----------*/}
|
||||
<FastField name={'unlock_from_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={
|
||||
<T id={'unlocking_partial_transactions.dialog.from_date'} />
|
||||
}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="unlock_from_date" />}
|
||||
minimal={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--date')}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('unlock_from_date', formattedDate);
|
||||
})}
|
||||
value={tansformDateValue(value)}
|
||||
popoverProps={{
|
||||
position: Position.BOTTOM,
|
||||
minimal: true,
|
||||
}}
|
||||
intent={inputIntent({ error, touched })}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
|
||||
<Col xs={6}>
|
||||
{/*------------ Unlocking from date -----------*/}
|
||||
<FastField name={'unlock_to_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={
|
||||
<T id={'unlocking_partial_transactions.dialog.to_date'} />
|
||||
}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="unlock_to_date" />}
|
||||
minimal={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--date')}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('unlock_to_date', formattedDate);
|
||||
})}
|
||||
value={tansformDateValue(value)}
|
||||
popoverProps={{
|
||||
position: Position.BOTTOM,
|
||||
minimal: true,
|
||||
}}
|
||||
intent={inputIntent({ error, touched })}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*------------ unLocking reason -----------*/}
|
||||
<FastField name={'reason'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'unlocking_partial_transactions.dialog.reason'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={'form-group--reason'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'reason'} />}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button, Classes } from '@blueprintjs/core';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
|
||||
import { useUnlockingPartialTransactionsContext } from './UnlockingPartialTransactionsFormProvider';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Partial Unlocking transactions floating actions
|
||||
*/
|
||||
function UnlockingPartialTransactionsFormFloatingActions({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
// Formik context.
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
const { dialogName } = useUnlockingPartialTransactionsContext();
|
||||
|
||||
// Handle cancel button click.
|
||||
const handleCancelBtnClick = (event) => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
style={{ minWidth: '95px' }}
|
||||
type="submit"
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{<T id={'save'} />}
|
||||
</Button>
|
||||
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(
|
||||
UnlockingPartialTransactionsFormFloatingActions,
|
||||
);
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { DialogContent } from 'components';
|
||||
import { useCreateUnlockingPartialTransactions } from 'hooks/query';
|
||||
|
||||
const UnlockingPartialTransactionsContext = React.createContext();
|
||||
|
||||
/**
|
||||
* Unlocking partial transactions form provider.
|
||||
*/
|
||||
function UnlockingPartialTransactionsFormProvider({ dialogName, ...props }) {
|
||||
// Create unlocking partial transactions mutations.
|
||||
const { mutateAsync: createUnlockingPartialTransactionsMutate } =
|
||||
useCreateUnlockingPartialTransactions();
|
||||
|
||||
// State provider.
|
||||
const provider = {
|
||||
dialogName,
|
||||
createUnlockingPartialTransactionsMutate,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent>
|
||||
<UnlockingPartialTransactionsContext.Provider
|
||||
value={provider}
|
||||
{...props}
|
||||
/>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useUnlockingPartialTransactionsContext = () =>
|
||||
React.useContext(UnlockingPartialTransactionsContext);
|
||||
|
||||
export {
|
||||
UnlockingPartialTransactionsFormProvider,
|
||||
useUnlockingPartialTransactionsContext,
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
|
||||
import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const UnlockingPartialTransactionsDialogContent = React.lazy(() =>
|
||||
import('./UnlockingPartialTransactionsDialogContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
* UncLocking Partial transactions dialog.
|
||||
*/
|
||||
function UnLockingPartialTransactionsDilaog({
|
||||
isOpen,
|
||||
dialogName,
|
||||
payload = {},
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
autoFocus={true}
|
||||
title={<T id={'unlocking_partial_transactions.dialog.label'} />}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
className={'dialog--transaction--locking'}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<UnlockingPartialTransactionsDialogContent dialogName={dialogName} />
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogRedux())(UnLockingPartialTransactionsDilaog);
|
||||
Reference in New Issue
Block a user