Merge pull request #2666 from weseek/imprv/gw3374

Imprv/gw3374

resource/locales/en_US/translation.json

@@ -297,6 +297,7 @@
     "label": {
       "Move/Rename page": "Move/Rename page",
       "New page name": "New page name",
+      "Fail to get subordinated pages": "Fail to get subordinated pages",
       "Current page name": "Current page name",
       "Recursively": "Recursively",
       "Do not update metadata": "Do not update metadata",

resource/locales/ja_JP/translation.json

@@ -299,6 +299,7 @@
     "label": {
       "Move/Rename page": "ページを移動/名前変更する",
       "New page name": "移動先のページ名",
+      "Fail to get subordinated pages": "配下ページの取得に失敗しました",
       "Current page name": "現在のページ名",
       "Recursively": "再帰的に移動/名前変更",
       "Do not update metadata": "メタデータを更新しない",

resource/locales/zh_CN/translation.json

@@ -271,7 +271,8 @@
 	"modal_rename": {
 		"label": {
 			"Move/Rename page": "页面 移动/重命名",
-			"New page name": "新建页面名称",
+      "New page name": "新建页面名称",
+      "Fail to get subordinated pages": "Fail to get subordinated pages",
 			"Current page name": "当前页面名称",
 			"Recursively": "递归地",
 			"Do not update metadata": "不更新元数据",

src/client/js/components/ComparePathsTable.jsx

@@ -14,24 +14,24 @@ function ComparePathsTable(props) {
   const { path } = pageContainer.state;
 
   return (
-    <table className="table table-bordered">
+    <table className="table table-bordered grw-compare-page-table">
       <thead>
-        <tr>
+        <tr className="d-flex">
           <th className="w-50">{t('original_path')}</th>
           <th className="w-50">{t('new_path')}</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody className="overflow-auto d-block">
         {subordinatedPages.map((subordinatedPage) => {
           const convertedPath = convertToNewAffiliationPath(path, newPagePath, subordinatedPage.path);
           return (
-            <tr key={subordinatedPage._id}>
-              <td className="text-break">
+            <tr key={subordinatedPage._id} className="d-flex">
+              <td className="text-break w-50">
                 <a href={subordinatedPage.path}>
                   {subordinatedPage.path}
                 </a>
               </td>
-              <td className="text-break">
+              <td className="text-break w-50">
                 {convertedPath}
               </td>
             </tr>

src/client/js/components/PageRenameModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -8,10 +8,12 @@ import {
 import { withTranslation } from 'react-i18next';
 
 import { withUnstatedContainers } from './UnstatedUtils';
+import { toastError } from '../util/apiNotification';
 
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
+import ComparePathsTable from './ComparePathsTable';
 
 const PageRenameModal = (props) => {
   const {
@@ -26,14 +28,22 @@ const PageRenameModal = (props) => {
 
   const [errs, setErrs] = useState(null);
 
+  const [subordinatedPages, setSubordinatedPages] = useState([]);
   const [isRenameRecursively, SetIsRenameRecursively] = useState(true);
   const [isRenameRedirect, SetIsRenameRedirect] = useState(false);
   const [isRenameMetadata, SetIsRenameMetadata] = useState(false);
+  const [subordinatedError] = useState(null);
+  const [isDuplicateRecursivelyWithoutExistPath, setIsDuplicateRecursivelyWithoutExistPath] = useState(true);
+
 
   function changeIsRenameRecursivelyHandler() {
     SetIsRenameRecursively(!isRenameRecursively);
   }
 
+  function changeIsDuplicateRecursivelyWithoutExistPathHandler() {
+    setIsDuplicateRecursivelyWithoutExistPath(!isDuplicateRecursivelyWithoutExistPath);
+  }
+
   function changeIsRenameRedirectHandler() {
     SetIsRenameRedirect(!isRenameRedirect);
   }
@@ -42,6 +52,24 @@ const PageRenameModal = (props) => {
     SetIsRenameMetadata(!isRenameMetadata);
   }
 
+  const updateSubordinatedList = useCallback(async() => {
+    try {
+      const res = await appContainer.apiv3Get('/pages/subordinated-list', { path });
+      const { subordinatedPaths } = res.data;
+      setSubordinatedPages(subordinatedPaths);
+    }
+    catch (err) {
+      setErrs(err);
+      toastError(t('modal_duplicate.label.Fail to get subordinated pages'));
+    }
+  }, [appContainer, path, t]);
+
+  useEffect(() => {
+    if (props.isOpen) {
+      updateSubordinatedList();
+    }
+  }, [props.isOpen, updateSubordinatedList]);
+
   /**
    * change pageNameInput
    * @param {string} value
@@ -116,6 +144,23 @@ const PageRenameModal = (props) => {
             { t('modal_rename.label.Recursively') }
             <p className="form-text text-muted mt-0">{ t('modal_rename.help.recursive') }</p>
           </label>
+          <div
+            className="custom-control custom-checkbox custom-checkbox-warning"
+            style={{ display: isRenameRecursively ? '' : 'none' }}
+          >
+            <input
+              className="custom-control-input"
+              name="withoutExistRecursively"
+              id="cbDuplicatewithoutExistRecursively"
+              type="checkbox"
+              checked={isDuplicateRecursivelyWithoutExistPath}
+              onChange={changeIsDuplicateRecursivelyWithoutExistPathHandler}
+            />
+            <label className="custom-control-label" htmlFor="cbDuplicatewithoutExistRecursively">
+              { t('modal_duplicate.label.Duplicate without exist path') }
+            </label>
+          </div>
+          {isRenameRecursively && <ComparePathsTable subordinatedPages={subordinatedPages} newPagePath={pageNameInput} />}
         </div>
 
         <div className="custom-control custom-checkbox custom-checkbox-success">
@@ -147,6 +192,7 @@ const PageRenameModal = (props) => {
             <p className="form-text text-muted mt-0">{ t('modal_rename.help.metadata') }</p>
           </label>
         </div>
+        <div> {subordinatedError} </div>
       </ModalBody>
       <ModalFooter>
         <ApiErrorMessageList errs={errs} targetPath={pageNameInput} />

src/client/styles/scss/_create-page.scss

@@ -12,4 +12,10 @@
   .create-page-under-tree-label code {
     font-family: $font-family-monospace-not-strictly;
   }
+
+  .grw-compare-page-table {
+    tbody {
+      max-height: 200px;
+    }
+  }
 }