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