1<template> 2 <b-modal 3 id="modal-confirmation" 4 ref="modal" 5 :title="$t('pageDumps.modal.initiateSystemDump')" 6 @hidden="resetForm" 7 > 8 <p> 9 <strong> 10 {{ $t('pageDumps.modal.initiateSystemDumpMessage1') }} 11 </strong> 12 </p> 13 <p> 14 {{ $t('pageDumps.modal.initiateSystemDumpMessage2') }} 15 </p> 16 <p> 17 <status-icon status="danger" /> 18 {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }} 19 </p> 20 <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()"> 21 {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }} 22 </b-form-checkbox> 23 <b-form-invalid-feedback 24 :state="getValidationState($v.confirmed)" 25 role="alert" 26 > 27 {{ $t('global.form.required') }} 28 </b-form-invalid-feedback> 29 <template #modal-footer="{ cancel }"> 30 <b-button variant="secondary" @click="cancel()"> 31 {{ $t('global.action.cancel') }} 32 </b-button> 33 <b-button variant="danger" @click="handleSubmit"> 34 {{ $t('pageDumps.form.initiateDump') }} 35 </b-button> 36 </template> 37 </b-modal> 38</template> 39 40<script> 41import StatusIcon from '@/components/Global/StatusIcon'; 42import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 43import { useVuelidate } from '@vuelidate/core'; 44 45export default { 46 components: { StatusIcon }, 47 mixins: [VuelidateMixin], 48 setup() { 49 return { 50 v$: useVuelidate(), 51 }; 52 }, 53 data() { 54 return { 55 confirmed: false, 56 }; 57 }, 58 validations: { 59 confirmed: { 60 mustBeTrue: (value) => value === true, 61 }, 62 }, 63 methods: { 64 closeModal() { 65 this.$nextTick(() => { 66 this.$refs.modal.hide(); 67 }); 68 }, 69 handleSubmit() { 70 this.$v.$touch(); 71 if (this.$v.$invalid) return; 72 this.$emit('ok'); 73 this.closeModal(); 74 }, 75 resetForm() { 76 this.confirmed = false; 77 this.$v.$reset(); 78 }, 79 }, 80}; 81</script> 82