xref: /openbmc/webui-vue/src/views/Settings/Network/ModalDns.vue (revision 4626aec43da32b56b7c1e87e5dc831398e39416c)
1b34349d4SDixsie Wolmers<template>
2b34349d4SDixsie Wolmers  <b-modal
3b34349d4SDixsie Wolmers    id="modal-dns"
4b34349d4SDixsie Wolmers    ref="modal"
5b34349d4SDixsie Wolmers    :title="$t('pageNetwork.table.addDnsAddress')"
6b34349d4SDixsie Wolmers    @hidden="resetForm"
7b34349d4SDixsie Wolmers  >
8b34349d4SDixsie Wolmers    <b-form id="form-dns" @submit.prevent="handleSubmit">
9b34349d4SDixsie Wolmers      <b-row>
10b34349d4SDixsie Wolmers        <b-col sm="6">
11b34349d4SDixsie Wolmers          <b-form-group
12b34349d4SDixsie Wolmers            :label="$t('pageNetwork.modal.staticDns')"
13b34349d4SDixsie Wolmers            label-for="staticDns"
14b34349d4SDixsie Wolmers          >
15b34349d4SDixsie Wolmers            <b-form-input
16b34349d4SDixsie Wolmers              id="staticDns"
17b34349d4SDixsie Wolmers              v-model="form.staticDns"
18b34349d4SDixsie Wolmers              type="text"
19de23ea23SSurya V              :state="getValidationState(v$.form.staticDns)"
20de23ea23SSurya V              @input="v$.form.staticDns.$touch()"
21b34349d4SDixsie Wolmers            />
22b34349d4SDixsie Wolmers            <b-form-invalid-feedback role="alert">
23*4626aec4SSurya Venkatesan              <template v-if="v$.form.staticDns.required.$invalid">
24b34349d4SDixsie Wolmers                {{ $t('global.form.fieldRequired') }}
25b34349d4SDixsie Wolmers              </template>
26*4626aec4SSurya Venkatesan              <template v-if="v$.form.staticDns.ipAddress.$invalid">
27b34349d4SDixsie Wolmers                {{ $t('global.form.invalidFormat') }}
28b34349d4SDixsie Wolmers              </template>
29b34349d4SDixsie Wolmers            </b-form-invalid-feedback>
30b34349d4SDixsie Wolmers          </b-form-group>
31b34349d4SDixsie Wolmers        </b-col>
32b34349d4SDixsie Wolmers      </b-row>
33b34349d4SDixsie Wolmers    </b-form>
34b34349d4SDixsie Wolmers    <template #modal-footer="{ cancel }">
35b34349d4SDixsie Wolmers      <b-button variant="secondary" @click="cancel()">
36b34349d4SDixsie Wolmers        {{ $t('global.action.cancel') }}
37b34349d4SDixsie Wolmers      </b-button>
38b34349d4SDixsie Wolmers      <b-button form="form-dns" type="submit" variant="primary" @click="onOk">
39b34349d4SDixsie Wolmers        {{ $t('global.action.add') }}
40b34349d4SDixsie Wolmers      </b-button>
41b34349d4SDixsie Wolmers    </template>
42b34349d4SDixsie Wolmers  </b-modal>
43b34349d4SDixsie Wolmers</template>
44b34349d4SDixsie Wolmers
45b34349d4SDixsie Wolmers<script>
46b34349d4SDixsie Wolmersimport VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
477d6b44cbSEd Tanousimport { useVuelidate } from '@vuelidate/core';
487d6b44cbSEd Tanous
497d6b44cbSEd Tanousimport { ipAddress, required } from '@vuelidate/validators';
50de23ea23SSurya Vimport { useI18n } from 'vue-i18n';
51b34349d4SDixsie Wolmers
52b34349d4SDixsie Wolmersexport default {
53b34349d4SDixsie Wolmers  mixins: [VuelidateMixin],
547d6b44cbSEd Tanous  setup() {
557d6b44cbSEd Tanous    return {
567d6b44cbSEd Tanous      v$: useVuelidate(),
577d6b44cbSEd Tanous    };
587d6b44cbSEd Tanous  },
59b34349d4SDixsie Wolmers  data() {
60b34349d4SDixsie Wolmers    return {
61de23ea23SSurya V      $t: useI18n().t,
62b34349d4SDixsie Wolmers      form: {
63b34349d4SDixsie Wolmers        staticDns: null,
64b34349d4SDixsie Wolmers      },
65b34349d4SDixsie Wolmers    };
66b34349d4SDixsie Wolmers  },
67b34349d4SDixsie Wolmers  validations() {
68b34349d4SDixsie Wolmers    return {
69b34349d4SDixsie Wolmers      form: {
70b34349d4SDixsie Wolmers        staticDns: {
71b34349d4SDixsie Wolmers          required,
72b34349d4SDixsie Wolmers          ipAddress,
73b34349d4SDixsie Wolmers        },
74b34349d4SDixsie Wolmers      },
75b34349d4SDixsie Wolmers    };
76b34349d4SDixsie Wolmers  },
77b34349d4SDixsie Wolmers  methods: {
78b34349d4SDixsie Wolmers    handleSubmit() {
79de23ea23SSurya V      this.v$.$touch();
80de23ea23SSurya V      if (this.v$.$invalid) return;
81b34349d4SDixsie Wolmers      this.$emit('ok', [this.form.staticDns]);
82b34349d4SDixsie Wolmers      this.closeModal();
83b34349d4SDixsie Wolmers    },
84b34349d4SDixsie Wolmers    closeModal() {
85b34349d4SDixsie Wolmers      this.$nextTick(() => {
86b34349d4SDixsie Wolmers        this.$refs.modal.hide();
87b34349d4SDixsie Wolmers      });
88b34349d4SDixsie Wolmers    },
89b34349d4SDixsie Wolmers    resetForm() {
90b34349d4SDixsie Wolmers      this.form.staticDns = null;
91de23ea23SSurya V      this.v$.$reset();
92b34349d4SDixsie Wolmers      this.$emit('hidden');
93b34349d4SDixsie Wolmers    },
94b34349d4SDixsie Wolmers    onOk(bvModalEvt) {
95b34349d4SDixsie Wolmers      // prevent modal close
96b34349d4SDixsie Wolmers      bvModalEvt.preventDefault();
97b34349d4SDixsie Wolmers      this.handleSubmit();
98b34349d4SDixsie Wolmers    },
99b34349d4SDixsie Wolmers  },
100b34349d4SDixsie Wolmers};
101b34349d4SDixsie Wolmers</script>
102