Move responsibility of providing settings values away to phoenix

ui/components/SettingsApp.vue

@@ -16,12 +16,20 @@
           </div>
           <hr />
         </template>
-        <settings-bundle
-          v-for="bundle in selectedSettingsBundles"
-          :key="'bundle-' + bundle.identifier.bundleKey"
-          :bundle="bundle"
-          class="uk-margin-top"
-        />
+        <template v-if="settingsValuesLoaded">
+          <settings-bundle
+            v-for="bundle in selectedSettingsBundles"
+            :key="'bundle-' + bundle.identifier.bundleKey"
+            :bundle="bundle"
+            class="uk-margin-top"
+          />
+        </template>
+        <div class="uk-margin-top" v-else>
+          <oc-loader :aria-label="$gettext('Loading settings values')" />
+          <oc-alert :aria-hidden="true" varition="primary" no-close>
+            <p v-translate>Loading settings values...</p>
+          </oc-alert>
+        </div>
       </template>
     </div>
     <oc-loader v-else />
@@ -41,6 +49,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['settingsValuesLoaded']),
     ...mapGetters('Settings', [
       'extensions',
       'initialized',

ui/components/SettingsBundle.vue

@@ -4,17 +4,19 @@
       <translate>{{ bundle.displayName }}</translate>
     </div>
     <oc-grid gutter="small">
-      <div class="uk-width-1-1" v-for="setting in bundle.settings" :key="getElementId(bundle, setting)">
-        <label class="oc-label" :for="getElementId(bundle, setting)">{{ setting.displayName }}</label>
-        <div class="uk-position-relative"
-             :is="getSettingComponent(setting)"
-             :id="getElementId(bundle, setting)"
-             :bundle="bundle"
-             :setting="setting"
-             :persisted-value="getSettingsValue(bundle, setting)"
-             @onSave="onSaveSettingsValue"
-        />
-      </div>
+      <template>
+        <div class="uk-width-1-1" v-for="setting in bundle.settings" :key="getElementId(bundle, setting)">
+          <label class="oc-label" :for="getElementId(bundle, setting)">{{ setting.displayName }}</label>
+          <div class="uk-position-relative"
+               :is="getSettingComponent(setting)"
+               :id="getElementId(bundle, setting)"
+               :bundle="bundle"
+               :setting="setting"
+               :persisted-value="getSettingsValue(bundle, setting)"
+               @onSave="onSaveSettingsValue"
+          />
+        </div>
+      </template>
     </oc-grid>
   </div>
 </template>
@@ -36,7 +38,7 @@ export default {
       required: true
     }
   },
-  computed: mapGetters('Settings', ['getSettingsValueByIdentifier']),
+  computed: mapGetters(['getSettingsValueByIdentifier']),
   methods: {
     ...mapActions('Settings', ['saveSettingsValue']),
     getElementId (bundle, setting) {

ui/store/index.js

@@ -1,6 +1,5 @@
 import {
   ListSettingsBundles,
-  ListSettingsValues,
   SaveSettingsValue
 } from '../client/settings'
 import axios from 'axios'
@@ -8,8 +7,7 @@ import axios from 'axios'
 const state = {
   config: null,
   initialized: false,
-  settingsBundles: {},
-  settingsValues: {}
+  settingsBundles: {}
 }
 
 const getters = {
@@ -25,14 +23,6 @@ const getters = {
       })
     }
     return []
-  },
-  getSettingsValueByIdentifier: state => ({ extension, bundleKey, settingKey }) => {
-    if (state.settingsValues.has(extension) &&
-      state.settingsValues.get(extension).has(bundleKey) &&
-      state.settingsValues.get(extension).get(bundleKey).has(settingKey)) {
-      return state.settingsValues.get(extension).get(bundleKey).get(settingKey)
-    }
-    return null
   }
 }
 
@@ -50,14 +40,6 @@ const mutations = {
     })
     state.settingsBundles = map
   },
-  SET_SETTINGS_VALUES (state, settingsValues) {
-    const map = new Map()
-    Array.from(settingsValues).forEach(value => applySettingsValueToMap(value, map))
-    state.settingsValues = map
-  },
-  SET_SETTINGS_VALUE (state, settingsValue) {
-    applySettingsValueToMap(settingsValue, state.settingsValues)
-  },
   LOAD_CONFIG (state, config) {
     state.config = config
   }
@@ -69,10 +51,7 @@ const actions = {
   },
 
   async initialize ({ commit, dispatch }) {
-    await Promise.all([
-      dispatch('fetchSettingsBundles'),
-      dispatch('fetchSettingsValues')
-    ])
+    await dispatch('fetchSettingsBundles')
     commit('SET_INITIALIZED', true)
   },
 
@@ -116,32 +95,6 @@ const actions = {
     }
   },
 
-  async fetchSettingsValues ({ commit, dispatch, getters, rootGetters }) {
-    injectAuthToken(rootGetters)
-    const response = await ListSettingsValues({
-      $domain: getters.config.url,
-      body: {
-        identifier: {
-          account_uuid: 'me'
-        }
-      }
-    })
-    if (response.status === 201) {
-      const settingsValues = response.data.settingsValues
-      if (settingsValues) {
-        commit('SET_SETTINGS_VALUES', settingsValues)
-      } else {
-        commit('SET_SETTINGS_VALUES', [])
-      }
-    } else {
-      dispatch('showMessage', {
-        title: 'Failed to fetch settings values.',
-        desc: response.statusText,
-        status: 'danger'
-      }, { root: true })
-    }
-  },
-
   async saveSettingsValue ({ commit, dispatch, getters, rootGetters }, payload) {
     injectAuthToken(rootGetters)
     const response = await SaveSettingsValue({
@@ -152,7 +105,7 @@ const actions = {
     })
     if (response.status === 201) {
       if (response.data.settingsValue) {
-        commit('SET_SETTINGS_VALUE', response.data.settingsValue)
+        commit('SET_SETTINGS_VALUE', response.data.settingsValue, { root: true })
       }
     } else {
       dispatch('showMessage', {
@@ -172,17 +125,6 @@ export default {
   mutations
 }
 
-function applySettingsValueToMap (settingsValue, map) {
-  if (!map.has(settingsValue.identifier.extension)) {
-    map.set(settingsValue.identifier.extension, new Map())
-  }
-  if (!map.get(settingsValue.identifier.extension).has(settingsValue.identifier.bundleKey)) {
-    map.get(settingsValue.identifier.extension).set(settingsValue.identifier.bundleKey, new Map())
-  }
-  map.get(settingsValue.identifier.extension).get(settingsValue.identifier.bundleKey).set(settingsValue.identifier.settingKey, settingsValue)
-  return map
-}
-
 function injectAuthToken (rootGetters) {
   axios.interceptors.request.use(config => {
     if (typeof config.headers.Authorization === 'undefined') {