add user settings

src/admin.js

@@ -21,7 +21,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { waitContainer } from './lib/dom.js'
 
-import AdminSettings from './pages/AdminSettings.vue'
+import AdminSettings from './pages/AdminSettings'
 
 waitContainer('#side-menu-admin-settings').then((selector) => {
   const pinia = createPinia()

src/components/settings/AdminSaveButton.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="side-menu-setting-save">
+    <NcButton
+      variant="success"
+      @click="save"
+      >
+        <template v-if="!loading">
+          {{ t('side_menu', 'Save') }}
+        </template>
+        <NcLoadingIcon v-else />
+    </NcButton>
+
+    <div v-if="error" id="error">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#error {
+  padding-top: 10px;
+  color: red;
+}
+</style>
+
+<script setup>
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { ref } from 'vue'
+
+const loading = ref(false)
+const error = ref(null)
+const { config } = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+})
+
+const filterConfig = (value) => {
+  const result = {}
+
+  for (let key in value) {
+    if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
+      result[key] = value[key]
+    }
+  }
+
+  return result
+}
+
+const save = async () => {
+  const data = filterConfig(config)
+  const size = Object.keys(data).length
+  let counter = 0
+
+  loading.value = true
+  error.value = null
+
+  const update = () => {
+    ++counter;
+
+    if (counter === size) {
+      loading.value = false
+
+      if (!error.value) {
+        location.reload()
+      }
+    }
+  }
+
+  for (let key in data) {
+    let value = data[key]
+
+    if (Array.isArray(value) || typeof(value) === 'object') {
+      value = JSON.stringify(value)
+    } else if (typeof(value) === 'boolean') {
+      value = value ? 1 : 0
+    }
+
+    OCP.AppConfig.setValue('side_menu', key, value, {
+      success() {
+        update()
+      },
+      error() {
+        error.value = `Error while saving ${key}`
+        update()
+      }
+    })
+  }
+}
+</script>

src/components/settings/TableLabel.vue

@@ -27,7 +27,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     <template v-if="help">
       <br />
-      <em>{{ help }}</em>
+      <em>{{ t('side_menu', help) }}</em>
+    </template>
+    <template v-if="help2">
+      <br />
+      <em>{{ t('side_menu', help2) }}</em>
     </template>
   </div>
 </template>
@@ -58,5 +62,10 @@ const { short, label } = defineProps({
     required: false,
     default: null,
   },
+  help2: {
+    type: [String, null],
+    required: false,
+    default: null,
+  },
 })
 </script>

src/components/settings/TableRow.vue

@@ -15,7 +15,26 @@ 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>
-  <div class="side-menu-setting-row">
+  <div
+    class="side-menu-setting-row"
+    :class="{'side-menu-setting-row--disabled': disabled }"
+  >
     <slot></slot>
   </div>
 </template>
+
+<style scoped>
+.disabled {
+  display: block;
+}
+</style>
+
+<script setup>
+const { disabled } = defineProps({
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+})
+</script>

src/components/settings/UserSaveButton.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="side-menu-setting-save">
+    <NcButton
+      variant="success"
+      @click="save"
+      >
+        <template v-if="!loading">
+          {{ t('side_menu', 'Save') }}
+        </template>
+        <NcLoadingIcon v-else />
+    </NcButton>
+
+    <div v-if="error" id="error">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#error {
+  padding-top: 10px;
+  color: red;
+}
+</style>
+
+<script setup>
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { ref } from 'vue'
+
+const loading = ref(false)
+const error = ref(null)
+const { config } = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+})
+
+const filterConfig = (value) => {
+  const result = {}
+
+  for (let key in value) {
+    result[key] = value[key]
+  }
+
+  return result
+}
+
+const save = async () => {
+  const data = filterConfig(config)
+  const size = Object.keys(data).length
+  const url = OC.generateUrl('/apps/side_menu/user/valueSet')
+
+  let counter = 0
+
+  loading.value = true
+  error.value = null
+
+  const update = () => {
+    ++counter;
+
+    if (counter === size) {
+      loading.value = false
+
+      if (!error.value) {
+        location.reload()
+      }
+    }
+  }
+
+  for (let key in data) {
+    let value = data[key]
+    let formData = []
+
+    if (Array.isArray(value) || typeof(value) === 'object') {
+      value = JSON.stringify(value)
+    } else if (typeof(value) === 'boolean') {
+      value = value ? 1 : 0
+    }
+
+    formData.push('name=' + encodeURIComponent(key))
+    formData.push('value=' + encodeURIComponent(value))
+
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: formData.join('&'),
+    })
+      .then(update)
+      .catch(() => {
+        error.value = `Error while saving ${key}`
+        update()
+      })
+  }
+}
+</script>

src/components/settings/form/FormAppPicker.vue

@@ -74,7 +74,7 @@ const closeModal = () => {
 }
 
 onMounted(async () => {
-  apps.value = await navStore.getApps()
+  apps.value = await navStore.getCoreApps()
 })
 </script>
 

src/components/settings/form/FormAppSort.vue

@@ -104,7 +104,7 @@ const update = () => {
 }
 
 onMounted(async () => {
-  const items = await navStore.getApps()
+  const items = await navStore.getCoreApps()
 
   window.setTimeout(() => {
     setApps(items)

src/components/settings/form/FormCatSort.vue

@@ -35,10 +35,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         @end="update"
       >
         <template #item="{ element }">
-          <div class="draggable">
+          <div class="draggable" v-if="element.name !== ''">
             <span class="arrow">⇅</span>
-            <span v-if="element.name !== ''">{{ element.name }}</span>
-            <span v-else>{{ t('side_menu', 'Other') }}</span>
+            {{ element.name }}
           </div>
         </template>
       </draggable>

src/menus/SimpleSideMenu.vue

@@ -123,6 +123,8 @@ watch(
 function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
   const data = []
 
+  console.log(order)
+
   items.forEach((item) => {
     if (topMenuApps.includes(item.id) && !topSideMenuApps.includes(item.id)) {
       return
@@ -139,6 +141,8 @@ function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
     data.push(item)
   })
 
+  console.log(data)
+
   return data.sort((a, b) => {
     return a.order < b.order ? -1 : 1
   })

src/pages/AdminSettings.vue

@@ -46,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             />
           </TableValue>
         </TableRow>
-        <TableRow>
+        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
           <TableLabel
             label="Display the logo"
             :middle="true"
@@ -55,7 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['display-logo']" />
           </TableValue>
         </TableRow>
-        <TableRow>
+        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
           <TableLabel
             label="Use the avatar instead of the logo"
             :middle="true"
@@ -64,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['use-avatar']" />
           </TableValue>
         </TableRow>
-        <TableRow>
+        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
           <TableLabel
             label="The logo is a link to the default app"
             :middle="true"
@@ -100,6 +100,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormSize v-model="config['size-text']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('topMenu')">
@@ -143,6 +144,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('apps')">
@@ -175,12 +177,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormAppSort v-model="config['apps-order']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('cats')">
         <SectionTitle label="Categories" />
 
-        <TableRow>
+        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
           <TableLabel
             label="Order by"
             :middle="true"
@@ -190,13 +193,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               v-model="config['categories-order-type']"
               :options="[
                 { id: 'default', label: 'Name' },
-                { id: 'custom', label: 'Customed' },
+                { id: 'custom', label: 'Custom' },
               ]"
             />
           </TableValue>
         </TableRow>
-
-        <TableRow>
+        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
+          <TableLabel
+            label="Customize sorting"
+            :middle="true"
+          />
+          <TableValue>
+            <FormCatSort v-model="config['categories-order']" />
+          </TableValue>
+        </TableRow>
+        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
           <TableLabel
             label="Customize application categories"
             :top="true"
@@ -213,15 +224,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           </TableValue>
         </TableRow>
 
-        <TableRow>
-          <TableLabel
-            label="Customize sorting"
-            :middle="true"
-          />
-          <TableValue>
-            <FormCatSort v-model="config['categories-order']" />
-          </TableValue>
-        </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('opener')">
@@ -272,13 +275,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <TableRow>
           <TableLabel
             label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
-            help="This is the automatic behavior when the menu is always displayed."
             :middle="true"
           />
           <TableValue>
             <FormYesNo v-model="config['opener-hover']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('colors')">
@@ -415,9 +418,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('global')">
+        <p class="side-menu-tips">
+            <em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
+        </p>
+
         <SectionTitle label="Global" />
 
         <TableRow>
@@ -450,6 +458,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['loader-enabled']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('support')">
@@ -557,6 +566,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             </NcModal>
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
     </NcAppContent>
   </NcContent>
@@ -572,6 +582,7 @@ import TableRow from '../components/settings/TableRow'
 import TableLabel from '../components/settings/TableLabel'
 import TableValue from '../components/settings/TableValue'
 import SectionTitle from '../components/settings/SectionTitle'
+import AdminSaveButton from '../components/settings/AdminSaveButton'
 import FormRange from '../components/settings/form/FormRange'
 import FormColorPicker from '../components/settings/form/FormColorPicker'
 import FormOpener from '../components/settings/form/FormOpener'
@@ -587,11 +598,11 @@ import FormAppCategory from '../components/settings/form/FormAppCategory'
 const menu = [
   { label: 'Global', section: 'global' },
   { label: 'Panel', section: 'panel' },
-  { label: 'Top menu', section: 'topMenu' },
   { label: 'Colors', section: 'colors' },
   { label: 'Opener', section: 'opener' },
   { label: 'Applications', section: 'apps' },
   { label: 'Categories', section: 'cats' },
+  { label: 'Top menu', section: 'topMenu' },
   { label: 'Support', section: 'support' },
 ]
 
@@ -599,9 +610,11 @@ const config = ref(null)
 const showConfig = ref(false)
 const configCopied = ref(false)
 const configStore = useConfigStore()
-const section = ref(menu[0].section)
+const section = ref(null)
 
 const setSection = (value) => {
+  sessionStorage.setItem('side_menu_section', value)
+
   section.value = value
 }
 
@@ -629,7 +642,7 @@ const filterConfig = (value) => {
   const result = {}
 
   for (let key in value) {
-    if (['cache-categories', 'cache'].includes(key) === false) {
+    if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
       result[key] = value[key]
     }
   }
@@ -639,6 +652,8 @@ const filterConfig = (value) => {
 
 onMounted(async () => {
   config.value = await configStore.getAppConfig()
+
+  setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
 })
 </script>
 
@@ -670,4 +685,9 @@ onMounted(async () => {
   display: inline-block;
   margin-right: 5px;
 }
+
+.save {
+  display: block;
+  float: right
+}
 </style>

src/pages/UserSettings.vue

@@ -0,0 +1,171 @@
+<!--
+@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>
+  <NcContent
+    v-if="config"
+    app-name="side_menu"
+  >
+    <NcAppContent class="side-menu-setting-app" v-if="config['force']">
+      <TableContainer>
+        <TableLabel label="You do not have permission to change the settings." />
+      </TableContainer>
+    </NcAppContent>
+    <NcAppContent v-else class="side-menu-setting-app side-menu-setting-app--user">
+      <TableContainer>
+        <SectionTitle label="Menu" />
+
+        <TableRow>
+          <TableLabel
+            label="Enable the custom menu"
+            :middle="true"
+          />
+          <TableValue>
+            <FormYesNo v-model="config['enabled']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Applications kept in the top menu"
+            help="If there is no selection then the global configuration is applied."
+            :middle="true"
+          />
+          <TableValue>
+            <FormAppPicker v-model="config['top-menu-apps']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Applications kept in the top menu but also shown in side menu"
+            help="These applications must be selected in the previous option."
+            help2="If there is no selection then the global configuration is applied"
+            :middle="true"
+          />
+          <TableValue>
+            <FormAppPicker v-model="config['top-side-menu-apps']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Open apps in new tab"
+            :middle="true"
+          />
+          <TableValue>
+            <FormSelect v-model="config['target-blank-mode']" :options="[
+              {id: 1, label: 'Use the global setting'},
+              {id: 2, label: 'Use my selection'},
+            ]" />
+            <FormAppPicker v-if="config['target-blank-mode'] === 2" v-model="config['target-blank-apps']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Customize sorting"
+            :top="true"
+          />
+          <TableValue>
+            <FormAppSort v-model="config['apps-order']" />
+          </TableValue>
+        </TableRow>
+      </TableContainer>
+
+       <TableContainer>
+        <SectionTitle label="Support" />
+
+        <TableRow>
+          <TableLabel
+            label="You like this app and you want to support me?"
+            :middle="true"
+          />
+          <TableValue>
+            <a
+              target="_blank"
+              href="https://www.buymeacoffee.com/deblan"
+              rel="noopener"
+            >
+              <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
+            </a>
+          </TableValue>
+        </TableRow>
+
+        <UserSaveButton :config="config" />
+      </TableContainer>
+    </NcAppContent>
+  </NcContent>
+</template>
+
+<script setup>
+import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
+import { ref, onMounted } from 'vue'
+import { useConfigStore } from '../store/config.js'
+
+import TableContainer from '../components/settings/TableContainer'
+import TableRow from '../components/settings/TableRow'
+import TableLabel from '../components/settings/TableLabel'
+import TableValue from '../components/settings/TableValue'
+import SectionTitle from '../components/settings/SectionTitle'
+import UserSaveButton from '../components/settings/UserSaveButton'
+import FormYesNo from '../components/settings/form/FormYesNo'
+import FormAppPicker from '../components/settings/form/FormAppPicker'
+import FormAppSort from '../components/settings/form/FormAppSort'
+import FormSelect from '../components/settings/form/FormSelect'
+
+const config = ref(null)
+const configStore = useConfigStore()
+
+const trans = (value) => {
+  return t('side_menu', value)
+}
+
+onMounted(async () => {
+  config.value = await configStore.getUserConfig()
+})
+</script>
+
+<style scoped>
+.hidden {
+  display: none;
+}
+
+.button-inline button {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.config {
+  width: 100%;
+  height: 30vh;
+}
+
+.modal__content {
+  padding: 20px;
+}
+
+.modal__footer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.modal__footer button {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.save {
+  display: block;
+  float: right
+}
+</style>

src/scss/admin.scss

@@ -120,16 +120,10 @@
 .side-menu-setting-row {
   display: table;
   margin-bottom: 10px;
-}
 
-.side-menu-setting-row code {
-  margin-left: 2px;
-  margin-bottom: 1px;
-  padding: 3px 10px;
-  border-radius: 5px;
-  display: inline-block;
-  right: 2px;
-  border: 1px solid var(--color-border-dark);
+  &--disabled {
+    opacity: 0.5;
+  }
 }
 
 .side-menu-setting-label {
@@ -256,6 +250,10 @@
 
 .side-menu-setting-app {
   display: flex;
+
+  &--user {
+    display: block;
+  }
 }
 
 .side-menu-setting {
@@ -264,3 +262,11 @@
   flex-direction: column;
   gap: 6px;
 }
+
+.side-menu-setting-save {
+  margin-top: 30px;
+}
+
+.side-menu-tips {
+  margin-bottom: 15px;
+}

src/scss/menu.scss

@@ -76,11 +76,6 @@
       padding: 10px 0;
     }
   }
-
-  &.side-menu-big,
-  &.side-menu-with-categories {
-    height: auto;
-  }
 }
 
 #header {

src/store/config.js

@@ -21,31 +21,37 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export const useConfigStore = defineStore('config', () => {
-  const config = ref(null)
-  const appConfig = ref(null)
+  let config = null
+  let appConfig = null
+  let userConfig = null
 
   async function getConfig() {
-    if (config.value !== null) {
-      return config.value
+    if (config === null) {
+      config = await axios.get(generateUrl('/apps/side_menu/js/config')).then((response) => response.data)
     }
 
-    config.value = await axios.get(generateUrl('/apps/side_menu/js/config')).then((response) => response.data)
-
-    return config.value
+    return config
   }
 
   async function getAppConfig() {
-    if (appConfig.value !== null) {
-      return appConfig.value
+    if (appConfig === null) {
+      appConfig = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
     }
 
-    appConfig.value = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
+    return appConfig
+  }
 
-    return appConfig.value
+  async function getUserConfig() {
+    if (userConfig === null) {
+      userConfig = await axios.get(generateUrl('/apps/side_menu/user/config')).then((response) => response.data)
+    }
+
+    return userConfig
   }
 
   return {
     getConfig,
     getAppConfig,
+    getUserConfig,
   }
 })

src/user.js

@@ -0,0 +1,32 @@
+/**
+ * @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/>.
+ */
+
+import './scss/admin.scss'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { waitContainer } from './lib/dom.js'
+
+import UserSettings from './pages/UserSettings'
+
+waitContainer('#side-menu-user-settings').then((selector) => {
+  const pinia = createPinia()
+  const app = createApp(UserSettings)
+  app.use(pinia)
+  app.mixin({ methods: { t, n } })
+  app.mount(selector)
+})