Export editor creation

src/main/transfer/Resources/modules/tools/export/components/details.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import {PropTypes as T} from 'prop-types'
 
 import {trans} from '#/main/app/intl'
@@ -11,51 +11,58 @@ import {TransferDetails} from '#/main/transfer/components/details'
 import {ExportEditor} from '#/main/transfer/tools/export/editor/containers/main'
 import {ExportFile as ExportFileTypes} from '#/main/transfer/tools/export/prop-types'
 
-const ExportDetails = props =>
-  <TransferDetails
-    path={props.exportFile ? props.path+'/'+props.exportFile.id : ''}
-    transferFile={props.exportFile}
-    actions={[
-      {
-        name: 'download',
-        size: 'lg',
-        type: URL_BUTTON,
-        label: trans('download', {}, 'actions'),
-        target: ['apiv2_transfer_export_download', {id: props.exportFile ? props.exportFile.id : null}],
-        disabled: !props.exportFile || 'success' !== props.exportFile.status,
-        primary: true
-      }, {
-        name: 'refresh',
-        type: CALLBACK_BUTTON,
-        label: trans('refresh', {}, 'actions'),
-        callback: () => props.refresh(props.exportFile.id),
-        disabled: !props.exportFile || !hasPermission('refresh', props.exportFile) || 'in_progress' === props.exportFile.status
+const ExportDetails = props => {
+
+  useEffect(() => {
+      props.openForm(props.exportFile)
+  }, [props.exportFile ? props.exportFile.id : props.exportFile])
+
+  return (
+    <TransferDetails
+      path={props.exportFile ? props.path + '/' + props.exportFile.id : ''}
+      transferFile={props.exportFile}
+      actions={[
+        {
+          name: 'download',
+          size: 'lg',
+          type: URL_BUTTON,
+          label: trans('download', {}, 'actions'),
+          target: ['apiv2_transfer_export_download', {id: props.exportFile ? props.exportFile.id : null}],
+          disabled: !props.exportFile || 'success' !== props.exportFile.status,
+          primary: true
+        }, {
+          name: 'refresh',
+          type: CALLBACK_BUTTON,
+          label: trans('refresh', {}, 'actions'),
+          callback: () => props.refresh(props.exportFile.id),
+          disabled: !props.exportFile || !hasPermission('refresh', props.exportFile) || 'in_progress' === props.exportFile.status
+        }
+      ]}
+    >
+      {!props.exportFile || 'in_progress' === props.exportFile.status &&
+        <Alert type="info" style={{marginTop: 20}}>
+          {trans('export_in_progress_help', {}, 'transfer')}
+        </Alert>
       }
-    ]}
-  >
-    {!props.exportFile || 'in_progress' === props.exportFile.status &&
-      <Alert type="info" style={{marginTop: 20}}>
-        {trans('export_in_progress_help', {}, 'transfer')}
-      </Alert>
-    }
 
-    {props.exportFile &&
-      <Routes
-        path={props.path+'/'+props.exportFile.id}
-        routes={[
-          {
-            path: '/edit',
-            onEnter: () => props.openForm(props.exportFile),
-            render: () => (
-              <ExportEditor
-                path={props.path+'/'+props.exportFile.id}
-              />
-            )
-          }
-        ]}
-      />
-    }
-  </TransferDetails>
+      {props.exportFile &&
+        <Routes
+          path={props.path+'/'+props.exportFile.id}
+          routes={[
+            {
+              path: '/edit',
+              render: () => (
+                <ExportEditor
+                  path={props.path+'/'+props.exportFile.id}
+                />
+              )
+            }
+          ]}
+        />
+      }
+    </TransferDetails>
+  )
+}
 
 ExportDetails.propTypes = {
   path: T.string.isRequired,

src/main/transfer/Resources/modules/tools/export/components/tool.jsx

@@ -1,13 +1,11 @@
 import React from 'react'
 import {PropTypes as T} from 'prop-types'
 
-import {trans} from '#/main/app/intl'
 import {Tool} from '#/main/core/tool'
 
-import {TransferForm} from '#/main/transfer/components/form'
 import {ExportList} from '#/main/transfer/tools/export/containers/list'
-import {ExportForm} from '#/main/transfer/tools/export/containers/form'
 import {ExportDetails} from '#/main/transfer/tools/export/containers/details'
+import {ExportEditor} from '#/main/transfer/tools/export/editor/containers/main'
 
 const ExportTool = (props) =>
   <Tool
@@ -21,17 +19,7 @@ const ExportTool = (props) =>
       }, {
         path: '/new',
         disabled: !props.canExport,
-        render: () => (
-          <TransferForm
-            path={props.path+'/new'}
-            title={trans('export', {}, 'transfer')}
-            explanation={props.explanation}
-            openForm={props.openForm}
-            contextData={props.contextData}
-          >
-            <ExportForm />
-          </TransferForm>
-        )
+        render: () => (<ExportEditor path={props.path} isNew={true}/>)
       }, {
         path: '/:id',
         onEnter: (params) => props.open(params.id),
@@ -42,11 +30,8 @@ const ExportTool = (props) =>
 
 ExportTool.propTypes = {
   path: T.string.isRequired,
-  contextData: T.object,
-  explanation: T.object,
   canExport: T.bool.isRequired,
-  open: T.func.isRequired,
-  openForm: T.func.isRequired
+  open: T.func.isRequired
 }
 
 export {

src/main/transfer/Resources/modules/tools/export/containers/tool.jsx

@@ -18,9 +18,6 @@ const ExportTool = withReducer(selectors.STORE_NAME, reducer)(
     (dispatch) => ({
       open(exportFileId) {
         dispatch(actions.fetch(exportFileId))
-      },
-      openForm(params) {
-        dispatch(actions.open(selectors.FORM_NAME, Object.assign({format: 'csv'}, params)))
       }
     })
   )(ExportToolComponent)

src/main/transfer/Resources/modules/tools/export/editor/components/main.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import get from 'lodash/get'
 import {PropTypes as T} from 'prop-types'
 
@@ -11,18 +11,28 @@ import {ExportEditorPlaning} from '#/main/transfer/tools/export/editor/component
 import {ExportEditorOverview} from '#/main/transfer/tools/export/editor/components/overview'
 
 const ExportEditor = (props) => {
-  const entity = props.formData.action.substring(0, props.formData.action.indexOf('_'))
-  const action = props.formData.action.substring(props.formData.action.indexOf('_') + 1)
+  const entity = typeof props.formData.action !== 'undefined' ? props.formData.action.substring(0, props.formData.action.indexOf('_')) : ''
+  const action = typeof props.formData.action !== 'undefined' ? props.formData.action.substring(props.formData.action.indexOf('_') + 1) : ''
+
+  useEffect(() => {
+    if (props.isNew) {
+      props.resetForm()
+    }
+  }, [props.isNew])
 
   return (
     <Editor
-      path={props.path + '/edit'}
-      title={get(props.formData, 'name')}
+      path={props.path + (props.isNew ? '/new' : '/edit')}
+      title={get(props.formData, 'name', trans('export', {}, 'transfer'))}
       name={selectors.FORM_NAME}
-      target={['apiv2_transfer_export_update', {id: props.formData.id}]}
+      target={(formData, isNew) => isNew ? ['apiv2_transfer_export_create']: ['apiv2_transfer_export_update', {id: props.formData.id}]}
+      onSave={(response) => {
+        props.history.push(props.path + '/' + response.id + '/edit')
+        return props.onSave(response)
+      }}
       close={props.path}
       defaultPage="overview"
-      actionsPage={ExportEditorActions}
+      actionsPage={!props.isNew ? ExportEditorActions : undefined}
       overviewPage={ExportEditorOverview}
       pages={[
         {
@@ -42,6 +52,8 @@ const ExportEditor = (props) => {
           render: () => (
             <ExportEditorPlaning
               schedulerEnabled={props.schedulerEnabled}
+              updateProp={props.updateProp}
+              isNew={props.isNew}
             />
           )
         }
@@ -52,11 +64,14 @@ const ExportEditor = (props) => {
 
 ExportEditor.propTypes = {
   path: T.string.isRequired,
+  isNew: T.bool.isRequired,
   formData: T.shape({
     id: T.string,
     name: T.string,
     action: T.string
   }),
+  history: T.object,
+  onSave: T.func.isRequired,
   explanation: T.object.isRequired,
   updateProp: T.func.isRequired,
   schedulerEnabled: T.bool.isRequired,

src/main/transfer/Resources/modules/tools/export/editor/components/overview.jsx

@@ -10,10 +10,15 @@ import {selectors as formSelectors} from '#/main/app/content/form'
 
 const ExportEditorOverview = () => {
   const formData = useSelector(state => formSelectors.data(formSelectors.form(state, selectors.FORM_NAME)))
+  const isNew = useSelector(state => formSelectors.isNew(formSelectors.form(state, selectors.FORM_NAME)))
   const explanation = useSelector(state => selectors.exportExplanation(state))
 
-  const entity = formData.action.substring(0, formData.action.indexOf('_'))
-  const action = formData.action.substring(formData.action.indexOf('_') + 1)
+  let entity = typeof formData.action !== 'undefined' ? formData.action.substring(0, formData.action.indexOf('_')) : formData.type
+  let action = typeof formData.action !== 'undefined' ? formData.action.substring(formData.action.indexOf('_') + 1) : formData.action
+  if(typeof formData.type !== 'undefined' && formData.type !== entity) {
+    entity = formData.type
+    action = ''
+  }
 
   const additionalFields = explanation ? get(explanation, entity+'.'+action+'.fields', []): []
   const filters = additionalFields.map(field => merge({}, field, {
@@ -31,18 +36,26 @@ const ExportEditorOverview = () => {
           fields: [
             {
               name: 'type',
-              type: 'string',
+              type: 'choice',
               label: trans('type'),
-              hideLabel: true,
-              disabled: true,
-              calculated: (formData) => trans(formData.action.substring(0, formData.action.indexOf('_')))
-            },{
+              disabled: !isNew,
+              calculated: () => entity,
+              options: {
+                noEmpty: false,
+                condensed: true,
+                choices: Object.keys(explanation).sort().reduce((o, key) => Object.assign(o, {
+                  [key]: trans(key, {}, 'transfer')
+                }), {})
+              }
+            }, {
               name: 'action',
               type: 'choice',
               label: trans('action'),
-              disabled: true,
+              disabled: !isNew,
+              displayed: !!entity,
+              calculated: () => entity + '_' + action,
               options: {
-                noEmpty: true,
+                noEmpty: false,
                 condensed: true,
                 choices: Object.keys(get(explanation, entity, [])).reduce((o, key) => Object.assign(o, {
                   [entity + '_' + key]: trans(key, {}, 'transfer')
@@ -51,7 +64,8 @@ const ExportEditorOverview = () => {
             }, {
               name: 'name',
               type: 'string',
-              label: trans('name')
+              label: trans('name'),
+              disabled: false
             }
           ].concat(filters)
         }

src/main/transfer/Resources/modules/tools/export/editor/containers/main.jsx

@@ -1,8 +1,9 @@
 import {connect} from 'react-redux'
 
+import isEmpty from 'lodash/isEmpty'
 import {param} from '#/main/app/config'
 import {withRouter} from '#/main/app/router'
-import {selectors} from '#/main/transfer/tools/export/store'
+import {actions, selectors} from '#/main/transfer/tools/export/store'
 import {actions as formActions, selectors as formSelectors} from '#/main/app/content/form/store'
 import {ExportEditor as ExportEditorComponent} from '#/main/transfer/tools/export/editor/components/main'
 
@@ -18,8 +19,16 @@ const ExportEditor = withRouter(
       openForm(exportFile) {
         dispatch(formActions.reset(selectors.FORM_NAME, exportFile, false))
       },
+      resetForm() {
+        dispatch(formActions.reset(selectors.FORM_NAME, {format: 'csv'}, true))
+      },
       updateProp(prop, value) {
         dispatch(formActions.updateProp(selectors.FORM_NAME, prop, value))
+      },
+      onSave(response) {
+        if (isEmpty(response.scheduler)) {
+          return dispatch(actions.execute(response.id))
+        }
       }
     })
   )(ExportEditorComponent)

src/main/transfer/Resources/modules/tools/export/store/actions.js

@@ -24,7 +24,6 @@ actions.fetch = (exportFileId) => (dispatch) => dispatch({
   [API_REQUEST]: {
     url: ['apiv2_transfer_export_get', {id: exportFileId}],
     silent: true,
-    before: () => dispatch(actions.load(null)),
     success: (response) => dispatch(actions.load(response))
   }
 })

src/main/transfer/Resources/modules/tools/export/store/reducer.js

@@ -11,7 +11,7 @@ const reducer = combineReducers({
   explanation: makeReducer({}, {
     [makeInstanceAction(TOOL_LOAD, selectors.STORE_NAME)]: (state, action) => action.toolData.explanation
   }),
-  form: makeFormReducer(selectors.FORM_NAME, {new: true}),
+  form: makeFormReducer(selectors.FORM_NAME, {new: true, data: {format: 'csv'}}),
 
   details: makeReducer(null, {
     [TOOL_OPEN]: () => null,