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

Bug 37812: Adjust Dialog.vue component

Browse source 
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
Jonathan Druart 2024-09-10 16:34:54 +02:00 committed by Martin Renvoize
parent a2782f9146
commit f2f2ecaeef
Signed by: martin.renvoize
GPG key ID: 422B469130441A0F
1 changed files with 80 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,70 +1,88 @@
<template> <template>
<div class="alert alert-info" v-if="message" v-html="message"></div> <div class="alert alert-info" v-if="message" v-html="message"></div>
<div class="alert alert-warning" v-if="error" v-html="error"></div> <div class="alert alert-warning" v-if="error" v-html="error"></div>
<div class="alert alert-warning modal" v-if="warning"> <div class="modal" role="dialog" v-if="warning">
<h1 v-html="warning"></h1> <div class="modal-dialog">
<button <div class="modal-content modal-lg">
id="close_modal" <div class="modal-body alert-warning">
class="btn btn-default approve" <h1 v-html="warning"></h1>
@click="removeMessages" <button
> id="close_modal"
<i class="fa fa-fw fa-check"></i> class="btn btn-default deny cancel"
{{ $__("Close") }} type="button"
</button> data-bs-dismiss="modal"
</div> @click="removeMessages"
<div class="modal_centered" v-if="confirmation">
<div class="alert alert-warning 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"> <i class="fa fa-fw fa-check"></i>
<label {{ $__("Close") }}
:for="`confirmation_input_${input.id}`" </button>
v-bind:class="{ required: input.required }" </div>
>{{ input.label }}:</label </div>
> </div>
</div> </div>
<div class="col-md-6"> <div class="confirmation modal" role="dialog" v-if="confirmation">
<flat-pickr <div class="modal-dialog">
v-if="input.type == 'Date'" <div class="modal-content modal-lg">
:id="`confirmation_input_${input.id}`" <div class="modal-header alert-warning">
v-model="input.value" <h1 v-html="confirmation.title"></h1>
:required="input.required" </div>
:config="fp_config" <div class="modal-body">
/> <p v-html="confirmation.message"></p>
<input <div class="inputs" v-if="confirmation.inputs">
v-if="input.type == 'Text'" <form ref="confirmationform">
:id="`confirmation_input_${input.id}`" <div
v-model="input.value" class="row"
:required="input.required" v-for="input in confirmation.inputs"
/> v-bind:key="input.id"
</div> >
</div> <div class="col-md-6">
</form> <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"
:required="input.required"
/>
</div>
</div>
</form>
</div>
<button
v-if="accept_callback"
id="accept_modal"
class="btn btn-default approve"
@click="submit"
>
<i class="fa fa-fw fa-check"></i>
<span v-html="confirmation.accept_label"></span>
</button>
<button
id="close_modal"
class="btn btn-default deny cancel"
type="button"
data-bs-dismiss="modal"
@click="removeConfirmationMessages"
>
<i class="fa fa-fw fa-remove"></i>
<span v-html="confirmation.cancel_label"></span>
</button>
</div>
</div> </div>
<button
v-if="accept_callback"
id="accept_modal"
class="btn btn-default approve"
@click="submit"
>
<i class="fa fa-fw fa-check"></i>
<span v-html="confirmation.accept_label"></span>
</button>
<button
id="close_modal"
class="btn btn-default deny"
@click="removeConfirmationMessages"
>
<i class="fa fa-fw fa-remove"></i>
<span v-html="confirmation.cancel_label"></span>
</button>
</div> </div>
</div> </div>
<!-- Must be styled differently --> <!-- Must be styled differently -->
@ -168,17 +186,6 @@ export default {
width: 10%; width: 10%;
} }
.confirmation {
position: absolute;
top: 25%;
left: 40%;
width: 50%;
min-height: 10%;
margin: auto;
align-items: center;
justify-content: center;
}
.confirmation .inputs { .confirmation .inputs {
margin-top: 0.4em; margin-top: 0.4em;
} }