fix(UI): file uploader in table filler

This commit is contained in:
Fabio Di Stasio 2021-02-17 14:47:15 +01:00
parent 5b21d17f3a
commit b5a828309f
2 changed files with 20 additions and 8 deletions

View File

@ -72,6 +72,7 @@ export default {
background-color: $bg-color-gray; background-color: $bg-color-gray;
transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s; transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
position: relative; position: relative;
flex: 1 1 auto;
> span { > span {
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;

View File

@ -1,5 +1,5 @@
<template> <template>
<fieldset class="input-group mb-0" :disabled="!fakerGroups.length"> <fieldset class="input-group mb-0">
<select <select
v-model="selectedGroup" v-model="selectedGroup"
class="form-select" class="form-select"
@ -50,13 +50,13 @@
:type="inputProps().type" :type="inputProps().type"
:disabled="!isChecked" :disabled="!isChecked"
> >
<input <BaseUploadInput
v-else-if="inputProps().type === 'file'" v-else-if="inputProps().type === 'file'"
ref="formInput" :value="selectedValue"
class="form-input" :message="$t('word.browse')"
type="file" @clear="clearValue"
:disabled="!isChecked" @change="filesChange($event)"
> />
<input <input
v-else-if="inputProps().type === 'number'" v-else-if="inputProps().type === 'number'"
ref="formInput" ref="formInput"
@ -92,13 +92,15 @@
<script> <script>
import { mask } from 'vue-the-mask'; import { mask } from 'vue-the-mask';
import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes'; import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
import BaseUploadInput from '@/components/BaseUploadInput';
import ForeignKeySelect from '@/components/ForeignKeySelect'; import ForeignKeySelect from '@/components/ForeignKeySelect';
import FakerMethods from 'common/FakerMethods'; import FakerMethods from 'common/FakerMethods';
export default { export default {
name: 'FakerSelect', name: 'FakerSelect',
components: { components: {
ForeignKeySelect ForeignKeySelect,
BaseUploadInput
}, },
directives: { directives: {
mask mask
@ -208,6 +210,15 @@ export default {
getKeyUsage (keyName) { getKeyUsage (keyName) {
return this.keyUsage.find(key => key.field === keyName); return this.keyUsage.find(key => key.field === keyName);
}, },
filesChange (event) {
const { files } = event.target;
if (!files.length) return;
this.selectedValue = files[0].path;
},
clearValue () {
this.selectedValue = '';
},
onChange () { onChange () {
this.$emit('update:value', { this.$emit('update:value', {
group: this.selectedGroup, group: this.selectedGroup,