Add new style for form file component
- Now only add file button will be visible.
- And selected file name will come down to the button.
- Changed form file component from custom type to plain.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ib59135691495c4dddfdbbae0e4228b55cdfda2a8
diff --git a/src/views/Control/VirtualMedia/VirtualMedia.vue b/src/views/Control/VirtualMedia/VirtualMedia.vue
index a15f2cd..8264c5a 100644
--- a/src/views/Control/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Control/VirtualMedia/VirtualMedia.vue
@@ -8,17 +8,20 @@
>
<b-row>
<b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
- <b-form-group
- :label="dev.id"
- :label-for="dev.id"
- label-class="bold"
- >
- <b-form-file
- v-show="!dev.isActive"
- :id="dev.id"
+ <b-form-group :label="dev.id" label-class="bold">
+ <form-file
+ v-if="!dev.isActive"
+ :id="concatId(dev.id)"
v-model="dev.file"
- />
- <p v-if="dev.isActive">{{ dev.file.name }}</p>
+ >
+ <template #invalid>
+ <b-form-invalid-feedback role="alert">
+ <template>
+ {{ $t('global.form.required') }}
+ </template>
+ </b-form-invalid-feedback>
+ </template>
+ </form-file>
</b-form-group>
<b-button
v-if="!dev.isActive"
@@ -102,10 +105,11 @@
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import ModalConfigureConnection from './ModalConfigureConnection';
import NbdServer from '@/utilities/NBDServer';
+import FormFile from '@/components/Global/FormFile';
export default {
name: 'VirtualMedia',
- components: { PageTitle, PageSection, ModalConfigureConnection },
+ components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
mixins: [BVToastMixin, LoadingBarMixin],
data() {
return {
@@ -211,6 +215,9 @@
this.modalConfigureConnection = connectionData;
this.$bvModal.show('configure-connection');
},
+ concatId(val) {
+ return val.split(' ').join('_').toLowerCase();
+ },
},
};
</script>