fix(FE): generalized CheckBoxConditional.vue

resources/js/components/content/partials/fields/misc/CheckBoxConditional.vue

@@ -1,68 +1,73 @@
 <script setup lang="ts">
-import { ref, watch, shallowRef, type PropType } from 'vue';
+import {ref, watch, shallowRef, type PropType, reactive} from 'vue';
+
+const modelValue = defineModel<Boolean>({ required: true });
 
 const props = defineProps({
   checkBoxForm: {
     type: Object as PropType<{
-      checkBoxField: { label: string };
+      checkBoxField: {label: string},
-      fields: Record<string, {
+      fields: {
         label: string;
         component: any;
         value: any;
         disabled: boolean;
         props?: Record<string, any>;
-      }>;
+        title?: string;
+        min: number;
+      }[];
     }>,
-    required: true,
+    required: true
-  },
-  value: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-// Reactive state for the checkbox and nested fields
-const isChecked = ref(props.value);
-// TODO performance issue by using ref, but losing connectivity to main data struct if not
-// Either cycle trough each field and add it to a ref var, so its value is updated but the rest is not tracked
-const fields = ref(props.checkBoxForm.fields);
-
-// Watch for changes in the checkbox state and update the disabled state of nested fields
-watch(isChecked, (isChecked) => {
-  for (const key in fields.value) {
-    fields.value[key].disabled = !isChecked;
   }
 });
+
+// Emit setup for nested fields
+const emit = defineEmits<{
+  (e: 'checkbox-conditional-update', payload: { field: string; value: any }): void
+}>();
+
+// Handle checkbox changes
+watch(modelValue, (newValue) => {
+  if (!newValue) {
+    const fields = props.checkBoxForm.fields;
+    fields.forEach(field => {
+      emit('checkbox-conditional-update', { field, value: null });
+    });
+  }
+});
+
+function handleFieldUpdate(key: string, value: any) {
+  emit('checkbox-conditional-update', { key, value });
+}
 </script>
 
 <template>
-  <v-card>
+  <!-- Checkbox to toggle nested fields -->
-    <v-card-text>
+  <v-checkbox
-      <!-- Checkbox to toggle nested fields -->
+      :label="props.checkBoxForm.checkBoxField.label"
-      <v-checkbox
+      v-model="modelValue"
-          :label="props.checkBoxForm.checkBoxField.label"
+  ></v-checkbox>
-          v-model="isChecked"
-      ></v-checkbox>
 
-      <!-- Dynamically render nested fields -->
+  <!-- Dynamically render nested fields -->
-      <template v-for="(field, key) in fields" :key="key">
+  <template v-for="(field, key) in props.checkBoxForm.fields" :key="key">
-        <component
+    <component
-            :is="field.component"
+        :is="field.component"
-            v-model="field.value"
+        :label="field.label"
-            :label="field.label"
+        :title="field.title || ''"
-            :disabled="field.disabled"
+        :disabled="!modelValue"
-            :density="'compact'"
+        :density="'compact'"
-            rows="2"
+        :min="field.min"
-            item-title="type_name"
+        :active="true"
-            hide-details="auto"
+        v-bind="field.props || {}"
-            class="mb-2"
+        v-model="field.value"
-            clearable
+        @update:model-value="handleFieldUpdate(key, field.value)"
-            :active="true"
+        rows="2"
-            v-bind="field.props || {}"
+        item-title="type_name"
-        />
+        hide-details="auto"
-      </template>
+        class="mb-2"
-    </v-card-text>
+        clearable
-  </v-card>
+    />
+  </template>
 </template>
 
 <style scoped></style>