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