Attachment #154332 for bug #34497

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




        <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="submit"
            >
                <i class="fa fa-fw fa-check"></i>
                <span v-html="confirmation.accept_label"></span>

<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 &&
                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 {

            removeConfirmationMessages,
        }
    },
    components: {
        flatPickr,
    },
}
</script>


    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>




            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(confirmation);
                    this.removeConfirmationMessages();
                };
            }
- 

Return to bug 34497

Lines 12-22 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue (-1 / +73 lines)
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>

Lines 38-47 export const useMainStore = defineStore("main", { Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js (-2 / +16 lines)
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	-