From 2a41b8fc3b34dba34bb1e22a113736c3c5f1d3e3 Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@ptfs-europe.com>
Date: Tue, 8 Aug 2023 11:14:11 +0000
Subject: [PATCH] Bug 34497: Dialog component should allow for optional input
 options on confirmation modal

Currently supports 'Text' or 'Date' inputs
---
 .../prog/js/vue/components/Dialog.vue         | 73 ++++++++++++++++++-
 .../intranet-tmpl/prog/js/vue/stores/main.js  | 17 ++++-
 2 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
index bb50be5c8c..a20c36b1b2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
@@ -12,11 +12,42 @@
         <div class="dialog alert confirmation">
             <h1 v-html="confirmation.title"></h1>
             <p v-html="confirmation.message"></p>
+            <div class="inputs" v-if="confirmation.inputs">
+                    <form ref="confirmationform">
+                    <div
+                        class="row"
+                        v-for="input in confirmation.inputs"
+                        v-bind:key="input.id"
+                    >
+                        <div class="col-md-6">
+                            <label
+                                :for="`confirmation_input_${input.id}`"
+                                v-bind:class="{ required: input.required }"
+                                >{{ input.label }}:</label
+                            >
+                        </div>
+                        <div class="col-md-6">
+                            <flat-pickr
+                                v-if="input.type == 'Date'"
+                                :id="`confirmation_input_${input.id}`"
+                                v-model="input.value"
+                                :required="input.required"
+                                :config="fp_config"
+                            />
+                            <input
+                                v-if="input.type == 'Text'"
+                                :id="`confirmation_input_${input.id}`"
+                                v-model="input.value"
+                            />
+                        </div>
+                    </div>
+                </form>
+            </div>
             <button
                 v-if="accept_callback"
                 id="accept_modal"
                 class="approve"
-                @click="accept_callback"
+                @click="submit"
             >
                 <i class="fa fa-fw fa-check"></i>
                 <span v-html="confirmation.accept_label"></span>
@@ -44,7 +75,26 @@
 <script>
 import { inject } from "vue"
 import { storeToRefs } from "pinia"
+import flatPickr from "vue-flatpickr-component"
 export default {
+    data() {
+        return {
+            fp_config: flatpickr_defaults,
+        }
+    },
+    methods: {
+        submit: function (e) {
+            if (
+                this.confirmation.inputs.filter(
+                    input => input.required && input.value == null
+                ).length
+            ) {
+                this.$refs.confirmationform.reportValidity()
+            } else {
+                this.accept_callback()
+            }
+        },
+    },
     setup() {
         const mainStore = inject("mainStore")
         const {
@@ -69,6 +119,9 @@ export default {
             removeConfirmationMessages,
         }
     },
+    components: {
+        flatPickr,
+    },
 }
 </script>
 
@@ -116,4 +169,22 @@ export default {
     align-items: center;
     justify-content: center;
 }
+.confirmation .inputs {
+    margin-top: 0.4em;
+}
+.confirmation .inputs input,
+:deep(.flatpickr-input) {
+    width: auto;
+    margin: 0px;
+    float: left;
+}
+
+:deep(.flatpickr-input) {
+    padding-left: 20px;
+}
+
+.confirmation .inputs label {
+    padding: 0.4em;
+    float: right;
+}
 </style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
index c212a5301c..7a0c9e6516 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
@@ -38,10 +38,25 @@ export const useMainStore = defineStore("main", {
             this.displayed_already =
                 displayed; /* Is displayed on the current view */
         },
+        /**
+         * Sets a confirmation dialog pop-up modal
+         * @param  {Object} confirmation Confirmation details
+         * @param  {string} confirmation.title Shows at the top of the dialog
+         * @param  {string} confirmation.message Shows under the title
+         * @param  {string} confirmation.accept_label Label for the 'accept' button
+         * @param  {string} confirmation.cancel_label Label for the 'cancel' button
+         * @param  {Array}  confirmation.inputs Optional inputs details
+         * @param  {string} confirmation.inputs.id Key code of the input, used for HTML elements id
+         * @param  {string} confirmation.inputs.type Type of the input, 'Date' or 'Text'
+         * @param  {string} confirmation.inputs.value Initial/default value
+         * @param  {string} confirmation.inputs.required Sets the input required or not
+         * @param  {string} confirmation.inputs.label Label that sits next to the input
+         * @callback accept_callback Callback function called after the user accepts the dialog. Carries over the user input if inputs exist.
+         */
         setConfirmationDialog(confirmation, accept_callback, displayed = true) {
             if (accept_callback) {
                 this._accept_callback = async () => {
-                    await accept_callback();
+                    await accept_callback(confirmation);
                     this.removeConfirmationMessages();
                 };
             }
-- 
2.30.2