Merge pull request #2415 from weseek/create-archive-data-and-modal

Create archive data and modal

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

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+
+const ArchiveCreateModal = (props) => {
+
+  const { t } = props;
+
+  const [isCommentDownload, setIsCommentDownload] = useState(false);
+  const [isFileDownload, setIsFileDownload] = useState(false);
+  const [isSubordinatedPageDownload, setIsSubordinatedPageDownload] = useState(false);
+
+
+  function changeIsCommentDownloadHandler() {
+    setIsCommentDownload(!isCommentDownload);
+  }
+  function changeIsFileDownloadHandler() {
+    setIsFileDownload(!isFileDownload);
+  }
+
+  function changeIsSubordinatedPageDownloadHandler() {
+    setIsSubordinatedPageDownload(!isSubordinatedPageDownload);
+  }
+
+  function closeModalHandler() {
+    if (props.onClose == null) {
+      return;
+    }
+
+    props.onClose();
+
+  }
+
+
+  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>
+  );
+};
+
+ArchiveCreateModal.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+};
+
+export default withTranslation()(ArchiveCreateModal);

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

@@ -2,13 +2,11 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
-
-
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
 import OutsideShareLinkModal from '../OutsideShareLinkModal';
-
+import ArchiveCreateModal from '../ArchiveCreateModal';
 
 const PageShareManagement = (props) => {
   const { t, appContainer, pageContainer } = props;
@@ -17,6 +15,8 @@ const PageShareManagement = (props) => {
 
   const [isOutsideShareLinkModalShown, setIsOutsideShareLinkModalShown] = useState(false);
 
+  const [isArchiveCreateModalShown, setIsArchiveCreateModalShown] = useState(false);
+
   function openOutsideShareLinkModalHandler() {
     setIsOutsideShareLinkModalShown(true);
   }
@@ -25,15 +25,32 @@ const PageShareManagement = (props) => {
     setIsOutsideShareLinkModalShown(false);
   }
 
+  function openArchiveModalHandler() {
+    setIsArchiveCreateModalShown(true);
+  }
+
+  function closeArchiveCreateModalHandler() {
+    setIsArchiveCreateModalShown(false);
+  }
+
+
   function renderModals() {
     return (
-      <OutsideShareLinkModal
-        isOpen={isOutsideShareLinkModalShown}
-        onClose={closeOutsideShareLinkModalHandler}
-      />
+      <>
+        <OutsideShareLinkModal
+          isOpen={isOutsideShareLinkModalShown}
+          onClose={closeOutsideShareLinkModalHandler}
+        />
+
+        <ArchiveCreateModal
+          isOpen={isArchiveCreateModalShown}
+          onClose={closeArchiveCreateModalHandler}
+        />
+      </>
     );
   }
 
+
   function renderCurrentUser() {
     return (
       <>
@@ -65,7 +82,6 @@ const PageShareManagement = (props) => {
     );
   }
 
-
   return (
     <>
       {currentUser == null ? renderGuestUser() : renderCurrentUser()}
@@ -74,6 +90,11 @@ const PageShareManagement = (props) => {
           <i className="icon-fw icon-link"></i>{t('Shere this page link to public')}
           <span className="ml-2 badge badge-info badge-pill">{pageContainer.state.shareLinksNumber}</span>
         </button>
+
+        <button className="dropdown-item" type="button" onClick={openArchiveModalHandler}>
+          <i className="icon-fw">{t('Create Archive Page')}</i>
+        </button>
+
       </div>
       {renderModals()}
     </>