Merge pull request #404 from YunoHost/app-install-visible

App install visible

app/src/helpers/yunohostArguments.js

@@ -343,9 +343,9 @@ export function formatFormDataValue (value) {
  * @param {Boolean} [extraParams.removeEmpty=true] - Removes "empty" values from the object.
  * @return {Object} the parsed data to be sent to the server, with extracted values if specified.
  */
-export function formatFormData (
+export async function formatFormData (
   formData,
-  { extract = null, flatten = false, removeEmpty = true, removeNull = false, promise = false, multipart = true } = {}
+  { extract = null, flatten = false, removeEmpty = true, removeNull = false, multipart = true } = {}
 ) {
   const output = {
     data: {},
@@ -376,14 +376,7 @@ export function formatFormData (
       output[type][key] = value
     }
   }
+  if (promises.length) await Promise.all(promises)
   const { data, extracted } = output
-  if (promises.length > 0 || promise) {
+  return extract ? { data, ...extracted } : data
-    return new Promise((resolve, reject) => {
-      Promise.all(promises).then((value) => {
-        resolve(data)
-      })
-    })
-  } else {
-    return extract ? { data, ...extracted } : data
-  }
 }

app/src/views/app/AppConfigPanel.vue

@@ -155,7 +155,7 @@ export default {
     },
 
     applyConfig (id_) {
-      formatFormData(this.forms[id_], { promise: true, removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
+      formatFormData(this.forms[id_], { removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
         const args = objectToParams(formatedData)
 
         api.put(

app/src/views/app/AppInstall.vue

@@ -23,10 +23,13 @@
         :validation="$v" :server-error="serverError"
         @submit.prevent="performInstall"
       >
-        <form-field
+        <template v-for="(field, fname) in fields">
-          v-for="(field, fname) in fields" :key="fname" label-cols="0"
+          <form-field
-          v-bind="field" v-model="form[fname]" :validation="$v.form[fname]"
+            v-if="isVisible(field.visible, field)"
-        />
+            :key="fname" label-cols="0"
+            v-bind="field" v-model="form[fname]" :validation="$v.form[fname]"
+          />
+        </template>
       </card-form>
     </template>
 
@@ -44,9 +47,10 @@
 
 <script>
 import { validationMixin } from 'vuelidate'
+import evaluate from 'simple-evaluate'
 
 import api, { objectToParams } from '@/api'
-import { formatYunoHostArguments, formatI18nField, formatFormData } from '@/helpers/yunohostArguments'
+import { formatYunoHostArguments, formatI18nField, formatFormData, pFileReader } from '@/helpers/yunohostArguments'
 
 export default {
   name: 'AppInstall',
@@ -102,6 +106,41 @@ export default {
       this.errors = errors
     },
 
+    isVisible (expression, field) {
+      if (!expression || !field) return true
+      const context = {}
+
+      const promises = []
+      for (const shortname in this.form) {
+        if (this.form[shortname] instanceof File) {
+          if (expression.includes(shortname)) {
+            promises.push(pFileReader(this.form[shortname], context, shortname, false))
+          }
+        } else {
+          context[shortname] = this.form[shortname]
+        }
+      }
+      // Allow to use match(var,regexp) function
+      const matchRe = new RegExp('match\\(\\s*(\\w+)\\s*,\\s*"([^"]+)"\\s*\\)', 'g')
+      let i = 0
+      Promise.all(promises).then(() => {
+        for (const matched of expression.matchAll(matchRe)) {
+          i++
+          const varName = matched[1] + '__re' + i.toString()
+          context[varName] = new RegExp(matched[2], 'm').test(context[matched[1]])
+          expression = expression.replace(matched[0], varName)
+        }
+
+        try {
+          field.isVisible = evaluate(context, expression)
+        } catch (error) {
+          field.isVisible = false
+        }
+      })
+      // This value should be updated magically when vuejs will detect isVisible changed
+      return field.isVisible
+    },
+
     async performInstall () {
       if ('path' in this.form && this.form.path === '/') {
         const confirmed = await this.$askConfirmation(
@@ -110,7 +149,10 @@ export default {
         if (!confirmed) return
       }
 
-      const { data: args, label } = formatFormData(this.form, { extract: ['label'] })
+      const { data: args, label } = await formatFormData(
+        this.form,
+        { extract: ['label'], removeEmpty: false, removeNull: true, multipart: false }
+      )
       const data = { app: this.id, label, args: Object.entries(args).length ? objectToParams(args) : undefined }
 
       api.post('apps', data, { key: 'apps.install', name: this.name }).then(() => {

app/src/views/domain/DomainConfig.vue

@@ -142,7 +142,7 @@ export default {
     },
 
     applyConfig (id_) {
-      formatFormData(this.forms[id_], { promise: true, removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
+      formatFormData(this.forms[id_], { removeEmpty: false, removeNull: true, multipart: false }).then((formatedData) => {
         const args = objectToParams(formatedData)
 
         api.put(

app/src/views/user/UserCreate.vue

@@ -173,8 +173,8 @@ export default {
       this.form.domain = this.mainDomain
     },
 
-    onSubmit () {
+    async onSubmit () {
-      const data = formatFormData(this.form, { flatten: true })
+      const data = await formatFormData(this.form, { flatten: true })
       api.post({ uri: 'users' }, data, { key: 'users.create', name: this.form.username }).then(() => {
         this.$router.push({ name: 'user-list' })
       }).catch(err => {

app/src/views/user/UserEdit.vue

@@ -266,8 +266,8 @@ export default {
       }
     },
 
-    onSubmit () {
+    async onSubmit () {
-      const formData = formatFormData(this.form, { flatten: true })
+      const formData = await formatFormData(this.form, { flatten: true })
       const user = this.user(this.name)
       const data = {}
       if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {