diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-09-03 16:05:21 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-11-23 20:27:01 +0300 |
commit | 978807de2d5a11860b74f1f97dc0d915ee5c9a5e (patch) | |
tree | 4db3c16b4f2afe3cc393df442be8155dae5eed95 /src/views | |
parent | 8da32b5c42ca7f35676a11f257adac83215dd99c (diff) | |
download | webui-vue-978807de2d5a11860b74f1f97dc0d915ee5c9a5e.tar.xz |
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
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue | 24 | ||||
-rw-r--r-- | src/views/Configuration/Firmware/Firmware.vue | 36 | ||||
-rw-r--r-- | src/views/Control/VirtualMedia/VirtualMedia.vue | 29 |
3 files changed, 50 insertions, 39 deletions
diff --git a/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue b/src/views/AccessControl/SslCertificates/ModalUploadCertificate.vue index 50df9a42..8a719775 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 24ef33c8..d78b43ff 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 PageTitle from '@/components/Global/PageTitle'; 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 @@ export default { ModalUpload, PageSection, PageTitle, + FormFile, }, mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], beforeRouteLeave(to, from, next) { @@ -226,6 +227,7 @@ export default { tftpIpAddress: null, tftpFileName: null, timeoutId: null, + isPageDisabled: null, }; }, computed: { @@ -275,6 +277,10 @@ export default { }; }, 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 a15f2cd9..8264c5a2 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 BVToastMixin from '@/components/Mixins/BVToastMixin'; 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 @@ export default { this.modalConfigureConnection = connectionData; this.$bvModal.show('configure-connection'); }, + concatId(val) { + return val.split(' ').join('_').toLowerCase(); + }, }, }; </script> |