1<template>
2  <b-modal id="add-destination" ref="modal" @ok="onOk" @hidden="resetForm">
3    <template #modal-title>
4      {{ $t('pageSnmpAlerts.modal.addSnmpDestinationTitle') }}
5    </template>
6    <b-form id="form-destination">
7      <b-container>
8        <b-row>
9          <b-col sm="6">
10            <!-- Add new SNMP alert destination type -->
11            <b-form-group
12              :label="$t('pageSnmpAlerts.modal.ipaddress')"
13              label-for="ip-address"
14            >
15              <b-form-input
16                id="ip-Address"
17                v-model="form.ipAddress"
18                :state="getValidationState(v$.form.ipAddress)"
19                data-test-id="snmpAlerts-input-ipAddress"
20                type="text"
21                @blur="v$.form.ipAddress.$touch()"
22              />
23
24              <b-form-invalid-feedback role="alert">
25                <template v-if="v$.form.ipAddress.required.$invalid">
26                  {{ $t('global.form.fieldRequired') }}
27                </template>
28                <template v-if="v$.form.ipAddress.ipAddress.$invalid">
29                  {{ $t('global.form.invalidFormat') }}
30                </template>
31              </b-form-invalid-feedback>
32            </b-form-group>
33          </b-col>
34          <b-col>
35            <b-form-group label-for="port">
36              <template #label>
37                {{ $t('pageSnmpAlerts.modal.port') }} -
38                <span class="form-text d-inline">
39                  {{ $t('global.form.optional') }}
40                </span>
41              </template>
42              <b-form-input
43                id="port"
44                v-model="form.port"
45                type="text"
46                :state="getValidationState(v$.form.port)"
47                data-test-id="snmpAlerts-input-port"
48                @blur="v$.form.port.$touch()"
49              />
50              <b-form-invalid-feedback role="alert">
51                <template
52                  v-if="!v$.form.port.minLength || !v$.form.port.maxLength"
53                >
54                  {{
55                    $t('global.form.valueMustBeBetween', {
56                      min: 0,
57                      max: 65535,
58                    })
59                  }}
60                </template>
61              </b-form-invalid-feedback>
62            </b-form-group>
63          </b-col>
64        </b-row>
65      </b-container>
66    </b-form>
67    <template #modal-footer="{ cancel }">
68      <b-button variant="secondary" @click="cancel()">
69        {{ $t('global.action.cancel') }}
70      </b-button>
71      <b-button
72        form="form-user"
73        type="submit"
74        variant="primary"
75        data-test-id="snmpAlerts-button-ok"
76        @click="onOk"
77      >
78        {{ $t('pageSnmpAlerts.addDestination') }}
79      </b-button>
80    </template>
81  </b-modal>
82</template>
83
84<script>
85import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
86import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
87import { useVuelidate } from '@vuelidate/core';
88import { useI18n } from 'vue-i18n';
89
90export default {
91  mixins: [VuelidateMixin],
92  setup() {
93    return {
94      v$: useVuelidate(),
95    };
96  },
97  data() {
98    return {
99      $t: useI18n().t,
100      form: {
101        ipaddress: null,
102        port: null,
103      },
104    };
105  },
106  validations() {
107    return {
108      form: {
109        ipAddress: {
110          required,
111          ipAddress,
112        },
113        port: {
114          minValue: minValue(0),
115          maxValue: maxValue(65535),
116        },
117      },
118    };
119  },
120  methods: {
121    handleSubmit() {
122      this.v$.$touch();
123      if (this.v$.$invalid) return;
124      this.$emit('ok', {
125        ipAddress: this.form.ipAddress,
126        port: this.form.port,
127      });
128      this.closeModal();
129    },
130    closeModal() {
131      this.$nextTick(() => {
132        this.$refs.modal.hide();
133      });
134    },
135    resetForm() {
136      this.form.ipAddress = '';
137      this.form.port = '';
138      this.v$.$reset();
139      this.$emit('hidden');
140    },
141    onOk(bvModalEvt) {
142      // prevent modal close
143      bvModalEvt.preventDefault();
144      this.handleSubmit();
145    },
146  },
147};
148</script>
149