Allow camelcase column names (piccolo-orm#223)

* add missing attributes to `Schema` interface * add missing `PropType` to props * pass `columnName` directly into `InputField`
sinisaos · Sep 8, 2022 · f534357 · f534357
1 parent 42953de
commit f534357
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 76 deletions.
diff --git a/admin_ui/src/components/AddRowForm.vue b/admin_ui/src/components/AddRowForm.vue
@@ -23,7 +23,7 @@ export default {
     components: {
         RowFormSelect
     },
-    data: function () {
+    data () {
         return {
             defaults: {},
             errors: ""
@@ -36,7 +36,7 @@ export default {
 
             const json = {}
             for (const i of form.entries()) {
-                const key = i[0].split(" ").join("_")
+                const key = i[0]
                 let value = i[1]
 
                 if (value == "null") {

diff --git a/admin_ui/src/components/BulkUpdateModal.vue b/admin_ui/src/components/BulkUpdateModal.vue
@@ -7,11 +7,11 @@
                 <option value="null" disabled>
                     {{ $t("Select a Column") }}
                 </option>
-                <template v-for="(property, key) in schema.properties">
+                <template v-for="(property, columnName) in schema.properties">
                     <option
-                        :key="key"
-                        :value="key"
-                        v-if="key != schema.primary_key_name"
+                        :key="columnName"
+                        :value="columnName"
+                        v-if="columnName != schema.primary_key_name"
                     >
                         {{ property.title }}
                     </option>
@@ -33,6 +33,7 @@
                 />
 
                 <InputField
+                    v-bind:columnName="selectedPropertyName"
                     v-bind:format="selectedProperty.format"
                     v-bind:isFilter="false"
                     v-bind:title="selectedProperty.title"
@@ -55,18 +56,19 @@
 </template>
 
 <script lang="ts">
+import Vue, {PropType} from "vue"
 import InputField from "../components/InputField.vue"
 import KeySearch from "../components/KeySearch.vue"
 import Modal from "../components/Modal.vue"
 import * as i from "../interfaces"
 
-export default {
+export default Vue.extend({
     props: {
-        schema: Object,
+        schema: Object as PropType<i.Schema>,
         tableName: String,
         selectedRows: {
             type: Array,
-            defult: () => []
+            default: () => []
         }
     },
     components: {
@@ -141,7 +143,7 @@ export default {
             this.buttonEnabled = true
         }
     }
-}
+})
 </script>
 
 <style lang="less">

diff --git a/admin_ui/src/components/ChoiceSelect.vue b/admin_ui/src/components/ChoiceSelect.vue
@@ -24,7 +24,7 @@ import { Choices } from "../interfaces"
 export default Vue.extend({
     props: {
         fieldName: {
-            type: String,
+            type: String as PropType<string>,
             default: ""
         },
         value: {
@@ -38,11 +38,11 @@ export default Vue.extend({
             }
         },
         isNullable: {
-            type: Boolean,
+            type: Boolean as PropType<boolean>,
             default: false
         },
         isFilter: {
-            type: Boolean,
+            type: Boolean as PropType<boolean>,
             default: false
         }
     },

diff --git a/admin_ui/src/components/EditRowForm.vue b/admin_ui/src/components/EditRowForm.vue
@@ -75,7 +75,7 @@ export default Vue.extend({
 
             const json = {}
             for (const i of form.entries()) {
-                const key = i[0].split(" ").join("_")
+                const key = i[0]
                 let value = i[1]
 
                 if (value == "null") {

diff --git a/admin_ui/src/components/FormAdd.vue b/admin_ui/src/components/FormAdd.vue
@@ -86,7 +86,7 @@ export default Vue.extend({
 
             const json = {}
             for (const i of form.entries()) {
-                const key = i[0].split(" ").join("_")
+                const key = i[0]
                 let value: any = i[1]
 
                 if (value == "null") {

diff --git a/admin_ui/src/components/InputField.vue b/admin_ui/src/components/InputField.vue
@@ -21,22 +21,22 @@
         </template>
 
         <template v-if="choices">
-            <OperatorField :fieldName="getFieldName(title)" v-if="isFilter" />
+            <OperatorField :columnName="columnName" v-if="isFilter" />
             <ChoiceSelect
                 :choices="choices"
-                :fieldName="getFieldName(title)"
+                :fieldName="columnName"
                 :isFilter="isFilter"
                 :isNullable="isNullable"
                 :value="value"
             />
         </template>
 
         <template v-else-if="type == 'integer'">
-            <OperatorField :fieldName="getFieldName(title)" v-if="isFilter" />
+            <OperatorField :columnName="columnName" v-if="isFilter" />
             <input
                 step="1"
                 type="number"
-                v-bind:name="getFieldName(title)"
+                v-bind:name="columnName"
                 v-bind:placeholder="placeholder"
                 v-bind:value="value"
             />
@@ -45,7 +45,7 @@
         <template v-else-if="type == 'string'">
             <template v-if="format == 'date-time'">
                 <OperatorField
-                    :fieldName="getFieldName(title)"
+                    :columnName="columnName"
                     v-if="isFilter"
                 />
                 <!--
@@ -55,7 +55,7 @@
                 -->
                 <flat-pickr
                     v-bind:config="{ enableTime: true, disableMobile: 'true' }"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                     v-model="localValue"
                 ></flat-pickr>
             </template>
@@ -64,14 +64,14 @@
                 <vue-editor
                     v-if="isRichText"
                     v-model="localValue"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                     :editor-toolbar="customToolbar"
                 />
                 <textarea
                     v-else
                     autocomplete="off"
                     ref="textarea"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                     v-bind:placeholder="placeholder"
                     v-bind:style="{ height: textareaHeight }"
                     v-model="localValue"
@@ -81,7 +81,7 @@
                 <textarea
                     id="editor"
                     v-model.lazy="localValue"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                 ></textarea>
             </div>
 
@@ -90,23 +90,23 @@
                     :value="JSON.stringify(JSON.parse(value), null, 2)"
                     autocomplete="off"
                     ref="textarea"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                     v-bind:style="{ height: textareaHeight }"
                     v-on:input="setTextareaHeight"
                 />
             </div>
 
             <input
                 type="text"
-                v-bind:name="getFieldName(title)"
+                v-bind:name="columnName"
                 v-bind:placeholder="placeholder"
                 v-else
                 v-model="localValue"
             />
         </template>
 
         <template v-else-if="type == 'boolean'">
-            <select v-bind:name="getFieldName(title)">
+            <select v-bind:name="columnName">
                 <option
                     v-bind:selected="value == 'all'"
                     v-if="isFilter"
@@ -133,7 +133,7 @@
         <template v-else-if="type == 'number'">
             <template v-if="format == 'time-delta'">
                 <OperatorField
-                    :fieldName="getFieldName(title)"
+                    :columnName="columnName"
                     v-if="isFilter"
                 />
                 <DurationWidget
@@ -142,18 +142,18 @@
                 />
                 <input
                     type="hidden"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                     v-model="localValue"
                 />
             </template>
             <template v-else>
                 <OperatorField
-                    :fieldName="title.toLowerCase()"
+                    :columnName="columnName"
                     v-if="isFilter"
                 />
                 <input
                     type="text"
-                    v-bind:name="getFieldName(title)"
+                    v-bind:name="columnName"
                     v-bind:placeholder="placeholder"
                     v-model="localValue"
                 />
@@ -165,13 +165,13 @@
                 :array="localValue"
                 :enableAddButton="isFilter || !isMediaColumn"
                 v-on:updateArray="localValue = $event"
-                :fieldName="getFieldName(title)"
+                :fieldName="columnName"
                 :isFilter="isFilter"
             />
             <input
                 :value="JSON.stringify(localValue)"
                 type="hidden"
-                v-bind:name="getFieldName(title)"
+                v-bind:name="columnName"
             />
         </template>
     </div>
@@ -198,27 +198,35 @@ import {
 
 export default Vue.extend({
     props: {
+        // A nicely formatted column name, for example 'First Name'
         title: {
-            type: String,
-            default: ""
+            type: String as PropType<string>,
+            required: true
+        },
+        columnName: {
+            type: String  as PropType<string>,
+            required: true
         },
         type: {
-            type: String,
+            type: String  as PropType<string>,
             default: "string"
         },
         value: {
-            type: undefined,
+            type: undefined as PropType<any>,
             default: undefined
         },
         // Fields can share the same type, but have different formats. For
         // example, 'text-area', when type is 'string'.
-        format: String,
+        format: {
+            type: String as PropType<string | undefined>,
+            default: undefined
+        },
         isFilter: {
-            type: Boolean,
+            type: Boolean as PropType<boolean>,
             default: true
         },
         isNullable: {
-            type: Boolean,
+            type: Boolean as PropType<boolean>,
             default: false
         },
         choices: {
@@ -275,9 +283,6 @@ export default Vue.extend({
         }
     },
     methods: {
-        getFieldName(name: string) {
-            return name.toLowerCase().split(" ").join("_")
-        },
         setTextareaHeight() {
             let element = this.$refs.textarea
             if (element) {
@@ -292,7 +297,7 @@ export default Vue.extend({
         showMedia() {
             const mediaViewerConfig: MediaViewerConfig = {
                 fileKey: this.localValue,
-                columnName: this.getFieldName(this.title),
+                columnName: this.columnName,
                 tableName: this.currentTableName
             }
             this.mediaViewerConfig = mediaViewerConfig
@@ -307,7 +312,7 @@ export default Vue.extend({
 
             let formData = new FormData()
             formData.append("table_name", this.currentTableName)
-            formData.append("column_name", this.getFieldName(this.title))
+            formData.append("column_name", this.columnName)
             formData.append("file", file)
 
             this.showLoadingOverlay = true

diff --git a/admin_ui/src/components/NewForm.vue b/admin_ui/src/components/NewForm.vue
@@ -2,12 +2,13 @@
     <div>
         <div
             v-bind:key="property.title"
-            v-for="(property, keyName) in schema.properties"
+            v-for="(property, columnName) in schema.properties"
         >
             <label>{{ property.title }}</label>
             <InputField
                 v-bind:isFilter="false"
-                v-bind:key="keyName"
+                v-bind:key="columnName"
+                v-bind:columnName="columnName"
                 v-bind:title="property.title"
                 v-bind:type="property.type || property.anyOf[0].type"
                 v-bind:value="property.default"
@@ -17,12 +18,13 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import Vue, {PropType} from "vue"
 import InputField from "./InputField.vue"
+import {Schema} from "@/interfaces"
 
 export default Vue.extend({
     props: {
-        schema: Object,
+        schema: Object as PropType<Schema>,
     },
     components: {
         InputField,

diff --git a/admin_ui/src/components/OperatorField.vue b/admin_ui/src/components/OperatorField.vue
@@ -1,5 +1,5 @@
 <template>
-    <select :name="fieldName + '__operator'">
+    <select :name="columnName + '__operator'">
         <option
             :key="operator.label"
             :selected="operator.value == 'e'"
@@ -12,11 +12,14 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import Vue, {PropType} from "vue"
 
 export default Vue.extend({
     props: {
-        fieldName: String
+        columnName: {
+            type: String as PropType<string>,
+            required: true
+        }
     },
     data() {
         return {

diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
 
             const json = {}
             for (const i of form.entries()) {
-                const key = i[0].split(" ").join("_")
+                const key = i[0]
                 let value: any = i[1]
 
                 if (value && value != "all") {