|
Lines 12-22
Link Here
|
| 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> |