From 4c8ba970b99c5a3637e337458ba7bdfef4ab6d28 Mon Sep 17 00:00:00 2001
From: Matt Blenkinsop <matt.blenkinsop@openfifth.co.uk>
Date: Fri, 23 May 2025 10:25:33 +0100
Subject: [PATCH] Bug 38201: Add an InputCheckboxElement component

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../Elements/InputCheckboxElement.vue         | 39 +++++++++++++++++++
 .../prog/js/vue/components/FormElement.vue    |  8 ++--
 2 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputCheckboxElement.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputCheckboxElement.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputCheckboxElement.vue
new file mode 100644
index 0000000000..8a44e6e43e
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputCheckboxElement.vue
@@ -0,0 +1,39 @@
+<template>
+    <input
+        :id="id"
+        type="checkbox"
+        v-model="model"
+        :placeholder="placeholder"
+        :required="required"
+        @change="changeMethod()"
+    />
+</template>
+
+<script>
+export default {
+    props: {
+        id: String,
+        modelValue: String | Boolean,
+        placeholder: String,
+        required: Boolean,
+        changeMethod: {
+            type: Function,
+            default: () => {},
+        },
+    },
+    emits: ["update:modelValue"],
+    computed: {
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            },
+        },
+    },
+    name: "InputCheckboxElement",
+};
+</script>
+
+<style></style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
index fbd2e6709e..1f56345335 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
@@ -34,11 +34,11 @@
         />
     </template>
     <template v-else-if="attr.type == 'checkbox'">
-        <input
-            type="checkbox"
+        <InputCheckboxElement
             :id="getElementId"
+            type="checkbox"
             v-model="resource[attr.name]"
-            @change="attr.onChange && attr.onChange(resource)"
+            :changeMethod="attr.onChange && attr.onChange.bind(this, resource)"
         />
     </template>
     <template v-else-if="attr.type == 'radio'">
@@ -185,6 +185,7 @@
 import AdditionalFieldsEntry from "./AdditionalFieldsEntry.vue";
 import BaseElement from "./BaseElement.vue";
 import InputElement from "./Elements/InputElement.vue";
+import InputCheckboxElement from "./Elements/InputCheckboxElement.vue";
 import TextareaElement from "./Elements/TextareaElement.vue";
 import FormRelationshipSelect from "./FormRelationshipSelect.vue";
 import ToolTip from "./ToolTip.vue";
@@ -262,6 +263,7 @@ export default {
         ToolTip,
         AdditionalFieldsEntry,
         InputElement,
+        InputCheckboxElement,
         TextareaElement,
     },
 };