impl GrowiZipImportConfigurationModal

src/client/js/components/Admin/ImportData/GrowiZipImportConfigurationModal.jsx

@@ -20,23 +20,65 @@ class GrowiZipImportConfigurationModal extends React.Component {
     super(props);
 
     this.state = {
-      option: this.props.option,
+      option: Object.assign({}, this.props.option), // clone
     };
+
+    this.initialize = this.initialize.bind(this);
+    this.updateOption = this.updateOption.bind(this);
+  }
+
+  initialize() {
+    this.setState({
+      option: Object.assign({}, this.props.option), // clone
+    });
+  }
+
+  /**
+   * invoked when the value of control is changed
+   * @param {object} updateObj
+   */
+  changeHandler(updateObj) {
+    const { option } = this.state;
+    Object.assign(option, updateObj);
+    this.setState({ option });
+  }
+
+  updateOption() {
+    const { collectionName, onOptionChange, onClose } = this.props;
+    const { option } = this.state;
+
+    if (onOptionChange != null) {
+      onOptionChange(collectionName, option);
+    }
+
+    onClose();
   }
 
   renderPagesContents() {
+    const { option } = this.state;
+
     /* eslint-disable react/no-unescaped-entities */
     return (
       <>
         <div className="checkbox checkbox-warning">
-          <input id="cbOpt4" type="checkbox" />
+          <input
+            id="cbOpt4"
+            type="checkbox"
+            checked={option.isOverwriteAuthorWithCurrentUser}
+            onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
+          />
           <label htmlFor="cbOpt4">
             Overwrite page's author with the current user
             <p className="help-block mt-0">Recommended <span className="text-danger">NOT</span> to check this when users will also be restored.</p>
           </label>
         </div>
         <div className="checkbox checkbox-warning">
-          <input id="cbOpt1" type="checkbox" />
+          <input
+            id="cbOpt1"
+            type="checkbox"
+            checked={option.makePublicForGrant2}
+            onChange={() => this.changeHandler({ makePublicForGrant2: !option.makePublicForGrant2 })}
+          />
           <label htmlFor="cbOpt1">
             Set 'Public' to the pages that is 'Anyone with the link'
             <p className="help-block mt-0">
@@ -45,7 +87,12 @@ class GrowiZipImportConfigurationModal extends React.Component {
           </label>
         </div>
         <div className="checkbox checkbox-warning">
-          <input id="cbOpt2" type="checkbox" />
+          <input
+            id="cbOpt2"
+            type="checkbox"
+            checked={option.makePublicForGrant4}
+            onChange={() => this.changeHandler({ makePublicForGrant4: !option.makePublicForGrant4 })}
+          />
           <label htmlFor="cbOpt2">
             Set 'Public' to the pages that is 'Just me'
             <p className="help-block mt-0">
@@ -54,7 +101,12 @@ class GrowiZipImportConfigurationModal extends React.Component {
           </label>
         </div>
         <div className="checkbox checkbox-warning">
-          <input id="cbOpt3" type="checkbox" />
+          <input
+            id="cbOpt3"
+            type="checkbox"
+            checked={option.makePublicForGrant5}
+            onChange={() => this.changeHandler({ makePublicForGrant5: !option.makePublicForGrant5 })}
+          />
           <label htmlFor="cbOpt3">
             Set 'Public' to the pages that is 'Only inside the group'
             <p className="help-block mt-0">
@@ -63,14 +115,24 @@ class GrowiZipImportConfigurationModal extends React.Component {
           </label>
         </div>
         <div className="checkbox checkbox-default">
-          <input id="cbOpt5" type="checkbox" />
+          <input
+            id="cbOpt5"
+            type="checkbox"
+            checked={option.initPageMetadatas}
+            onChange={() => this.changeHandler({ initPageMetadatas: !option.initPageMetadatas })}
+          />
           <label htmlFor="cbOpt5">
             Initialize page's like, read users and comment count
             <p className="help-block mt-0">Recommended <span className="text-danger">NOT</span> to check this when users will also be restored.</p>
           </label>
         </div>
         <div className="checkbox checkbox-default">
-          <input id="cbOpt6" type="checkbox" />
+          <input
+            id="cbOpt6"
+            type="checkbox"
+            checked={option.initHackmdDatas}
+            onChange={() => this.changeHandler({ initHackmdDatas: !option.initHackmdDatas })}
+          />
           <label htmlFor="cbOpt6">
             Initialize HackMD related data
             <p className="help-block mt-0">Recommended to check this unless there is important drafts on HackMD.</p>
@@ -82,7 +144,7 @@ class GrowiZipImportConfigurationModal extends React.Component {
   }
 
   render() {
-    const { collectionName } = this.props;
+    const { t, collectionName } = this.props;
 
     let contents = null;
     switch (collectionName) {
@@ -92,7 +154,7 @@ class GrowiZipImportConfigurationModal extends React.Component {
     }
 
     return (
-      <Modal show={this.props.isOpen} onHide={this.props.onClose}>
+      <Modal show={this.props.isOpen} onHide={this.props.onClose} onExited={this.initialize}>
         <Modal.Header closeButton>
           <Modal.Title>{`'${collectionName}'`} Configuration</Modal.Title>
         </Modal.Header>
@@ -100,6 +162,11 @@ class GrowiZipImportConfigurationModal extends React.Component {
         <Modal.Body>
           {contents}
         </Modal.Body>
+
+        <Modal.Footer>
+          <button type="button" className="btn btn-sm btn-default" onClick={this.props.onClose}>{t('Cancel')}</button>
+          <button type="button" className="btn btn-sm btn-primary" onClick={this.updateOption}>{t('Update')}</button>
+        </Modal.Footer>
       </Modal>
     );
   }
@@ -111,6 +178,7 @@ GrowiZipImportConfigurationModal.propTypes = {
 
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  onOptionChange: PropTypes.func,
 
   collectionName: PropTypes.string,
   option: PropTypes.instanceOf(GrowiArchiveImportOption).isRequired,