Initial commit
This commit is contained in:
182
src/App.vue
Normal file
182
src/App.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Data Flow Tables</h1>
|
||||
<FileUpload v-if="currentStep === 'upload'" @file-processed="handleFileProcessed" />
|
||||
<DataTable
|
||||
v-if="currentStep === 'preview'"
|
||||
:jsonData="tableData"
|
||||
@reset="resetData"
|
||||
@configure="currentStep = 'metadata'"
|
||||
/>
|
||||
<MetaData
|
||||
v-if="currentStep === 'metadata'"
|
||||
:jsonData="tableData"
|
||||
@back="currentStep = 'preview'"
|
||||
@sql-generated="handleSQLGenerated"
|
||||
/>
|
||||
<div v-if="currentStep === 'sql'" class="sql-preview">
|
||||
<Navigation
|
||||
@back="currentStep = 'metadata'"
|
||||
:show-next="false"
|
||||
/>
|
||||
<pre>{{ sqlStatements }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileUpload from './components/FileUpload.vue'
|
||||
import DataTable from './components/DataTable.vue'
|
||||
import MetaData from './components/MetaData.vue'
|
||||
import Navigation from './components/Navigation.vue'
|
||||
import { apiClient } from './services/ApiClient'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
FileUpload,
|
||||
DataTable,
|
||||
MetaData,
|
||||
Navigation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentStep: 'upload',
|
||||
tableData: null,
|
||||
sqlStatements: null,
|
||||
tableName: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFileProcessed(data) {
|
||||
this.tableData = data
|
||||
this.currentStep = 'preview'
|
||||
},
|
||||
async handleSQLGenerated(data) {
|
||||
try {
|
||||
this.sqlStatements = data.sql
|
||||
this.tableName = data.tableName
|
||||
this.currentStep = 'sql'
|
||||
|
||||
await apiClient.createTable(data.sql.createTable)
|
||||
|
||||
// Next steps would be:
|
||||
// 1. Generate tab-delimited data
|
||||
// 2. Upload to temp file
|
||||
// 3. Import records
|
||||
// 4. Verify record count
|
||||
// 5. Create data load record
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating table:', error)
|
||||
// Handle error - show message to user
|
||||
}
|
||||
},
|
||||
resetData() {
|
||||
this.tableData = null
|
||||
this.sqlStatements = null
|
||||
this.currentStep = 'upload'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--background-color: #f8fafc;
|
||||
--border-color: #e2e8f0;
|
||||
--text-color: #1e293b;
|
||||
--n-th-color: var(--primary-color) !important;
|
||||
--n-th-text-color: white !important;
|
||||
--n-th-font-weight: 500 !important;
|
||||
--n-th-button-color-hover: white !important;
|
||||
--n-th-icon-color: white !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--text-color);
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.n-data-table .n-data-table-th {
|
||||
background-color: var(--primary-color) !important;
|
||||
color: white !important;
|
||||
border-right: none !important;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
.n-data-table .n-data-table-td {
|
||||
border-right: none !important;
|
||||
padding: 12px 16px !important;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
.n-data-table .n-data-table-th:last-child,
|
||||
.n-data-table .n-data-table-td:last-child {
|
||||
border-right: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
.n-data-table .n-data-table-th:first-child,
|
||||
.n-data-table .n-data-table-td:first-child {
|
||||
border-left: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
.n-data-table .n-data-table-sorter {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.n-data-table-th svg {
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.sql-preview {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.sql-preview pre {
|
||||
background: #f8fafc;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
159
src/components/DataTable.vue
Normal file
159
src/components/DataTable.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="table-section">
|
||||
<Navigation
|
||||
@back="$emit('reset')"
|
||||
@next="$emit('configure')"
|
||||
/>
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="{
|
||||
page: currentPage,
|
||||
pageSize: pageSize,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
showSizePicker: true,
|
||||
showQuickJumper: true,
|
||||
itemCount: data.length,
|
||||
onUpdatePage: handlePageChange,
|
||||
onUpdatePageSize: handlePageSizeChange
|
||||
}"
|
||||
:bordered="true"
|
||||
:striped="true"
|
||||
:scroll-x="scrollX"
|
||||
style="max-width: 100%"
|
||||
:single-line="false"
|
||||
:bottom-bordered="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h } from 'vue'
|
||||
import Navigation from './Navigation.vue'
|
||||
|
||||
export default {
|
||||
name: 'DataTable',
|
||||
components: {
|
||||
Navigation
|
||||
},
|
||||
props: {
|
||||
jsonData: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['reset', 'configure'],
|
||||
data() {
|
||||
return {
|
||||
columns: [],
|
||||
data: [],
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
scrollX: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
jsonData: {
|
||||
immediate: true,
|
||||
handler(newData) {
|
||||
if (newData && newData.length > 0) {
|
||||
this.processData(newData)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
processData(jsonData) {
|
||||
const headers = jsonData[0]
|
||||
|
||||
// Calculate max width for each column
|
||||
const columnWidths = headers.map((header, columnIndex) => {
|
||||
let maxLength = header.toString().length
|
||||
jsonData.slice(1).forEach(row => {
|
||||
const cellContent = row[columnIndex]
|
||||
if (cellContent) {
|
||||
const contentLength = cellContent.toString().length
|
||||
maxLength = Math.max(maxLength, contentLength)
|
||||
}
|
||||
})
|
||||
return Math.min(Math.max(maxLength * 10, 80), 300)
|
||||
})
|
||||
|
||||
// Create columns
|
||||
this.columns = headers.map((header, index) => ({
|
||||
title: () => h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
color: 'white',
|
||||
fontWeight: '500'
|
||||
}
|
||||
},
|
||||
header
|
||||
),
|
||||
key: header,
|
||||
sortable: true,
|
||||
width: columnWidths[index],
|
||||
ellipsis: {
|
||||
tooltip: true
|
||||
}
|
||||
}))
|
||||
|
||||
// Process data
|
||||
this.data = jsonData.slice(1).map(row => {
|
||||
const rowData = {}
|
||||
headers.forEach((header, index) => {
|
||||
rowData[header] = row[index] || ''
|
||||
})
|
||||
return rowData
|
||||
})
|
||||
|
||||
// Calculate total width
|
||||
this.$nextTick(() => {
|
||||
const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0)
|
||||
this.scrollX = Math.max(totalWidth + 100, 1200)
|
||||
})
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page
|
||||
},
|
||||
handlePageSizeChange(pageSize) {
|
||||
this.pageSize = pageSize
|
||||
this.currentPage = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
</style>
|
||||
168
src/components/FileUpload.vue
Normal file
168
src/components/FileUpload.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<div class="upload-box"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleDrop"
|
||||
@click="triggerFileInput">
|
||||
<div class="upload-content">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
<h3>Drop your Excel or CSV file here</h3>
|
||||
<p>or click to browse</p>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
ref="fileInput"
|
||||
@change="handleFileSelect"
|
||||
accept=".csv,.xlsx,.xls"
|
||||
style="display: none"
|
||||
>
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as XLSX from 'xlsx'
|
||||
|
||||
export default {
|
||||
name: 'FileUpload',
|
||||
emits: ['file-processed'],
|
||||
data() {
|
||||
return {
|
||||
error: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
triggerFileInput() {
|
||||
this.error = null
|
||||
this.$refs.fileInput.value = ''
|
||||
this.$refs.fileInput.click()
|
||||
},
|
||||
handleDrop(e) {
|
||||
this.error = null
|
||||
this.$refs.fileInput.value = ''
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (file) {
|
||||
this.processFile(file)
|
||||
}
|
||||
},
|
||||
handleFileSelect(e) {
|
||||
this.error = null
|
||||
const file = e.target.files[0]
|
||||
if (file) {
|
||||
this.processFile(file)
|
||||
} else {
|
||||
this.$refs.fileInput.value = ''
|
||||
}
|
||||
},
|
||||
processFile(file) {
|
||||
const validTypes = [
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-excel',
|
||||
'text/csv'
|
||||
]
|
||||
|
||||
if (!validTypes.includes(file.type)) {
|
||||
this.error = 'Please upload a valid Excel or CSV file.'
|
||||
this.$refs.fileInput.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = new Uint8Array(e.target.result)
|
||||
const workbook = XLSX.read(data, { type: 'array' })
|
||||
|
||||
const firstSheetName = workbook.SheetNames[0]
|
||||
const worksheet = workbook.Sheets[firstSheetName]
|
||||
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
|
||||
|
||||
if (jsonData.length > 0) {
|
||||
const headers = jsonData[0]
|
||||
|
||||
const hasBlankHeaders = headers.some(header =>
|
||||
!header || header.toString().trim() === ''
|
||||
)
|
||||
|
||||
if (hasBlankHeaders) {
|
||||
this.error = 'Invalid file format: The first row contains blank columns. Please ensure all headers are filled.'
|
||||
return
|
||||
}
|
||||
|
||||
const uniqueHeaders = new Set(headers)
|
||||
if (uniqueHeaders.size !== headers.length) {
|
||||
this.error = 'Invalid file format: The file contains duplicate column headers. Please ensure all headers are unique.'
|
||||
return
|
||||
}
|
||||
|
||||
this.$emit('file-processed', jsonData)
|
||||
} else {
|
||||
this.error = 'The file appears to be empty. Please upload a file with data.'
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Error processing file. Please ensure it is a valid Excel or CSV file.'
|
||||
console.error('File processing error:', err)
|
||||
}
|
||||
}
|
||||
|
||||
reader.onerror = () => {
|
||||
this.error = 'Error reading file. Please try again.'
|
||||
}
|
||||
|
||||
reader.readAsArrayBuffer(file)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-container {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.upload-box:hover {
|
||||
border-color: var(--primary-color);
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.upload-content svg {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
398
src/components/MetaData.vue
Normal file
398
src/components/MetaData.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<div class="metadata-section">
|
||||
<Navigation
|
||||
@back="$emit('back')"
|
||||
@next="confirmMetadata"
|
||||
/>
|
||||
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="metadataColumns"
|
||||
:data="metadata"
|
||||
:bordered="true"
|
||||
:single-line="false"
|
||||
:pagination="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h, ref } from 'vue'
|
||||
import { NSelect, NInputNumber, NButton } from 'naive-ui'
|
||||
import Navigation from './Navigation.vue'
|
||||
import { apiClient } from '../services/ApiClient'
|
||||
import {
|
||||
generateSQLAttribute,
|
||||
generateSQLDefault,
|
||||
sanitizeColumnName,
|
||||
getExcelColumn
|
||||
} from '../utils/sqlUtils'
|
||||
|
||||
export default {
|
||||
name: 'MetaData',
|
||||
components: {
|
||||
Navigation
|
||||
},
|
||||
props: {
|
||||
jsonData: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['back', 'sql-generated'],
|
||||
data() {
|
||||
return {
|
||||
metadata: [],
|
||||
metadataColumns: [
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Excel'),
|
||||
key: 'excelCol',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Column Name'),
|
||||
key: 'colName',
|
||||
editor: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Description'),
|
||||
key: 'colDesc',
|
||||
editor: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Type'),
|
||||
key: 'colType',
|
||||
width: 120,
|
||||
render: (row) => h(NSelect, {
|
||||
value: row.colType,
|
||||
options: [
|
||||
{ label: 'String', value: 'String' },
|
||||
{ label: 'Number', value: 'Number' },
|
||||
{ label: 'Date', value: 'Date' }
|
||||
],
|
||||
onUpdateValue: (value) => {
|
||||
// When switching from Number to String, add 1 for decimal point
|
||||
let newLength = row.colLength
|
||||
if (row.colType === 'Number' && value === 'String' && row.colScale > 0) {
|
||||
newLength = row.colLength + 1
|
||||
}
|
||||
|
||||
if (value !== 'Number') {
|
||||
row.colScale = 0
|
||||
}
|
||||
if (value === 'Date') {
|
||||
newLength = 10
|
||||
}
|
||||
|
||||
this.updateRowSQL(row, value, newLength, row.colScale)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Length'),
|
||||
key: 'colLength',
|
||||
width: 100,
|
||||
render: (row) => h(NInputNumber, {
|
||||
value: row.colLength,
|
||||
min: 1,
|
||||
max: 999,
|
||||
onUpdateValue: (value) => {
|
||||
this.updateRowSQL(row, row.colType, value, row.colScale)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Scale'),
|
||||
key: 'colScale',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
return row.colType === 'Number' ? h(NInputNumber, {
|
||||
value: row.colScale,
|
||||
min: 0,
|
||||
max: row.colLength - 1,
|
||||
onUpdateValue: (value) => {
|
||||
this.updateRowSQL(row, row.colType, row.colLength, value)
|
||||
}
|
||||
}) : null
|
||||
}
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'SQL Attribute'),
|
||||
key: 'colSQLAttr',
|
||||
width: 250
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.processMetadata()
|
||||
},
|
||||
methods: {
|
||||
isNumericColumn(columnIndex) {
|
||||
const numTest = /^-?(\d{1,3}(,\d{3})*|\d+)(.\d+)?$/
|
||||
let isNumeric = true
|
||||
|
||||
for (let i = 1; i < this.jsonData.length; i++) {
|
||||
const cellValue = String(this.jsonData[i][columnIndex] || '')
|
||||
|
||||
if (!cellValue.trim()) continue
|
||||
|
||||
const cleanValue = cellValue.replace(/,/g, '')
|
||||
|
||||
if (!(numTest.test(cellValue) || !isNaN(cleanValue))) {
|
||||
isNumeric = false
|
||||
break
|
||||
}
|
||||
|
||||
const num = parseFloat(cleanValue)
|
||||
if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
|
||||
isNumeric = false
|
||||
break
|
||||
}
|
||||
}
|
||||
return isNumeric
|
||||
},
|
||||
isDateFormatColumn(columnIndex) {
|
||||
const dateTest = new RegExp(/^\d{1,2}\/\d{1,2}\/(\d{4}|\d{2})$|^\d{4}-\d{1,2}-\d{1,2}$/)
|
||||
let isDate = true
|
||||
|
||||
for (let i = 1; i < this.jsonData.length; i++) {
|
||||
const cellValue = this.jsonData[i][columnIndex]
|
||||
if (cellValue instanceof Date) continue
|
||||
if (cellValue && !dateTest.test(String(cellValue))) {
|
||||
isDate = false
|
||||
break
|
||||
}
|
||||
}
|
||||
return isDate
|
||||
},
|
||||
getMaxColumnLength(columnIndex) {
|
||||
let length = 1
|
||||
let scale = 0
|
||||
|
||||
for (let i = 1; i < this.jsonData.length; i++) {
|
||||
const rawValue = this.jsonData[i][columnIndex]
|
||||
const cellValue = String(rawValue || '').replace(/,/g, '')
|
||||
|
||||
if (cellValue && cellValue.length > length) {
|
||||
length = cellValue.length
|
||||
if (typeof rawValue === 'number' || !isNaN(cellValue)) {
|
||||
if (cellValue.includes('.') && cellValue.split('.')[1].length > scale) {
|
||||
scale = cellValue.split('.')[1].length
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return { length, scale }
|
||||
},
|
||||
updateRowSQL(row, newType, newLength, newScale) {
|
||||
const updatedRow = { ...row }
|
||||
updatedRow.colType = newType
|
||||
|
||||
// When switching from Number to String, just add 1 for decimal point
|
||||
if (row.colType === 'Number' && newType === 'String' && row.colScale > 0) {
|
||||
newLength = newLength + 1 // Add space just for decimal point
|
||||
}
|
||||
|
||||
updatedRow.colLength = newLength
|
||||
updatedRow.colScale = newScale
|
||||
updatedRow.colSQLAttr = generateSQLAttribute(newType, newLength, newScale)
|
||||
updatedRow.colSQLDefault = generateSQLDefault(newType)
|
||||
|
||||
const index = this.metadata.indexOf(row)
|
||||
if (index !== -1) {
|
||||
this.metadata[index] = updatedRow
|
||||
this.metadata = [...this.metadata]
|
||||
}
|
||||
},
|
||||
processMetadata() {
|
||||
if (!this.jsonData.length) return
|
||||
|
||||
const headers = this.jsonData[0]
|
||||
this.metadata = headers.map((header, index) => {
|
||||
const columnType = this.determineColumnType(index)
|
||||
const { length, scale } = this.getMaxColumnLength(index)
|
||||
|
||||
return {
|
||||
excelCol: getExcelColumn(index),
|
||||
colNum: index + 1,
|
||||
colName: sanitizeColumnName(header),
|
||||
colDesc: header.substring(0, 50),
|
||||
colType: columnType,
|
||||
colLength: length,
|
||||
colScale: scale,
|
||||
colSQLAttr: this.generateSQLAttribute(columnType, length, scale),
|
||||
colSQLDefault: this.generateSQLDefault(columnType)
|
||||
}
|
||||
})
|
||||
},
|
||||
determineColumnType(columnIndex) {
|
||||
if (this.isNumericColumn(columnIndex)) return 'Number'
|
||||
if (this.isDateFormatColumn(columnIndex)) return 'Date'
|
||||
return 'String'
|
||||
},
|
||||
generateSQLAttribute(type, length, scale) {
|
||||
switch (type) {
|
||||
case 'Number':
|
||||
return `Num(${length}, ${scale})`
|
||||
case 'Date':
|
||||
return 'Date'
|
||||
default:
|
||||
return `Varchar(${length})`
|
||||
}
|
||||
},
|
||||
generateSQLDefault(type) {
|
||||
switch (type) {
|
||||
case 'Number':
|
||||
return 'Not Null Default 0'
|
||||
case 'Date':
|
||||
return `Not Null Default '1980-01-01'`
|
||||
default:
|
||||
return `CCSID 37 Not Null Default ' '`
|
||||
}
|
||||
},
|
||||
async generateCreateTableSQL() {
|
||||
try {
|
||||
const token = await apiClient.getToken()
|
||||
const tableName = `QUERYFILES.${token}`
|
||||
|
||||
const columnDefinitions = this.metadata.map(col =>
|
||||
`${col.colName} ${col.colSQLAttr} ${col.colSQLDefault}`
|
||||
).join(',\n ')
|
||||
|
||||
const statements = [
|
||||
`Begin`,
|
||||
` Create Or Replace Table ${tableName} (`,
|
||||
` ${columnDefinitions}`,
|
||||
` );`,
|
||||
` Label On Table ${tableName} Is 'Generated From Excel Upload';`,
|
||||
` Label On Column ${tableName} (`,
|
||||
` ${this.metadata.map(col => `${col.colName} Is '${col.colDesc}'`).join(',\n ')}`,
|
||||
` );`,
|
||||
` Label On Column ${tableName} (`,
|
||||
` ${this.metadata.map(col => `${col.colName} Text Is '${col.colDesc}'`).join(',\n ')}`,
|
||||
` );`,
|
||||
`End`
|
||||
]
|
||||
|
||||
return {
|
||||
tableName,
|
||||
createTable: statements.join('\n')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error generating SQL:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
async confirmMetadata() {
|
||||
try {
|
||||
const sqlStatements = await this.generateCreateTableSQL()
|
||||
|
||||
this.$emit('sql-generated', {
|
||||
metadata: this.metadata,
|
||||
sql: sqlStatements,
|
||||
tableName: sqlStatements.tableName
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error confirming metadata:', error)
|
||||
// You might want to show an error message to the user here
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.metadata-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-width: 120px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
background-color: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
:deep(.n-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-data-table .n-data-table-td) {
|
||||
padding: 8px 12px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(.n-data-table .n-data-table-th) {
|
||||
padding: 8px 12px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(.n-base-selection) {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
:deep(.n-input-number-input) {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
:deep(.n-input-number), :deep(.n-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-select .n-base-selection__input) {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
:deep(.n-select .n-base-selection__placeholder) {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
82
src/components/Navigation.vue
Normal file
82
src/components/Navigation.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="nav-controls">
|
||||
<div class="nav-buttons">
|
||||
<button
|
||||
v-if="showBack"
|
||||
@click="$emit('back')"
|
||||
class="nav-btn"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
v-if="showNext"
|
||||
@click="$emit('next')"
|
||||
class="nav-btn primary"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navigation',
|
||||
props: {
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showNext: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['back', 'next']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-controls {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-width: 100px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
background-color: white;
|
||||
color: var(--text-color);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-btn:first-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background-color: #f8fafc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
</style>
|
||||
12
src/env.d.ts
vendored
Normal file
12
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_APP_API_URL: string
|
||||
readonly VITE_APP_API_ENDPOINT_FETCH: string
|
||||
readonly VITE_APP_API_ENDPOINT_FILE_UTILS: string
|
||||
readonly VITE_APP_API_ENV: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
7
src/main.js
Normal file
7
src/main.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import naive from 'naive-ui'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(naive)
|
||||
app.mount('#app')
|
||||
63
src/services/ApiClient.ts
Normal file
63
src/services/ApiClient.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
class ApiClient {
|
||||
private static instance: ApiClient;
|
||||
private baseUrl: string;
|
||||
private apiEndpoints: {
|
||||
FETCH: string;
|
||||
FILE_UTILS: string;
|
||||
};
|
||||
private isDev: boolean;
|
||||
|
||||
private constructor() {
|
||||
// Force to uppercase for comparison
|
||||
this.isDev = import.meta.env.VITE_APP_API_ENV?.toUpperCase() === 'DEV';
|
||||
console.log('API Client Mode:', this.isDev ? 'Development' : 'Production');
|
||||
this.baseUrl = import.meta.env.VITE_APP_API_URL;
|
||||
this.apiEndpoints = {
|
||||
FETCH: import.meta.env.VITE_APP_API_ENDPOINT_FETCH,
|
||||
FILE_UTILS: import.meta.env.VITE_APP_API_ENDPOINT_FILE_UTILS
|
||||
};
|
||||
}
|
||||
|
||||
public static getInstance(): ApiClient {
|
||||
if (!ApiClient.instance) {
|
||||
ApiClient.instance = new ApiClient();
|
||||
}
|
||||
return ApiClient.instance;
|
||||
}
|
||||
|
||||
private async executeSQL<T>(sql: string): Promise<T> {
|
||||
if (this.isDev) {
|
||||
return {} as T; // Return empty success in dev mode
|
||||
}
|
||||
|
||||
const response = await fetch(`${this.baseUrl}${this.apiEndpoints.FETCH}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ sql })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
public async getToken(): Promise<string> {
|
||||
if (this.isDev) {
|
||||
return `DEV_TABLE_${Date.now().toString().slice(-6)}`;
|
||||
}
|
||||
const result = await this.executeSQL<any>(`Values getMCLTken('RMZ')`);
|
||||
return result[0]['00001'];
|
||||
}
|
||||
|
||||
public async createTable(sql: string): Promise<void> {
|
||||
if (!this.isDev) {
|
||||
await this.executeSQL(sql);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const apiClient = ApiClient.getInstance();
|
||||
37
src/utils/sqlUtils.ts
Normal file
37
src/utils/sqlUtils.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
export const generateSQLAttribute = (type: string, length: number, scale: number): string => {
|
||||
switch (type) {
|
||||
case 'Number':
|
||||
return `Num(${length}, ${scale})`;
|
||||
case 'Date':
|
||||
return 'Date';
|
||||
default:
|
||||
// For string type, if converting from number, account for decimal point and scale
|
||||
const adjustedLength = scale > 0 ? length + scale + 1 : length;
|
||||
return `Varchar(${adjustedLength})`;
|
||||
}
|
||||
};
|
||||
|
||||
export const generateSQLDefault = (type: string): string => {
|
||||
switch (type) {
|
||||
case 'Number':
|
||||
return 'Not Null Default 0';
|
||||
case 'Date':
|
||||
return `Not Null Default '1980-01-01'`;
|
||||
default:
|
||||
return `CCSID 37 Not Null Default ' '`;
|
||||
}
|
||||
};
|
||||
|
||||
export const sanitizeColumnName = (name: string): string => {
|
||||
return name.replace(/[^a-zA-Z0-9_]/g, '_').toUpperCase();
|
||||
};
|
||||
|
||||
export const getExcelColumn = (index: number): string => {
|
||||
let column = '';
|
||||
let num = index;
|
||||
while (num >= 0) {
|
||||
column = String.fromCharCode(65 + (num % 26)) + column;
|
||||
num = Math.floor(num / 26) - 1;
|
||||
}
|
||||
return column;
|
||||
};
|
||||
Reference in New Issue
Block a user