Add basic support for defining columns when generating new table feature
This commit is contained in:
Lance Edgar
parent
ca602ff845
commit
850b6f71dd
|
|
@ -47,6 +47,7 @@
|
|||
${h.hidden('feature_type', value='new-table')}
|
||||
${h.hidden('app_prefix', **{'v-model': 'app.app_prefix'})}
|
||||
${h.hidden('app_cap_prefix', **{'v-model': 'app.app_cap_prefix'})}
|
||||
${h.hidden('columns', **{':value': 'JSON.stringify(new_table.columns)'})}
|
||||
|
||||
<br />
|
||||
<div class="card">
|
||||
|
|
@ -93,6 +94,118 @@
|
|||
</b-checkbox>
|
||||
</b-field>
|
||||
|
||||
<b-field horizontal label="Columns">
|
||||
<div class="control">
|
||||
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="fas fa-plus"
|
||||
@click="addColumn()">
|
||||
New Column
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<b-button type="is-danger"
|
||||
icon-pack="fas"
|
||||
icon-left="fas fa-trash"
|
||||
@click="new_table.columns = []"
|
||||
:disabled="!new_table.columns.length">
|
||||
Delete All
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-table
|
||||
:data="new_table.columns">
|
||||
<template slot-scope="props">
|
||||
|
||||
<b-table-column field="name" label="Name">
|
||||
{{ props.row.name }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="data_type" label="Data Type">
|
||||
{{ props.row.data_type }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="nullable" label="Nullable">
|
||||
{{ props.row.nullable }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="description" label="Description">
|
||||
{{ props.row.description }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column field="actions" label="Actions">
|
||||
<a href="#" class="grid-action"
|
||||
@click.prevent="editColumnRow(props.row)">
|
||||
<i class="fas fa-edit"></i>
|
||||
Edit
|
||||
</a>
|
||||
|
||||
|
||||
<a href="#" class="grid-action has-text-danger"
|
||||
@click.prevent="deleteColumn(props.index)">
|
||||
<i class="fas fa-trash"></i>
|
||||
Delete
|
||||
</a>
|
||||
|
||||
</b-table-column>
|
||||
|
||||
</template>
|
||||
</b-table>
|
||||
|
||||
<b-modal has-modal-card
|
||||
:active.sync="showingEditColumn">
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Edit Column</p>
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
|
||||
<b-field label="Name">
|
||||
<b-input v-model="editingColumnName"></b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Data Type">
|
||||
<b-input v-model="editingColumnDataType"></b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Nullable">
|
||||
<b-checkbox v-model="editingColumnNullable"
|
||||
native-value="true">
|
||||
{{ editingColumnNullable }}
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Description">
|
||||
<b-input v-model="editingColumnDescription"></b-input>
|
||||
</b-field>
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showingEditColumn = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
@click="saveColumn()">
|
||||
Save
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
</div>
|
||||
</b-field>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -207,8 +320,53 @@
|
|||
this.new_table.description = `Represents a ${'$'}{this.new_table.model_title}.`
|
||||
}
|
||||
|
||||
ThisPageData.showingEditColumn = false
|
||||
ThisPageData.editingColumn = null
|
||||
ThisPageData.editingColumnName = null
|
||||
ThisPageData.editingColumnDataType = null
|
||||
ThisPageData.editingColumnNullable = null
|
||||
ThisPageData.editingColumnDescription = null
|
||||
|
||||
ThisPage.methods.addColumn = function(column) {
|
||||
this.editingColumn = null
|
||||
this.editingColumnName = null
|
||||
this.editingColumnDataType = null
|
||||
this.editingColumnNullable = true
|
||||
this.editingColumnDescription = null
|
||||
this.showingEditColumn = true
|
||||
}
|
||||
|
||||
ThisPage.methods.editColumnRow = function(column) {
|
||||
this.editingColumn = column
|
||||
this.editingColumnName = column.name
|
||||
this.editingColumnDataType = column.data_type
|
||||
this.editingColumnNullable = column.nullable
|
||||
this.editingColumnDescription = column.description
|
||||
this.showingEditColumn = true
|
||||
}
|
||||
|
||||
ThisPage.methods.saveColumn = function() {
|
||||
if (this.editingColumn) {
|
||||
column = this.editingColumn
|
||||
} else {
|
||||
column = {}
|
||||
this.new_table.columns.push(column)
|
||||
}
|
||||
column.name = this.editingColumnName
|
||||
column.data_type = this.editingColumnDataType
|
||||
column.nullable = this.editingColumnNullable
|
||||
column.description = this.editingColumnDescription
|
||||
this.showingEditColumn = false
|
||||
}
|
||||
|
||||
ThisPage.methods.deleteColumn = function(index) {
|
||||
this.new_table.columns.splice(index, 1)
|
||||
}
|
||||
|
||||
ThisPage.methods.submitFeatureForm = function() {
|
||||
let form = this.$refs[this.featureType + '-form']
|
||||
// TODO: why do we have to set this? hidden field value is blank?!
|
||||
form['feature_type'].value = this.featureType
|
||||
form.submit()
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue