Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 34497: Dialog component should allow for optional input options on confirmation modal

Browse source 
Currently supports 'Text' or 'Date' inputs

Signed-off-by: Jessica Zairo <jzairo@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Pedro Amorim 2023-08-08 11:14:11 +00:00 committed by Tomas Cohen Arazi
parent fb80c5bd5f
commit 4416a6ed35
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
2 changed files with 89 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
View file

@ -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,27 @@
<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 {
@ -69,6 +120,9 @@ export default {
removeConfirmationMessages,
}
},
components: {
flatPickr,
},
}
</script>
@ -116,4 +170,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>

17
koha-tmpl/intranet-tmpl/prog/js/vue/stores/main.js
View file

@ -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();
};
}