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