xref: /openbmc/webui-vue/src/views/Settings/Network/ModalDns.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-modal
3    id="modal-dns"
4    ref="modal"
5    :title="$t('pageNetwork.table.addDnsAddress')"
6    @hidden="resetForm"
7  >
8    <b-form id="form-dns" @submit.prevent="handleSubmit">
9      <b-row>
10        <b-col sm="6">
11          <b-form-group
12            :label="$t('pageNetwork.modal.staticDns')"
13            label-for="staticDns"
14          >
15            <b-form-input
16              id="staticDns"
17              v-model="form.staticDns"
18              type="text"
19              :state="getValidationState(v$.form.staticDns)"
20              @input="v$.form.staticDns.$touch()"
21            />
22            <b-form-invalid-feedback role="alert">
23              <template v-if="v$.form.staticDns.required.$invalid">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="v$.form.staticDns.ipAddress.$invalid">
27                {{ $t('global.form.invalidFormat') }}
28              </template>
29            </b-form-invalid-feedback>
30          </b-form-group>
31        </b-col>
32      </b-row>
33    </b-form>
34    <template #footer="{ cancel }">
35      <b-button variant="secondary" @click="cancel()">
36        {{ $t('global.action.cancel') }}
37      </b-button>
38      <b-button form="form-dns" type="submit" variant="primary" @click="onOk">
39        {{ $t('global.action.add') }}
40      </b-button>
41    </template>
42  </b-modal>
43</template>
44
45<script>
46import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
47import { useVuelidate } from '@vuelidate/core';
48
49import { ipAddress, required } from '@vuelidate/validators';
50import { useI18n } from 'vue-i18n';
51
52export default {
53  mixins: [VuelidateMixin],
54  props: {
55    modelValue: {
56      type: Boolean,
57      default: false,
58    },
59  },
60  emits: ['ok', 'hidden', 'update:modelValue'],
61  setup() {
62    return {
63      v$: useVuelidate(),
64    };
65  },
66  data() {
67    return {
68      $t: useI18n().t,
69      form: {
70        staticDns: null,
71      },
72    };
73  },
74  validations() {
75    return {
76      form: {
77        staticDns: {
78          required,
79          ipAddress,
80        },
81      },
82    };
83  },
84  watch: {
85    modelValue: {
86      handler(newValue) {
87        if (newValue) {
88          this.$nextTick(() => {
89            this.$refs.modal?.show();
90          });
91        }
92      },
93      immediate: true,
94    },
95  },
96  methods: {
97    handleSubmit() {
98      this.v$.$touch();
99      if (this.v$.$invalid) return;
100      this.$emit('ok', [this.form.staticDns]);
101      this.closeModal();
102    },
103    closeModal() {
104      this.$nextTick(() => {
105        this.$refs.modal.hide();
106      });
107    },
108    resetForm() {
109      this.form.staticDns = null;
110      this.v$.$reset();
111      this.$emit('update:modelValue', false);
112      this.$emit('hidden');
113    },
114    onOk(bvModalEvt) {
115      // prevent modal close
116      bvModalEvt.preventDefault();
117      this.handleSubmit();
118    },
119  },
120};
121</script>
122