feat: Enhance treeview navigation display in article details when pub…

…lish note with navigation - EXO-75747 - Meeds-io/MIPs#161 (#344)

Enhance treeview navigation display in article details when publish note
with navigation using same template as in the edit mode

content-webapp/pom.xml

@@ -39,6 +39,12 @@
       <classifier>sources</classifier>
       <scope>provided</scope>
     </dependency>
+    <dependency>
+      <groupId>io.meeds.notes</groupId>
+      <artifactId>notes-webapp</artifactId>
+      <classifier>sources</classifier>
+      <scope>provided</scope>
+    </dependency>
     <dependency>
       <groupId>io.meeds.commons</groupId>
       <artifactId>commons-api</artifactId>
@@ -117,7 +123,7 @@
               <goal>unpack-dependencies</goal>
             </goals>
             <configuration>
-              <includeArtifactIds>platform-ui-skin,commons-extension-webapp</includeArtifactIds>
+              <includeArtifactIds>platform-ui-skin,commons-extension-webapp,notes-webapp</includeArtifactIds>
               <outputDirectory>${project.build.directory}/src/main/webapp</outputDirectory>
               <excludes>**/custom-variables.less</excludes>
             </configuration>

content-webapp/src/main/webapp/skin/less/newsDetails.less

@@ -21,6 +21,7 @@
 @import "variables.less";
 @import "../../ckeditor/skins/common/extendedRichContent.less";
 @import (less) "../../ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css";
+
 @grayDark: #333;
 
 .singlePageApplicationTDContainer {
@@ -108,6 +109,19 @@
       background: rgba(0, 0, 0, 0.5);
       color: @whiteColorDefault
     }
+
+    .content-treeview-processor {
+      @import (less) "../../toc/toc.css";
+
+      .navigation-img-wrapper .image-navigation,
+      .navigation-img-wrapper .image-navigation * {
+        cursor: pointer !important;
+      }
+
+      .navigation-img-wrapper figure #remove-treeview {
+        display: none !important;
+      }
+    }
   }
 }
 

content-webapp/src/main/webapp/vue-app/news-details/components/ExoNewsDetails.vue

@@ -213,6 +213,7 @@ export default {
     this.$root.$on('open-edit-publishing-drawer', this.openPublicationDrawer);
     this.$root.$on('refer-article-to-note', this.referArticle);
     this.$root.$on('move-page', this.moveArticlePage);
+    this.bindTreeViewNavigationClickListener();
   },
   methods: {
     moveArticlePage(page, newParentPage) {
@@ -446,6 +447,14 @@ export default {
         alertLink: message.alertLink
       }}));
     },
+    bindTreeViewNavigationClickListener() {
+      const self = this;
+      document.addEventListener('click', function (event) {
+        if (event.target.closest('.image-navigation')) {
+          window.location.href = self.articlePage.url;
+        }
+      });
+    },
   }
 };
 </script>

content-webapp/src/main/webapp/vue-app/news-details/components/ExoNewsDetailsBody.vue

@@ -133,7 +133,7 @@
           </div>
         </div>
         <div
-          class="mt-8 rich-editor-content extended-rich-content"
+          class="mt-8 content-treeview-processor rich-editor-content extended-rich-content"
           v-sanitized-html="newsBody">
         </div>
       </div>

content-webapp/src/main/webapp/vue-app/news-extensions/note-publish-extensions/main.js

@@ -1,6 +1,18 @@
 import * as publishService from './publishService';
 import {initPublishExtension} from './extensions.js';
 
+const treeViewNavigationTemplate = `
+        <div 
+          id="note-children-container" 
+          class="navigation-img-wrapper" 
+          contenteditable="false">
+          <figure class="image-navigation" contenteditable="false">
+            <img src="/notes/images/children.png" role="presentation"/>
+            <img src="/notes/images/trash.png" id="remove-treeview" alt="remove treeview"/>
+            <figcaption class="note-navigation-label">Navigation</figcaption>
+          </figure>
+        </div>
+        <p></p>`;
 
 document.addEventListener('note-navigation-updated', handleNoteNavigationUpdate);
 document.addEventListener('publish-note', publishNote);
@@ -16,13 +28,21 @@ function publishNote(event) {
       updateSavedPublicationSettings(article.id);
     });
   } else {
+    checkInsertTocNavigationTemplate(article);
     publishService.saveNoteArticle(article, spaceId).then((article) => {
       emitNotePublished(false, !!article?.schedulePostDate, article?.url);
       updateSavedPublicationSettings(article.id);
     });
   }
 }
 
+function checkInsertTocNavigationTemplate(article) {
+  if (article.isHomeDefaultContent && article.hasChildren) {
+    article.content = treeViewNavigationTemplate;
+    publishService.updateArticlePage(article);
+  }
+}
+
 function handleNoteNavigationUpdate(event) {
   const {noteId} = event.detail;
   publishService.getSavedNotePublicationSettings(noteId).then(settings => {
@@ -42,7 +62,7 @@ function updateSavedPublicationSettings(noteId) {
   });
 }
 
-function extractNoteIdFormUrl() {
+function extractNoteIdFromUrl() {
   const url = window.location.href;
   const regex = /\/notes\/(\d+)$/;
   const match = regex.exec(url);
@@ -61,7 +81,8 @@ function emitNotePublished(edit, isPublishSchedule, link) {
 
 export async function init() {
   try {
-    const noteId = extractNoteIdFormUrl();
+    const wikiOwner = `/spaces/${eXo.env.portal.spaceGroup}`;
+    const noteId = extractNoteIdFromUrl() ?? (await publishService.getNoteHomePage('group', wikiOwner))?.id;
     const [canPublish, savedSettings, targets] = await Promise.all([
       publishService.canPublish(spaceId),
       publishService.getSavedNotePublicationSettings(noteId),

content-webapp/src/main/webapp/vue-app/news-extensions/note-publish-extensions/publishService.js

@@ -42,6 +42,14 @@ export async function getSavedNotePublicationSettings(id, lang) {
   }
 }
 
+export function getNoteHomePage(type, owner) {
+  return newsService.getPageByTypeOwnerAndName(type, owner, 'Home');
+}
+
+export function updateArticlePage(page) {
+  return newsService.updateArticlePage(page);
+}
+
 export function saveNoteArticle(article, spaceId) {
   article = noteToArticle(article, spaceId);
   if (article?.schedulePostDate) {

content-webapp/src/main/webapp/vue-app/services/newsServices.js

@@ -315,3 +315,11 @@ export function getArticlePage(pageId) {
 export function moveArticlePage(page, newParentPage) {
   return Vue.prototype.$notesService.moveNotes(page, newParentPage);
 }
+
+export function getPageByTypeOwnerAndName(type, owner, name) {
+  return Vue.prototype.$notesService.getNote(type, owner, name);
+}
+
+export function updateArticlePage(page) {
+  return Vue.prototype.$notesService.updateNoteById(page);
+}