Files
foundry-manager/src/CreateTable.vue

74 lines
1.9 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 Select from 'primevue/select'
import FloatLabel from 'primevue/floatlabel';
const router = useRouter()
const table_name = ref()
const table_link = ref()
const version = ref()
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' }))
}
function clear() {
table_name.value = null
table_link.value = null
version.value = null
}
</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">
<FloatLabel variant="on">
<InputText id="table_name" class="button-box w-full" type="text" v-model="table_name" />
<label for="table_name">Table Name</label>
</FloatLabel>
<FloatLabel variant="on">
<InputText id="table_link" class="button-box w-full" type="text" v-model="table_link" />
<label for="table_link">Table Link</label>
</FloatLabel>
<FloatLabel variant="on">
<Select id="table_version" class="button-box w-full" v-model="version" :options="availableVersion"></Select>
<label for="table_version">Foundry Version</label>
</FloatLabel>
</div>
</template>
<template #footer>
<Button class="button-box" label="Save" @click="saveTable()" />
<Button class="button-box" label="Clear" @click="clear()" />
</template>
</Card>
</template>