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'; 44import { useI18n } from 'vue-i18n'; 45 46export default { 47 components: { StatusIcon }, 48 mixins: [VuelidateMixin], 49 setup() { 50 return { 51 v$: useVuelidate(), 52 }; 53 }, 54 data() { 55 return { 56 $t: useI18n().t, 57 confirmed: false, 58 }; 59 }, 60 validations: { 61 confirmed: { 62 mustBeTrue: (value) => value === true, 63 }, 64 }, 65 methods: { 66 closeModal() { 67 this.$nextTick(() => { 68 this.$refs.modal.hide(); 69 }); 70 }, 71 handleSubmit() { 72 this.v$.$touch(); 73 if (this.v$.$invalid) return; 74 this.$emit('ok'); 75 this.closeModal(); 76 }, 77 resetForm() { 78 this.confirmed = false; 79 this.v$.$reset(); 80 }, 81 }, 82}; 83</script> 84