Merge pull request #29 from redlink-gmbh/MORE-Platform#419-bugfix-for-required-boolean

MORE-Platform#419: boolean bugfix (set default in fe if backend has none)

Author: iaigner

src/components/dialog/shared/BooleanPropertyInput.vue

@@ -5,52 +5,58 @@ Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
   import { BooleanProperty } from '../../../models/InputModels';
-  import { PropType, watch } from 'vue';
+  import { PropType, ref, watch } from 'vue';
   import Checkbox from 'primevue/checkbox';
   import PartOfTemplateBadge from './PartOfTemplateBadge.vue';
 
-  const props = defineProps({
-    property: {
-      type: Object as PropType<BooleanProperty>,
-      required: true,
-    },
-    isPartOfTemplate: {
-      type: Boolean,
-      default: false,
-    },
-    editable: {
-      type: Boolean,
-      default: true,
-    },
-  });
+  const props =
+    defineProps({
+      property: {
+        type: Object as PropType<BooleanProperty>,
+        required: true,
+      },
+      isPartOfTemplate: {
+        type: Boolean,
+        default: false,
+      },
+      editable: {
+        type: Boolean,
+        default: true,
+      },
+    });
+
+  const tempValue = ref(props.property.value ?? false);
 
   const emit = defineEmits<{
-    (e: 'onBooleanChange', boolean: boolean | undefined): void;
+    (e: 'onBooleanChange', boolean: boolean): void;
   }>();
 
   watch(
-    () => props.property.value,
+    () => tempValue.value,
     () => {
-      emit('onBooleanChange', props.property.value);
+      emit('onBooleanChange', !!tempValue.value);
     },
   );
 </script>
 
 <template>
   <div class="flex flex-col gap-1">
-    <h6 class="font-bold flex items-center gap-1">
+    <h6 class="flex items-center gap-1 font-bold">
       <label v-if="property.name" :for="property.id">
         {{ $t(property.name) }}<span v-if="property.required">*</span>
       </label>
-      <PartOfTemplateBadge :visible="isPartOfTemplate" :component-id="property.id" />
+      <PartOfTemplateBadge
+        :visible="isPartOfTemplate"
+        :component-id="property.id"
+      />
     </h6>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
     </div>
 
     <div class="flex items-center">
       <Checkbox
-        v-model="props.property.value"
+        v-model="tempValue"
         :label="property.name"
         class="mr-2"
         :required="property.required"

src/i18n/de.json

@@ -732,10 +732,8 @@
             "description": "Hier können Antwortmöglichkeiten für die Frage festgelegt werden. Nicht ausgefüllte Felder werden nicht mitgesendet."
           },
           "singleChoiceState": {
-            "description": {
-              "name": "Einfachauswahl aktivieren",
-              "description": "Die obige Frage ist standardmäßig auf Mehrfachauswahl gesetzt. Durch Aktivieren dieser Funktion wird sie zu einer Einfachauswahl."
-            }
+            "name": "Einfachauswahl aktivieren",
+            "description": "Die obige Frage ist standardmäßig auf Mehrfachauswahl gesetzt. Durch Aktivieren dieser Funktion wird sie zu einer Einfachauswahl."
           }
         }
       }

src/i18n/en.json

@@ -732,10 +732,8 @@
             "description": "Here you can define answer options for the question. Empty fields will not be sent."
           },
           "singleChoiceState": {
-            "description": {
-              "name": "Enable Single Choice",
-              "description": "The question above is set to multiple choice by default. Enabling this function changes it to single choice."
-            }
+            "name": "Enable Single Choice",
+            "description": "The question above is set to multiple choice by default. Enabling this function changes it to single choice."
           }
         }
       }

src/models/InputModels.ts

@@ -503,14 +503,26 @@ export class BooleanProperty extends Property<boolean> {
   }
 
   validate(): string | undefined {
-    if (this.required && this.value === undefined) {
+    if (this.required && (this.value === undefined || this.value === null)) {
       return 'Value is required';
-    } else if (typeof this.value !== 'boolean') {
+    } else if (
+      this.value !== undefined &&
+      this.value !== null &&
+      typeof this.value !== 'boolean'
+    ) {
       return 'Value has wrong value';
     } else {
       return undefined;
     }
   }
+
+  public getValue(): boolean | undefined {
+    const error = this.validate();
+    if (error) {
+      throw new ValidationError(this.name, error);
+    }
+    return this.value ?? false;
+  }
   static fromJson(json: any): BooleanProperty {
     return new BooleanProperty(
       json.defaultValue,