diff --git a/fda-ui/components/EMPTY.vue b/fda-ui/components/EMPTY.vue new file mode 100644 index 0000000000000000000000000000000000000000..f8f6dddfc291e3671035a2fc44814cc67537477b --- /dev/null +++ b/fda-ui/components/EMPTY.vue @@ -0,0 +1,23 @@ +<template> + <div> + EMPTY + </div> +</template> + +<script> +export default { + data () { + return { + } + }, + computed: { + }, + mounted () { + }, + methods: { + } +} +</script> + +<style scoped> +</style> diff --git a/fda-ui/components/TableList.vue b/fda-ui/components/TableList.vue index 748234ed0323edf4f8d7039ba26b1825c11d9673..57d51597e2ce56541505a6e863f6625118e0feab 100644 --- a/fda-ui/components/TableList.vue +++ b/fda-ui/components/TableList.vue @@ -79,6 +79,7 @@ <thead> <th>Column Name</th> <th>Type</th> + <th>Unit</th> <th>Primary Key</th> <th>Unique</th> <th>NULL Allowed</th> @@ -91,6 +92,9 @@ <td> {{ col.columnType }} </td> + <td> + <DialogsColumnUnit :column="col" /> + </td> <td> <v-simple-checkbox v-model="col.isPrimaryKey" disabled aria-readonly="true" /> </td> diff --git a/fda-ui/components/dialogs/ColumnUnit.vue b/fda-ui/components/dialogs/ColumnUnit.vue new file mode 100644 index 0000000000000000000000000000000000000000..1a626d1178f18d21de9f642c0227adb0e04cecf8 --- /dev/null +++ b/fda-ui/components/dialogs/ColumnUnit.vue @@ -0,0 +1,103 @@ +<template> + <v-dialog + v-model="dialog" + max-width="600px"> + <template v-slot:activator="{ on, attrs }"> + <v-btn + small + v-bind="attrs" + v-on="on"> + Unit + </v-btn> + </template> + <v-card> + <v-card-title> + <span class="text-h5">Column Unit</span> + </v-card-title> + <v-card-text> + <div> + <i> + Autocomplete not working yet + </i> + </div> + <v-autocomplete + hide-details + dense + clearable /> + </v-card-text> + <v-card-actions> + <v-spacer /> + <v-btn + color="blue darken-1" + text + @click="dialog = false"> + Close + </v-btn> + <v-btn + color="blue darken-1" + text + @click="dialog = false"> + Save + </v-btn> + </v-card-actions> + </v-card> + </v-dialog> +</template> + +<script> +export default { + props: { + column: { type: Object, default: () => ({}) } + }, + data () { + return { + dialog: false, + isLoading: false, + model: null, + search: null, + entries: [] + } + }, + computed: { + items () { + return this.entries.map((entry) => { + const Description = entry.Description.length > this.descriptionLimit + ? entry.Description.slice(0, this.descriptionLimit) + '...' + : entry.Description + + return Object.assign({}, entry, { Description }) + }) + } + }, + + watch: { + search (val) { + // Items have already been loaded + if (this.items.length > 0) { return } + + // Items have already been requested + if (this.isLoading) { return } + + this.isLoading = true + + // Lazily load input items + this.$axios.get('/api/units/suggest') + .then((res) => { + debugger + this.entries = res + }) + .catch((err) => { + console.log(err) + }) + .finally(() => (this.isLoading = false)) + } + }, + mounted () { + }, + methods: { + } +} +</script> + +<style scoped> +</style> diff --git a/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue b/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue index 61e85c1892d53d4645b34700ae984b52def66191..decd4c5410bb1b4112a376e12321bed0ddc44e82 100644 --- a/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue +++ b/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue @@ -2,7 +2,7 @@ <div> <v-card> <v-row dense> - <v-col cols="6"> + <v-col cols=""> <v-card-title v-if="table.name"> {{ table.name }} </v-card-title> @@ -10,9 +10,9 @@ {{ table.description }} </v-card-subtitle> </v-col> - <v-col class="text-right" cols="6"> + <v-col class="text-right pr-4" cols="4"> <v-row dense> - <v-col> + <v-col cols="7"> <v-menu ref="dateMenu" v-model="dateMenu"