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.$invalid">
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/validators';
74import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
75import { useVuelidate } from '@vuelidate/core';
76import { useI18n } from 'vue-i18n';
77
78export default {
79  mixins: [VuelidateMixin],
80  props: {
81    connection: {
82      type: Object,
83      default: null,
84      validator: (prop) => {
85        console.log(prop);
86        return true;
87      },
88    },
89  },
90  setup() {
91    return {
92      v$: useVuelidate(),
93    };
94  },
95  data() {
96    return {
97      $t: useI18n().t,
98      form: {
99        serverUri: null,
100        username: null,
101        password: null,
102        isRW: false,
103      },
104    };
105  },
106  watch: {
107    connection: function (value) {
108      if (value === null) return;
109      Object.assign(this.form, value);
110    },
111  },
112  validations() {
113    return {
114      form: {
115        serverUri: {
116          required,
117        },
118      },
119    };
120  },
121  methods: {
122    handleSubmit() {
123      this.v$.$touch();
124      if (this.v$.$invalid) return;
125      let connectionData = {};
126      Object.assign(connectionData, this.form);
127      this.$emit('ok', connectionData);
128      this.closeModal();
129    },
130    initModal() {
131      if (this.connection) {
132        Object.assign(this.form, this.connection);
133      }
134    },
135    closeModal() {
136      this.$nextTick(() => {
137        this.$refs.modal.hide();
138      });
139    },
140    resetForm() {
141      this.form.serverUri = null;
142      this.form.username = null;
143      this.form.password = null;
144      this.form.isRW = false;
145      this.v$.$reset();
146    },
147    onOk(bvModalEvt) {
148      bvModalEvt.preventDefault();
149      this.handleSubmit();
150    },
151  },
152};
153</script>
154