From bcb67c7142640a7855f8e98cf87222661834d201 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Mon, 24 Jan 2022 01:35:45 +0200 Subject: [PATCH] feat(warehouse): add warehouse. --- src/components/DialogsContainer.js | 2 + .../Preferences/PreferencesTopbar.js | 6 + src/config/preferencesMenu.js | 4 + .../WarehouseFormDialog/WarehouseForm.js | 46 +++++++ .../WarehouseForm.schema.js | 13 ++ .../WarehouseFormContent.js | 18 +++ .../WarehouseFormDialogContent.js | 19 +++ .../WarehouseFormFields.js | 126 ++++++++++++++++++ .../WarehouseFormFloatingActions.js | 48 +++++++ .../WarehouseFormProvider.js | 27 ++++ .../Dialogs/WarehouseFormDialog/index.js | 31 +++++ .../Warehouses/WarehousesActions.js | 32 +++++ src/lang/en/index.json | 24 ++-- .../pages/Warehouses/warehouseFormDialog.scss | 36 +++++ 14 files changed, 423 insertions(+), 9 deletions(-) create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js create mode 100644 src/containers/Dialogs/WarehouseFormDialog/index.js create mode 100644 src/containers/Preferences/Warehouses/WarehousesActions.js create mode 100644 src/style/pages/Warehouses/warehouseFormDialog.scss diff --git a/src/components/DialogsContainer.js b/src/components/DialogsContainer.js index cd8eb745e..f52002200 100644 --- a/src/components/DialogsContainer.js +++ b/src/components/DialogsContainer.js @@ -34,6 +34,7 @@ import UnlockingTransactionsDialog from '../containers/Dialogs/UnlockingTransact import UnlockingPartialTransactionsDialog from '../containers/Dialogs/UnlockingPartialTransactionsDialog'; import CreditNotePdfPreviewDialog from '../containers/Dialogs/CreditNotePdfPreviewDialog'; import PaymentReceivePdfPreviewDialog from '../containers/Dialogs/PaymentReceivePdfPreviewDialog'; +import WarehouseFormDialog from '../containers/Dialogs/WarehouseFormDialog'; /** * Dialogs container. @@ -78,6 +79,7 @@ export default function DialogsContainer() { /> + ); } diff --git a/src/components/Preferences/PreferencesTopbar.js b/src/components/Preferences/PreferencesTopbar.js index 1633ecc8f..7b27a83e8 100644 --- a/src/components/Preferences/PreferencesTopbar.js +++ b/src/components/Preferences/PreferencesTopbar.js @@ -6,6 +6,7 @@ import { CLASSES } from 'common/classes'; import DashboardTopbarUser from 'components/Dashboard/TopbarUser'; import UsersActions from 'containers/Preferences/Users/UsersActions'; import CurrenciesActions from 'containers/Preferences/Currencies/CurrenciesActions'; +import WarehousesActions from '../../containers/Preferences/Warehouses/WarehousesActions' import withDashboard from 'containers/Dashboard/withDashboard'; import { compose } from 'utils'; @@ -35,6 +36,11 @@ function PreferencesTopbar({ preferencesPageTitle }) { path={'/preferences/currencies'} component={CurrenciesActions} /> + diff --git a/src/config/preferencesMenu.js b/src/config/preferencesMenu.js index 031dfe0e1..f01ca6e12 100644 --- a/src/config/preferencesMenu.js +++ b/src/config/preferencesMenu.js @@ -16,6 +16,10 @@ export default [ href: '/preferences/currencies', }, + { + text: , + href: '/preferences/warehouses', + }, { text: , disabled: false, diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js new file mode 100644 index 000000000..1c5474fce --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Formik } from 'formik'; + +import { CreateWarehouseFormSchema } from './WarehouseForm.schema'; +import { useWarehouseFormContext } from './WarehouseFormProvider'; +import WarehouseFormContent from './WarehouseFormContent'; + +import withDialogActions from 'containers/Dialog/withDialogActions'; +import { compose } from 'utils'; + +const defaultInitialValues = { + warehouse_name: '', + warehouse_address_1: '', + warehouse_address_2: '', + warehouse_address_city: '', + warehouse_address_country: '', + phone_number: '', +}; + +/** + * Warehouse form. + * @returns + */ +function WarehouseForm({ + // #withDialogActions + closeDialog, +}) { + // Initial form values. + const initialValues = { + ...defaultInitialValues, + }; + + // Handles the form submit. + const handleFormSubmit = (values, { setSubmitting, setErrors }) => {}; + + return ( + + ); +} + +export default compose(withDialogActions)(WarehouseForm); diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js new file mode 100644 index 000000000..66a0d723a --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseForm.schema.js @@ -0,0 +1,13 @@ +import * as Yup from 'yup'; +import intl from 'react-intl-universal'; + +const Schema = Yup.object().shape({ + warehouse_name: Yup.string().required().label(intl.get('warehouse_name')), + warehouse_address_1: Yup.string().trim(), + warehouse_address_2: Yup.string().trim(), + warehouse_address_city: Yup.string().trim(), + warehouse_address_country: Yup.string().trim(), + phone_number: Yup.number(), +}); + +export const CreateWarehouseFormSchema = Schema; diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js new file mode 100644 index 000000000..6816f703e --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormContent.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { Form } from 'formik'; + +import WarehouseFormFields from './WarehouseFormFields'; +import WarehouseFormFloatingActions from './WarehouseFormFloatingActions'; + +/** + * Warehouse form content. + * @returns + */ +export default function WarehouseFormContent() { + return ( +
+ + + + ); +} diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js new file mode 100644 index 000000000..0bf620e68 --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormDialogContent.js @@ -0,0 +1,19 @@ +import React from 'react'; + +import '../../../style/pages/Warehouses/warehouseFormDialog.scss'; +import { WarehouseFormProvider } from './WarehouseFormProvider'; +import WarehouseForm from './WarehouseForm'; + +/** + * Warehouse form dialog content. + */ +export default function WarehouseFormDialogContent({ + // #ownProps + dialogName, +}) { + return ( + + + + ); +} diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js new file mode 100644 index 000000000..b1097462e --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFields.js @@ -0,0 +1,126 @@ +import React from 'react'; + +import intl from 'react-intl-universal'; +import { FastField, ErrorMessage, Field } from 'formik'; +import styled from 'styled-components'; +import { + Classes, + FormGroup, + InputGroup, + ControlGroup, + Position, +} from '@blueprintjs/core'; +import { inputIntent } from 'utils'; +import { FieldRequiredHint, Col, Row, FormattedMessage as T } from 'components'; +import { useWarehouseFormContext } from './WarehouseFormProvider'; + +/** + * Warehouse form fields. + * @returns + */ +export default function WarehouseFormFields() { + return ( +
+ {/*------------ Warehouse Name -----------*/} + + {({ form, field, meta: { error, touched } }) => ( + } + labelInfo={} + intent={inputIntent({ error, touched })} + inline={true} + helperText={} + className={'form-group--warehouse_name'} + > + + + )} + + {/*------------ Warehouse Address -----------*/} + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--warehouse_address_1'} + > + + + )} + + + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--warehouse_address_2'} + > + + + )} + + {/*------------ Warehouse Address City & Country-----------*/} + } + > + + + {({ field, meta: { error, touched } }) => ( + + )} + + + {({ field, meta: { error, touched } }) => ( + + )} + + + + + {/*------------ Phone Number -----------*/} + + {({ form, field, meta: { error, touched } }) => ( + } + className={'form-group--phone_number'} + > + + + )} + +
+ ); +} + +const WarehouseAddressWrap = styled.div` + padding-left: 150px; +`; diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js new file mode 100644 index 000000000..f3da7c436 --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormFloatingActions.js @@ -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 { useWarehouseFormContext } from './WarehouseFormProvider'; +import withDialogActions from 'containers/Dialog/withDialogActions'; +import { compose } from 'utils'; + +/** + * Warehouse form floating actions. + * @returns + */ +function WarehouseFormFloatingActions({ + // #withDialogActions + closeDialog, +}) { + // Formik context. + const { isSubmitting } = useFormikContext(); + + const { dialogName } = useWarehouseFormContext(); + + // Handle close button click. + const handleCancelBtnClick = () => { + closeDialog(dialogName); + }; + + return ( +
+
+ + +
+
+ ); +} + +export default compose(withDialogActions)(WarehouseFormFloatingActions); diff --git a/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js new file mode 100644 index 000000000..336a2f93f --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/WarehouseFormProvider.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { DialogContent } from 'components'; +// import {} from 'hooks/query'; + +const WarehouseFormContext = React.createContext(); + +/** + * Warehouse form provider. + */ +function WarehouseFormProvider({ dialogName, ...props }) { + // State provider. + const provider = { + dialogName, + }; + + return ( + + + + ); +} + +const useWarehouseFormContext = () => React.useContext(WarehouseFormContext); + +export { WarehouseFormProvider, useWarehouseFormContext }; diff --git a/src/containers/Dialogs/WarehouseFormDialog/index.js b/src/containers/Dialogs/WarehouseFormDialog/index.js new file mode 100644 index 000000000..0f886e56d --- /dev/null +++ b/src/containers/Dialogs/WarehouseFormDialog/index.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { FormattedMessage as T } from 'components'; +import { Dialog, DialogSuspense } from 'components'; +import withDialogRedux from 'components/DialogReduxConnect'; + +import { compose } from 'utils'; + +const WarehouseFormDialogContent = React.lazy(() => + import('./WarehouseFormDialogContent'), +); + +/** + * Warehouse form form dialog. + */ +function WarehouseFormDialog({ dialogName, isOpen }) { + return ( + } + isOpen={isOpen} + canEscapeJeyClose={true} + autoFocus={true} + className={'dialog--warehouse-form'} + > + + + + + ); +} +export default compose(withDialogRedux())(WarehouseFormDialog); diff --git a/src/containers/Preferences/Warehouses/WarehousesActions.js b/src/containers/Preferences/Warehouses/WarehousesActions.js new file mode 100644 index 000000000..b737dc586 --- /dev/null +++ b/src/containers/Preferences/Warehouses/WarehousesActions.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { Button, Intent } from '@blueprintjs/core'; + +import { FormattedMessage as T, Icon } from 'components'; +import withDialogActions from 'containers/Dialog/withDialogActions'; +import { compose } from 'utils'; + +/** + * Warehouse actions. + */ +function WarehousesActions({ + //#ownProps + openDialog, +}) { + const handleClickNewWarehouse = () => { + openDialog('warehouse-form'); + }; + + return ( + + + + ); +} + +export default compose(withDialogActions)(WarehousesActions); diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 4147975a2..5a4020188 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1738,19 +1738,25 @@ "global_error.you_dont_have_permissions": "You do not have permissions to access this page.", "global_error.transactions_locked": "Transactions before {lockedToDate} has been locked. Hence action cannot be performed.", "global_error.authorized_user_inactive": "The authorized user is inactive.", - "the_vendor_has_been_inactivated_successfully": "The contact has been inactivated successfully.", - "vendor.alert.activated_message": "The vendor has been activated successfully.", - "vendor.alert.are_you_sure_want_to_inactivate_this_vendor":"Are you sure want to inactivate this vendor? You will to able to activate it later.", + "vendor.alert.are_you_sure_want_to_inactivate_this_vendor": "Are you sure want to inactivate this vendor? You will to able to activate it later.", "vendor.alert.inactivated_message": "The vendor has been inactivated successfully.", "vendor.alert.are_you_sure_want_to_activate_this_vendor": "Are you sure want to activate this vendor? You will to able to inactivate it later.", - - "customer.alert.activated_message":"The customer has been activated successfully.", + "customer.alert.activated_message": "The customer has been activated successfully.", "customer.alert.are_you_sure_want_to_activate_this_customer": "Are you sure want to activate this customer? You will to able to inactivate it later.", "customer.alert.inactivated_message": "The customer has been inactivated successfully.", - "customer.alert.are_you_sure_want_to_inactivate_this_customer":"Are you sure want to inactivate this customer? You will to able to activate it later.", - - "credit_note_preview.dialog.title":"Credit Note PDF Preview", - "payment_receive_preview.dialog.title":"Payment Receive PDF Preview" + "customer.alert.are_you_sure_want_to_inactivate_this_customer": "Are you sure want to inactivate this customer? You will to able to activate it later.", + "credit_note_preview.dialog.title": "Credit Note PDF Preview", + "payment_receive_preview.dialog.title": "Payment Receive PDF Preview", + "warehouses.label": "Warehouses", + "warehouses.label.new_warehouse": "New Warehouse", + "warehouse.dialog.label":"New Warehouse", + "warehouse.dialog.label.warehouse_name":"Warehouse Name", + "warehouse.dialog.label.warehouse_address":"Address", + "warehouse.dialog.label.warehouse_address_1":"Address 1", + "warehouse.dialog.label.warehouse_address_2":"Address 2", + "warehouse.dialog.label.city":"City", + "warehouse.dialog.label.country":"Country", + "warehouse.dialog.label.phone_number":"Phone Number" } \ No newline at end of file diff --git a/src/style/pages/Warehouses/warehouseFormDialog.scss b/src/style/pages/Warehouses/warehouseFormDialog.scss new file mode 100644 index 000000000..5a9a4433a --- /dev/null +++ b/src/style/pages/Warehouses/warehouseFormDialog.scss @@ -0,0 +1,36 @@ +.dialog--warehouse-form { + width: 650px; + + .bp3-dialog-body { + .bp3-form-group.bp3-inline { + .bp3-label { + font-size: 13px; + min-width: 140px; + } + .bp3-form-content { + width: 388px; + } + .bp3-control-group > * { + flex-shrink: unset; + padding-right: 5px; + padding-left: 5px; + + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + } + } + &.form-group--warehouse_name, + &.form-group--phone_number { + .bp3-form-content { + width: 278px; + } + } + } + } + .bp3-dialog-footer { + padding-top: 10px; + } +}