GitLab will be upgraded on June 23rd evening. During the upgrade the service will be unavailable, sorry for the inconvenience.

Commit e2b72056 authored by Axel Bocciarelli's avatar Axel Bocciarelli

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