add user settings

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>