Add area search export modal

src/areaSearch/components/AreaSearchApplicationListPage.js

@@ -68,6 +68,7 @@ import FormField from '$components/form/FormField';
 import type {Attributes, Methods as MethodsType} from '$src/types';
 import type {ApiResponse} from '$src/types';
 import type {UsersPermissions as UsersPermissionsType} from '$src/usersPermissions/types';
+import AreaSearchExportModal from '$src/areaSearch/components/AreaSearchExportModal';
 
 const VisualizationTypes = {
   MAP: 'map',
@@ -118,6 +119,7 @@ type State = {
   selectedStates: Array<string>,
   visualizationType: string,
   isEditModalOpen: boolean,
+  isExportModalOpen: boolean,
   editModalTargetAreaSearch: ?number,
 }
 
@@ -135,6 +137,7 @@ class AreaSearchApplicationListPage extends PureComponent<Props, State> {
     selectedStates: DEFAULT_AREA_SEARCH_STATES,
     visualizationType: VisualizationTypes.TABLE,
     isEditModalOpen: false,
+    isExportModalOpen: false,
     editModalTargetAreaSearch: null,
   }
 
@@ -325,6 +328,18 @@ class AreaSearchApplicationListPage extends PureComponent<Props, State> {
     }));
   };
 
+  openExportModal = () => {
+    this.setState(() => ({
+      isExportModalOpen: true,
+    }));
+  };
+
+  closeExportModal = () => {
+    this.setState(() => ({
+      isExportModalOpen: false,
+    }));
+  };
+
   submitAreaSearchEditModal = (data: Object) => {
     const {editAreaSearch} = this.props;
 
@@ -600,6 +615,7 @@ class AreaSearchApplicationListPage extends PureComponent<Props, State> {
       isFetchingByBBox,
       isFetchingAreaSearchListAttributes,
       location: {search},
+      selectedSearches = {},
     } = this.props;
 
     const {
@@ -611,6 +627,7 @@ class AreaSearchApplicationListPage extends PureComponent<Props, State> {
       selectedStates,
       visualizationType,
       isEditModalOpen,
+      isExportModalOpen,
       editModalTargetAreaSearch,
     } = this.state;
     const searchQuery = getUrlParams(search);
@@ -749,12 +766,17 @@ class AreaSearchApplicationListPage extends PureComponent<Props, State> {
             />
           }
         </TableWrapper>
+        <Button onClick={this.openExportModal} text="Tulosta" disabled={selectedSearches.length === 0} />
         <EditAreaSearchPreparerModal
           isOpen={isEditModalOpen}
           onClose={this.closeAreaSearchEditModal}
           onSubmit={this.submitAreaSearchEditModal}
           areaSearchId={editModalTargetAreaSearch}
         />
+        <AreaSearchExportModal
+          isOpen={isExportModalOpen}
+          onClose={this.closeExportModal}
+        />
       </PageContainer>
     );
   }
@@ -792,7 +814,7 @@ export default (flowRight(
     form: FORM_NAME,
     initialValues: {
       mode: null,
-      selectedSearches: [],
+      selectedSearches: {},
     },
   })
 )(AreaSearchApplicationListPage): React$ComponentType<OwnProps>);

src/areaSearch/components/AreaSearchExportModal.js

@@ -0,0 +1,127 @@
+//@flow
+
+import React, {Component} from 'react';
+import {formValueSelector, reduxForm} from 'redux-form';
+import {flowRight} from 'lodash/util';
+import {connect} from 'react-redux';
+
+import Modal from '$components/modal/Modal';
+import ModalButtonWrapper from '$components/modal/ModalButtonWrapper';
+import Button from '$components/button/Button';
+import {ButtonColors} from '$components/enums';
+import FileDownloadButton from '$components/file/FileDownloadButton';
+import FormField from '$components/form/FormField';
+import {FieldTypes, FormNames} from '$src/enums';
+import type {RootState} from '$src/root/types';
+import createUrl from '$src/api/createUrl';
+
+type OwnProps = {
+  isOpen: boolean,
+  onClose: () => void,
+};
+
+type Props = {
+  ...OwnProps,
+  change: Function,
+  selectedMode: ?string,
+  selectedSearches: {[key: string]: boolean},
+};
+
+export const ExportModes = {
+  APPLICATIONS_XLS: 'APPLICATIONS_XLS',
+  APPLICATIONS_PDF: 'APPLICATIONS_PDF',
+};
+
+class AreaSearchExportModal extends Component<Props> {
+
+  componentDidUpdate(prevProps: Props): void {
+    const {isOpen, change} = this.props;
+
+    if (isOpen && !prevProps.isOpen) {
+      change('mode', null);
+    }
+  }
+
+  render(): React$Node {
+    const {isOpen, onClose, selectedMode, selectedSearches} = this.props;
+
+    const selectedSearchIds = Object.keys(selectedSearches).reduce((acc, key) => {
+      if (selectedSearches[key]) {
+        acc.push(key);
+      }
+
+      return acc;
+    }, []);
+
+    let guideText = '';
+    let downloadUrl = '';
+    switch (selectedMode) {
+      case ExportModes.APPLICATIONS_PDF:
+        guideText = 'Tulostus sisältää valitut hakemukset .pdf-muodossa.';
+        downloadUrl = createUrl(`area_search/get_answers_pdf/?ids=${selectedSearchIds.join(',')}`);
+        break;
+      case ExportModes.APPLICATIONS_XLS:
+        guideText = 'Tulostus sisältää valitut hakemukset .xls-muodossa.';
+        downloadUrl = createUrl(`area_search/get_answers_xlsx/?ids=${selectedSearchIds.join(',')}`);
+        break;
+    }
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title="Tulosta tiedostoon"
+        className="PlotSearchExportModal"
+      >
+
+        <FormField
+          name="mode"
+          fieldAttributes={{
+            type: FieldTypes.CHOICE,
+            required: false,
+            read_only: false,
+            label: 'Tulostusalue',
+            choices: [
+              {
+                value: ExportModes.APPLICATIONS_PDF,
+                display_name: 'Tulosta valitut hakemukset (PDF)',
+              },
+              {
+                value: ExportModes.APPLICATIONS_XLS,
+                display_name: 'Tulosta valitut hakemukset (XLS)',
+              },
+            ],
+          }}
+          disableDirty
+        />
+        {guideText}
+        <ModalButtonWrapper>
+          <Button
+            className={ButtonColors.SECONDARY}
+            onClick={onClose}
+            text="Peruuta"
+          />
+          <FileDownloadButton
+            disabled={!downloadUrl || !selectedMode}
+            url={downloadUrl}
+            label="Tulosta"
+            onSuccess={() => onClose()}
+          />
+        </ModalButtonWrapper>
+      </Modal>
+    );
+  }
+}
+
+const formName = FormNames.AREA_SEARCH_EXPORT;
+
+export default (flowRight(
+  connect((state: RootState) => ({
+    selectedMode: formValueSelector(formName)(state, 'mode'),
+    selectedSearches: formValueSelector(formName)(state, 'selectedSearches'),
+  })),
+  reduxForm({
+    form: formName,
+    destroyOnUnmount: false,
+  })
+)(AreaSearchExportModal): React$ComponentType<OwnProps>);