update ToolWebAdmin and AppInstall with validations

app/src/api/handlers.js

@@ -30,7 +30,9 @@ async function _getResponseContent (response) {
  * @return {(Object|String)} Parsed response's json, response's text or an error.
  */
 export function handleResponse (response, method) {
+  if (method !== 'GET') {
     store.dispatch('SERVER_RESPONDED', response.ok)
+  }
   if (!response.ok) return handleError(response, method)
   // FIXME the api should always return json objects
   return _getResponseContent(response)
@@ -43,7 +45,6 @@ export function handleResponse (response, method) {
  * @throws Will throw a custom error with response data.
  */
 export async function handleError (response, method) {
-  console.log(response.url)
   const message = await _getResponseContent(response)
   const errorCode = response.status in errors ? response.status : undefined
   const error = new errors[errorCode](method, response, message)

app/src/components/globals/CardForm.vue

@@ -1,10 +1,10 @@
 <template>
   <b-card class="card-form">
     <template v-slot:header>
-      <h2><icon v-if="icon" :iname="icon" /> {{ title }}</h2>
+      <component :is="titleTag"><icon v-if="icon" :iname="icon" /> {{ title }}</component>
     </template>
 
-    <slot name="disclaimer"></slot>
+    <slot name="disclaimer" />
 
     <b-form :id="id" @submit.prevent="onSubmit" novalidate>
       <slot name="default" />
@@ -35,6 +35,7 @@ export default {
   props: {
     id: { type: String, default: 'ynh-form' },
     title: { type: String, required: true },
+    titleTag: { type: String, default: 'h2' },
     icon: { type: String, default: null },
     submitText: { type: String, default: null },
     noFooter: { type: Boolean, default: false },

app/src/components/globals/FormField.vue

@@ -71,10 +71,14 @@ export default {
           'label-cols-lg': 2,
           'label-class': 'font-weight-bold'
         }
+        if ('label-cols' in attrs) {
+          attrs['label-class'] = defaultAttrs['label-class']
+        } else {
           for (const attr in defaultAttrs) {
             if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr]
           }
         }
+      }
       return attrs
     },
 

app/src/components/globals/formItems/CheckboxItem.vue

@@ -6,7 +6,7 @@
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
   >
-    {{ $t(checked ? 'yes' : 'no') }}
+    {{ $t(labels[checked]) }}
   </b-checkbox>
 </template>
 
@@ -16,7 +16,8 @@ export default {
 
   props: {
     value: { type: Boolean, required: true },
-    id: { type: String, default: null }
+    id: { type: String, default: null },
+    labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) }
   },
 
   data () {

app/src/helpers/commons.js

@@ -63,7 +63,7 @@ export function isObjectLiteral (value) {
  * @return {Boolean}
  */
 export function isEmptyValue (value) {
-  if (value === 0) return false
+  if (typeof value === 'number') return false
   return !value || value.length === 0 || Object.keys(value).length === 0
 }
 

app/src/i18n/helpers.js

@@ -79,7 +79,7 @@ function initDefaultLocales () {
   const [locale, fallbackLocale] = getDefaultLocales()
 
   store.dispatch('UPDATE_LOCALE', locale)
-  store.dispatch('UPDATE_FALLBACK_LOCALE', fallbackLocale || 'en')
+  store.dispatch('UPDATE_FALLBACKLOCALE', fallbackLocale || 'en')
   loadLocaleMessages('en')
 }
 

app/src/store/settings.js

@@ -23,7 +23,7 @@ export default {
       state.locale = locale
     },
 
-    'SET_FALLBACK_LOCALE' (state, locale) {
+    'SET_FALLBACKLOCALE' (state, locale) {
       localStorage.setItem('fallbackLocale', locale)
       state.fallbackLocale = locale
     },
@@ -55,9 +55,9 @@ export default {
       loadDateFnsLocale(locale)
     },
 
-    'UPDATE_FALLBACK_LOCALE' ({ commit }, locale) {
+    'UPDATE_FALLBACKLOCALE' ({ commit }, locale) {
       loadLocaleMessages(locale).then(() => {
-        commit('SET_FALLBACK_LOCALE', locale)
+        commit('SET_FALLBACKLOCALE', locale)
         i18n.fallbackLocale = [locale, 'en']
       })
     }

app/src/views/app/AppInstall.vue

@@ -22,8 +22,8 @@
       </b-card>
 
       <!-- INSTALL FORM -->
-      <basic-form
-        :title="$t('operations')" icon="wrench"
+      <card-form
+        :title="$t('operations')" icon="wrench" :submit-text="$t('install')"
         :validation="$v" :server-error="serverError"
         @submit.prevent="beforeInstall"
       >
@@ -32,12 +32,10 @@
         </template>
 
         <form-field
-          v-for="(field, fname) in fields" :key="fname"
-          v-bind="field" v-model="form[fname]"
-          :validation="$v.form[fname]"
+          v-for="(field, fname) in fields" :key="fname" label-cols="0"
+          v-bind="field" v-model="form[fname]" :validation="$v.form[fname]"
         />
-
-      </basic-form>
+      </card-form>
 
       <!-- CONFIRM INSTALL DOMAIN ROOT MODAL -->
       <b-modal

app/src/views/tool/ToolWebadmin.vue

@@ -1,140 +1,95 @@
 <template>
-  <basic-form :header="$t('tools_webadmin_settings')" @submit.prevent="onSubmit" no-footer>
-    <!-- LOCALE -->
-    <b-form-group
-      label-cols-md="4" label-cols-lg="2" label-class="font-weight-bold"
-      :label="$t('tools_webadmin.locale')" label-for="locale"
+  <card-form
+    :title="$t('tools_webadmin_settings')" icon="cog"
+    no-footer
   >
-      <b-select
-        id="locale"
-        :options="availableLocales"
-        v-model="currentLocale"
+    <template v-for="(field, fname) in fields">
+      <form-field
+        v-bind="field" v-model="self[fname]" :key="fname"
       />
-    </b-form-group>
-    <hr>
-
-    <!-- FALLBACK LOCALE -->
-    <b-form-group
-      label-cols-md="4" label-cols-lg="2" label-class="font-weight-bold"
-      :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-md="4" label-cols-lg="2"
-      :label="$t('tools_webadmin.cache')" label-for="cache" label-class="font-weight-bold"
-    >
-      <b-checkbox v-model="currentCache" id="cache" switch>
-        {{ $t(currentCache ? 'enabled' : 'disabled') }}
-      </b-checkbox>
-
-      <template v-slot:description>
-        {{ $t('tools_webadmin.cache_description') }}
+      <hr :key="fname + 'hr'">
     </template>
-    </b-form-group>
-    <hr>
-
-    <!-- TRANSITIONS -->
-    <b-form-group
-      label-cols-md="4" label-cols-lg="2"
-      :label="$t('tools_webadmin.transitions')" label-for="transitions" label-class="font-weight-bold"
-    >
-      <b-checkbox v-model="currentTransitions" id="transitions" switch>
-        {{ $t(currentTransitions ? 'enabled' : 'disabled') }}
-      </b-checkbox>
-    </b-form-group>
-    <hr>
-
-    <!-- EXPERIMENTAL MODE (dev environment only)-->
-    <b-form-group
-      v-if="isDev"
-      label-cols-md="4" label-cols-lg="2" label-class="font-weight-bold"
-      label-for="experimental"
-    >
-      <template v-slot:label>
-        {{ $t('tools_webadmin.experimental') }}
-        <icon iname="flask" />
-      </template>
-
-      <b-checkbox v-model="currentExperimental" id="experimental" switch>
-        {{ $t(currentExperimental ? 'enabled' : 'disabled') }}
-      </b-checkbox>
-
-      <template v-slot:description>
-        <span v-html="$t('tools_webadmin.experimental_description')" />
-      </template>
-    </b-form-group>
-  </basic-form>
+  </card-form>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import BasicForm from '@/components/BasicForm'
+// FIXME move into helpers ?
+// Dynamicly generate computed properties from store with get/set and automatic commit/dispatch
+function mapStoreGetSet (props = [], action = 'commit') {
+  return props.reduce((obj, prop) => {
+    obj[prop] = {
+      get () {
+        return this.$store.getters[prop]
+      },
+      set (value) {
+        const key = (action === 'commit' ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
+        this.$store[action](key, value)
+      }
+    }
+    return obj
+  }, {})
+}
 
 export default {
   name: 'ToolWebadmin',
 
+  data () {
+    return {
+      // Hacky way to be able to dynamicly point to a computed property `self['computedProp']`
+      self: this,
+
+      fields: {
+        locale: {
+          label: this.$i18n.t('tools_webadmin.locale'),
+          component: 'SelectItem',
+          props: { id: 'locale', choices: [] }
+        },
+
+        fallbackLocale: {
+          label: this.$i18n.t('tools_webadmin.fallback_locale'),
+          component: 'SelectItem',
+          props: { id: 'fallback-locale', choices: [] }
+        },
+
+        cache: {
+          id: 'cache',
+          label: this.$i18n.t('tools_webadmin.cache'),
+          description: this.$i18n.t('tools_webadmin.cache_description'),
+          component: 'CheckboxItem',
+          props: { labels: { true: 'enabled', false: 'disabled' } }
+        },
+
+        transitions: {
+          id: 'transitions',
+          label: this.$i18n.t('tools_webadmin.transitions'),
+          component: 'CheckboxItem',
+          props: { labels: { true: 'enabled', false: 'disabled' } }
+        }
+
+        // experimental: added in `created()`
+      }
+    }
+  },
+
   computed: {
-    ...mapGetters([
-      'locale',
-      'fallbackLocale',
-      'cache',
-      'transitions',
-      'experimental',
-      'availableLocales'
-    ]),
-
-    currentLocale: {
-      get: function () { return this.locale },
-      set: function (newValue) {
-        this.$store.dispatch('UPDATE_LOCALE', newValue)
-      }
+    // Those are set/get computed properties
+    ...mapStoreGetSet(['locale', 'fallbackLocale'], 'dispatch'),
+    ...mapStoreGetSet(['cache', 'transitions', 'experimental'])
   },
 
-    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)
-      }
-    },
-
-    currentTransitions: {
-      get: function () { return this.transitions },
-      set: function (newValue) {
-        this.$store.commit('SET_TRANSITIONS', newValue)
-      }
-    },
-
-    // environment
-    isDev () {
-      return process.env.NODE_ENV === 'development'
-    },
-
-    // Only available in 'development' environment.
-    currentExperimental: {
-      get: function () { return this.experimental },
-      set: function (newValue) {
-        this.$store.commit('SET_EXPERIMENTAL', newValue)
+  created () {
+    const availableLocales = this.$store.getters.availableLocales
+    this.fields.locale.props.choices = availableLocales
+    this.fields.fallbackLocale.props.choices = availableLocales
+    if (process.env.NODE_ENV === 'development') {
+      this.fields.experimental = {
+        id: 'experimental',
+        label: this.$i18n.t('tools_webadmin.experimental'),
+        description: this.$i18n.t('tools_webadmin.experimental_description'),
+        component: 'CheckboxItem',
+        props: { labels: { true: 'enabled', false: 'disabled' } }
       }
     }
-  },
-
-  components: {
-    BasicForm
   }
 }
 </script>