Select Git revision
submit_job_venv.sh
SetupView.vue 7.18 KiB
<script setup lang="ts">
import {useAPI} from '@/services/api'
import {useMainStore} from "@/services/mainStore"
import {reactive, ref} from "vue"
import {useConstantsStore} from "@/services/constantsStore";
import {PresetEntry, usePresetStore} from "@/services/presetStore";
import {storeToRefs} from "pinia";
import {rules} from "@/services/utils";
const api = useAPI()
const constants = useConstantsStore()
const store = useMainStore()
const presetStore = usePresetStore()
const {presets} = storeToRefs(presetStore)
const step = ref(1)
const loading = ref(false)
const dbUploadForm = reactive({file: null, is_valid: false})
const dbConnForm = reactive({url: '', is_valid: false})
async function startSessionAction() {
loading.value = true
Promise.all([constants.ensureInit(), store.startSession().then((success) => {
if (success)
step.value = 2
})]).finally(() => loading.value = false)
}
async function uploadAction() {
loading.value = true
await api.uploadDB(dbUploadForm.file).then(res => {
if (res) {
console.log('File uploaded:', res)
step.value = 3
}
}).finally(() => loading.value = false)
}
async function connectAction() {
loading.value = true
await api.connectDB(dbConnForm.url).then(res => {
if (res) {
console.log('Connected to DB:', res)
step.value = 3
}
}).finally(() => loading.value = false)
}
async function reflectAction() {
loading.value = true
try {
await api.reflectDB()
const selectedPresetEntry = presetToLoad.value
if (!!selectedPresetEntry) {
const validations = await presetStore.recreatePreset(selectedPresetEntry.preset)
}
await store.retrieveAndStoreDBInfo()
await store.retrieveAndStoreVirtualDBInfo()
} finally {
loading.value = false
}
}
async function resetAction() {
await store.stopSession().then(() => step.value = 1)
}
function urlSelected(event) {
dbConnForm.url = event.id.db_url
}
const steps = [
{title: 'Establish Working Session', value: 1, key: 1},
{title: 'Connect to Database', value: 2, key: 2},
{title: 'Reflect Database Schema', value: 3, key: 3}
]
const presetToLoad = ref<PresetEntry>(null)
function presetClicked(item) {
if (item.key === presetToLoad.value?.key) presetToLoad.value = null
else presetToLoad.value = item
}
async function fileDroppedIn(files) {
if (files?.length > 0) {
const f = files[0]
const uploadedPreset = JSON.parse(f)
if (!!uploadedPreset) {
await presetStore.addPreset(uploadedPreset)
//presetToLoad.value = uploadedPreset
}
}
}
</script>
<template>
<v-app-bar>
<v-app-bar-title>Connection Setup</v-app-bar-title>
</v-app-bar>
<v-stepper v-model="step" :items="steps">
<template v-slot:item.1>
<v-sheet class="mx-auto text-center" min-width="200" min-height="100">
<v-btn @click="startSessionAction" :loading="loading">Start</v-btn>
</v-sheet>
</template>
<template v-slot:item.2>
<v-container class="mx-auto" fluid>
<v-row justify-content="space-between">
<v-col cols="3">
<v-card min-width="20%" min-height="200">
<v-card-title>Shortlist</v-card-title>
<v-card-text>
<v-list :items="presets" @click:select="urlSelected" rounded return-object>
<template v-slot:prepend>
<v-icon>mdi-database</v-icon>
</template>
</v-list>
</v-card-text>
</v-card>
</v-col>
<v-col cols="6">
<v-card min-width="30%" min-height="200">
<v-card-title>Database Connection</v-card-title>
<v-card-text>
<v-form ref="url-form" v-model="dbConnForm.is_valid" lazy-validation @submit.prevent="connectAction">
<v-text-field
v-model="dbConnForm.url"
label="Database Connection URL"
required
variant="solo"
:readonly="loading"
:rules="[rules.required, rules.url]"
prepend-icon="mdi-link"
></v-text-field>
<v-btn :disabled="!dbConnForm.is_valid" color="primary" type="submit" :loading="loading">
Connect
</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-col>
<v-col cols="3">
<v-card min-width="30%" min-height="200">
<v-card-title>Upload SQLite File</v-card-title>
<v-card-text>
<v-form ref="file-form" v-model="dbUploadForm.is_valid" lazy-validation
@submit.prevent="uploadAction">
<v-file-input
v-model="dbUploadForm.file"
label="Drop your SQLite file here or click to upload"
accept=".sqlite, .sqlite3, .db"
show-size
outlined
required
variant="solo"
:readonly="loading"
:rules="[rules.required]"
prepend-icon="mdi-database"
></v-file-input>
<v-btn :disabled="!dbUploadForm.is_valid" color="primary" type="submit" :loading="loading">
Upload
</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<template v-slot:item.3>
<v-sheet class="mx-auto text-center" min-width="200" min-height="100">
<v-container>
<v-row justify="center">
<v-col cols="6">
<v-expansion-panels rounded :model-value="0">
<v-expansion-panel title="(Optional) Select Preset to Apply">
<template v-slot:text>
<v-list>
<template v-for="item in presets" :key="item.key">
<v-list-item v-bind="item.props" :value="item.key" @click.stop="v => presetClicked(item)"
:active="!!presetToLoad?.key && item.key === presetToLoad.key" color="indigo"
return-object></v-list-item>
</template>
</v-list>
<v-file-input variant="solo" outlined hint="Drop a preset definition file here"
@update:model-value="fileDroppedIn"
label="Upload preset definition"></v-file-input>
</template>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn class="ma-2 pa-2" @click="reflectAction" :loading="loading">
Reflect
</v-btn>
</v-col>
</v-row>
</v-container>
</v-sheet>
</template>
<template v-slot:actions>
<v-card-actions class="ma-2 pa-2">
<v-spacer></v-spacer>
<v-btn color="cancel" @click="resetAction">Reset</v-btn>
</v-card-actions>
</template>
</v-stepper>
</template>
<style scoped>
</style>