mirror of
https://github.com/lana-k/sqliteviz.git
synced 2025-12-07 18:48:55 +08:00
CSV import as a table and db connection rework
- Add csv to existing db #32 - [RFE] Simplify working with temporary tables #53
This commit is contained in:
lana-k
130
src/components/CsvImport/DelimiterSelector/ascii.js
Normal file
130
src/components/CsvImport/DelimiterSelector/ascii.js
Normal file
@@ -0,0 +1,130 @@
|
||||
export default {
|
||||
0: { name: 'null character' },
|
||||
1: { name: 'start of header' },
|
||||
2: { name: 'start of text' },
|
||||
3: { name: 'end of text' },
|
||||
4: { name: 'end of transmission' },
|
||||
5: { name: 'enquiry' },
|
||||
6: { name: 'acknowledge' },
|
||||
7: { name: 'bell (ring)' },
|
||||
8: { name: 'backspace' },
|
||||
9: { name: 'horizontal tab' },
|
||||
10: { name: 'line feed' },
|
||||
11: { name: 'vertical tab' },
|
||||
12: { name: 'form feed' },
|
||||
13: { name: 'carriage return' },
|
||||
14: { name: 'shift out' },
|
||||
15: { name: 'shift in' },
|
||||
16: { name: 'data link escape' },
|
||||
17: { name: 'device control 1' },
|
||||
18: { name: 'device control 2' },
|
||||
19: { name: 'device control 3' },
|
||||
20: { name: 'device control 4' },
|
||||
21: { name: 'negative acknowledge' },
|
||||
22: { name: 'synchronize' },
|
||||
23: { name: 'end transmission block' },
|
||||
24: { name: 'cancel' },
|
||||
25: { name: 'end of medium' },
|
||||
26: { name: 'substitute' },
|
||||
27: { name: 'escape' },
|
||||
28: { name: 'file separator' },
|
||||
29: { name: 'group separator' },
|
||||
30: { name: 'record separator' },
|
||||
31: { name: 'unit separator' },
|
||||
32: { name: 'space' },
|
||||
33: { name: 'exclamation mark' },
|
||||
34: { name: 'quotation mark' },
|
||||
35: { name: 'number sign' },
|
||||
36: { name: 'dollar sign' },
|
||||
37: { name: 'percent sign' },
|
||||
38: { name: 'ampersand' },
|
||||
39: { name: 'apostrophe' },
|
||||
40: { name: 'left parenthesis' },
|
||||
41: { name: 'right parenthesis' },
|
||||
42: { name: 'asterisk' },
|
||||
43: { name: 'plus sign' },
|
||||
44: { name: 'comma' },
|
||||
45: { name: 'hyphen' },
|
||||
46: { name: 'period' },
|
||||
47: { name: 'slash' },
|
||||
48: { name: 'digit 0' },
|
||||
49: { name: 'digit 1' },
|
||||
50: { name: 'digit 2' },
|
||||
51: { name: 'digit 3' },
|
||||
52: { name: 'digit 4' },
|
||||
53: { name: 'digit 5' },
|
||||
54: { name: 'digit 6' },
|
||||
55: { name: 'digit 7' },
|
||||
56: { name: 'digit 8' },
|
||||
57: { name: 'digit 9' },
|
||||
58: { name: 'colon' },
|
||||
59: { name: 'semicolon' },
|
||||
60: { name: 'less-than' },
|
||||
61: { name: 'equals-to' },
|
||||
62: { name: 'greater-than' },
|
||||
63: { name: 'question mark' },
|
||||
64: { name: 'at sign' },
|
||||
65: { name: 'uppercase A' },
|
||||
66: { name: 'uppercase B' },
|
||||
67: { name: 'uppercase C' },
|
||||
68: { name: 'uppercase D' },
|
||||
69: { name: 'uppercase E' },
|
||||
70: { name: 'uppercase F' },
|
||||
71: { name: 'uppercase G' },
|
||||
72: { name: 'uppercase H' },
|
||||
73: { name: 'uppercase I' },
|
||||
74: { name: 'uppercase J' },
|
||||
75: { name: 'uppercase K' },
|
||||
76: { name: 'uppercase L' },
|
||||
77: { name: 'uppercase M' },
|
||||
78: { name: 'uppercase N' },
|
||||
79: { name: 'uppercase O' },
|
||||
80: { name: 'uppercase P' },
|
||||
81: { name: 'uppercase Q' },
|
||||
82: { name: 'uppercase R' },
|
||||
83: { name: 'uppercase S' },
|
||||
84: { name: 'uppercase T' },
|
||||
85: { name: 'uppercase U' },
|
||||
86: { name: 'uppercase V' },
|
||||
87: { name: 'uppercase W' },
|
||||
88: { name: 'uppercase X' },
|
||||
89: { name: 'uppercase Y' },
|
||||
90: { name: 'uppercase Z' },
|
||||
91: { name: 'left square bracket' },
|
||||
92: { name: 'backslash' },
|
||||
93: { name: 'right square bracket' },
|
||||
94: { name: 'caret' },
|
||||
95: { name: 'underscore' },
|
||||
96: { name: 'grave accent' },
|
||||
97: { name: 'lowercase a' },
|
||||
98: { name: 'lowercase b' },
|
||||
99: { name: 'lowercase c' },
|
||||
100: { name: 'lowercase d' },
|
||||
101: { name: 'lowercase e' },
|
||||
102: { name: 'lowercase f' },
|
||||
103: { name: 'lowercase g' },
|
||||
104: { name: 'lowercase h' },
|
||||
105: { name: 'lowercase i' },
|
||||
106: { name: 'lowercase j' },
|
||||
107: { name: 'lowercase k' },
|
||||
108: { name: 'lowercase l' },
|
||||
109: { name: 'lowercase m' },
|
||||
110: { name: 'lowercase n' },
|
||||
111: { name: 'lowercase o' },
|
||||
112: { name: 'lowercase p' },
|
||||
113: { name: 'lowercase q' },
|
||||
114: { name: 'lowercase r' },
|
||||
115: { name: 'lowercase s' },
|
||||
116: { name: 'lowercase t' },
|
||||
117: { name: 'lowercase u' },
|
||||
118: { name: 'lowercase v' },
|
||||
119: { name: 'lowercase w' },
|
||||
120: { name: 'lowercase x' },
|
||||
121: { name: 'lowercase y' },
|
||||
122: { name: 'lowercase z' },
|
||||
123: { name: 'left curly brace' },
|
||||
124: { name: 'vertical bar' },
|
||||
125: { name: 'right curly brace' },
|
||||
126: { name: 'tilde' },
|
||||
127: { name: 'delete (rubout)' }
|
||||
}
|
||||
204
src/components/CsvImport/DelimiterSelector/index.vue
Normal file
204
src/components/CsvImport/DelimiterSelector/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div :class="{ 'disabled': disabled }">
|
||||
<div class="text-field-label">Delimiter</div>
|
||||
<div
|
||||
class="delimiter-selector-container"
|
||||
:style="{ width: width }"
|
||||
@click="onContainerClick"
|
||||
>
|
||||
<div class="value">
|
||||
<input
|
||||
:class="{ 'filled': filled }"
|
||||
ref="delimiterInput"
|
||||
type="text"
|
||||
maxlength="1"
|
||||
v-model="inputValue"
|
||||
@click.stop
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<div class="name">{{ getSymbolName(value) }}</div>
|
||||
</div>
|
||||
<div class="controls" @click.stop>
|
||||
<clear-icon @click.native="clear" :disabled="disabled"/>
|
||||
<drop-down-chevron
|
||||
:disabled="disabled"
|
||||
@click.native="!disabled && (showOptions = !showOptions)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showOptions" class="options" :style="{ width: width }">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
@click="chooseOption(option)"
|
||||
class="option"
|
||||
>
|
||||
<pre>{{option}}</pre><div>{{ getSymbolName(option) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ascii from './ascii'
|
||||
import DropDownChevron from '@/components/svg/dropDownChevron'
|
||||
import ClearIcon from '@/components/svg/clear'
|
||||
|
||||
export default {
|
||||
name: 'DelimiterSelector',
|
||||
props: ['value', 'width', 'disabled'],
|
||||
components: { DropDownChevron, ClearIcon },
|
||||
data () {
|
||||
return {
|
||||
showOptions: false,
|
||||
options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
|
||||
filled: false,
|
||||
inputValue: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
inputValue () {
|
||||
if (this.inputValue) {
|
||||
this.filled = true
|
||||
if (this.inputValue !== this.value) {
|
||||
this.$emit('input', this.inputValue)
|
||||
}
|
||||
} else {
|
||||
this.filled = false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.inputValue = this.value
|
||||
},
|
||||
methods: {
|
||||
getSymbolName (str) {
|
||||
if (!str) {
|
||||
return ''
|
||||
}
|
||||
return ascii[str.charCodeAt(0).toString()].name
|
||||
},
|
||||
chooseOption (option) {
|
||||
this.inputValue = option
|
||||
this.showOptions = false
|
||||
},
|
||||
onContainerClick (event) {
|
||||
this.$refs.delimiterInput.focus()
|
||||
},
|
||||
|
||||
clear () {
|
||||
if (!this.disabled) {
|
||||
this.inputValue = ''
|
||||
this.$refs.delimiterInput.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delimiter-selector-container {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-medium-2);
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.value .name {
|
||||
color: var(--color-text-light-2);
|
||||
cursor: default;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.options {
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-border);
|
||||
border-width: 0 1px 1px 1px;
|
||||
color: var(--color-text-base);
|
||||
border-radius: var(--border-radius-medium-2);
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background-color: var(--color-bg-light);
|
||||
color: var(--color-text-active);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option pre {
|
||||
background-color: var(--color-bg-warning);
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
tab-size: 1;
|
||||
font-family: monospace;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
background: var(--color-white);
|
||||
border: none;
|
||||
color: var(--color-text-base);
|
||||
height: 20px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input.filled {
|
||||
background: var(--color-bg-warning);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background: var(--color-bg-light);
|
||||
color: var(--color-text-light-2);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.text-field-label {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-base);
|
||||
padding-left: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.disabled .text-field-label {
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.disabled .delimiter-selector-container {
|
||||
background: var(--color-bg-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user