|
Lines 1-70
Link Here
|
| 1 |
<template> |
1 |
<template> |
| 2 |
<div class="alert alert-info" v-if="message" v-html="message"></div> |
2 |
<div class="alert alert-info" v-if="message" v-html="message"></div> |
| 3 |
<div class="alert alert-warning" v-if="error" v-html="error"></div> |
3 |
<div class="alert alert-warning" v-if="error" v-html="error"></div> |
| 4 |
<div class="alert alert-warning modal" v-if="warning"> |
4 |
<div class="modal" role="dialog" v-if="warning"> |
| 5 |
<h1 v-html="warning"></h1> |
5 |
<div class="modal-dialog"> |
| 6 |
<button |
6 |
<div class="modal-content modal-lg"> |
| 7 |
id="close_modal" |
7 |
<div class="modal-body alert-warning"> |
| 8 |
class="btn btn-default approve" |
8 |
<h1 v-html="warning"></h1> |
| 9 |
@click="removeMessages" |
9 |
<button |
| 10 |
> |
10 |
id="close_modal" |
| 11 |
<i class="fa fa-fw fa-check"></i> |
11 |
class="btn btn-default deny cancel" |
| 12 |
{{ $__("Close") }} |
12 |
type="button" |
| 13 |
</button> |
13 |
data-bs-dismiss="modal" |
| 14 |
</div> |
14 |
@click="removeMessages" |
| 15 |
<div class="modal_centered" v-if="confirmation"> |
|
|
| 16 |
<div class="alert alert-warning confirmation"> |
| 17 |
<h1 v-html="confirmation.title"></h1> |
| 18 |
<p v-html="confirmation.message"></p> |
| 19 |
<div class="inputs" v-if="confirmation.inputs"> |
| 20 |
<form ref="confirmationform"> |
| 21 |
<div |
| 22 |
class="row" |
| 23 |
v-for="input in confirmation.inputs" |
| 24 |
v-bind:key="input.id" |
| 25 |
> |
15 |
> |
| 26 |
<div class="col-md-6"> |
16 |
<i class="fa fa-fw fa-check"></i> |
| 27 |
<label |
17 |
{{ $__("Close") }} |
| 28 |
:for="`confirmation_input_${input.id}`" |
18 |
</button> |
| 29 |
v-bind:class="{ required: input.required }" |
19 |
</div> |
| 30 |
>{{ input.label }}:</label |
20 |
</div> |
|
|
21 |
</div> |
| 22 |
</div> |
| 23 |
<div class="confirmation modal" role="dialog" v-if="confirmation"> |
| 24 |
<div class="modal-dialog"> |
| 25 |
<div class="modal-content modal-lg"> |
| 26 |
<div class="modal-header alert-warning"> |
| 27 |
<h1 v-html="confirmation.title"></h1> |
| 28 |
</div> |
| 29 |
<div class="modal-body"> |
| 30 |
<p v-html="confirmation.message"></p> |
| 31 |
<div class="inputs" v-if="confirmation.inputs"> |
| 32 |
<form ref="confirmationform"> |
| 33 |
<div |
| 34 |
class="row" |
| 35 |
v-for="input in confirmation.inputs" |
| 36 |
v-bind:key="input.id" |
| 31 |
> |
37 |
> |
| 32 |
</div> |
38 |
<div class="col-md-6"> |
| 33 |
<div class="col-md-6"> |
39 |
<label |
| 34 |
<flat-pickr |
40 |
:for="`confirmation_input_${input.id}`" |
| 35 |
v-if="input.type == 'Date'" |
41 |
v-bind:class="{ |
| 36 |
:id="`confirmation_input_${input.id}`" |
42 |
required: input.required, |
| 37 |
v-model="input.value" |
43 |
}" |
| 38 |
:required="input.required" |
44 |
>{{ input.label }}:</label |
| 39 |
:config="fp_config" |
45 |
> |
| 40 |
/> |
46 |
</div> |
| 41 |
<input |
47 |
<div class="col-md-6"> |
| 42 |
v-if="input.type == 'Text'" |
48 |
<flat-pickr |
| 43 |
:id="`confirmation_input_${input.id}`" |
49 |
v-if="input.type == 'Date'" |
| 44 |
v-model="input.value" |
50 |
:id="`confirmation_input_${input.id}`" |
| 45 |
:required="input.required" |
51 |
v-model="input.value" |
| 46 |
/> |
52 |
:required="input.required" |
| 47 |
</div> |
53 |
:config="fp_config" |
|
|
54 |
/> |
| 55 |
<input |
| 56 |
v-if="input.type == 'Text'" |
| 57 |
:id="`confirmation_input_${input.id}`" |
| 58 |
v-model="input.value" |
| 59 |
:required="input.required" |
| 60 |
/> |
| 61 |
</div> |
| 62 |
</div> |
| 63 |
</form> |
| 48 |
</div> |
64 |
</div> |
| 49 |
</form> |
65 |
<button |
|
|
66 |
v-if="accept_callback" |
| 67 |
id="accept_modal" |
| 68 |
class="btn btn-default approve" |
| 69 |
@click="submit" |
| 70 |
> |
| 71 |
<i class="fa fa-fw fa-check"></i> |
| 72 |
<span v-html="confirmation.accept_label"></span> |
| 73 |
</button> |
| 74 |
<button |
| 75 |
id="close_modal" |
| 76 |
class="btn btn-default deny cancel" |
| 77 |
type="button" |
| 78 |
data-bs-dismiss="modal" |
| 79 |
@click="removeConfirmationMessages" |
| 80 |
> |
| 81 |
<i class="fa fa-fw fa-remove"></i> |
| 82 |
<span v-html="confirmation.cancel_label"></span> |
| 83 |
</button> |
| 84 |
</div> |
| 50 |
</div> |
85 |
</div> |
| 51 |
<button |
|
|
| 52 |
v-if="accept_callback" |
| 53 |
id="accept_modal" |
| 54 |
class="btn btn-default approve" |
| 55 |
@click="submit" |
| 56 |
> |
| 57 |
<i class="fa fa-fw fa-check"></i> |
| 58 |
<span v-html="confirmation.accept_label"></span> |
| 59 |
</button> |
| 60 |
<button |
| 61 |
id="close_modal" |
| 62 |
class="btn btn-default deny" |
| 63 |
@click="removeConfirmationMessages" |
| 64 |
> |
| 65 |
<i class="fa fa-fw fa-remove"></i> |
| 66 |
<span v-html="confirmation.cancel_label"></span> |
| 67 |
</button> |
| 68 |
</div> |
86 |
</div> |
| 69 |
</div> |
87 |
</div> |
| 70 |
<!-- Must be styled differently --> |
88 |
<!-- Must be styled differently --> |
|
Lines 168-184
export default {
Link Here
|
| 168 |
width: 10%; |
186 |
width: 10%; |
| 169 |
} |
187 |
} |
| 170 |
|
188 |
|
| 171 |
.confirmation { |
|
|
| 172 |
position: absolute; |
| 173 |
top: 25%; |
| 174 |
left: 40%; |
| 175 |
|
| 176 |
width: 50%; |
| 177 |
min-height: 10%; |
| 178 |
margin: auto; |
| 179 |
align-items: center; |
| 180 |
justify-content: center; |
| 181 |
} |
| 182 |
.confirmation .inputs { |
189 |
.confirmation .inputs { |
| 183 |
margin-top: 0.4em; |
190 |
margin-top: 0.4em; |
| 184 |
} |
191 |
} |
| 185 |
- |
|
|