add app orderer

package.json

@@ -16,7 +16,8 @@
     "node-polyfill-webpack-plugin": "^4.1.0",
     "pinia": "^3.0.1",
     "postcss": "^7.0.0 || ^8.0.1",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vuedraggable": "^4.1.0"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"

src/components/settings/form/FormAppSort.vue

@@ -0,0 +1,134 @@
+<!--
+@license GNU AGPL version 3 or any later version
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<template>
+  <NcButton
+    aria-label="t('side_menu', 'Sort apps')"
+    variant="primary"
+    @click="openModal"
+  >
+    {{ t('side_menu', 'Sort apps') }}
+  </NcButton>
+
+  <NcModal
+    v-if="modal"
+    size="small"
+    @close="closeModal"
+  >
+    <div class="modal__content">
+      <draggable
+        v-model="apps"
+        @end="update"
+        item-key="id"
+      >
+        <template #item="{element}">
+          <div class="draggable">
+            <span class="arrow">⇅</span>
+            {{element.name}}
+          </div>
+         </template>
+      </draggable>
+
+      <div class="modal__footer">
+        <NcButton
+          variant="primary"
+          @click="closeModal"
+        >
+          {{ t('side_menu', 'Close') }}
+        </NcButton>
+      </div>
+    </div>
+  </NcModal>
+</template>
+
+<script setup>
+import { NcButton, NcModal } from '@nextcloud/vue'
+import { useNavStore } from '../../../store/nav.js'
+import { ref, onMounted } from 'vue'
+import draggable from 'vuedraggable'
+
+const model = defineModel({ type: Array })
+
+const emit = defineEmits(['update:modelValue'])
+const navStore = useNavStore()
+const modal = ref(false)
+const apps = ref([])
+
+const openModal = () => {
+  modal.value = true
+}
+
+const closeModal = () => {
+  modal.value = false
+}
+
+const setApps = (items) => {
+  apps.value = []
+
+  model.value.forEach((id) => {
+    items.forEach((app) => {
+      if (app.id === id) {
+        apps.value.push(app)
+      }
+    })
+  })
+
+  items.forEach((app) => {
+    if (!apps.value.find((element) => element.id === app.id)) {
+      apps.value.push(app)
+    }
+  })
+}
+
+const update = () => {
+  const value = []
+
+  apps.value.forEach((app) => {
+    value.push(app.id)
+  })
+
+  emit('update:modelValue', value)
+}
+
+onMounted(async () => {
+  const items = await navStore.getApps()
+  
+  window.setTimeout(() => {
+    setApps(items)
+  }, 500)
+})
+</script>
+
+<style scoped>
+.modal__footer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.modal__footer button {
+  display: inline-block;
+}
+
+.draggable {
+  cursor: pointer;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.arrow {
+  color: var(--color-text-maxcontrast);
+}
+</style>

src/components/settings/form/FormDisplayPicker.vue

@@ -1,22 +1,50 @@
 <template>
-  <NcButton :variant="is(false, false, false) ? 'primary' : 'seconday'" @click="update(false, false, false)">
+  <NcButton
+    :variant="is(false, false, false) ? 'primary' : 'seconday'"
+    @click="update(false, false, false)"
+  >
     {{ t('side_menu', 'Default') }}
   </NcButton>
-  <NcButton :variant="is(true, false, false) ? 'primary' : 'seconday'" @click="update(true, false, false)">
+  <NcButton
+    :variant="is(true, false, false) ? 'primary' : 'seconday'"
+    @click="update(true, false, false)"
+  >
     {{ t('side_menu', 'Always displayed') }}
   </NcButton>
-  <NcButton :variant="is(false, true, false) ? 'primary' : 'seconday'" @click="update(false, true, false)">
+  <NcButton
+    :variant="is(false, true, false) ? 'primary' : 'seconday'"
+    @click="update(false, true, false)"
+  >
     {{ t('side_menu', 'Big menu') }}
   </NcButton>
-  <NcButton :variant="is(false, false, true) ? 'primary' : 'seconday'" @click="update(false, false, true)">
+  <NcButton
+    :variant="is(false, false, true) ? 'primary' : 'seconday'"
+    @click="update(false, false, true)"
+  >
     {{ t('side_menu', 'With categories') }}
   </NcButton>
 
   <p>
-    <img v-if="is(false, false, false)" class="side-menu-display" :src="DefaultImg" />
-    <img v-if="is(true, false, false)" class="side-menu-display" :src="AlwaysDisplayedImg" />
-    <img v-if="is(false, true, false)" class="side-menu-display" :src="TopWideImg" />
-    <img v-if="is(false, false, true)" class="side-menu-display" :src="SideMenuWithCategoriesImg" />
+    <img
+      v-if="is(false, false, false)"
+      class="side-menu-display"
+      :src="DefaultImg"
+    />
+    <img
+      v-if="is(true, false, false)"
+      class="side-menu-display"
+      :src="AlwaysDisplayedImg"
+    />
+    <img
+      v-if="is(false, true, false)"
+      class="side-menu-display"
+      :src="TopWideImg"
+    />
+    <img
+      v-if="is(false, false, true)"
+      class="side-menu-display"
+      :src="SideMenuWithCategoriesImg"
+    />
   </p>
 </template>
 <script setup>
@@ -27,11 +55,7 @@ import TopWideImg from '../../../../img/admin/layout-big-menu.svg'
 import SideMenuWithCategoriesImg from '../../../../img/admin/layout-side-menu-with-categories.svg'
 import DefaultImg from '../../../../img/admin/layout-default.svg'
 
-const emit = defineEmits([
-  'update:alwaysDisplayed',
-  'update:topWideMenu',
-  'update:sideMenuWithCategories',
-])
+const emit = defineEmits(['update:alwaysDisplayed', 'update:topWideMenu', 'update:sideMenuWithCategories'])
 
 const { alwaysDisplayed, topWideMenu, sideMenuWithCategories } = defineProps({
   alwaysDisplayed: {
@@ -55,11 +79,8 @@ const update = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
 }
 
 const is = (isAlwayDisplayed, isTopWideMenu, isSideMenuWithCategories) => {
-  return isAlwayDisplayed === alwaysDisplayed
-  && isTopWideMenu === topWideMenu
-  && isSideMenuWithCategories === sideMenuWithCategories
+  return isAlwayDisplayed === alwaysDisplayed && isTopWideMenu === topWideMenu && isSideMenuWithCategories === sideMenuWithCategories
 }
-
 </script>
 
 <style scoped>

src/pages/AdminSettings.vue

@@ -38,10 +38,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               :always-displayed="config['always-displayed']"
               :top-wide-menu="config['big-menu']"
               :side-menu-with-categories="config['side-with-categories']"
-
-              @update:always-displayed="(value) => config['always-displayed'] = value"
-              @update:top-wide-menu="(value) => config['big-menu'] = value"
-              @update:side-menu-with-categories="(value) => config['side-with-categories'] = value"
+              @update:always-displayed="(value) => (config['always-displayed'] = value)"
+              @update:top-wide-menu="(value) => (config['big-menu'] = value)"
+              @update:side-menu-with-categories="(value) => (config['side-with-categories'] = value)"
             />
           </TableValue>
         </TableRow>
@@ -161,6 +160,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormAppPicker v-model="config['target-blank-apps']" />
           </TableValue>
         </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Customize sorting"
+            :middle="true"
+          />
+          <TableValue>
+            <FormAppSort v-model="config['apps-order']" />
+          </TableValue>
+        </TableRow>
       </TableContainer>
 
       <TableContainer :class="sectionClass('opener')">
@@ -469,8 +477,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                   class="config"
                   readonly
                   v-text="filterConfig(config)"
-                  ></textarea
-                >
+                ></textarea>
 
                 <div class="modal__footer">
                   <NcButton
@@ -513,6 +520,7 @@ import FormSelect from '../components/settings/form/FormSelect'
 import FormYesNo from '../components/settings/form/FormYesNo'
 import FormSize from '../components/settings/form/FormSize'
 import FormAppPicker from '../components/settings/form/FormAppPicker'
+import FormAppSort from '../components/settings/form/FormAppSort'
 import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
 
 const menu = [
@@ -529,7 +537,7 @@ const config = ref(null)
 const showConfig = ref(false)
 const configCopied = ref(false)
 const configStore = useConfigStore()
-const section = ref(menu[0].section)
+const section = ref('apps' /*menu[0].section*/)
 
 const setSection = (value) => {
   section.value = value

src/scss/admin.scss

@@ -162,7 +162,10 @@
 }
 
 @media screen and (max-width: 1024px) {
-  .side-menu-setting-table, .side-menu-setting-row, .side-menu-setting-label, .side-menu-setting-form {
+  .side-menu-setting-table,
+  .side-menu-setting-row,
+  .side-menu-setting-label,
+  .side-menu-setting-form {
     display: block;
     max-width: 100%;
   }

src/store/nav.js

@@ -21,48 +21,42 @@ import axios from '@nextcloud/axios'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 
 export const useNavStore = defineStore('nav', () => {
-  const categories = ref(null)
-  const apps = ref(null)
-  const coreApps = ref(null)
+  let categories = null
+  let apps = null
+  let coreApps = null
 
   async function getApps() {
-    if (apps.value !== null) {
-      return apps.value
+    if (apps === null) {
+      apps = []
+      const cats = await getCategories()
+
+      cats.forEach((category) => {
+        Object.values(category.apps).forEach((app) => {
+          apps.push(app)
+        })
+      })
     }
 
-    apps.value = []
-    const cats = await getCategories()
-
-    cats.forEach((category) => {
-      Object.values(category.apps).forEach((app) => {
-        apps.value.push(app)
-      })
-    })
-
-    return apps.value
+    return apps
   }
 
   async function getCoreApps() {
-    if (coreApps.value !== null) {
-      return coreApps.value
+    if (coreApps == null) {
+      coreApps = await axios
+        .get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
+        .then((response) => response.data)
+        .then((value) => value.ocs.data)
     }
 
-    coreApps.value = await axios
-      .get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
-      .then((response) => response.data)
-      .then((value) => value.ocs.data)
-
-    return coreApps.value
+    return coreApps
   }
 
   async function getCategories() {
-    if (categories.value !== null) {
-      return categories.value
+    if (categories === null) {
+      categories = await axios.get(generateUrl('/apps/side_menu/nav/items')).then((response) => response.data.items)
     }
 
-    categories.value = await axios.get(generateUrl('/apps/side_menu/nav/items')).then((response) => response.data.items)
-
-    return categories.value
+    return categories
   }
 
   return {