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>

src/pages/AdminSettings.vue

@@ -19,7 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     v-if="config"
     app-name="side_menu"
   >
-    <NcAppContent>
+    <NcAppContent class="side-menu-setting-app">
       <div class="side-menu-setting">
         <NcButton
           v-for="item in menu"
@@ -31,6 +31,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <TableContainer :class="sectionClass('panel')">
+        <SectionTitle label="Panel" />
+
         <TableRow>
           <TableLabel label="Display" />
           <TableValue>
@@ -101,6 +103,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('topMenu')">
+        <SectionTitle label="Top menu" />
+
         <TableRow>
           <TableLabel
             label="Applications kept in the top menu"
@@ -142,6 +146,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('apps')">
+        <SectionTitle label="Applications" />
+
         <TableRow>
           <TableLabel
             label="Apps that should not be displayed in the menu"
@@ -171,7 +177,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         </TableRow>
       </TableContainer>
 
+      <TableContainer :class="sectionClass('cats')">
+        <SectionTitle label="Categories" />
+
+        <TableRow>
+          <TableLabel
+            label="Order by"
+            :middle="true"
+          />
+          <TableValue>
+            <FormSelect
+              v-model="config['categories-order-type']"
+              :options="[
+                { id: 'default', label: 'Name' },
+                { id: 'custom', label: 'Customed' },
+              ]"
+            />
+          </TableValue>
+        </TableRow>
+
+        <TableRow>
+          <TableLabel
+            label="Customize sorting"
+            :middle="true"
+          />
+          <TableValue>
+            <FormCatSort v-model="config['categories-order']" />
+          </TableValue>
+        </TableRow>
+      </TableContainer>
+
       <TableContainer :class="sectionClass('opener')">
+        <SectionTitle label="Opener" />
+
         <TableRow>
           <TableLabel
             label="Opener"
@@ -363,6 +401,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('global')">
+        <SectionTitle label="Global" />
+
         <TableRow>
           <TableLabel
             label="The menu is enabled by default for users"
@@ -396,6 +436,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </TableContainer>
 
       <TableContainer :class="sectionClass('support')">
+        <SectionTitle label="Support" />
+
         <TableRow>
           <TableLabel
             label="You like this app and you want to support me?"
@@ -521,6 +563,7 @@ 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 FormCatSort from '../components/settings/form/FormCatSort'
 import FormDisplayPicker from '../components/settings/form/FormDisplayPicker'
 
 const menu = [
@@ -530,6 +573,7 @@ const menu = [
   { label: 'Colors', section: 'colors' },
   { label: 'Opener', section: 'opener' },
   { label: 'Applications', section: 'apps' },
+  { label: 'Categories', section: 'cats' },
   { label: 'Support', section: 'support' },
 ]
 
@@ -537,7 +581,7 @@ const config = ref(null)
 const showConfig = ref(false)
 const configCopied = ref(false)
 const configStore = useConfigStore()
-const section = ref('apps' /*menu[0].section*/)
+const section = ref(menu[0].section)
 
 const setSection = (value) => {
   section.value = value

src/scss/admin.scss

@@ -240,12 +240,6 @@
   color: #fff;
 }
 
-.side-menu-setting {
-  padding: 20px;
-  display: flex;
-  gap: 4px;
-}
-
 .side-menu-setting-color-picker {
   display: inline-block;
   margin-right: 12px;
@@ -259,3 +253,15 @@
     border-radius: 6px;
   }
 }
+
+.side-menu-setting-app {
+  display: flex;
+}
+
+.side-menu-setting {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+