From d1958a32904878e6a42edb204ef0dbe4e60ae621 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 26 Mar 2024 17:33:30 +0800
Subject: [PATCH] perf: view type automatic synchronization between edit and
 list for complex type

---
 .../content_value/ContentEntryEditor.vue         |  9 ++++++---
 .../content_value/ContentValueHash.vue           | 16 +++++++++++-----
 .../content_value/ContentValueList.vue           | 12 +++++++++---
 .../components/content_value/ContentValueSet.vue | 12 +++++++++---
 .../content_value/ContentValueZSet.vue           | 14 +++++++++-----
 5 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/content_value/ContentEntryEditor.vue b/frontend/src/components/content_value/ContentEntryEditor.vue
index 00de864..08213a0 100644
--- a/frontend/src/components/content_value/ContentEntryEditor.vue
+++ b/frontend/src/components/content_value/ContentEntryEditor.vue
@@ -12,9 +12,10 @@ import WindowClose from '@/components/icons/WindowClose.vue'
 import Pin from '@/components/icons/Pin.vue'
 import OffScreen from '@/components/icons/OffScreen.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import { toString } from 'lodash'
+import { isEmpty, toString } from 'lodash'
 
 const props = defineProps({
+    keyPath: String,
     show: {
         type: Boolean,
     },
@@ -58,8 +59,8 @@ const emit = defineEmits([
 
 watchEffect(
     () => {
-        if (props.show && props.value != null) {
-            onFormatChanged()
+        if (props.show && !isEmpty(props.keyPath)) {
+            onFormatChanged(props.decode, props.format)
         } else {
             viewAs.value = ''
         }
@@ -127,6 +128,8 @@ const onFormatChanged = async (decode = null, format = null) => {
         editingContent.value = viewAs.value = value
         viewAs.decode = decode || retDecode
         viewAs.format = format || retFormat
+        emit('update:decode', viewAs.decode)
+        emit('update:format', viewAs.format)
     } finally {
         loading.value = false
     }
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 32cd37e..ca9a864 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
@@ -142,6 +142,8 @@ const startEdit = async (no, key, value) => {
     currentEditRow.no = no
     currentEditRow.key = key
     currentEditRow.value = value
+    currentEditRow.decode = props.decode
+    currentEditRow.format = props.format
 }
 
 const saveEdit = async (field, value, decode, format) => {
@@ -183,8 +185,11 @@ const resetEdit = () => {
     currentEditRow.no = 0
     currentEditRow.key = ''
     currentEditRow.value = null
-    currentEditRow.format = formatTypes.RAW
-    currentEditRow.decode = decodeTypes.NONE
+    if (currentEditRow.format !== props.format || currentEditRow.decode !== props.decode) {
+        nextTick(() => onFormatChanged(currentEditRow.decode, currentEditRow.format))
+    }
+    // currentEditRow.format = formatTypes.RAW
+    // currentEditRow.decode = decodeTypes.NONE
 }
 
 const actionColumn = {
@@ -397,11 +402,12 @@ defineExpose({
                 class="entry-editor-container flex-item-expand"
                 style="width: 100%">
                 <content-entry-editor
+                    v-model:decode="currentEditRow.decode"
+                    v-model:format="currentEditRow.format"
                     v-model:fullscreen="fullEdit"
-                    :decode="currentEditRow.decode"
                     :field="currentEditRow.key"
                     :field-label="$t('common.field')"
-                    :format="currentEditRow.format"
+                    :key-path="props.keyPath"
                     :show="inEdit"
                     :value="currentEditRow.value"
                     :value-label="$t('common.value')"
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 297e631..efd1e2f 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
@@ -116,6 +116,8 @@ const valueColumn = computed(() => ({
 const startEdit = async (no, value) => {
     currentEditRow.no = no
     currentEditRow.value = value
+    currentEditRow.decode = props.decode
+    currentEditRow.format = props.format
 }
 
 /**
@@ -160,6 +162,9 @@ const saveEdit = async (pos, value, decode, format) => {
 const resetEdit = () => {
     currentEditRow.no = 0
     currentEditRow.value = null
+    if (currentEditRow.format !== props.format || currentEditRow.decode !== props.decode) {
+        nextTick(() => onFormatChanged(currentEditRow.decode, currentEditRow.format))
+    }
 }
 
 const actionColumn = {
@@ -370,12 +375,13 @@ defineExpose({
                 class="entry-editor-container flex-item-expand"
                 style="width: 100%">
                 <content-entry-editor
+                    v-model:decode="currentEditRow.decode"
+                    v-model:format="currentEditRow.format"
                     v-model:fullscreen="fullEdit"
-                    :decode="currentEditRow.decode"
                     :field="currentEditRow.no"
                     :field-label="$t('common.index')"
                     :field-readonly="true"
-                    :format="currentEditRow.format"
+                    :key-path="props.keyPath"
                     :show="inEdit"
                     :value="currentEditRow.value"
                     :value-label="$t('common.value')"
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index ea44b3c..329e474 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
@@ -115,6 +115,8 @@ const valueColumn = computed(() => ({
 const startEdit = async (no, value) => {
     currentEditRow.no = no
     currentEditRow.value = value
+    currentEditRow.decode = props.decode
+    currentEditRow.format = props.format
 }
 
 /**
@@ -157,6 +159,9 @@ const saveEdit = async (pos, value, decode, format) => {
 const resetEdit = () => {
     currentEditRow.no = 0
     currentEditRow.value = null
+    if (currentEditRow.format !== props.format || currentEditRow.decode !== props.decode) {
+        nextTick(() => onFormatChanged(currentEditRow.decode, currentEditRow.format))
+    }
 }
 
 const actionColumn = {
@@ -367,12 +372,13 @@ defineExpose({
                 class="entry-editor-container flex-item-expand"
                 style="width: 100%">
                 <content-entry-editor
+                    v-model:decode="currentEditRow.decode"
+                    v-model:format="currentEditRow.format"
                     v-model:fullscreen="fullEdit"
-                    :decode="currentEditRow.decode"
                     :field="currentEditRow.no"
                     :field-label="$t('common.index')"
                     :field-readonly="true"
-                    :format="currentEditRow.format"
+                    :key-path="props.keyPath"
                     :show="inEdit"
                     :value="currentEditRow.value"
                     :value-label="$t('common.value')"
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 6bc6833..7d09dcb 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue'
+import { computed, h, nextTick, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AddLink from '@/components/icons/AddLink.vue'
 import { NButton, NIcon, useThemeVars } from 'naive-ui'
@@ -166,6 +166,8 @@ const startEdit = async (no, score, value) => {
     currentEditRow.no = no
     currentEditRow.score = score
     currentEditRow.value = value
+    currentEditRow.decode = props.decode
+    currentEditRow.format = props.format
 }
 
 const saveEdit = async (field, value, decode, format) => {
@@ -204,8 +206,9 @@ const resetEdit = () => {
     currentEditRow.no = 0
     currentEditRow.score = 0
     currentEditRow.value = null
-    currentEditRow.format = formatTypes.RAW
-    currentEditRow.decode = decodeTypes.NONE
+    if (currentEditRow.format !== props.format || currentEditRow.decode !== props.decode) {
+        nextTick(() => onFormatChanged(currentEditRow.decode, currentEditRow.format))
+    }
 }
 
 const actionColumn = {
@@ -403,11 +406,12 @@ defineExpose({
                 class="entry-editor-container flex-item-expand"
                 style="width: 100%">
                 <content-entry-editor
+                    v-model:decode="currentEditRow.decode"
+                    v-model:format="currentEditRow.format"
                     v-model:fullscreen="fullEdit"
-                    :decode="currentEditRow.decode"
                     :field="currentEditRow.score"
                     :field-label="$t('common.score')"
-                    :format="currentEditRow.format"
+                    :key-path="props.keyPath"
                     :show="inEdit"
                     :value="currentEditRow.value"
                     :value-label="$t('common.value')"