Skip to content

Commit 97d27a5

Browse files
ynishiynishi
committed
add CsvOption.vue
1 parent 9d76c28 commit 97d27a5

File tree

1 file changed

+313
-0
lines changed

1 file changed

+313
-0
lines changed

‎src/components/CsvOption.vue‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
<template>
2+
<div class="csvoption">
3+
<button @click="showModal">
4+
options
5+
</button>
6+
<b-modal ref="CSVOptionModalRef"
7+
title="CSV Download Options"
8+
@ok="_ok"
9+
@shown="showModal">
10+
<form @submit.stop.prevent="submit">
11+
<div id="quoteForm">
12+
<label>Quote: </label>
13+
<input type="checkbox" id="quotesCheckbox" v-model="_quotes">
14+
<label for="quotesCheckbox">On</label>
15+
<select id="quateCharSelect" v-model="_quoteChar" v-on:change="_onChangeQuoteChar">
16+
<option disabled value="">Please select...</option>
17+
<option v-for="(option,index) in _quoteCharOptionsData"
18+
:value="option.value" :key="index"> {{ option.text }} </option>
19+
</select>
20+
<input v-model="_quoteCharText"
21+
:placeholder="_quoteCharOtherSelected ? 'Type quote...' : 'Other(select other...)' "
22+
:disabled="!_quoteCharOtherSelected">
23+
</div>
24+
<div id="delimiterForm">
25+
<label for="delimiterSelect">Delimiter: </label>
26+
<select id="delimiterSelect" v-model="_delimiter" v-on:change="_onChangeDelimiter">
27+
<option disabled value="">Please select...</option>
28+
<option v-for="(option, index) in _delimiterOptionsData"
29+
:value="option.value" :key="index"> {{ option.text }} </option>
30+
</select>
31+
<input v-model="_delimiterCharText"
32+
:placeholder="_delimiterCharOtherSelected ? 'Type delimiter...' : 'Other(select other...)' "
33+
:disabled="!_delimiterCharOtherSelected">
34+
</div>
35+
<div id="headerForm">
36+
<label>Show header: </label>
37+
<input type="checkbox" id="headerCheckbox" v-model="_header">
38+
<label for="headerCheckbox">On</label>
39+
</div>
40+
<div id="newlineForm">
41+
<label>NewLine: </label>
42+
<div v-for="(value, key) in _newlineData" :key="key">
43+
<input type="radio" :id="key" :value="key" v-model="_newlineId">
44+
<label :for="key">{{ value.text }}</label>
45+
</div>
46+
</div>
47+
<div id="timestampForm">
48+
<label>Add timestamp to filename: </label>
49+
<input type="checkbox" id="timestampCheckbox" v-model="_timestamp">
50+
<label for="timestampCheckbox">On</label>
51+
</div>
52+
<div id="compForm">
53+
<label>Compress: (not available)</label>
54+
<input type="checkbox" id="compressCheckbox" v-model="_comp" disabled>
55+
<label for="compressCheckbox">On(zip)</label>
56+
</div>
57+
</form>
58+
<b-btn variant="secondary" @click="_setDefault">
59+
Reset
60+
</b-btn>
61+
<b-btn variant="secondary" @click="download">
62+
Download
63+
</b-btn>
64+
</b-modal>
65+
</div>
66+
</template>
67+
68+
<script>
69+
import Vue from 'vue'
70+
import BootstrapVue from 'bootstrap-vue'
71+
import 'bootstrap/dist/css/bootstrap.css'
72+
import 'bootstrap-vue/dist/bootstrap-vue.css'
73+
Vue.use(BootstrapVue)
74+
75+
const OTHER = 'other'
76+
const DefaultQuotes = true
77+
const DefaultQuoteChar = '"'
78+
const DefaultCharText = ''
79+
const DefaultOtherSelected = false
80+
const DefaultDelimiter = ','
81+
const DefaultNewlineId = 'nlid1'
82+
const DefaultHeader = true
83+
const DefaultTimestamp = false
84+
const DefaultComp = false
85+
86+
export default {
87+
name: 'CsvOption',
88+
props: {
89+
// private var for form
90+
_quotes: {
91+
type: Boolean,
92+
default: DefaultQuotes
93+
},
94+
_quoteChar: {
95+
type: String,
96+
default: DefaultQuoteChar
97+
},
98+
_quoteCharOptionsData: {
99+
type: Array,
100+
default: () => {
101+
return [
102+
{text: '"(Double Quote)', value: '"'},
103+
{text: "'(Single Quote)", value: "'"},
104+
{text: 'Other...', value: OTHER}
105+
]
106+
}
107+
},
108+
_quoteCharText: {
109+
type: String,
110+
default: DefaultCharText
111+
},
112+
_quoteCharOtherSelected: {
113+
type: Boolean,
114+
default: DefaultOtherSelected
115+
},
116+
_delimiter: {
117+
type: String,
118+
default: DefaultDelimiter
119+
},
120+
_delimiterOptionsData: {
121+
type: Array,
122+
default: () => {
123+
return [
124+
{text: ',(Comma)', value: ','},
125+
{text: 'Tab', value: '\t'},
126+
{text: '|(Pipe)', value: '|'},
127+
{text: ' (single space)', value: ' '},
128+
{text: 'Other...', value: OTHER}
129+
]
130+
}
131+
},
132+
_delimiterCharText: {
133+
type: String,
134+
default: DefaultCharText
135+
},
136+
_delimiterCharOtherSelected: {
137+
type: Boolean,
138+
default: DefaultOtherSelected
139+
},
140+
_newlineData: {
141+
type: Object,
142+
default: () => {
143+
return {
144+
nlid1: {text: 'CRLF(\\r\\n, for Windows)', value: '\r\n'},
145+
nlid2: {text: 'LF(\\n, for MacOSX and UNIX like)', value: '\n'},
146+
nlid3: {text: 'CR(\\r, for MacOS~9)', value: '\r'}
147+
}
148+
}
149+
},
150+
_newlineId: {
151+
type: String,
152+
default: DefaultNewlineId
153+
},
154+
_header: {
155+
type: Boolean,
156+
default: DefaultHeader
157+
},
158+
_timestamp: {
159+
type: Boolean,
160+
default: DefaultTimestamp
161+
},
162+
_comp: {
163+
type: Boolean,
164+
default: DefaultComp
165+
},
166+
quotes: {
167+
type: Boolean,
168+
default: DefaultQuotes
169+
},
170+
quoteChar: {
171+
type: String,
172+
default: DefaultQuoteChar
173+
},
174+
quoteCharOtherSelected: {
175+
type: Boolean,
176+
default: DefaultOtherSelected
177+
},
178+
delimiter: {
179+
type: String,
180+
default: DefaultDelimiter
181+
},
182+
delimiterCharOtherSelected: {
183+
type: Boolean,
184+
default: DefaultOtherSelected
185+
},
186+
header: {
187+
type: Boolean,
188+
default: DefaultHeader
189+
},
190+
newlineId: {
191+
type: String,
192+
default: DefaultNewlineId
193+
},
194+
timestamp: {
195+
type: Boolean,
196+
default: DefaultTimestamp
197+
},
198+
comp: {
199+
type: Boolean,
200+
default: DefaultComp
201+
}
202+
},
203+
methods: {
204+
_onChangeQuoteChar () {
205+
if (this._quoteChar === OTHER) {
206+
this._quoteCharOtherSelected = true
207+
} else {
208+
this._quoteCharOtherSelected = false
209+
}
210+
},
211+
_onChangeDelimiter () {
212+
if (this._delimiter === OTHER) {
213+
this._delimiterCharOtherSelected = true
214+
} else {
215+
this._delimiterCharOtherSelected = false
216+
}
217+
},
218+
_setDefault () {
219+
this._quotes = DefaultQuotes
220+
this._quoteChar = DefaultQuoteChar
221+
this._quoteCharText = DefaultCharText
222+
this._quoteCharOtherSelected = DefaultOtherSelected
223+
this._delimiter = DefaultDelimiter
224+
this._delimiterCharText = DefaultCharText
225+
this._delimiterCharOtherSelected = DefaultOtherSelected
226+
this._header = DefaultHeader
227+
this._newlineId = DefaultNewlineId
228+
this._timestamp = DefaultTimestamp
229+
this._comp = DefaultComp
230+
},
231+
_commit () {
232+
this.quotes = this._quotes
233+
this.quoteCharOtherSelected = this._quoteCharOtherSelected
234+
if (this.quoteCharOtherSelected) {
235+
this.quoteChar = this._quoteCharText
236+
} else {
237+
this.quoteChar = this._quoteChar
238+
}
239+
this.delimiterCharOtherSelected = this._delimiterCharOtherSelected
240+
if (this.delimiterCharOtherSelected) {
241+
this.delimiter = this._delimiterCharText
242+
} else {
243+
this.delimiter = this._delimiter
244+
}
245+
this.header = this._header
246+
this.timestamp = this._timestamp
247+
this.comp = this._comp
248+
this.newlineId = this._newlineId
249+
},
250+
_prepare () {
251+
this._quotes = this.quotes
252+
this._quoteCharOtherSelected = this.quoteCharOtherSelected
253+
if (this._quoteCharOtherSelected) {
254+
this._quoteChar = OTHER
255+
this._quoteCharText = this.quoteChar
256+
} else {
257+
this._quoteChar = this.quoteChar
258+
this._quoteCharText = ''
259+
}
260+
this._delimiterCharOtherSelected = this.delimiterCharOtherSelected
261+
if (this._delimiterCharOtherSelected) {
262+
this._delimiter = OTHER
263+
this._delimiterCharText = this.delimiter
264+
} else {
265+
this._delimiter = this.delimiter
266+
this._delimiterCharText = ''
267+
}
268+
this._header = this.header
269+
this._timestamp = this.timestamp
270+
this._comp = this.comp
271+
this._newlineId = this.newlineId
272+
},
273+
download () {
274+
var options = {
275+
quotes: this._quotes,
276+
quoteChar: this._quoteChar,
277+
delimiter: this._delimiter,
278+
newline: this._newlineData[this._newlineId].value,
279+
header: this._header,
280+
timestamp: this._timestamp,
281+
comp: this._comp
282+
}
283+
this.$emit('downloadByModal', options)
284+
},
285+
showModal () {
286+
this._prepare()
287+
this.$refs.CSVOptionModalRef.show()
288+
},
289+
_ok (evt) {
290+
evt.preventDefault()
291+
this.submit()
292+
},
293+
submit () {
294+
this._commit()
295+
var options = {
296+
quotes: this.quotes,
297+
quoteChar: this.quoteChar,
298+
delimiter: this.delimiter,
299+
newline: this._newlineData[this.newlineId].value,
300+
header: this.header,
301+
timestamp: this.timestamp,
302+
comp: this.comp
303+
}
304+
this.$emit('sendOptions', options)
305+
this.$refs.CSVOptionModalRef.hide()
306+
}
307+
}
308+
}
309+
</script>
310+
311+
<style scoped>
312+
313+
</style>

0 commit comments

Comments
 (0)