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/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
index 50df9a4..8a71977 100644
--- a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
+++ b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue
@@ -39,24 +39,19 @@
</b-form-group>
</template>
- <b-form-group
- :label="$t('pageSslCertificates.modal.certificateFile')"
- label-for="certificate-file"
- >
- <b-form-file
+ <b-form-group :label="$t('pageSslCertificates.modal.certificateFile')">
+ <form-file
id="certificate-file"
v-model="form.file"
accept=".pem"
- :browse-text="$t('global.fileUpload.browseText')"
- :drop-placeholder="$t('global.fileUpload.dropPlaceholder')"
- :placeholder="$t('global.fileUpload.placeholder')"
:state="getValidationState($v.form.file)"
- />
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.file.required">
- {{ $t('global.form.required') }}
+ >
+ <template #invalid>
+ <b-form-invalid-feedback role="alert">
+ {{ $t('global.form.required') }}
+ </b-form-invalid-feedback>
</template>
- </b-form-invalid-feedback>
+ </form-file>
</b-form-group>
</b-form>
<template #modal-ok>
@@ -74,7 +69,10 @@
import { required, requiredIf } from 'vuelidate/lib/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import FormFile from '@/components/Global/FormFile';
+
export default {
+ components: { FormFile },
mixins: [VuelidateMixin],
props: {
certificate: {
diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 24ef33c..d78b43f 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -99,27 +99,26 @@
<!-- Workstation Upload -->
<template v-if="isWorkstationSelected">
- <b-form-group
- :label="$t('pageFirmware.form.imageFile')"
- label-for="image-file"
- >
+ <b-form-group :label="$t('pageFirmware.form.imageFile')">
<b-form-text id="image-file-help-block">
{{ $t('pageFirmware.form.onlyTarFilesAccepted') }}
</b-form-text>
- <b-form-file
+ <form-file
id="image-file"
- v-model="file"
accept=".tar"
- aria-describedby="image-file-help-block"
- :browse-text="$t('global.fileUpload.browseText')"
- :drop-placeholder="$t('global.fileUpload.dropPlaceholder')"
- :placeholder="$t('global.fileUpload.placeholder')"
+ :disabled="isPageDisabled"
:state="getValidationState($v.file)"
- @input="$v.file.$touch()"
- />
- <b-form-invalid-feedback role="alert">
- {{ $t('global.form.required') }}
- </b-form-invalid-feedback>
+ aria-describedby="image-file-help-block"
+ @input="onFileUpload($event)"
+ >
+ <template #invalid>
+ <b-form-invalid-feedback role="alert">
+ <template>
+ {{ $t('global.form.required') }}
+ </template>
+ </b-form-invalid-feedback>
+ </template>
+ </form-file>
</b-form-group>
</template>
@@ -198,6 +197,7 @@
import Alert from '@/components/Global/Alert';
import ModalUpload from './FirmwareModalUpload';
import ModalRebootBackupBmc from './FirmwareModalRebootBackupBmc';
+import FormFile from '@/components/Global/FormFile';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
@@ -212,6 +212,7 @@
ModalUpload,
PageSection,
PageTitle,
+ FormFile,
},
mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
beforeRouteLeave(to, from, next) {
@@ -226,6 +227,7 @@
tftpIpAddress: null,
tftpFileName: null,
timeoutId: null,
+ isPageDisabled: null,
};
},
computed: {
@@ -275,6 +277,10 @@
};
},
methods: {
+ onFileUpload(file) {
+ this.file = file;
+ this.$v.file.$touch();
+ },
uploadFirmware() {
const startTime = this.$options.filters.formatTime(new Date());
this.setRebootTimeout(360000); //6 minute timeout
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>