Skip to content

Commit 17f2837

Browse files
ahamdiahamdi
authored
fix: navigation menu appears randomly in wrong place - EXO-64938 - Meeds-io/meeds#1025 (#700)
Navigation menu appears randmly in different places. It does not always appear where it was inserted. The fix avoids browsing the DOM of the notes content and uses a Vuer dynamic component to display the navigation menu.
1 parent 2a9ca4b commit 17f2837

File tree

2 files changed

+77
-41
lines changed

2 files changed

+77
-41
lines changed

‎notes-webapp/src/main/webapp/javascript/eXo/wiki/notesService.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,10 @@ export function getNoteTree(noteBookType, noteBookOwner, noteId,treeType) {
8484
}
8585

8686
export function getFullNoteTree(noteBookType, noteBookOwner, noteId, withDrafts) {
87-
return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/tree/full?path=${noteBookType}/${noteBookOwner}/${noteId}&withDrafts=${withDrafts}`, {
87+
if (noteBookOwner.indexOf('/') !== 0) {
88+
noteBookOwner = `/${noteBookOwner}`;
89+
}
90+
return fetch(`${notesConstants.PORTAL}/${notesConstants.PORTAL_REST}/notes/tree/full?path=${noteBookType}${noteBookOwner}/${noteId}&withDrafts=${withDrafts}`, {
8891
method: 'GET',
8992
credentials: 'include',
9093
}).then(resp => {

‎notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue

Lines changed: 73 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -114,21 +114,9 @@
114114
</div>
115115
<v-divider class="my-4" />
116116
<div class="note-content" v-if="!hasEmptyContent && !isHomeNoteDefaultContent">
117-
<div v-if="showManualChild" id="showManualChild">
118-
<v-treeview
119-
dense
120-
:items="noteAllChildren"
121-
item-key="noteId">
122-
<template #label="{ item }">
123-
<v-list-item-title @click="openNoteChild(item)" class="body-2 clickable primary--text">
124-
<span>{{ item.name }}</span>
125-
</v-list-item-title>
126-
</template>
127-
</v-treeview>
128-
</div>
129117
<div
130-
class="notes-application-content text-color"
131-
v-html="noteVersionContent">
118+
class="notes-application-content text-color">
119+
<component :is="notesContentProcessor" />
132120
</div>
133121
</div>
134122
<div v-else-if="!hasChildren || hasDraft && hasEmptyContent">
@@ -326,7 +314,6 @@ export default {
326314
isDraft: false,
327315
noteTitle: '',
328316
spaceMembersUrl: `${eXo.env.portal.context}/g/:spaces:${eXo.env.portal.spaceGroup}/${eXo.env.portal.spaceUrl}/members`,
329-
hasManualChildren: false,
330317
childNodes: [],
331318
exportStatus: '',
332319
exportId: 0,
@@ -338,7 +325,6 @@ export default {
338325
if (!this.note.draftPage) {
339326
this.getNoteVersionByNoteId(this.note.id);
340327
}
341-
setTimeout(() => this.hasManualChildren = false, 100);
342328
if ( this.note && this.note.breadcrumb && this.note.breadcrumb.length ) {
343329
this.note.breadcrumb[0].title = this.getHomeTitle(this.note.breadcrumb[0].title);
344330
this.currentNoteBreadcrumb = this.note.breadcrumb;
@@ -350,17 +336,6 @@ export default {
350336
this.updateNote(this.note);
351337
}
352338
},
353-
hasManualChildren () {
354-
if (this.hasManualChildren) {
355-
window.setTimeout(() => {
356-
const oldContainer = document.getElementById('showManualChild');
357-
const newContainers = document.getElementById('note-children-container');
358-
if (oldContainer && !newContainers.childNodes.length) {
359-
newContainers.append(...oldContainer.childNodes);
360-
}
361-
}, 100);
362-
}
363-
},
364339
actualVersion() {
365340
if (!this.isDraft) {
366341
this.noteContent = this.actualVersion.content;
@@ -369,17 +344,74 @@ export default {
369344
},
370345
exportStatus(){
371346
if (this.exportStatus.status==='ZIP_CREATED'){
372-
this.stopGetSatus();
347+
this.stopGetStatus();
373348
this.getExportedZip();
374349
this.exportStatus={};
375350
}
376351
if (this.exportStatus.status===null){
377-
this.stopGetSatus();
352+
this.stopGetStatus();
378353
this.exportStatus={};
379354
}
380355
}
381356
},
382357
computed: {
358+
notesContentProcessor() {
359+
return {
360+
template: `<div>${this.formatContent(this.noteContent)}</div>`,
361+
data() {
362+
return {
363+
vTreeComponent: {
364+
template: '<v-treeview \
365+
dense \
366+
:items="noteChildItems" \
367+
item-key="noteId"> \
368+
<template #label="{ item }"> \
369+
<v-list-item-title @click="openNoteChild(item)" class="body-2 clickable primary--text"> \
370+
<span>{{ item.name }}</span> \
371+
</v-list-item-title> \
372+
</template> \
373+
</v-treeview >',
374+
props: {
375+
noteId: 0,
376+
source: '',
377+
noteBookType: '',
378+
noteBookOwner: ''
379+
},
380+
data: function () {
381+
return {
382+
noteChildItems: [],
383+
note: null
384+
};
385+
},
386+
created: function () {
387+
this.$nextTick().then(() => {
388+
this.getNodeById(this.noteId, this.source, this.noteBookType, this.noteBookOwner);
389+
});
390+
},
391+
methods: {
392+
getNodeById(noteId, source, noteBookType, noteBookOwner) {
393+
return this.$notesService.getNoteById(noteId, source, noteBookType, noteBookOwner).then(data => {
394+
this.note = data || {};
395+
this.$notesService.getFullNoteTree(data.wikiType, data.wikiOwner, data.name, false).then(data => {
396+
if (data && data.jsonList.length) {
397+
const allNotesTreeview = data.jsonList;
398+
this.noteChildItems = allNotesTreeview.filter(note => note.name === this.note.title)[0]?.children;
399+
}
400+
});
401+
}).catch(e => {
402+
console.error('Error when getting note', e);
403+
});
404+
},
405+
openNoteChild(item) {
406+
const noteName = item.path.split('%2F').pop();
407+
this.$root.$emit('open-note-by-name', noteName);
408+
},
409+
}
410+
}
411+
};
412+
}
413+
};
414+
},
383415
noteVersionsArray() {
384416
return this.noteVersions.slice(0, this.versionsPageSize);
385417
},
@@ -389,9 +421,6 @@ export default {
389421
hasMoreVersions() {
390422
return this.allNoteVersionsCount > this.versionsPageSize;
391423
},
392-
showManualChild() {
393-
return this.hasManualChildren;
394-
},
395424
noteVersionContent() {
396425
return this.note.content && this.noteContent && this.formatContent(this.noteContent);
397426
},
@@ -473,7 +502,6 @@ export default {
473502
} else {
474503
return 0;
475504
}
476-
477505
},
478506
appName() {
479507
const uris = eXo.env.portal.selectedNodeUri.split('/');
@@ -593,7 +621,7 @@ export default {
593621
this.getExportStatus();
594622
},
595623
cancelExportNotes() {
596-
this.stopGetSatus();
624+
this.stopGetStatus();
597625
this.$notesService.cancelExportNotes(this.exportId).then(() => {
598626
this.$root.$emit('show-alert', {type: 'success', message: this.$t('notes.alert.success.label.export.canceled')});
599627
}).catch(e => {
@@ -628,16 +656,15 @@ export default {
628656
this.exportStatus = data;
629657
this.$refs.notesBreadcrumb.setExportStaus(this.exportStatus);
630658
}).catch(() => {
631-
this.stopGetSatus();
659+
this.stopGetStatus();
632660
});
633661
}, 500);
634662
},
635-
stopGetSatus(){
663+
stopGetStatus(){
636664
clearInterval(this.intervalId);
637665
},
638666
getNoteById(noteId, source) {
639667
return this.$notesService.getNoteById(noteId, source, this.noteBookType, this.noteBookOwner).then(data => {
640-
this.note = {};
641668
this.note = data || {};
642669
this.loadData = true;
643670
this.currentNoteBreadcrumb = this.note.breadcrumb;
@@ -836,12 +863,18 @@ export default {
836863
for (let i = 0; i < contentChildren.length; i++) { // NOSONAR not iterable
837864
const child = contentChildren[i];
838865
if (child.classList.value.includes('navigation-img-wrapper')) {
839-
child.innerHTML = '';
840-
window.setTimeout(() => {this.hasManualChildren = true;},100);
866+
// Props object
867+
const componentProps = {
868+
noteId: this.note.id,
869+
source: '',
870+
noteBookType: this.noteBookType,
871+
noteBookOwner: this.noteBookOwner
872+
};
873+
contentChildren[i].innerHTML = `<component v-bind:is="vTreeComponent" note-id="${componentProps.noteId}" note-book-type="${componentProps.noteBookType}" note-book-owner="${componentProps.noteBookOwner}"></component>`;
841874
}
842875
}
843876
}
844-
return docElement.innerHTML;
877+
return docElement?.children[1].innerHTML;
845878
},
846879
openNoteVersionsHistoryDrawer() {
847880
if (!this.isDraft) {

0 commit comments

Comments
 (0)