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">
24                {{ $t('global.form.fieldRequired') }}
25              </template>
26              <template v-if="!$v.form.ipAddress.ipAddress">
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">
46                {{ $t('global.form.fieldRequired') }}
47              </template>
48              <template v-if="!$v.form.gateway.ipAddress">
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">
70                {{ $t('global.form.fieldRequired') }}
71              </template>
72              <template v-if="!$v.form.subnetMask.ipAddress">
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 { ipAddress, required } from 'vuelidate/lib/validators';
94
95export default {
96  mixins: [VuelidateMixin],
97  props: {
98    defaultGateway: {
99      type: String,
100      default: '',
101    },
102  },
103  data() {
104    return {
105      form: {
106        ipAddress: '',
107        gateway: '',
108        subnetMask: '',
109      },
110    };
111  },
112  watch: {
113    defaultGateway() {
114      this.form.gateway = this.defaultGateway;
115    },
116  },
117  validations() {
118    return {
119      form: {
120        ipAddress: {
121          required,
122          ipAddress,
123        },
124        gateway: {
125          required,
126          ipAddress,
127        },
128        subnetMask: {
129          required,
130          ipAddress,
131        },
132      },
133    };
134  },
135  methods: {
136    handleSubmit() {
137      this.$v.$touch();
138      if (this.$v.$invalid) return;
139      this.$emit('ok', {
140        Address: this.form.ipAddress,
141        Gateway: this.form.gateway,
142        SubnetMask: this.form.subnetMask,
143      });
144      this.closeModal();
145    },
146    closeModal() {
147      this.$nextTick(() => {
148        this.$refs.modal.hide();
149      });
150    },
151    resetForm() {
152      this.form.ipAddress = null;
153      this.form.gateway = this.defaultGateway;
154      this.form.subnetMask = null;
155      this.$v.$reset();
156      this.$emit('hidden');
157    },
158    onOk(bvModalEvt) {
159      // prevent modal close
160      bvModalEvt.preventDefault();
161      this.handleSubmit();
162    },
163  },
164};
165</script>
166