View | Details | Raw Unified | Return to bug 34497
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue (-1 / +73 lines)
Lines 12-22 Link Here
12
        <div class="dialog alert confirmation">
12
        <div class="dialog alert confirmation">
13
            <h1 v-html="confirmation.title"></h1>
13
            <h1 v-html="confirmation.title"></h1>
14
            <p v-html="confirmation.message"></p>
14
            <p v-html="confirmation.message"></p>
15
            <div class="inputs" v-if="confirmation.inputs">
16
                <form ref="confirmationform">
17
                    <div
18
                        class="row"
19
                        v-for="input in confirmation.inputs"
20
                        v-bind:key="input.id"
21
                    >
22
                        <div class="col-md-6">
23
                            <label
24
                                :for="`confirmation_input_${input.id}`"
25
                                v-bind:class="{ required: input.required }"
26
                                >{{ input.label }}:</label
27
                            >
28
                        </div>
29
                        <div class="col-md-6">
30
                            <flat-pickr
31
                                v-if="input.type == 'Date'"
32
                                :id="`confirmation_input_${input.id}`"
33
                                v-model="input.value"
34
                                :required="input.required"
35
                                :config="fp_config"
36
                            />
37
                            <input
38
                                v-if="input.type == 'Text'"
39
                                :id="`confirmation_input_${input.id}`"
40
                                v-model="input.value"
41
                            />
42
                        </div>
43
                    </div>
44
                </form>
45
            </div>
15
            <button
46
            <button
16
                v-if="accept_callback"
47
                v-if="accept_callback"
17
                id="accept_modal"
48
                id="accept_modal"
18
                class="approve"
49
                class="approve"
19
                @click="accept_callback"
50
                @click="submit"
20
            >
51
            >
21
                <i class="fa fa-fw fa-check"></i>
52
                <i class="fa fa-fw fa-check"></i>
22
                <span v-html="confirmation.accept_label"></span>
53
                <span v-html="confirmation.accept_label"></span>
Lines 44-50 Link Here
44
<script>
75
<script>
45
import { inject } from "vue"
76
import { inject } from "vue"
46
import { storeToRefs } from "pinia"
77
import { storeToRefs } from "pinia"
78
import flatPickr from "vue-flatpickr-component"
47
export default {
79
export default {
80
    data() {
81
        return {
82
            fp_config: flatpickr_defaults,
83
        }
84
    },
85
    methods: {
86
        submit: function (e) {
87
            if (
88
                this.confirmation.inputs &&
89
                this.confirmation.inputs.filter(
90
                    input => input.required && input.value == null
91
                ).length
92
            ) {
93
                this.$refs.confirmationform.reportValidity()
94
            } else {
95
                this.accept_callback()
96
            }
97
        },
98
    },
48
    setup() {
99
    setup() {
49
        const mainStore = inject("mainStore")
100
        const mainStore = inject("mainStore")
50
        const {
101
        const {
Lines 69-74 export default { Link Here
69
            removeConfirmationMessages,
120
            removeConfirmationMessages,
70
        }
121
        }
71
    },
122
    },
123
    components: {
124
        flatPickr,
125
    },
72
}
126
}
73
</script>
127
</script>
74
128
Lines 116-119 export default { Link Here
116
    align-items: center;
170
    align-items: center;
117
    justify-content: center;
171
    justify-content: center;
118
}
172
}
173
.confirmation .inputs {
174
    margin-top: 0.4em;
175
}
176
.confirmation .inputs input,
177
:deep(.flatpickr-input) {
178
    width: auto;
179
    margin: 0px;
180
    float: left;
181
}
182
183
:deep(.flatpickr-input) {
184
    padding-left: 20px;
185
}
186
187
.confirmation .inputs label {
188
    padding: 0.4em;
189
    float: right;
190
}
119
</style>
191
</style>
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js (-2 / +16 lines)
Lines 38-47 export const useMainStore = defineStore("main", { Link Here
38
            this.displayed_already =
38
            this.displayed_already =
39
                displayed; /* Is displayed on the current view */
39
                displayed; /* Is displayed on the current view */
40
        },
40
        },
41
        /**
42
         * Sets a confirmation dialog pop-up modal
43
         * @param  {Object} confirmation Confirmation details
44
         * @param  {string} confirmation.title Shows at the top of the dialog
45
         * @param  {string} confirmation.message Shows under the title
46
         * @param  {string} confirmation.accept_label Label for the 'accept' button
47
         * @param  {string} confirmation.cancel_label Label for the 'cancel' button
48
         * @param  {Array}  confirmation.inputs Optional inputs details
49
         * @param  {string} confirmation.inputs.id Key code of the input, used for HTML elements id
50
         * @param  {string} confirmation.inputs.type Type of the input, 'Date' or 'Text'
51
         * @param  {string} confirmation.inputs.value Initial/default value
52
         * @param  {string} confirmation.inputs.required Sets the input required or not
53
         * @param  {string} confirmation.inputs.label Label that sits next to the input
54
         * @callback accept_callback Callback function called after the user accepts the dialog. Carries over the user input if inputs exist.
55
         */
41
        setConfirmationDialog(confirmation, accept_callback, displayed = true) {
56
        setConfirmationDialog(confirmation, accept_callback, displayed = true) {
42
            if (accept_callback) {
57
            if (accept_callback) {
43
                this._accept_callback = async () => {
58
                this._accept_callback = async () => {
44
                    await accept_callback();
59
                    await accept_callback(confirmation);
45
                    this.removeConfirmationMessages();
60
                    this.removeConfirmationMessages();
46
                };
61
                };
47
            }
62
            }
48
- 

Return to bug 34497