56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import axios from 'axios'
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import InputText from 'primevue/inputtext'
|
|
import Button from 'primevue/button'
|
|
import Card from 'primevue/card'
|
|
import Dropdown from 'primevue/dropdown'
|
|
|
|
const router = useRouter()
|
|
const table_name = ref('Default Table Name')
|
|
const table_link = ref('default_table_link')
|
|
const version = ref(12)
|
|
|
|
const availableVersion = ref([11, 12])
|
|
|
|
function saveTable() {
|
|
axios
|
|
.post('/api/tables', {
|
|
table_name: table_name.value,
|
|
table_link: table_link.value,
|
|
version: version.value,
|
|
})
|
|
.then(() => router.push({ name: 'home' }))
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import 'primeicons/primeicons.css';
|
|
|
|
.detailCard {
|
|
margin: 25px;
|
|
}
|
|
|
|
.button-box {
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<Card class="detailCard flex">
|
|
<template #title> New Table Details </template>
|
|
<template #content>
|
|
<div class="flex flex-column">
|
|
<InputText class="button-box" type="text" placeholder="Table Name" v-model="table_name" />
|
|
<InputText class="button-box" type="text" placeholder="Table Link" v-model="table_link" />
|
|
<Dropdown class="button-box" v-model="version" :options="availableVersion"></Dropdown>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<Button class="button-box" label="Save" @click="saveTable()" />
|
|
<Button class="button-box" label="Clear" />
|
|
</template>
|
|
</Card>
|
|
</template>
|