add categories orderer

move the admin menu to the left

src/components/settings/form/FormAppSort.vue

@@ -16,11 +16,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
   <NcButton
-    aria-label="t('side_menu', 'Sort apps')"
+    aria-label="t('side_menu', 'Sort')"
     variant="primary"
     @click="openModal"
   >
-    {{ t('side_menu', 'Sort apps') }}
+    {{ t('side_menu', 'Sort') }}
   </NcButton>
 
   <NcModal
@@ -114,8 +114,8 @@ onMounted(async () => {
 
 <style scoped>
 .modal__footer {
-  margin-top: 20px;
   text-align: right;
+  padding: 20px;
 }
 
 .modal__footer button {
@@ -130,5 +130,7 @@ onMounted(async () => {
 
 .arrow {
   color: var(--color-text-maxcontrast);
+  display: inline-block;
+  margin-right: 3px;
 }
 </style>

src/components/settings/form/FormCatSort.vue

@@ -0,0 +1,137 @@
+<!--
+@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')"
+    variant="primary"
+    @click="openModal"
+  >
+    {{ t('side_menu', 'Sort') }}
+  </NcButton>
+
+  <NcModal
+    v-if="modal"
+    size="small"
+    @close="closeModal"
+  >
+    <div class="modal__content">
+      <draggable
+        v-model="apps"
+        item-key="categoryId"
+        @end="update"
+      >
+        <template #item="{ element }">
+          <div class="draggable">
+            <span class="arrow">⇅</span>
+            <span v-if="element.name !== ''">{{ element.name }}</span>
+            <span v-else>{{ t('side_menu', 'Other') }}</span>
+          </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.categoryId === id) {
+        apps.value.push(app)
+      }
+    })
+  })
+
+  items.forEach((app) => {
+    if (!apps.value.find((element) => element.categoryId === app.categoryId)) {
+      apps.value.push(app)
+    }
+  })
+}
+
+const update = () => {
+  const value = []
+
+  apps.value.forEach((app) => {
+    value.push(app.categoryId)
+  })
+
+  emit('update:modelValue', value)
+}
+
+onMounted(async () => {
+  const items = await navStore.getCategories()
+
+  window.setTimeout(() => {
+    setApps(items)
+  }, 500)
+})
+</script>
+
+<style scoped>
+.modal__footer {
+  padding: 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);
+  display: inline-block;
+  margin-right: 3px;
+}
+</style>