improve UI for JSON fields (#319)

piccolo-orm · Jul 13, 2023 · 3632b74 · 3632b74
1 parent f6252b4
commit 3632b74
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/admin_ui/src/components/InputField.vue b/admin_ui/src/components/InputField.vue
@@ -79,7 +79,7 @@
                     v-bind:placeholder="placeholder"
                     v-bind:style="{ height: textareaHeight }"
                     v-model="localValue"
-                    v-on:input="setTextareaHeight"
+                    v-on:keyup="setTextareaHeight"
                 />
 
                 <textarea
@@ -91,16 +91,12 @@
 
             <div v-else-if="format == 'json'">
                 <textarea
-                    :value="
-                        localValue
-                            ? JSON.stringify(JSON.parse(localValue), null, 2)
-                            : null
-                    "
+                    v-model="localValue"
                     autocomplete="off"
                     ref="textarea"
                     v-bind:name="columnName"
                     v-bind:style="{ height: textareaHeight }"
-                    v-on:input="setTextareaHeight"
+                    v-on:keyup="setTextareaHeight"
                 />
             </div>
 
@@ -143,7 +139,7 @@
                 <OperatorField :columnName="columnName" v-if="isFilter" />
                 <DurationWidget
                     v-bind:timedelta="localValue"
-                    v-on:newTimedelta="updateLocalValue($event)"
+                    v-on:newTimedelta="localValue = $event"
                 />
                 <input
                     type="hidden"
@@ -297,13 +293,17 @@ export default Vue.extend({
             let element = this.$refs.textarea
             if (element) {
                 if (element.scrollHeight > element.clientHeight) {
+                    const cursorPosition = element.selectionStart
                     this.textareaHeight = element.scrollHeight + "px"
+                    window.setTimeout(() => {
+                        element.setSelectionRange(
+                            cursorPosition,
+                            cursorPosition
+                        )
+                    }, 0)
                 }
             }
         },
-        updateLocalValue(event) {
-            this.localValue = event
-        },
         showMedia() {
             const mediaViewerConfig: MediaViewerConfig = {
                 fileKey: this.localValue,
@@ -313,6 +313,9 @@ export default Vue.extend({
             this.mediaViewerConfig = mediaViewerConfig
             this.showMediaViewer = true
         },
+        formatJSON(value: string): string {
+            return JSON.stringify(JSON.parse(this.value), null, 2)
+        },
         async uploadFile(event) {
             const file = event.target.files[0]
 
@@ -370,24 +373,31 @@ export default Vue.extend({
 
             event.target.value = ""
             this.showLoadingOverlay = false
+        },
+        setLocalValue(value: any) {
+            if (this.format == "json") {
+                this.localValue = value ? this.formatJSON(value) : null
+            } else {
+                this.localValue = value
+            }
+
+            let app = this
+
+            setTimeout(function () {
+                app.setTextareaHeight()
+            }, 0)
         }
     },
     watch: {
-        value() {
-            this.localValue = this.value
-            this.setTextareaHeight()
+        value(newValue) {
+            this.setLocalValue(newValue)
         },
         currentTableName() {
             this.localValue = undefined
         }
     },
     mounted() {
-        this.localValue = this.value
-
-        let app = this
-        setTimeout(function () {
-            app.setTextareaHeight()
-        }, 0)
+        this.setLocalValue(this.value)
     }
 })
 </script>

diff --git a/piccolo_admin/example.py b/piccolo_admin/example.py
@@ -173,6 +173,7 @@ class Studio(Table, help_text="A movie studio."):
     pk = UUID(primary_key=True)
     name = Varchar(unique=True)
     facilities = JSON()
+    description = Text()
 
     @classmethod
     def get_readable(cls):

diff --git a/piccolo_admin/example_data.py b/piccolo_admin/example_data.py
@@ -339,6 +339,12 @@
             "catering": True,
             "water_tank": True,
         },
+        "description": (
+            "Shepperton Studios is a film studio located in Shepperton, "
+            "Surrey, England, with a history dating back to 1931. It is now "
+            "part of the Pinewood Studios Group. During its early existence, "
+            "the studio was branded as Sound City."
+        ),
     }
 ]