1<template>
2  <b-modal
3    id="modal-add-ipv4"
4    ref="modal"
5    :title="$t('pageNetwork.table.addIpv4Address')"
6    @hidden="resetForm"
7  >
8    <b-form id="form-ipv4" @submit.prevent="handleSubmit">
9      <b-row>
10        <b-col sm="6">
11          <b-form-group
12            :label="$t('pageNetwork.modal.ipAddress')"
13            label-for="ipAddress"
14          >
15            <b-form-input
16              id="ipAddress"
17              v-model="form.ipAddress"
18              type="text"
19              :state="getValidationState(v$.form.ipAddress)"
20              @input="v$.form.ipAddress.$touch()"
21            />
22            <b-form-invalid-feedback role="alert">
23              <template v-if="v$.form.ipAddress.required.$invalid">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="v$.form.ipAddress.ipAddress.$invalid">
27                {{ $t('global.form.invalidFormat') }}
28              </template>
29            </b-form-invalid-feedback>
30          </b-form-group>
31        </b-col>
32        <b-col sm="6">
33          <b-form-group
34            :label="$t('pageNetwork.modal.gateway')"
35            label-for="gateway"
36          >
37            <b-form-input
38              id="gateway"
39              v-model="form.gateway"
40              type="text"
41              :state="getValidationState(v$.form.gateway)"
42              @input="v$.form.gateway.$touch()"
43            />
44            <b-form-invalid-feedback role="alert">
45              <template v-if="v$.form.gateway.required.$invalid">
46                {{ $t('global.form.fieldRequired') }}
47              </template>
48              <template v-if="v$.form.gateway.ipAddress.$invalid">
49                {{ $t('global.form.invalidFormat') }}
50              </template>
51            </b-form-invalid-feedback>
52          </b-form-group>
53        </b-col>
54      </b-row>
55      <b-row>
56        <b-col sm="6">
57          <b-form-group
58            :label="$t('pageNetwork.modal.subnetMask')"
59            label-for="subnetMask"
60          >
61            <b-form-input
62              id="subnetMask"
63              v-model="form.subnetMask"
64              type="text"
65              :state="getValidationState(v$.form.subnetMask)"
66              @input="v$.form.subnetMask.$touch()"
67            />
68            <b-form-invalid-feedback role="alert">
69              <template v-if="v$.form.subnetMask.required.$invalid">
70                {{ $t('global.form.fieldRequired') }}
71              </template>
72              <template v-if="v$.form.subnetMask.ipAddress.$invalid">
73                {{ $t('global.form.invalidFormat') }}
74              </template>
75            </b-form-invalid-feedback>
76          </b-form-group>
77        </b-col>
78      </b-row>
79    </b-form>
80    <template #modal-footer="{ cancel }">
81      <b-button variant="secondary" @click="cancel()">
82        {{ $t('global.action.cancel') }}
83      </b-button>
84      <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk">
85        {{ $t('global.action.add') }}
86      </b-button>
87    </template>
88  </b-modal>
89</template>
90
91<script>
92import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
93import { useVuelidate } from '@vuelidate/core';
94
95import { ipAddress, required } from '@vuelidate/validators';
96import { useI18n } from 'vue-i18n';
97
98export default {
99  mixins: [VuelidateMixin],
100  props: {
101    defaultGateway: {
102      type: String,
103      default: '',
104    },
105  },
106  setup() {
107    return {
108      v$: useVuelidate(),
109    };
110  },
111  data() {
112    return {
113      $t: useI18n().t,
114      form: {
115        ipAddress: '',
116        gateway: '',
117        subnetMask: '',
118      },
119    };
120  },
121  watch: {
122    defaultGateway() {
123      this.form.gateway = this.defaultGateway;
124    },
125  },
126  validations() {
127    return {
128      form: {
129        ipAddress: {
130          required,
131          ipAddress,
132        },
133        gateway: {
134          required,
135          ipAddress,
136        },
137        subnetMask: {
138          required,
139          ipAddress,
140        },
141      },
142    };
143  },
144  methods: {
145    handleSubmit() {
146      this.v$.$touch();
147      if (this.v$.$invalid) return;
148      this.$emit('ok', {
149        Address: this.form.ipAddress,
150        Gateway: this.form.gateway,
151        SubnetMask: this.form.subnetMask,
152      });
153      this.closeModal();
154    },
155    closeModal() {
156      this.$nextTick(() => {
157        this.$refs.modal.hide();
158      });
159    },
160    resetForm() {
161      this.form.ipAddress = null;
162      this.form.gateway = this.defaultGateway;
163      this.form.subnetMask = null;
164      this.v$.$reset();
165      this.$emit('hidden');
166    },
167    onOk(bvModalEvt) {
168      // prevent modal close
169      bvModalEvt.preventDefault();
170      this.handleSubmit();
171    },
172  },
173};
174</script>
175