From 5408b0553cc9498b92dfb55a9678e53f4e97cfb1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 13:33:58 +0200
Subject: [PATCH] fix: `visible` + `enabled` reactivity

---
 app/src/components/globals/CardForm.vue             | 8 ++++----
 app/src/components/globals/formItems/ButtonItem.vue | 4 ++--
 app/src/composables/configPanels.ts                 | 6 +++---
 app/src/types/configPanels.ts                       | 4 ++--
 app/src/types/form.ts                               | 8 ++++----
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index c78ec353..057feff6 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="MV extends Obj, FFD extends FormFieldDict<MV>">
 import { createReusableTemplate } from '@vueuse/core'
-import { computed, reactive, toValue } from 'vue'
+import { computed, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { FormValidation } from '@/composables/form'
@@ -85,7 +85,7 @@ const sections = computed(() => {
   if (!sections || !fields) return
   return sections.map((section) => ({
     ...section,
-    fields: reactive(section.fields.map((id) => [id, fields[id]])) as {
+    fields: section.fields.map((id) => [id, fields[id]]) as {
       [k in Extract<keyof FFD, string>]: [k, FFD[k]]
     }[Extract<keyof FFD, string>][],
   }))
@@ -109,7 +109,7 @@ const Fields = createReusableTemplate<{
 <template>
   <Fields.define v-slot="{ fieldsProps }">
     <template v-for="[k, field] in fieldsProps" :key="k">
-      <template v-if="field.visible ?? true">
+      <template v-if="toValue(field.visible) ?? true">
         <slot
           v-if="isWritableComponent<MV[typeof k]>(field)"
           :name="`field:${k}`"
@@ -174,7 +174,7 @@ const Fields = createReusableTemplate<{
             <template v-for="section in sections" :key="section.id">
               <Component
                 :is="section.name ? 'section' : 'div'"
-                v-if="section.visible"
+                v-if="toValue(section.visible)"
                 class="form-section"
               >
                 <BCardTitle v-if="section.name" title-tag="h3">
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 8fd424f6..29efd32d 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
 
 import type { ButtonItemProps } from '@/types/form'
 
@@ -30,7 +30,7 @@ const icon = computed(() => {
   <BButton
     :id="id"
     :variant="type"
-    :disabled="!enabled"
+    :disabled="!toValue(enabled)"
     class="d-block mb-3"
     @click="emit('action', id)"
   >
diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index 937b84bb..67ce47c5 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -11,7 +11,7 @@ import { useRouter } from 'vue-router'
 
 import { APIBadRequestError, APIError } from '@/api/errors'
 import { deepSetErrors, useForm, type FormValidation } from '@/composables/form'
-import { asUnreffed, isObjectLiteral } from '@/helpers/commons'
+import { isObjectLiteral } from '@/helpers/commons'
 import * as validators from '@/helpers/validators'
 import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
 import type { CustomRoute, KeyOfStr, MergeUnion, Obj } from '@/types/commons'
@@ -324,14 +324,14 @@ export function formatConfigPanels<
 function useExpression(
   expression: JSExpression | undefined,
   form: Ref<Obj>,
-): boolean {
+): boolean | ComputedRef<boolean> {
   if (typeof expression === 'boolean') return expression
   if (typeof expression === 'string') {
     // FIXME normalize expression in core? ('', 'false', 'true') and rm next 2 lines
     if (!expression || expression === 'true') return true
     if (expression === 'false') return false
     // FIXME remove asUnreffed and manage ref type?
-    return asUnreffed(useEvaluation(expression, form))
+    return useEvaluation(expression, form)
   }
   return true
 }
diff --git a/app/src/types/configPanels.ts b/app/src/types/configPanels.ts
index aa9e6902..1ef788b0 100644
--- a/app/src/types/configPanels.ts
+++ b/app/src/types/configPanels.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 import type { Obj, KeyOfStr, CustomRoute } from '@/types/commons'
 import type {
@@ -56,7 +56,7 @@ export type ConfigSection<MV extends Obj, FFD extends FormFieldDict<MV>> = {
   id: string
   isActionSection: boolean
   name?: string
-  visible: boolean
+  visible: boolean | ComputedRef<boolean>
 }
 
 export type ConfigPanel<
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 50dba32b..82c63341 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -3,6 +3,7 @@ import type {
   ValidationArgs,
   ValidationRuleCollection,
 } from '@vuelidate/core'
+import type { ComputedRef } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import { isObjectLiteral } from '@/helpers/commons'
@@ -19,7 +20,7 @@ type BaseDisplayItemProps = {
 
 export type ButtonItemProps = BaseDisplayItemProps & {
   // FIXME compute enabled JSExpression
-  enabled?: boolean
+  enabled?: boolean | ComputedRef<boolean>
   icon?: string
   type?: StateVariant
 }
@@ -239,8 +240,7 @@ type BaseFormField<C extends AnyItemComponents> = {
   label?: string
   props?: ItemComponentToItemProps[C]
   readonly?: boolean
-  // FIXME compute visible JSExpression
-  visible?: boolean
+  visible?: boolean | ComputedRef<boolean>
 }
 
 export type FormField<
@@ -274,7 +274,7 @@ export type FormFieldDisplay<
 > = {
   component: C
   props: ItemComponentToItemProps[C]
-  visible?: boolean
+  visible?: boolean | ComputedRef<boolean>
   hr?: boolean
   readonly?: true
 }