add ToolWebadmin view and set settings store as base store's state

app/src/components/BasicForm.vue

@@ -4,7 +4,7 @@
       <slot />
     </b-form>
 
-    <template v-slot:footer>
+    <template v-if="!noFooter" v-slot:footer>
       <slot name="buttons">
         <b-button type="submit" :form="id" variant="success">
           {{ submit ? submit : $t('save') }}
@@ -21,7 +21,8 @@ export default {
   props: {
     header: { type: String, required: true },
     id: { type: String, default: 'ynh-form' },
-    submit: { type: String, default: null }
+    submit: { type: String, default: null },
+    noFooter: { type: Boolean, default: false }
   }
 }
 </script>

app/src/i18n/locales/en.json

@@ -323,6 +323,12 @@
     "tools_shutdown_done": "Shutting down...",
     "tools_shuttingdown": "Your server is powering off. As long as your server is off, you won't be able to use the web administration.",
     "tools_shutdown_reboot": "Shutdown/Reboot",
+    "tools_webadmin": {
+        "locale": "Locale",
+        "fallback_locale": "Fallback locale",
+        "cache": "Cache",
+        "cache_description": "Consider disabling the cache if you plan on working with the CLI while also navigating in this web-admin."
+    },
     "tools_webadmin_settings": "Web-admin settings",
     "udp": "UDP",
     "unauthorized": "Unauthorized",

app/src/router/routes.js

@@ -241,6 +241,17 @@ const routes = [
         { name: 'tool-adminpw', trad: 'tools_adminpw' }
       ]
     }
+  },
+  {
+    name: 'tool-webadmin',
+    path: '/tools/webadmin',
+    component: () => import(/* webpackChunkName: "views/tools" */ '@/views/tool/ToolWebadmin'),
+    meta: {
+      breadcrumb: [
+        { name: 'tool-list', trad: 'tools' },
+        { name: 'tool-webadmin', trad: 'tools_webadmin_settings' }
+      ]
+    }
   }
 ]
 

app/src/store/data.js

@@ -85,23 +85,24 @@ export default {
   },
 
   actions: {
-    'FETCH' ({ state, commit }, { uri, param, storeKey = uri, force = false }) {
+    'FETCH' ({ state, commit, rootState }, { uri, param, storeKey = uri, cache = rootState.cache }) {
       const currentState = param ? state[storeKey][param] : state[storeKey]
       // if data has already been queried, simply return
-      if (currentState !== undefined && !force) return currentState
+      if (currentState !== undefined && cache) return currentState
 
       return api.get(param ? `${uri}/${param}` : uri).then(responseData => {
+        console.log('api')
         const data = responseData[storeKey] ? responseData[storeKey] : responseData
         commit('SET_' + storeKey.toUpperCase(), param ? [param, data] : data)
         return param ? state[storeKey][param] : state[storeKey]
       })
     },
 
-    'FETCH_ALL' ({ state, commit }, queries) {
-      return Promise.all(queries.map(({ uri, param, storeKey = uri, force = false }) => {
+    'FETCH_ALL' ({ state, commit, rootState }, queries) {
+      return Promise.all(queries.map(({ uri, param, storeKey = uri, cache = rootState.cache }) => {
         const currentState = param ? state[storeKey][param] : state[storeKey]
         // if data has already been queried, simply return the state as cached
-        if (currentState !== undefined && !force) {
+        if (currentState !== undefined && cache) {
           return { cached: currentState }
         }
         return api.get(param ? `${uri}/${param}` : uri).then(responseData => {

app/src/store/index.js

@@ -8,9 +8,12 @@ import data from './data'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  state: settings.state,
+  mutations: settings.mutations,
+  actions: settings.actions,
+  getters: settings.getters,
   modules: {
     info,
-    settings,
     data
   }
 })

app/src/store/settings.js

@@ -5,11 +5,14 @@
 
 import i18n from '@/i18n'
 import { loadLocaleMessages, updateDocumentLocale, loadDateFnsLocale } from '@/i18n/helpers'
+import supportedLocales from '@/i18n/supportedLocales'
 
 export default {
   state: {
     locale: localStorage.getItem('locale'),
-    fallbackLocale: localStorage.getItem('fallbackLocale')
+    fallbackLocale: localStorage.getItem('fallbackLocale'),
+    cache: localStorage.getItem('cache') !== 'false',
+    supportedLocales: supportedLocales
   },
 
   mutations: {
@@ -21,6 +24,11 @@ export default {
     'SET_FALLBACK_LOCALE' (state, locale) {
       localStorage.setItem('fallbackLocale', locale)
       state.fallbackLocale = locale
+    },
+
+    'SET_CACHE' (state, enable) {
+      localStorage.setItem('cache', enable)
+      state.cache = enable
     }
   },
 
@@ -45,6 +53,13 @@ export default {
 
   getters: {
     locale: state => (state.locale),
-    fallbackLocale: state => (state.fallbackLocale)
+    fallbackLocale: state => (state.fallbackLocale),
+    cache: state => (state.cache),
+
+    availableLocales: state => {
+      return Object.entries(state.supportedLocales).map(([locale, { name }]) => {
+        return { value: locale, text: name }
+      })
+    }
   }
 }

app/src/views/tool/ToolList.vue

@@ -26,7 +26,7 @@ export default {
         { id: 1, routeName: 'tool-migrations', icon: 'share', translation: 'migrations' },
         { id: 2, routeName: 'tool-firewall', icon: 'shield', translation: 'firewall' },
         { id: 3, routeName: 'tool-adminpw', icon: 'key-modern', translation: 'tools_adminpw' },
-        { id: 4, routeName: 'tool-wabadmin', icon: 'cog', translation: 'tools_webadmin_settings' },
+        { id: 4, routeName: 'tool-webadmin', icon: 'cog', translation: 'tools_webadmin_settings' },
         { id: 5, routeName: 'tool-power', icon: 'power-off', translation: 'tools_shutdown_reboot' }
       ]
     }

app/src/views/tool/ToolWebadmin.vue

@@ -0,0 +1,80 @@
+<template>
+  <basic-form :header="$t('tools_webadmin_settings')" @submit.prevent="onSubmit" no-footer>
+    <!-- LOCALE -->
+    <b-form-group label-cols="auto" :label="$t('tools_webadmin.locale')" label-for="locale">
+      <b-select
+        id="locale"
+        :options="availableLocales"
+        v-model="currentLocale"
+      />
+    </b-form-group>
+    <hr>
+
+    <!-- FALLBACK LOCALE -->
+    <b-form-group label-cols="auto" :label="$t('tools_webadmin.fallback_locale')" label-for="fallback-locale">
+      <b-select
+        id="fallback-locale"
+        :options="availableLocales"
+        v-model="currentFallbackLocale"
+      />
+    </b-form-group>
+    <hr>
+
+    <!-- CACHE -->
+    <b-form-group label-cols="auto" :label="$t('tools_webadmin.cache')" label-for="cache">
+      <template v-slot:description>
+        <b-alert variant="info" show v-t="'tools_webadmin.cache_description'" />
+      </template>
+
+      <b-checkbox
+        v-model="currentCache"
+        switch
+      >
+        {{ $t(currentCache ? 'enabled' : 'disabled') }}
+      </b-checkbox>
+    </b-form-group>
+  </basic-form>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import BasicForm from '@/components/BasicForm'
+
+export default {
+  name: 'ToolWebadmin',
+
+  computed: {
+    ...mapGetters([
+      'locale',
+      'fallbackLocale',
+      'cache',
+      'availableLocales'
+    ]),
+
+    currentLocale: {
+      get: function () { return this.locale },
+      set: function (newValue) {
+        this.$store.dispatch('UPDATE_LOCALE', newValue)
+      }
+    },
+
+    currentFallbackLocale: {
+      get: function () { return this.fallbackLocale },
+      set: function (newValue) {
+        this.$store.dispatch('UPDATE_FALLBACK_LOCALE', newValue)
+      }
+    },
+
+    currentCache: {
+      get: function () { return this.cache },
+      set: function (newValue) {
+        this.$store.commit('SET_CACHE', newValue)
+      }
+    }
+  },
+
+  components: {
+    BasicForm
+  }
+}
+</script>