From 50fda7861dfbc5e824a039e68c0a7d9a1465fc71 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 12:26:06 +0200
Subject: [PATCH] refactor: FormFieldReadonly ts + composition

---
 .../components/globals/FormFieldReadonly.vue  | 34 +++++++++----------
 app/src/types/form.ts                         | 17 ++++++++++
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/app/src/components/globals/FormFieldReadonly.vue b/app/src/components/globals/FormFieldReadonly.vue
index 09703414..6214a32e 100644
--- a/app/src/components/globals/FormFieldReadonly.vue
+++ b/app/src/components/globals/FormFieldReadonly.vue
@@ -1,27 +1,27 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="C extends AnyWritableComponents, MV extends any"
+>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { Cols } from '@/types/commons'
+import type {
+  AnyWritableComponents,
+  FormFieldReadonlyProps,
+} from '@/types/form'
 
 defineOptions({
+  name: 'FormFieldReadonly',
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    label: string
-    component?: string
-    // FIXME modelValue? not a modelValue but idk
-    value?: any
-    cols?: Cols
-  }>(),
-  {
-    component: 'InputItem',
-    value: null,
-    cols: () => ({ md: 4, lg: 3 }),
-  },
-)
+const props = withDefaults(defineProps<FormFieldReadonlyProps<C, MV>>(), {
+  id: undefined,
+  modelValue: undefined,
+  cols: () => ({ md: 4, lg: 3 }),
+})
 
 const { t } = useI18n()
 
@@ -32,7 +32,7 @@ const cols = computed<Cols>(() => ({
 }))
 
 const text = computed(() => {
-  return parseValue(props.value)
+  return parseValue(props.modelValue)
 })
 
 function parseValue(value: any) {
@@ -43,7 +43,7 @@ function parseValue(value: any) {
   if (Array.isArray(value)) {
     value = value.length ? value.join(t('words.separator')) : null
   }
-  if ([null, undefined, ''].includes(props.value)) value = t('words.none')
+  if ([null, undefined, ''].includes(value)) value = t('words.none')
   return value
 }
 </script>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 8e840bc0..b32fb606 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -5,6 +5,8 @@ import type {
 } from '@vuelidate/core'
 import type { RouteLocationRaw } from 'vue-router'
 
+import type { Cols } from '@/types/commons'
+
 type StateValidation = false | null
 type StateVariant = 'success' | 'info' | 'warning' | 'danger'
 
@@ -194,8 +196,23 @@ export type FormField<
   readonly?: false
 }
 
+type FormFieldReadonly<
+  C extends AnyWritableComponents = AnyWritableComponents,
+> = BaseFormField<C> & {
+  label: string
+  cols?: Cols
+  readonly: true
+}
+
 export type FormFieldProps<
   C extends AnyWritableComponents,
   MV extends any,
 > = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
   BaseFormFieldComputedProps<MV>
+
+export type FormFieldReadonlyProps<
+  C extends AnyWritableComponents,
+  MV extends any,
+> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly'> & {
+  modelValue?: MV
+}