OBPIH-872: Create step 2 form (movement from a vendor)

src/css/main.scss

@@ -289,6 +289,26 @@ $blue-epsilon: #bce7f7;
  width: 20vw;
 }
 
+/* DATE FIELD
+----------------------------*/
+
+.date-field tr {
+ background-color: initial !important;
+}
+
+.date-field thead th {
+ border-bottom: 1px solid #f9f9f9;
+ border-top: none;
+ padding: 0;
+ vertical-align: middle;
+}
+
+.date-field td {
+ border: none;
+ padding: 0;
+ vertical-align: middle;
+}
+
 /* PRINT STYLING
 ----------------------------*/
 

src/js/components/form-elements/DateField.jsx

@@ -13,12 +13,14 @@ const DateField = (props) => {
  };
 
  return (
- <DateTime
- timeFormat={false}
- closeOnSelect
- {...attributes}
- onChange={date => onChange(date)}
- />
+ <div className="date-field">
+ <DateTime
+ timeFormat={false}
+ closeOnSelect
+ {...attributes}
+ onChange={date => onChange(date)}
+ />
+ </div>
  );
  };
 

src/js/components/stock-movement-wizard/AddItemsPage.jsx

@@ -10,9 +10,10 @@ import SelectField from '../form-elements/SelectField';
 import ArrayField from '../form-elements/ArrayField';
 import ButtonField from '../form-elements/ButtonField';
 import LabelField from '../form-elements/LabelField';
+import DateField from '../form-elements/DateField';
 import ValueSelectorField from '../form-elements/ValueSelectorField';
 import { renderFormField } from '../../utils/form-utils';
-import { PRODUCTS_MOCKS, STOCK_LIST_ITEMS_MOCKS } from '../../mockedData';
+import { PRODUCTS_MOCKS, STOCK_LIST_ITEMS_MOCKS, USERNAMES_MOCKS } from '../../mockedData';
 
 const DELETE_BUTTON_FIELD = {
  type: ButtonField,
@@ -88,24 +89,74 @@ const STOCKLIST_FIELDS = {
  },
 };
 
+const VENDOR_FIELDS = {
+ lineItems: {
+ type: ArrayField,
+ addButton: 'Add line',
+ fields: {
+ pallet: {
+ type: TextField,
+ label: 'Pallet',
+ },
+ box: {
+ type: TextField,
+ label: 'Box',
+ },
+ productCode: {
+ type: SelectField,
+ label: 'Requisition items',
+ attributes: {
+ openOnClick: false,
+ options: PRODUCTS_MOCKS,
+ },
+ },
+ lot: {
+ type: TextField,
+ label: 'Lot',
+ },
+ expiry: {
+ type: DateField,
+ label: 'Expiry',
+ attributes: {
+ dateFormat: 'DD/MMM/YYYY',
+ },
+ },
+ quantity: {
+ type: TextField,
+ label: 'QTY',
+ },
+ recipient: {
+ type: SelectField,
+ label: 'Recipient',
+ attributes: {
+ options: USERNAMES_MOCKS,
+ },
+ },
+ deleteButton: DELETE_BUTTON_FIELD,
+ },
+ },
+};
+
 class AddItemsPage extends Component {
  componentDidMount() {
  let lineItems;
 
- if (this.props.stockList) {
+ if (this.props.origin.type === 'Supplier' || !this.props.stockList) {
+ lineItems = new Array(5).fill({});
+ } else {
  lineItems = _.map(
  STOCK_LIST_ITEMS_MOCKS[this.props.stockList],
  val => ({ ...val, quantity: val.maxQuantity, disabled: true }),
  );
- } else {
- lineItems = new Array(20).fill({});
  }
 
  this.props.initialize('stock-movement-wizard', { lineItems, pickPage: [] }, true);
  }
 
  getFields() {
- if (this.props.stockList) {
+ if (this.props.origin.type === 'Supplier') {
+ return VENDOR_FIELDS;
+ } else if (this.props.stockList) {
  return STOCKLIST_FIELDS;
  }
 
@@ -115,7 +166,7 @@ class AddItemsPage extends Component {
  render() {
  const { handleSubmit, previousPage } = this.props;
  return (
- <form onSubmit={handleSubmit}>
+ <form onSubmit={handleSubmit(() => (this.props.origin.type === 'Supplier' ? this.props.goToPage(5) : this.props.onSubmit()))}>
  {_.map(this.getFields(), (fieldConfig, fieldName) =>
  renderFormField(fieldConfig, fieldName, { stockList: this.props.stockList }))}
  <div>
@@ -131,7 +182,10 @@ class AddItemsPage extends Component {
 
 const selector = formValueSelector('stock-movement-wizard');
 
-const mapStateToProps = state => ({ stockList: selector(state, 'stockList') });
+const mapStateToProps = state => ({
+ stockList: selector(state, 'stockList'),
+ origin: selector(state, 'origin'),
+});
 
 export default reduxForm({
  form: 'stock-movement-wizard',
@@ -144,6 +198,11 @@ AddItemsPage.propTypes = {
  initialize: PropTypes.func.isRequired,
  handleSubmit: PropTypes.func.isRequired,
  previousPage: PropTypes.func.isRequired,
+ goToPage: PropTypes.func.isRequired,
+ onSubmit: PropTypes.func.isRequired,
+ origin: PropTypes.shape({
+ type: PropTypes.string,
+ }).isRequired,
  stockList: PropTypes.string,
 };
 

src/js/components/stock-movement-wizard/CreateStockMovement.jsx

@@ -23,6 +23,7 @@ const FIELDS = {
  label: 'Origin',
  attributes: {
  required: true,
+ objectValue: true,
  options: LOCATION_MOCKS,
  },
  },
@@ -31,6 +32,7 @@ const FIELDS = {
  label: 'Destination',
  attributes: {
  required: true,
+ objectValue: true,
  options: LOCATION_MOCKS,
  },
  },

src/js/components/stock-movement-wizard/StockMovement.jsx

@@ -17,11 +17,15 @@ class StockMovements extends Component {
 
  constructor(props) {
  super(props);
- this.nextPage = this.nextPage.bind(this);
- this.previousPage = this.previousPage.bind(this);
+
  this.state = {
  page: 1,
+ prevPage: 1,
  };
+
+ this.nextPage = this.nextPage.bind(this);
+ this.previousPage = this.previousPage.bind(this);
+ this.goToPage = this.goToPage.bind(this);
  }
 
  getFormList() {
@@ -31,6 +35,7 @@ class StockMovements extends Component {
  />,
  <AddItemsPage
  previousPage={this.previousPage}
+ goToPage={this.goToPage}
  onSubmit={this.nextPage}
  />,
  <EditPage
@@ -49,11 +54,15 @@ class StockMovements extends Component {
  }
 
  nextPage() {
- this.setState({ page: this.state.page + 1 });
+ this.setState({ prevPage: this.state.page, page: this.state.page + 1 });
  }
 
  previousPage() {
- this.setState({ page: this.state.page - 1 });
+ this.setState({ prevPage: this.state.prevPage - 1, page: this.state.prevPage });
+ }
+
+ goToPage(page) {
+ this.setState({ prevPage: this.state.page, page });
  }
 
  render() {

src/js/mockedData.jsx

@@ -1,57 +1,57 @@
 const LOCATION_MOCKS = [
- 'AlGhanem Group [Supplier]',
- 'Amazon [Supplier]',
- 'Bangalore 011 [Depot]',
- 'Bangalore- 20 Tech [Distributor]',
- 'Bangalore-Titan [Supplier]',
- 'Bangalore-Vijayanagar [Warehouse]',
- 'Belonia foods [Supplier]',
- 'Canada [Warehouse]',
- 'CCS [Depot]',
- 'CDMX [Cliente]',
- 'China [Supplier]',
- 'CHT [Installation]',
- 'Client Test [Cliente]',
- 'Corona CA [Depot]',
- 'DELHI - BADARPUR [Book Wahrehouse]',
- 'DELHI - EAST [Book Wahrehouse]',
- 'DELHI - IG AIRPORT [Book Wahrehouse]',
- 'DELHI - NORTH [Book Wahrehouse]',
- 'DELHI - SOUTH [Book Wahrehouse]',
- 'East End SH Clinic [SH Clinic]',
- 'East Medical Facility [Depot]',
- 'East Pharmacy Depot [Depot]',
- 'East Pharmacy Supplier [Supplier]',
- 'EXCELINDO [Supplier]',
- 'FARIDABAD [Depot]',
- 'Florida [Depot]',
- 'GBAC [Installation]',
- 'Gujarat [Warehouse]',
- 'Harbour [Depot]',
- 'HO-JKT [HO]',
- 'Importaciones VEN [Cliente]',
- 'INDIA - NOIDA [Book Wahrehouse]',
- 'ISAAC [Cliente]',
- 'LC 002 [SH Clinic]',
- 'MOM [Depot]',
- 'Monitors [Book Wahrehouse]',
- 'New location [Depot]',
- 'OpenBoxes HQ [Depot]',
- 'Palletized [Depot]',
- 'PHH [Installation]',
- 'PNC [Supplier]',
- 'Porto [Book Wahrehouse]',
- 'Principal [Principal]',
- 'RIM India Pvt Ltd [Warehouse]',
- 'Rivercess [Depot]',
- 'Sambas - Kalbar [Supplier]',
- 'Sepang Air Port [Book Wahrehouse]',
- 'SNET [Supplier]',
- 'SO MEDAN [SO]',
- 'SO SURABAYA [SO]',
- 'Toulouse [Supplier]',
- 'Zwedru [Installation]',
- 'Головной офис [Depot]',
+ { label: 'AlGhanem Group [Supplier]', value: { name: 'AlGhanem Group [Supplier]', type: 'Supplier' } },
+ { label: 'Amazon [Supplier]', value: { name: 'Amazon [Supplier]', type: 'Supplier' } },
+ { label: 'Bangalore 011 [Depot]', value: { name: 'Bangalore 011 [Depot]', type: 'Depot' } },
+ { label: 'Bangalore- 20 Tech [Distributor]', value: { name: 'Bangalore- 20 Tech [Distributor]', type: 'Distributor' } },
+ { label: 'Bangalore-Titan [Supplier]', value: { name: 'Bangalore-Titan [Supplier]', type: 'Supplier' } },
+ { label: 'Bangalore-Vijayanagar [Warehouse]', value: { name: 'Bangalore-Vijayanagar [Warehouse]', type: 'Warehouse' } },
+ { label: 'Belonia foods [Supplier]', value: { name: 'Belonia foods [Supplier]', type: 'Supplier' } },
+ { label: 'Canada [Warehouse]', value: { name: 'Canada [Warehouse]', type: 'Warehouse' } },
+ { label: 'CCS [Depot]', value: { name: 'CCS [Depot]', type: 'Depot' } },
+ { label: 'CDMX [Cliente]', value: { name: 'CDMX [Cliente]', type: 'Cliente' } },
+ { label: 'China [Supplier]', value: { name: 'China [Supplier]', type: 'Supplier' } },
+ { label: 'CHT [Installation]', value: { name: 'CHT [Installation]', type: 'Installation' } },
+ { label: 'Client Test [Cliente]', value: { name: 'Client Test [Cliente]', type: 'Cliente' } },
+ { label: 'Corona CA [Depot]', value: { name: 'Corona CA [Depot]', type: 'Depot' } },
+ { label: 'DELHI - BADARPUR [Book Wahrehouse]', value: { name: 'DELHI - BADARPUR [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'DELHI - EAST [Book Wahrehouse]', value: { name: 'DELHI - EAST [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'DELHI - IG AIRPORT [Book Wahrehouse]', value: { name: 'DELHI - IG AIRPORT [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'DELHI - NORTH [Book Wahrehouse]', value: { name: 'DELHI - NORTH [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'DELHI - SOUTH [Book Wahrehouse]', value: { name: 'DELHI - SOUTH [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'East End SH Clinic [SH Clinic]', value: { name: 'East End SH Clinic [SH Clinic]', type: 'SH Clinic' } },
+ { label: 'East Medical Facility [Depot]', value: { name: 'East Medical Facility [Depot]', type: 'Depot' } },
+ { label: 'East Pharmacy Depot [Depot]', value: { name: 'East Pharmacy Depot [Depot]', type: 'Depot' } },
+ { label: 'East Pharmacy Supplier [Supplier]', value: { name: 'East Pharmacy Supplier [Supplier]', type: 'Supplier' } },
+ { label: 'EXCELINDO [Supplier]', value: { name: 'EXCELINDO [Supplier]', type: 'Supplier' } },
+ { label: 'FARIDABAD [Depot]', value: { name: 'FARIDABAD [Depot]', type: 'Depot' } },
+ { label: 'Florida [Depot]', value: { name: 'Florida [Depot]', type: 'Depot' } },
+ { label: 'GBAC [Installation]', value: { name: 'GBAC [Installation]', type: 'Installation' } },
+ { label: 'Gujarat [Warehouse]', value: { name: 'Gujarat [Warehouse]', type: 'Warehouse' } },
+ { label: 'Harbour [Depot]', value: { name: 'Harbour [Depot]', type: 'Depot' } },
+ { label: 'HO-JKT [HO]', value: { name: 'HO-JKT [HO]', type: 'HO' } },
+ { label: 'Importaciones VEN [Cliente]', value: { name: 'Importaciones VEN [Cliente]', type: 'Cliente' } },
+ { label: 'INDIA - NOIDA [Book Wahrehouse]', value: { name: 'INDIA - NOIDA [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'ISAAC [Cliente]', value: { name: 'ISAAC [Cliente]', type: 'Cliente' } },
+ { label: 'LC 002 [SH Clinic]', value: { name: 'LC 002 [SH Clinic]', type: 'SH Clinic' } },
+ { label: 'MOM [Depot]', value: { name: 'MOM [Depot]', type: 'Depot' } },
+ { label: 'Monitors [Book Wahrehouse]', value: { name: 'Monitors [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'New location [Depot]', value: { name: 'New location [Depot]', type: 'Depot' } },
+ { label: 'OpenBoxes HQ [Depot]', value: { name: 'OpenBoxes HQ [Depot]', type: 'Depot' } },
+ { label: 'Palletized [Depot]', value: { name: 'Palletized [Depot]', type: 'Depot' } },
+ { label: 'PHH [Installation]', value: { name: 'PHH [Installation]', type: 'Installation' } },
+ { label: 'PNC [Supplier]', value: { name: 'PNC [Supplier]', type: 'Supplier' } },
+ { label: 'Porto [Book Wahrehouse]', value: { name: 'Porto [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'Principal [Principal]', value: { name: 'Principal [Principal]', type: 'Principal' } },
+ { label: 'RIM India Pvt Ltd [Warehouse]', value: { name: 'RIM India Pvt Ltd [Warehouse]', type: 'Warehouse' } },
+ { label: 'Rivercess [Depot]', value: { name: 'Rivercess [Depot]', type: 'Depot' } },
+ { label: 'Sambas - Kalbar [Supplier]', value: { name: 'Sambas - Kalbar [Supplier]', type: 'Supplier' } },
+ { label: 'Sepang Air Port [Book Wahrehouse]', value: { name: 'Sepang Air Port [Book Wahrehouse]', type: 'Book Wahrehouse' } },
+ { label: 'SNET [Supplier]', value: { name: 'SNET [Supplier]', type: 'Supplier' } },
+ { label: 'SO MEDAN [SO]', value: { name: 'SO MEDAN [SO]', type: 'SO' } },
+ { label: 'SO SURABAYA [SO]', value: { name: 'SO SURABAYA [SO]', type: 'SO' } },
+ { label: 'Toulouse [Supplier]', value: { name: 'Toulouse [Supplier]', type: 'Supplier' } },
+ { label: 'Zwedru [Installation]', value: { name: 'Zwedru [Installation]', type: 'Installation' } },
+ { label: 'Головной офис [Depot]', value: { name: 'Головной офис [Depot]', type: 'Depot' } },
 ];
 
 const USERNAMES_MOCKS = ['Julian Benson',