xref: /openbmc/webui-vue/src/views/Settings/SnmpAlerts/ModalAddDestination.vue (revision 20983592cffa5213a37f30724b101a61a7caa550) 
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">
26                  {{ $t('global.form.fieldRequired') }}
27                </template>
28                <template v-if="!$v.form.ipAddress.ipAddress">
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 {
86  required,
87  ipAddress,
88  minValue,
89  maxValue,
90} from 'vuelidate/lib/validators';
91import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
92
93export default {
94  mixins: [VuelidateMixin],
95  data() {
96    return {
97      form: {
98        ipaddress: null,
99        port: null,
100      },
101    };
102  },
103  validations() {
104    return {
105      form: {
106        ipAddress: {
107          required,
108          ipAddress,
109        },
110        port: {
111          minValue: minValue(0),
112          maxValue: maxValue(65535),
113        },
114      },
115    };
116  },
117  methods: {
118    handleSubmit() {
119      this.$v.$touch();
120      if (this.$v.$invalid) return;
121      this.$emit('ok', {
122        ipAddress: this.form.ipAddress,
123        port: this.form.port,
124      });
125      this.closeModal();
126    },
127    closeModal() {
128      this.$nextTick(() => {
129        this.$refs.modal.hide();
130      });
131    },
132    resetForm() {
133      this.form.ipAddress = '';
134      this.form.port = '';
135      this.$v.$reset();
136      this.$emit('hidden');
137    },
138    onOk(bvModalEvt) {
139      // prevent modal close
140      bvModalEvt.preventDefault();
141      this.handleSubmit();
142    },
143  },
144};
145</script>
146