3
3
<h4 class =" text-base font-bold" >Combine multiple columns</h4 >
4
4
5
5
<p >
6
- Select any number of fields from your import file to be combined. Fields are
7
- simply concatenated. Use the <code >separator</code > field to define how they
8
- should be concatenated. If you don't choose a separator, the fields will be
9
- imported as an array.
6
+ Select any number of fields from your import file to be combined. Fields are simply concatenated. Use the
7
+ <code >separator</code > field to define how they should be concatenated. If you don't choose a separator,
8
+ the fields will be imported as an array.
10
9
</p >
11
10
12
11
<SelectControl @change =" (value) => rawSeparator = value" :selected =" separatorOption" >
28
27
<template #item =" { element , index } " >
29
28
<div class =" flex mb-2 space-x-2 items-start border-rounded bg-gray-100 p-2 handle" >
30
29
<div >{{ index + 1 }}</div >
31
- <SelectControl @change =" (value) => columns[index] = value" :selected =" columns[index]" >
30
+
31
+ <SelectControl @change =" (value) => changeField(index, value)" :selected =" columns[index].name" >
32
32
<option value =" " >- Select field -</option >
33
- <option v-for =" heading in headings" :value =" heading" >{{ heading }}</option >
33
+
34
+ <optgroup label =" Imported column" >
35
+ <option v-for =" heading in headings" :value =" heading" >{{ heading }}</option >
36
+ </optgroup >
37
+
38
+ <optgroup label =" Meta data" >
39
+ <option value =" meta.file" >File name (with suffix): {{ meta.file }}</option >
40
+ <option value =" meta.file_name" >File name (without suffix): {{ meta.file_name }}</option >
41
+ <option value =" meta.original_file" >Original file name (with suffix): {{ meta.original_file }}</option >
42
+ <option value =" meta.original_file_name" >Original file name (without suffix): {{ meta.original_file_name }}</option >
43
+ </optgroup >
44
+
45
+ <optgroup label =" Custom - same value for each row" >
46
+ <option value =" custom" >Custom value</option >
47
+ </optgroup >
34
48
</SelectControl >
49
+
50
+ <label class =" flex items-center space-x-2" v-if =" columns[index].name === 'custom'" >
51
+ <span >Value</span >
52
+ <input v-model =" columns[index].value"
53
+ class =" form-control form-input form-input-bordered flex-1" >
54
+ </label >
55
+
56
+ <label v-if =" ! rawSeparator" >
57
+ as
58
+ <input v-model =" columns[index].as"
59
+ class =" form-control form-input form-input-bordered mx-2" >
60
+ </label >
61
+
35
62
<button @click =" remove(index)" >× ; </button >
36
63
</div >
37
64
</template >
@@ -56,6 +83,7 @@ export default {
56
83
' attribute' ,
57
84
' config' ,
58
85
' headings' ,
86
+ ' meta' ,
59
87
],
60
88
61
89
data () {
@@ -106,20 +134,42 @@ export default {
106
134
107
135
methods: {
108
136
add () {
109
- this .columns .push (' ' );
137
+ if (Array .isArray (this .columns )) {
138
+ this .columns .push (this .template ());
139
+ return ;
140
+ }
141
+
142
+ this .columns = [this .template ()];
110
143
},
111
144
112
145
remove (index ) {
113
146
this .columns .splice (index, 1 );
114
147
},
115
148
149
+ template () {
150
+ return {
151
+ name: ' ' ,
152
+ as: null ,
153
+ value: null ,
154
+ };
155
+ },
156
+
116
157
update () {
117
158
console .log (` Updating combinators for ${ this .attribute } ` , this .columns , this .rawSeparator );
118
159
119
160
this .$emit (' update' , this .attribute , {
120
161
columns: this .columns ,
121
162
separator: this .rawSeparator ,
122
163
});
164
+ },
165
+
166
+ changeField (index , value ) {
167
+ this .columns [index].name = value;
168
+
169
+ // Reset 'value' when needed
170
+ if (value !== ' custom' ) {
171
+ this .columns [index].value = ' ' ;
172
+ }
123
173
}
124
174
}
125
175
}
0 commit comments