Merge pull request #442 from weseek/feat/auto-tempalte-UI

Feat/auto tempalte ui

lib/locales/en-US/translation.json

@@ -26,10 +26,11 @@
   "Sign in with Google Account": "Sign in with Google Account",
   "Sign up with this Google Account": "Sign up with this Google Account",
   "Example": "Example",
-  "Taro Yamada": "James Bond",
+  "Taro Yamada": "John Doe",
 
   "List View": "List",
   "Timeline View": "Timeline",
+  "History": "History",
   "Presentation Mode": "Presentation",
 
   "Created": "Created",
@@ -41,6 +42,8 @@
 
   "Management Wiki": "Management Wiki",
 
+  "Create/Edit Template": "Create/Edit Template",
+
   "Unportalize": "Unportalize",
 
   "View this version": "View this version",
@@ -78,6 +81,10 @@
   "Input page name (optional)": "Input page name (optional)",
   "New Page": "New Page",
   "Create under": "Create page under: <code>%s</code>",
+  "Create template under": "Create template under: <code>%s</code>",
+  "Option select template": "Select template type",
+  "Option local template": "Local Template(/__template) - Applies only to immediate decendant pages",
+  "Option global template": "Global Template(/_template) - Applies to all decendant pages",
 
   "Table of Contents": "Table of Contents",
 
@@ -187,6 +194,18 @@
     }
   },
 
+  "modal_template": {
+    "label": {
+      "Create template": "Create a new template for <code>%s</code>",
+      "Local template": "Local Template",
+      "Global template": "Global Template"
+    },
+    "help": {
+      "Local template": "Applies only to immediate decendant pages",
+      "Global template": "Applies to all decendant pages"
+    }
+  },
+
   "modal_duplicate": {
     "label": {
       "Duplicate page": "Duplicate page",

lib/locales/ja/translation.json

@@ -30,6 +30,8 @@
 
   "List View": "リスト表示",
   "Timeline View": "タイムライン表示",
+  "History": "更新履歴",
+  "Presentation Mode": "プレゼンテーション",
 
   "Created": "作成日",
   "Last updated": "最終更新",
@@ -38,6 +40,8 @@
   "Share Link": "共有用リンク",
   "Markdown Link": "Markdown形式のリンク",
 
+  "Create/Edit Template": "テンプレートの作成/編集",
+
   "Unportalize": "ポータル解除",
 
   "View this version": "このバージョンを見る",
@@ -75,8 +79,11 @@
   "Input page name": "ページ名を入力",
   "Input page name (optional)": "ページ名を入力(空欄OK)",
   "New Page": "新規ページ",
-  "Create under": "<code>%s</code>以下に作成",
-
+  "Create under": "ページを<code>%s</code>以下に作成",
+  "Create template under": "テンプレートを<code>%s</code>以下に作成",
+  "Option select template": "テンプレートタイプを選択してください",
+  "Option local template": "ローカルテンプレート(/__template) - 指定されたパス直下のページにのみ適応されます",
+  "Option global template": "グローバルテンプレート(/_template) - 指定されたパス以下すべてのページに適応されます",
 
 
 
@@ -207,6 +214,18 @@
     }
   },
 
+  "modal_template": {
+    "label": {
+      "Create template": "<code>%s</code> にテンプレートを作成します",
+      "Local template": "ローカルテンプレート",
+      "Global template": "グローバルテンプレート"
+    },
+    "help": {
+      "Local template": "指定されたパス直下のページにのみ<br>適応されます。",
+      "Global template": "指定されたパス以下すべてのページに<br>適応されます。"
+    }
+  },
+
   "modal_duplicate": {
     "label": {
       "Duplicate page": "ページを複製する",

lib/models/page.js

@@ -527,6 +527,26 @@ module.exports = function(crowi) {
     });
   };
 
+  // check if a given page has a local and global tempalte
+  pageSchema.statics.checkIfTemplatesExist = function(path) {
+    const Page = this;
+    const pathList = generatePathsOnTree(path, []);
+    const regexpList = pathList.map(path => new RegExp(`${path}/_{1,2}template`));
+    let templateInfo = {
+      localTemplateExists: false,
+      globalTemplateExists: false,
+    };
+
+    return Page
+      .find({path: {$in: regexpList}})
+      .then(templates => {
+        templateInfo.localTemplateExists = (assignTemplateByType(templates, path, '__') ? true : false);
+        templateInfo.globalTemplateExists = (assignGlobalTemplate(templates, path) ? true : false);
+
+        return templateInfo;
+      });
+  };
+
   /**
    * find all templates applicable to the new page
    */

lib/routes/page.js

@@ -252,6 +252,8 @@ module.exports = function(crowi, app) {
       tree: [],
       pageRelatedGroup: null,
       template: null,
+      localTemplateExists: false,
+      globalTemplateExists: false,
     };
 
     var pageTeamplate = 'customlayout-selector/page';
@@ -280,6 +282,13 @@ module.exports = function(crowi, app) {
         .then(function(tree) {
           renderVars.tree = tree;
         })
+        .then(function() {
+          return Page.checkIfTemplatesExist(originalPath);
+        })
+        .then(function(templateInfo) {
+          renderVars.localTemplateExists = templateInfo.localTemplateExists;
+          renderVars.globalTemplateExists = templateInfo.globalTemplateExists;
+        })
         .then(() => {
           return PageGroupRelation.findByPage(renderVars.page);
         })
@@ -434,9 +443,13 @@ module.exports = function(crowi, app) {
   function renderPage(pageData, req, res) {
     // create page
     if (!pageData) {
-      return res.render('customlayout-selector/not_found', {
-        author: {},
-        page: false,
+      Page.findTemplate(getPathFromRequest(req))
+      .then((template) => {
+        return res.render('customlayout-selector/not_found', {
+          author: {},
+          page: false,
+          template: template,
+        });
       });
     }
 
@@ -449,6 +462,8 @@ module.exports = function(crowi, app) {
       page: pageData,
       revision: pageData.revision || {},
       author: pageData.revision.author || false,
+      localTemplateExists: false,
+      globalTemplateExists: false,
     };
     var userPage = isUserPage(pageData.path);
     var userData = null;
@@ -493,6 +508,12 @@ module.exports = function(crowi, app) {
       }
     }).then(function() {
       return interceptorManager.process('beforeRenderPage', req, res, renderVars);
+    }).then(function() {
+      return Page.checkIfTemplatesExist(pageData.path)
+        .then(function(templateInfo) {
+          renderVars.localTemplateExists = templateInfo.localTemplateExists;
+          renderVars.globalTemplateExists = templateInfo.globalTemplateExists;
+        });
     }).then(function() {
       var defaultPageTeamplate = 'customlayout-selector/page';
       if (userData) {
@@ -554,7 +575,6 @@ module.exports = function(crowi, app) {
           return res.redirect(pagePathUtil.encodePagePath(path) + '/');
         }
         else {
-
           var fixed = Page.fixToCreatableName(path);
           if (fixed !== path) {
             debug('fixed page name', fixed);

lib/views/modal/create_page.html

@@ -44,8 +44,46 @@
           </fieldset>
         </form>
 
+        <div id = "template-form" class="row form-horizontal m-t-15">
+          <fieldset class="col-xs-12">
+            <legend>{{ t('Create template under', parentPath(path)) }}</legend>
+            <div class="d-flex create-page-input-container">
+              <div class="create-page-input-row d-flex align-items-center">
+                <select id="template-type" class="page-name-input form-control">
+                  <option value="" disabled selected>{{ t('Option select template') }}</option>
+                  <option value="local">{{ t('Option local template', parentPath(path)) }}</option>
+                  <option value="global">{{ t('Option global template', parentPath(path)) }}</option>
+                </select>
+              </div>
+              <div class="create-page-button-container">
+                  <a id="link-to-template" href="{{ page.path || path }}"><button class="fcbtn btn btn-outline btn-rounded btn-primary btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button></a>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+
       </div><!-- /.modal-body -->
 
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+<script>
+  if($("#create-page")) {
+    let pagePath = $("#link-to-template").attr("href");
+
+    if (pagePath.endsWith("/")) {
+      pagePath = pagePath.slice(0, -1);
+    };
+
+    $("#template-type").on("change", () => {
+      if ($("#template-type").val() === "local") {
+        href = pagePath + "/__template#edit-form";
+        $("#link-to-template").attr("href", href);
+      }
+      else if ($("#template-type").val() === "global") {
+        href = pagePath + "/_template#edit-form";
+        $("#link-to-template").attr("href", href);
+      };
+    });
+  };
+</script>

lib/views/modal/create_template.html

@@ -0,0 +1,42 @@
+<div class="modal" id="create-template">
+  <div class="modal-dialog">
+    <div class="modal-content">
+
+      <div class="modal-header bg-primary">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <div class="modal-title">{{ t('Create/Edit Template') }}</div>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="">{{ t('modal_template.label.Create template', page.path) }}</label><br><br>
+          <div class="row">
+            <div class="col-sm-6">
+              <p class="help-block text-center"><strong>{{ t('modal_template.label.Local template') }}</strong></p>
+              <p class="help-block text-center"><small>{{ t('modal_template.help.Local template') }}</small></p>
+              <br>
+              <div class="d-flex justify-content-center">
+                {% if localTemplateExists %}
+                <a href="{{ page.path }}/__template#edit-form"><button class="btn btn-xs btn-primary">{{ t('Edit') }}</button></a>
+                {% else %}
+                <a href="{{ page.path }}/__template#edit-form"><button class="btn btn-xs btn-primary">{{ t('Create') }}</button></a>
+                {% endif %}
+              </div>
+            </div>
+            <div class="col-sm-6">
+                <p class="help-block text-center"><strong>{{ t('modal_template.label.Global template') }}</strong></p>
+                <p class="help-block text-center"><small>{{ t('modal_template.help.Global template') }}</small></p>
+                <br>
+                <div class="d-flex justify-content-center">
+                  {% if globalTemplateExists %}
+                  <a href="{{ page.path }}/_template#edit-form"><button class="btn btn-xs btn-primary">{{ t('Edit') }}</button></a>
+                  {% else %}
+                  <a href="{{ page.path }}/_template#edit-form"><button class="btn btn-xs btn-primary">{{ t('Create') }}</button></a>
+                  {% endif %}
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->

lib/views/widget/not_found_content.html

@@ -17,10 +17,16 @@
 
   <div class="tab-content">
     {% if isEnabledAttachTitleHeader() %}
+    {% if template %}
+    <script type="text/template" id="raw-text-original"># {{ path|path2name }}&NewLine;{{ template }}</script>
+    {% else %}
     <script type="text/template" id="raw-text-original"># {{ path|path2name }}</script>
-    {% elseif template %}
+    {% endif %}
+    {% else %}
+    {% if template %}
     <script type="text/template" id="raw-text-original">{{ template }}</script>
     {% endif %}
+    {% endif %}
     {# list view #}
     <div class="p-t-10 active tab-pane page-list-container" id="revision-body">
       {% if pages.length == 0 %}

lib/views/widget/page_modals.html

@@ -1,5 +1,6 @@
 {% include '../modal/rename.html' %}
 {% include '../modal/delete.html' %}
+{% include '../modal/create_template.html' %}
 {% include '../modal/duplicate.html' %}
 {% include '../modal/put_back.html' %}
 {% include '../modal/page_name_warning.html' %}

lib/views/widget/page_tabs.html

@@ -30,6 +30,7 @@
       <ul class="dropdown-menu">
         <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move') }}</a></li>
         <li class="divider"></li>
+        <li class=""><a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Create/Edit Template') }}</a></li>
         <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
         {% if isDeletablePage() %}
         <li class="divider"></li>
@@ -51,7 +52,7 @@
 
   <li class="nav-main-right-tab pull-right">
     <a href="#revision-history" data-toggle="tab">
-      <i class="icon-layers"></i><span class="hidden-xs">  History</span>
+      <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
     </a>
   </li>
   {% if not isPortal %}

resource/styles/scss/_create-page.scss

@@ -11,7 +11,7 @@
       margin-bottom: 10px;
     }
 
-    form {
+    form, #template-form {
 
       // layout
       .create-page-input-container {