Commit e2b72056 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Merge branch 'fix-form' into 'master'

Fix form fields resetting and improve shipping page

Closes #392 and #393

See merge request !421
parents 2e87f72e 038ee993
Pipeline #31933 passed with stages
in 7 minutes and 30 seconds
......@@ -24,22 +24,17 @@ function TextFieldGroup(props) {
);
const fieldLabel = label || capitalize(unpackedName.pop());
const LabelWrapper = layout
? (props) => <Col {...layout.labelCol}> {props.children}</Col>
: Fragment;
const FieldWrapper = layout
? (props) => <Col {...layout.fieldCol}> {props.children}</Col>
: Fragment;
const Wrapper = layout ? Col : Fragment;
return (
<FormGroup controlId={controlId}>
<LabelWrapper>
<Wrapper {...(layout && layout.labelCol)}>
<ControlLabel>
{fieldLabel}
{registerOptions.required && <RequiredStar />}
</ControlLabel>
</LabelWrapper>
<FieldWrapper>
</Wrapper>
<Wrapper {...(layout && layout.fieldCol)}>
<FormControl
type={type}
name={name}
......@@ -48,7 +43,7 @@ function TextFieldGroup(props) {
{...controlProps}
/>
{error && <FieldAlert fieldLabel={fieldLabel} error={error} />}
</FieldWrapper>
</Wrapper>
</FormGroup>
);
}
......
......@@ -206,21 +206,23 @@ function ParcelFormModal(props) {
<FormGroup controlId="shippingAddress">
<Col {...FORM_LAYOUT.labelCol}>
<ControlLabel>Address of sender</ControlLabel>
<p>
<DropdownButton title="Choose" id="shippingAddressAutoFill">
{addresses.map((a) => (
<MenuItem
key={a._id}
eventKey={a._id}
onSelect={() =>
reset({ ...getValues(), shippingAddress: a })
}
>
{addressFormatter(a)}
</MenuItem>
))}
</DropdownButton>
</p>
<DropdownButton
title="Choose from my addresses"
id="shippingAddressAutoFill"
className={styles.dropdown}
>
{addresses.map((a) => (
<MenuItem
key={a._id}
eventKey={a._id}
onSelect={() =>
reset({ ...getValues(), shippingAddress: a })
}
>
{addressFormatter(a)}
</MenuItem>
))}
</DropdownButton>
</Col>
<Col {...FORM_LAYOUT.fieldCol}>
<AddressTextFieldsForm addressObjName={'shippingAddress'} />
......@@ -239,25 +241,27 @@ function ParcelFormModal(props) {
<p className={styles.info}>
Where to return the parcel at the end of the investigation.
</p>
<p>
<DropdownButton title="Choose" id="returnAddressAutoFill">
{addresses.map((a) => (
<MenuItem
key={a._id}
eventKey={a._id}
onSelect={() =>
reset({
...getValues(),
returnAddress: a,
noReturnAddress: false,
})
}
>
{addressFormatter(a)}
</MenuItem>
))}
</DropdownButton>
</p>
<DropdownButton
title="Choose from my addresses"
id="returnAddressAutoFill"
className={styles.dropdown}
>
{addresses.map((a) => (
<MenuItem
key={a._id}
eventKey={a._id}
onSelect={() =>
reset({
...getValues(),
returnAddress: a,
noReturnAddress: false,
})
}
>
{addressFormatter(a)}
</MenuItem>
))}
</DropdownButton>
</Col>
<Col {...FORM_LAYOUT.fieldCol}>
<Checkbox
......
.info {
font-size: smaller;
margin-bottom: 0;
}
.hint {
......@@ -10,3 +11,7 @@
.returnCheckbox {
margin-bottom: 10px !important;
}
.dropdown {
margin-top: 5px;
}
import React, { useState } from 'react';
import { Alert, Button, Glyphicon, HelpBlock, Grid } from 'react-bootstrap';
import React, { useState, Suspense } from 'react';
import {
Modal,
Alert,
Button,
Glyphicon,
HelpBlock,
Grid,
} from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { useHistory } from 'react-router-dom';
import { useFetcher, useResource } from 'rest-hooks';
......@@ -12,6 +19,7 @@ import ParcelTable from '../Parcels/ParcelTable';
import styles from './ParcelSection.module.css';
import { itemsFormatter } from '../../helpers';
import ParcelCondensedView from '../Parcels/ParcelCondensedView';
import Loader from '../Loader';
function getColumns(investigation) {
return [
......@@ -200,16 +208,24 @@ function ParcelsSection(props) {
}
return (
<Grid style={{ marginLeft: 0 }}>
<Grid style={{ marginLeft: 0 }} fluid>
{(isCreating || editingId) && (
<ParcelFormModal
investigation={investigation}
shipment={shipment}
parcel={parcel}
investigationUrl={investigationUrl}
onSubmitAsync={handleSubmit}
onCloseModal={handleCloseModal}
/>
<Suspense
fallback={
<Modal show>
<Loader message="Loading form..." spacedOut />
</Modal>
}
>
<ParcelFormModal
investigation={investigation}
shipment={shipment}
parcel={parcel}
investigationUrl={investigationUrl}
onSubmitAsync={handleSubmit}
onCloseModal={handleCloseModal}
/>
</Suspense>
)}
<div className="actions-heading">
<div className={styles.heading}>
......
......@@ -37,7 +37,7 @@ function ShipmentSection(props) {
}
return (
<Grid style={{ marginLeft: 0 }}>
<Grid style={{ marginLeft: 0 }} fluid>
<div className="actions-heading">
<h3>Shipping configuration</h3>
{!isConfiguring && (
......
import React from 'react';
import React, { Suspense } from 'react';
import { useCache, useResource } from 'rest-hooks';
import AddressResource from '../../resources/address';
import ShipmentResource from '../../resources/shipment';
import { useReturnAddress } from '../Address/utils';
import ParcelsSection from './ParcelsSection';
import ShipmentSection from './ShipmentSection';
import Loader from '../Loader';
function ShippingPanel(props) {
const { investigation } = props;
......@@ -26,12 +27,14 @@ function ShippingPanel(props) {
defaultReturnAddress={defaultReturnAddress}
/>
{shipment && (
<ParcelsSection
investigation={investigation}
shipment={shipment}
defaultShippingAddress={defaultShippingAddress}
defaultReturnAddress={defaultReturnAddress}
/>
<Suspense fallback={<Loader message="Loading parcels..." spacedOut />}>
<ParcelsSection
investigation={investigation}
shipment={shipment}
defaultShippingAddress={defaultShippingAddress}
defaultReturnAddress={defaultReturnAddress}
/>
</Suspense>
)}
</>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment