Add basic support for defining columns when generating new table feature

tailbone/templates/generate_feature.mako

@@ -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>
+                    &nbsp;
+
+                    <a href="#" class="grid-action has-text-danger"
+                       @click.prevent="deleteColumn(props.index)">
+                      <i class="fas fa-trash"></i>
+                      Delete
+                    </a>
+                    &nbsp;
+                  </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()
     }