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