Fix rebuild navigation

apps/settings/src/service/rebuild-navigation.js

@@ -1,5 +1,6 @@
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
+import { emit } from '@nextcloud/event-bus'
 
 export default () => {
 	return axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
@@ -8,123 +9,7 @@ export default () => {
 				return
 			}
 
-			const addedApps = {}
-			const navEntries = data.ocs.data
-			const container = document.querySelector('#navigation #apps ul')
-
-			// remove disabled apps
-			navEntries.forEach((entry) => {
-				if (!container.querySelector('li[data-id="' + entry.id + '"]')) {
-					addedApps[entry.id] = true
-				}
-			})
-
-			container.querySelectorAll('li[data-id]').forEach((el, index) => {
-				const id = el.dataset.id
-				// remove all apps that are not in the correct order
-				if (!navEntries[index] || (navEntries[index] && navEntries[index].id !== id)) {
-					el.remove()
-					document.querySelector(`#appmenu li[data-id=${id}]`).remove()
-				}
-			})
-
-			let previousEntry = {}
-			// add enabled apps to #navigation and #appmenu
-			navEntries.forEach((entry) => {
-				if (container.querySelector(`li[data-id="${entry.id}"]`) === null) {
-					const li = document.createElement('li')
-					li.dataset.id = entry.id
-					const img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
-					  <defs>
-					    <filter id="invertMenuMore-${entry.id}"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter>
-					      <mask id="hole">
-					        <rect width="100%" height="100%" fill="white"></rect>
-						<circle r="4.5" cx="17" cy="3" fill="black"></circle>
-					      </mask>
-					  </defs>
-					  <image x="0" y="0" width="16" height="16" filter="url(#invertMenuMore-${entry.id})" preserveAspectRatio="xMinYMin meet" xlink:href="${entry.icon}"  class="app-icon" />
-					</svg>`
-
-					const imgElement = document.createElement('template')
-					imgElement.innerHTML = img
-
-					const a = document.createElement('a')
-					a.setAttribute('href', entry.href)
-
-					const filename = document.createElement('span')
-					filename.appendChild(document.createTextNode(entry.name))
-
-					const loading = document.createElement('div')
-					loading.setAttribute('class', 'unread-counter')
-					loading.style.display = 'none'
-
-					// draw attention to the newly added app entry
-					// by flashing twice the more apps menu
-					if (addedApps[entry.id]) {
-						a.classList.add('animated')
-					}
-
-					a.prepend(imgElement.content.firstChild, loading, filename)
-					li.append(a)
-
-					// add app icon to the navigation
-					const previousElement = document.querySelector(`#navigation li[data-id=${previousEntry.id}]`)
-					if (previousElement) {
-						previousElement.insertAdjacentElement('afterend', li)
-					} else {
-						document.querySelector('#navigation #apps ul').prepend(li)
-					}
-				}
-
-				if (document.getElementById('appmenu').querySelector(`li[data-id="${entry.id}"]`) === null) {
-					const li = document.createElement('li')
-					li.dataset.id = entry.id
-					// Generating svg embedded image (see layout.user.php)
-					let img
-					if (OCA.Theming && OCA.Theming.inverted) {
-						img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
-						  <defs>
-						    <filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter>
-						  </defs>
-						  <image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="${entry.icon}"  class="app-icon" />
-						</svg>`
-					} else {
-						img = `<svg width="20" height="20" viewBox="0 0 20 20" alt="">
-						  <image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" xlink:href="${entry.icon}"  class="app-icon" />
-						</svg>`
-					}
-					const imgElement = document.createElement('template')
-					imgElement.innerHTML = img
-
-					const a = document.createElement('a')
-					a.setAttribute('href', entry.href)
-
-					const filename = document.createElement('span')
-					filename.appendChild(document.createTextNode(entry.name))
-
-					const loading = document.createElement('div')
-					loading.setAttribute('class', 'icon-loading-dark')
-					loading.style.display = 'none'
-
-					// draw attention to the newly added app entry
-					// by flashing twice the more apps menu
-					if (addedApps[entry.id]) {
-						a.classList.add('animated')
-					}
-
-					a.prepend(loading, filename, imgElement.content.firstChild)
-					li.append(a)
-
-					// add app icon to the navigation
-					const previousElement = document.querySelector('#appmenu li[data-id=' + previousEntry.id + ']')
-					if (previousElement) {
-						previousElement.insertAdjacentElement('afterend', li)
-					} else {
-						document.queryElementById('appmenu').prepend(li)
-					}
-				}
-				previousEntry = entry
-			})
+			emit('nextcloud:app-menu.refresh', { apps: data.ocs.data })
 			window.dispatchEvent(new Event('resize'))
 		})
 }

core/src/components/AppMenu.vue

@@ -60,6 +60,7 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
 
@@ -95,14 +96,19 @@ export default {
 		this.observer = new ResizeObserver(this.resize)
 		this.observer.observe(this.$el)
 		this.resize()
+		subscribe('nextcloud:app-menu.refresh', this.setApps)
 	},
 	beforeDestroy() {
 		this.observer.disconnect()
+		unsubscribe('nextcloud:app-menu.refresh', this.setApps)
 	},
 	methods: {
 		setNavigationCounter(id, counter) {
 			this.$set(this.apps[id], 'unread', counter)
 		},
+		setApps({ apps }) {
+			this.apps = apps
+		},
 		resize() {
 			const availableWidth = this.$el.offsetWidth
 			let appCount = Math.floor(availableWidth / 50) - 1