1<template>
2  <b-modal
3    id="configure-connection"
4    ref="modal"
5    @ok="onOk"
6    @hidden="resetForm"
7    @show="initModal"
8  >
9    <template #modal-title>
10      {{ $t('pageVirtualMedia.modal.title') }}
11    </template>
12    <b-form>
13      <b-form-group
14        :label="$t('pageVirtualMedia.modal.serverUri')"
15        label-for="serverUri"
16      >
17        <b-form-input
18          id="serverUri"
19          v-model="form.serverUri"
20          type="text"
21          :state="getValidationState($v.form.serverUri)"
22          data-test-id="configureConnection-input-serverUri"
23          @input="$v.form.serverUri.$touch()"
24        />
25        <b-form-invalid-feedback role="alert">
26          <template v-if="!$v.form.serverUri.required">
27            {{ $t('global.form.fieldRequired') }}
28          </template>
29        </b-form-invalid-feedback>
30      </b-form-group>
31      <b-form-group
32        :label="$t('pageVirtualMedia.modal.username')"
33        label-for="username"
34      >
35        <b-form-input
36          id="username"
37          v-model="form.username"
38          type="text"
39          data-test-id="configureConnection-input-username"
40        />
41      </b-form-group>
42      <b-form-group
43        :label="$t('pageVirtualMedia.modal.password')"
44        label-for="password"
45      >
46        <b-form-input
47          id="password"
48          v-model="form.password"
49          type="password"
50          data-test-id="configureConnection-input-password"
51        />
52      </b-form-group>
53      <b-form-group>
54        <b-form-checkbox
55          v-model="form.isRW"
56          data-test-id="configureConnection-input-isRW"
57          name="check-button"
58        >
59          RW
60        </b-form-checkbox>
61      </b-form-group>
62    </b-form>
63    <template #modal-ok>
64      {{ $t('global.action.save') }}
65    </template>
66    <template #modal-cancel>
67      {{ $t('global.action.cancel') }}
68    </template>
69  </b-modal>
70</template>
71
72<script>
73import { required } from 'vuelidate/lib/validators';
74import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
75
76export default {
77  mixins: [VuelidateMixin],
78  props: {
79    connection: {
80      type: Object,
81      default: null,
82      validator: (prop) => {
83        console.log(prop);
84        return true;
85      },
86    },
87  },
88  data() {
89    return {
90      form: {
91        serverUri: null,
92        username: null,
93        password: null,
94        isRW: false,
95      },
96    };
97  },
98  watch: {
99    connection: function (value) {
100      if (value === null) return;
101      Object.assign(this.form, value);
102    },
103  },
104  validations() {
105    return {
106      form: {
107        serverUri: {
108          required,
109        },
110      },
111    };
112  },
113  methods: {
114    handleSubmit() {
115      this.$v.$touch();
116      if (this.$v.$invalid) return;
117      let connectionData = {};
118      Object.assign(connectionData, this.form);
119      this.$emit('ok', connectionData);
120      this.closeModal();
121    },
122    initModal() {
123      if (this.connection) {
124        Object.assign(this.form, this.connection);
125      }
126    },
127    closeModal() {
128      this.$nextTick(() => {
129        this.$refs.modal.hide();
130      });
131    },
132    resetForm() {
133      this.form.serverUri = null;
134      this.form.username = null;
135      this.form.password = null;
136      this.form.isRW = false;
137      this.$v.$reset();
138    },
139    onOk(bvModalEvt) {
140      bvModalEvt.preventDefault();
141      this.handleSubmit();
142    },
143  },
144};
145</script>
146