OrderRequest: Editing an existing request

packages/ui-express/locales/en/express.json

@@ -588,6 +588,9 @@
           "title": "Request",
           "items": "Items",
           "actions": "Actions"
+        },
+        "edit": {
+          "title": "New Request"
         }
       },
       "c": {

packages/ui-express/src/request/action/public.ts

@@ -4,7 +4,7 @@ import { sagaNavigate } from '@gringlobal/client/action/navigation';
 // Constants
 import {
   SAGA_LIST_REQUESTS, RECEIVE_REQUESTS_LIST,
-  SAGA_RECEIVE_REQUEST, RECEIVE_REQUEST,
+  SAGA_RECEIVE_REQUEST, SAGA_EDIT_REQUEST, RECEIVE_REQUEST,
   SAGA_RECEIVE_REQUEST_ITEMS, RECEIVE_REQUEST_ITEMS,
   SAGA_CREATE_REQUEST, RECEIVE_NEW_REQUEST, CLEAR_REQUEST,
   SAGA_RECEIVE_REQUEST_ACTIONS, RECEIVE_REQUEST_ACTIONS,
@@ -26,6 +26,7 @@ export const requestPublicSagas = [
   takeEvery(SAGA_LIST_REQUESTS, listOrderRequestsSaga),
   takeEvery(SAGA_RECEIVE_REQUEST, getOrderRequestSaga),
   takeEvery(SAGA_CREATE_REQUEST, createOrderRequestSaga),
+  takeEvery(SAGA_EDIT_REQUEST, editOrderRequestSaga),
   takeEvery(RECEIVE_NEW_REQUEST, redirectToNewRequestSaga),
   takeEvery(SAGA_RECEIVE_REQUEST_ITEMS, listOrderRequestItemsSaga),
   takeEvery(SAGA_RECEIVE_REQUEST_ACTIONS, listOrderRequestActionsSaga),
@@ -38,6 +39,10 @@ function* getOrderRequestSaga(action) {
     method: RequestService.get,
     params: [action.payload.id],
     onSuccess: (request: OrderRequest) => {
+      dereferenceReferences3([request], {
+        coo: { id: [ 'ownedBy', 'finalRecipientCooperator', 'requestorCooperator', 'shipToCooperator' ] },
+        s: { id: [ 'ownedBy.site', 'finalRecipientCooperator.site', 'requestorCooperator.site', 'shipToCooperator.site' ] },
+      });
       return request;
     },
   });
@@ -143,6 +148,15 @@ export const createOrderRequestAction = (orderRequest: OrderRequest) => {
   };
 }
 
+export const editOrderRequestAction = (orderRequest: OrderRequest) => {
+  return {
+    type: SAGA_EDIT_REQUEST,
+    payload: {
+      orderRequest,
+    },
+  };
+}
+
 function * createOrderRequestSaga(action) {
   yield put({
     type: 'API',
@@ -152,6 +166,15 @@ function * createOrderRequestSaga(action) {
   });
 }
 
+function * editOrderRequestSaga(action) {
+  yield put({
+    type: 'API',
+    target: RECEIVE_NEW_REQUEST,
+    method: RequestService.update,
+    params: [action.payload.orderRequest],
+  });
+}
+
 function * redirectToNewRequestSaga(action) {
   // console.log('Redirect?', action.payload);
   if (action.payload && action.payload.apiCall && action.payload.apiCall.data) {

packages/ui-express/src/request/constants.ts

@@ -2,6 +2,7 @@ export const SAGA_RECEIVE_REQUEST = 'saga/request/public/RECEIVE_REQUEST';
 export const SAGA_LIST_REQUESTS = 'saga/request/public/LIST';
 export const SAGA_RECEIVE_REQUEST_ITEMS = 'saga/request/public/RECEIVE_ITEMS';
 export const SAGA_CREATE_REQUEST = 'saga/request/public/CREATE';
+export const SAGA_EDIT_REQUEST = 'saga/request/public/EDIT';
 export const RECEIVE_NEW_REQUEST = 'saga/request/public/RECEIVE_NEW';
 export const SAGA_RECEIVE_REQUEST_ACTIONS = 'saga/request/public/RECEIVE_ACTIONS';
 

packages/ui-express/src/request/routes.ts

@@ -16,9 +16,17 @@ const publicRoutes: IRoute[] = [
     exact: true,
     auth: [ UserRole.USER ],
     component: Loadable({
-      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "request" */ 'request/ui/RequestAddPage'),
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "request" */ 'request/ui/RequestEditPage'),
     }),
-    path: '/request/new',
+    path: '/request/edit/:id(\\d+)',
+  },
+  {
+    exact: true,
+    auth: [ UserRole.USER ],
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "request" */ 'request/ui/RequestEditPage'),
+    }),
+    path: '/request/edit',
   },
   {
     exact: true,

packages/ui-express/src/request/translations.json

@@ -8,6 +8,9 @@
         "title": "Request",
         "items": "Items",
         "actions": "Actions"
+      },
+      "edit": {
+        "title": "New Request"
       }
     },
     "c": {

packages/ui-express/src/request/ui/RequestBrowsePage.tsx

@@ -124,7 +124,7 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
         />
         <AddNewButton
           title="OrderRequest"
-          path="request/new"
+          path="request/edit"
         />
       </>
     );

packages/ui-express/src/request/ui/RequestDetailsPage.tsx

@@ -5,6 +5,7 @@ import { WithTranslation, withTranslation } from 'react-i18next';
 // import update from 'immutability-helper';
 
 // Action
+import navigateTo from '@gringlobal/client/action/navigation';
 import { ApiCall } from '@gringlobal/client/model/common';
 import { getOrderRequestAction, listOrderRequestItemsAction, listOrderRequestActionsAction } from 'request/action/public';
 import { RequestService } from '@gringlobal/client/service';
@@ -63,6 +64,7 @@ interface IDetailsPageProps extends React.ClassAttributes<any>, WithTranslation,
   requestCall: ApiCall<OrderRequest>;
   requestItemsCall: ApiCall<FilteredPage<OrderRequestItem>>;
   requestActionsCall: ApiCall<FilteredPage<OrderRequestAction>>;
+  navigateTo: (path: string, query?: object) => void;
 }
 
 class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
@@ -146,6 +148,11 @@ class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
     });
   }
 
+  public handleEdit = () => {
+    const { navigateTo, id } = this.props;
+    navigateTo(`/request/edit/${id}`);
+  };
+
   public render(): React.ReactNode {
     const { requestCall, requestItemsCall, requestActionsCall, t, currentTab, onTabChange } = this.props;
     const { selectedItems } = this.state;
@@ -202,7 +209,7 @@ class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
                       <ButtonBar>
                         <Link to={ `/request/${request.id}/add` }><Button variant="contained" color="primary">{ t('Add material...') }</Button></Link>
                         <Button variant="contained" color="primary" onClick={ this.verifyItemList }>{ t('Verify item list') }</Button>
-                        <Button variant="contained" color="secondary">Edit</Button>
+                        <Button variant="contained" color="secondary" onClick={ this.handleEdit }>Edit</Button>
                         <Button variant="outlined" color="secondary">Remove</Button>
                         <Button variant="text" color="secondary">Do something</Button>
                       </ButtonBar>
@@ -248,7 +255,7 @@ class OrderRequestDetailsPage extends React.Component<IDetailsPageProps> {
           }
         </TabPanel>
         <TabPanel value={ currentTab } index={ RequestTabs.ACTIONS }>
-          <RequestActionsTable actions={ requestActionsCall.data && requestActionsCall.data.content }/>
+          { requestActionsCall && <RequestActionsTable actions={ requestActionsCall.data && requestActionsCall.data.content }/> }
         </TabPanel>
       </>
     );
@@ -266,6 +273,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
   getOrderRequestAction,
   listOrderRequestItemsAction,
   listOrderRequestActionsAction,
+  navigateTo,
 }, dispatch);
 
 

packages/ui-express/src/request/ui/RequestAddPage.tsx → packages/ui-express/src/request/ui/RequestEditPage.tsx

@@ -4,19 +4,24 @@ import { bindActionCreators, compose } from 'redux';
 import { WithTranslation, withTranslation } from 'react-i18next';
 // Model
 import OrderRequest from '@gringlobal/client/model/gringlobal/OrderRequest';
+import { ApiCall } from '@gringlobal/client/model/common';
 // Action
-import { createOrderRequestAction } from 'request/action/public';
+import { createOrderRequestAction, getOrderRequestAction, editOrderRequestAction } from 'request/action/public';
 // UI
 import ContentHeader from '@gringlobal/client/ui/common/heading/ContentHeader';
 import { Card, CardContent } from '@material-ui/core';
 import OrderRequestForm from 'request/ui/c/OrderRequestForm';
 import PageTitle from '@gringlobal/client/ui/common/PageTitle';
 
-interface IRequestAddPage extends React.ClassAttributes<any> {
+interface IRequestEditPage extends React.ClassAttributes<any> {
+  id: number;
+  getOrderRequestAction: (id: number) => void;
+  requestCall: ApiCall<OrderRequest>;
   createOrderRequestAction: (orderRequest: OrderRequest) => any;
+  editOrderRequestAction: (orderRequest: OrderRequest) => any;
 }
 
-class RequestAddPage extends React.Component<IRequestAddPage & WithTranslation> {
+class RequestEditPage extends React.Component<IRequestEditPage & WithTranslation> {
 
   protected static needs = [];
 
@@ -24,25 +29,46 @@ class RequestAddPage extends React.Component<IRequestAddPage & WithTranslation>
     super(props);
   }
 
-  private addNewOrderRequest = (orderRequest: OrderRequest) => {
-    const { createOrderRequestAction } = this.props;
-    console.log('submit', orderRequest);
+  public componentDidMount(): void {
+    const { id, requestCall, getOrderRequestAction } = this.props;
+
+    if (!id) { return }
+    if (!requestCall || !requestCall.data || requestCall.data.id !== id) {
+      getOrderRequestAction(id);
+    }
+  }
+
+  public componentDidUpdate() {
+    const { requestCall, id, getOrderRequestAction } = this.props;
+
+    if (!id) { return }
+    if (!requestCall || !requestCall.loading && (!requestCall.error && id && (id !== requestCall.data.id))) {
+      getOrderRequestAction(id);
+    }
+  }
+
+  private saveOrderRequest = (orderRequest: OrderRequest) => {
+    const { createOrderRequestAction, editOrderRequestAction, id } = this.props;
+    if (id) {
+      return editOrderRequestAction(orderRequest);
+    }
     createOrderRequestAction(orderRequest);
   };
 
   public render(): React.ReactNode {
-    const { t } = this.props;
+    const { t, requestCall } = this.props;
+    const initialValues = requestCall && requestCall.data ? { ...requestCall.data } : {};
 
     return (
       <>
-        <PageTitle title={ t('New OrderRequest') }/>
+        <PageTitle title={ t('request.public.p.edit.title') }/>
         <ContentHeader
-          title={ t('New OrderRequest') }
+          title={ requestCall && requestCall.loading ? t('common:label.loadingData') : requestCall && requestCall.data ? requestCall.data.localNumber : t('request.public.p.edit.title') }
         />
         <>
           <Card>
             <CardContent>
-              <OrderRequestForm onSubmit={ this.addNewOrderRequest } />
+              <OrderRequestForm initialValues={ initialValues } onSubmit={ this.saveOrderRequest } />
             </CardContent>
           </Card>
         </>
@@ -52,14 +78,18 @@ class RequestAddPage extends React.Component<IRequestAddPage & WithTranslation>
 }
 
 const mapStateToProps = (state, ownProps) => ({
+  id: +ownProps.match.params.id || null,
+  requestCall: ownProps.match.params.id ? state.request.public.request : null,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
+  getOrderRequestAction,
   createOrderRequestAction,
+  editOrderRequestAction,
 }, dispatch);
 
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withTranslation(),
-)(RequestAddPage);
+)(RequestEditPage);

packages/ui-express/src/request/ui/c/OrderRequestForm.tsx

@@ -10,6 +10,8 @@ import { Grid, Button, CardActions } from '@material-ui/core';
 import { withStyles, WithStyles } from '@material-ui/core/styles';
 import { CodeValueField } from 'common/CodeValue';
 import OrderRequest from '@gringlobal/client/model/gringlobal/OrderRequest';
+// Utils
+import { maxLength, required } from '@gringlobal/client/utilities/validators';
 
 const styles = (theme) => ({
   textField: {
@@ -35,6 +37,7 @@ function orderRequestFormInternal(props: FormRenderProps & WithStyles) {
               component={ TextField }
               className={ classes.textField }
               label={ t(`client:model.OrderRequest.${property}`, `client:model._.${property}`) }
+              validate={ maxLength(50) }
             />
           </Grid>
         )) }
@@ -57,6 +60,8 @@ function orderRequestFormInternal(props: FormRenderProps & WithStyles) {
             component={ CooperatorAutocomplete }
             className={ classes.textField }
             label={ t('client:model.OrderRequest.finalRecipientCooperator') }
+            required
+            validate={ required }
           />
         </Grid>
         <Grid item md={ 6 }>
@@ -133,10 +138,10 @@ const OrderRequestFormInternal = withStyles(styles)(orderRequestFormInternal);
 export default class OrderRequestForm extends React.Component<IOrderRequestForm, any> {
 
   public render() {
-    const { onSubmit } = this.props;
+    const { initialValues, onSubmit } = this.props;
     return (
       <Form
-        initialValues={ {  } }
+        initialValues={ initialValues }
         onSubmit={ onSubmit }
         render={ (props) => <OrderRequestFormInternal { ...props } /> }
       />

packages/ui-express/src/ui/pages/Welcome.tsx

@@ -76,7 +76,7 @@ class WelcomePage extends React.Component<WithTranslation & WithStyles> {
                 </Grid>
 
                 <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 }>
-                  <Link to="/request/new">
+                  <Link to="/request/edit">
                     <Card className={ classes.card }>
                       <CardHeader title={ t('welcome.p.cards.distribution.new.title') }/>
                       <CardContent>