add custom apps sorting

src/AppMenu.vue

@@ -27,7 +27,9 @@
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
-        :class="{ 'app-menu-entry__active': app.active }">
+        :class="{ 'app-menu-entry__active': app.active }"
+        :style="makeStyle(app)"
+        >
         <a :href="app.href"
           :class="{ 'has-unread': app.unread > 0 }"
           :aria-label="appLabel(app)"
@@ -78,10 +80,17 @@ export default {
   mounted() {
     const ncApps = loadState('core', 'apps', {})
     this.apps = {}
+    let orders = {}
+
+    Array.from(window.topMenuAppsOrder).forEach((app, order) => {
+      orders[app] = order + 1
+    })
+
 
     Array.from(window.topMenuApps).forEach((id) => {
       if (ncApps.hasOwnProperty(id)) {
         this.apps[id] = ncApps[id]
+        this.apps[id].order = orders[id] || null
       }
     })
 
@@ -122,6 +131,11 @@ export default {
       }
       this.appLimit = appCount
     },
+    makeStyle(app) {
+      if (app.order !== null) {
+        return `order: ${app.order}`
+      }
+    }
   },
 }
 </script>

src/admin.js

@@ -257,4 +257,22 @@ document.addEventListener('DOMContentLoaded', () => {
     })
   } catch (e) {
   }
+
+  sortable('#top-menu-apps-order-list .side-menu-setting-list', {
+    placeholderClass: 'side-menu-setting-list-drop'
+  })
+
+  try {
+    sortable('#top-menu-apps-order-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
+      let value = []
+
+      for (let item of document.querySelectorAll('#top-menu-apps-order-list .side-menu-setting-list-item')) {
+        console.log(item.getAttribute('data-id'))
+        value.push(item.getAttribute('data-id'))
+      }
+
+      document.querySelector('input[name="top-menu-apps-order"]').value = JSON.stringify(value)
+    })
+  } catch (e) {
+  }
 })