create null action

resource/locales/en-US/translation.json

@@ -48,6 +48,11 @@
   "Presentation Mode": "Presentation",
   "Not available for guest": "Not available for guest",
   "Shere this page link to public": "Shere this page link to public",
+  "Create Archive Page": "Create Archive Page",
+  "File type": "File type",
+  "Include Attachment File": "Include Attachment File",
+  "Include Comment": "Include Comment",
+  "Include Subordinated Page": "Include Subordinated Page",
   "username": "Username",
   "Created": "Created",
   "Last updated": "Updated",

resource/locales/ja/translation.json

@@ -48,6 +48,11 @@
   "Presentation Mode": "プレゼンテーション",
   "Not available for guest": "ゲストユーザーは利用できません",
   "Shere this page link to public": "外部に共有するリンクを発行する",
+  "Create Archive Page": "アーカイブページの作成",
+  "File type": "ファイル形式",
+  "Include Attachment File": "添付ファイルも含める",
+  "Include Comment": "コメントも含める",
+  "Include Subordinated Page": "配下ページも含める",
   "username": "ユーザー名",
   "Created": "作成日",
   "Last updated": "最終更新",

src/client/js/components/ArchiveCreateModal.jsx

@@ -1,83 +1,108 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
 
-const ArchiveCreateModal = (props) => {
-  // const [isArchiveCreateModalShown, setIsOpenShareLinkForm] = useState(false);
-
-  return (
-    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose}>
-      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-Light">
-        アーカイブを作成する
-      </ModalHeader>
-      <ModalBody>
-        試作
-      </ModalBody>
-    </Modal>
-  );
-};
-
-// export default class ArchiveCreateModal extends React.PureComponet {
-
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       show: false,
-//       isIncludeComment: false,
-//       isIncludeFile: false,
-//       isCreateAllSubordinatedPage: false,
-//     };
 
-//     this.show = this.show.bind(this);
-//     this.cancel = this.cancel.bind(this);
-//     this.save = this.save.bind(this);
-
-//   }
-
-//   show() {
+const ArchiveCreateModal = (props) => {
 
-//   }
+  const { t } = props;
 
-//   cancel() {
-//     this.hide();
-//   }
+  const [isCommentDownload, setIsCommentDownload] = useState(false);
+  const [isFileDownload, setIsFileDownload] = useState(false);
+  const [isSubordinatedPageDownload, setIsSubordinatedPageDownload] = useState(false);
 
-//   hide() {
-//     this.setState({ show: false });
-//   }
 
-//   save() {
+  function changeIsCommentDownloadHandler() {
+    setIsCommentDownload(!isCommentDownload);
+  }
+  function changeIsFileDownloadHandler() {
+    setIsFileDownload(!isFileDownload);
+  }
 
-//   }
+  function changeIsSubordinatedPageDownloadHandler() {
+    setIsSubordinatedPageDownload(!isSubordinatedPageDownload);
+  }
 
+  function closeModalHandler() {
+    if (props.onClose == null) {
+      return;
+    }
 
-//   render() {
-//     return (
-//       <Modal isOpen={this.state.show} toggle={this.cancel} size="lg">
-//         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
-//           アーカイブ作成
-//         </ModalHeader>
+    props.onClose();
 
-//         <ModalBody className="container">
-//           <div className="custom-control">
-//             <button className="btn btn-outline-secondary d-block mx-auto px-5 mb-3" type="button">アーカイブを作成する</button>
+  }
 
-//             <input className="custom-control-input" type="checkbox" checked={this.state.isIncludeComment} />
-//             <label className="custom-control-label" onClick="this.">コメントもダウンロードする</label>
 
-//             <input className="custom-control-input" type="checkbox" checked={this.isIncludeFile} />
-//             <label className="custom-control-label" onClick="this.">添付ファイルもダウンロードする</label>
+  return (
+    <Modal size="lg" isOpen={props.isOpen} toggle={closeModalHandler}>
+      <ModalHeader tag="h4" toggle={closeModalHandler} className="bg-primary text-white">
+        {t('Create Archive Page')}
+      </ModalHeader>
+      <ModalBody>
+        <div className="form-group">
+          <div className="custom-control custom-radio custom-control-inline ">
+            <label>{t('File type')}: </label>
+          </div>
+          <div className="custom-control custom-radio custom-control-inline ">
+            <input type="radio" className="custom-control-input" />
+            <label className="custom-control-label">MarkDown(.md)</label>
+          </div>
+          <div className="custom-control custom-radio custom-control-inline">
+            <input type="radio" className="custom-control-input" />
+            <label className="custom-control-label">PDF(.pdf)</label>
+          </div>
+        </div>
+
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
+          <input
+            className="custom-control-input"
+            name="comment"
+            id="commentFile"
+            type="checkbox"
+            checked={isCommentDownload}
+            onChange={changeIsCommentDownloadHandler}
+          />
+          <label className="custom-control-label" htmlFor="commentFile">
+            {t('Include Comment')}
+          </label>
+        </div>
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
+          <input
+            className="custom-control-input"
+            id="downloadFile"
+            type="checkbox"
+            checked={isFileDownload}
+            onChange={changeIsFileDownloadHandler}
+          />
+          <label className="custom-control-label" htmlFor="downloadFile">{t('Include Attachment File')}</label>
+        </div>
+        <div className="custom-control custom-checkbox custom-checkbox-warning">
+          <input
+            className="custom-control-input"
+            id="subordinatedFile"
+            type="checkbox"
+            checked={isSubordinatedPageDownload}
+            onChange={changeIsSubordinatedPageDownloadHandler}
+          />
+          <label className="custom-control-label" htmlFor="subordinatedFile">
+            {t('Include Subordinated Page')}
+          </label>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <button type="button">Done</button>
+      </ModalFooter>
+    </Modal>
+  );
+};
 
-//             <input className="custom-control-input" type="checkbox" checked={this.isCreateAllSubordinatedPage} />
-//             <label className="custom-control-label" onClick="this.">配下ページもダウンロードする</label>
-//           </div>
-//         </ModalBody>
-//       </Modal>
-//     );
-//   }
 ArchiveCreateModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
   isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
 };
 
-export default ArchiveCreateModal;
+export default withTranslation()(ArchiveCreateModal);

src/client/js/components/Page/PageShareManagement.jsx

@@ -11,8 +11,6 @@ import OutsideShareLinkModal from '../OutsideShareLinkModal';
 
 import { toastError } from '../../util/apiNotification';
 
-import ArchiveCreateModal from '../ArchiveCreateModal';
-// import ArchiveCreateModal from '../ArchiveCreateModal';
 import ArchiveCreateModal from '../ArchiveCreateModal';
 
 const PageShareManagement = (props) => {
@@ -53,12 +51,10 @@ const PageShareManagement = (props) => {
     exportPage(exportPageFile);
   }
   function openArchiveModalHandler() {
-    console.log('ログ出るで！');
     setIsArchiveCreateModalShown(true);
   }
 
   function closeArchiveCreateModalHandler() {
-    console.log('ログ閉じるで！');
     setIsArchiveCreateModalShown(false);
   }
 
@@ -70,18 +66,15 @@ const PageShareManagement = (props) => {
           isOpen={isOutsideShareLinkModalShown}
           onClose={closeOutsideShareLinkModalHandler}
         />
+
+        <ArchiveCreateModal
+          isOpen={isArchiveCreateModalShown}
+          onClose={closeArchiveCreateModalHandler}
+        />
       </>
     );
   }
 
-  function renderArchiveModals() {
-    return (
-      <ArchiveCreateModal
-        isOpen={isArchiveCreateModalShown}
-        onClose={closeArchiveCreateModalHandler}
-      />
-    );
-  }
 
   function renderCurrentUser() {
     return (
@@ -129,12 +122,12 @@ const PageShareManagement = (props) => {
           <span>{t('export_bulk.export_page_pdf')}</span>
         </button>
 
-        <button className="dropdown-item" type="button" onClick={openArchiveModalHandler}>アーカイブデータを作成する
+        <button className="dropdown-item" type="button" onClick={openArchiveModalHandler}>
+          <i className="icon-fw">{t('Create Archive Page')}</i>
         </button>
 
       </div>
       {renderModals()}
-      {renderArchiveModals()}
     </>
   );