Merge branch 'object-properties-id-form-focus-lost' into 'main'

Fix focus lost while editing object property IDs See merge request reportcreator/reportcreator!339
Syslifters · Nov 20, 2023 · 14cc520 · 14cc520
2 parents 38e9746 + 697d873
commit 14cc520
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Fix spellcheck returning no results for language=auto
 * Fix markdown preview flappy scroll on typing in markdown editor when images are included
 * Fix OIDC login for re-authentication not working
+* Fix focus lost while editing object field property IDs in designer 
 
 
 ## v2023.136 - 2023-10-30

diff --git a/api/src/reportcreator_api/tests/test_rendering.py b/api/src/reportcreator_api/tests/test_rendering.py
@@ -214,7 +214,7 @@ def test_chart_rendering(self):
             options: {scales: {y: {beginAtZero: true, ticks: {precision: 0}}}, plugins: {legend: {display: false}}},
             plugins: [ chartjsPlugins.DataLabels ],
         }" />""")
-        assert re.fullmatch(r'^\s*<img src="data:image/png;base64,[a-zA-z0-9+/=]+" alt="" style="width: 15cm; height: 10cm;">\s*$', html)
+        assert re.fullmatch(r'^\s*<img src="data:image/png;base64,[a-zA-Z0-9+/=]+" alt="" style="width: 15cm; height: 10cm;">\s*$', html)
 
     @pytest.mark.parametrize('password,encrypted', [
         ('password', True),

diff --git a/frontend/src/components/Design/InputFieldDefinition.vue b/frontend/src/components/Design/InputFieldDefinition.vue
@@ -6,7 +6,8 @@
           <v-col>
             <s-text-field
               :model-value="props.modelValue.id"
-              @update:model-value="updateProperty('id', $event)"
+              @update:model-value="!props.isObjectProperty ? updateProperty('id', $event) : null"
+              @change="updateProperty('id', $event.target.value)"
               :rules="rules.id"
               :disabled="props.disabled || !props.canChangeStructure"
               label="ID"
@@ -242,7 +243,7 @@
             <design-input-field-definition
               :model-value="f"
               @update:model-value="updateObject('update', f.id, $event)"
-              :is-object="false"
+              :is-object-property="true"
               :can-change-structure="props.canChangeStructure"
               :lang="props.lang"
               :disabled="props.disabled"
@@ -282,6 +283,7 @@ const props = defineProps<{
   modelValue: FieldDefinitionWithId;
   canChangeStructure?: boolean;
   isListItem?: boolean;
+  isObjectProperty?: boolean;
   disabled?: boolean;
   lang?: string|null;
 }>();
@@ -314,9 +316,17 @@ const rules = {
   ]
 };
 
+const objectFieldOrder = ref(Object.keys(props.modelValue.properties || {}).sort());
 const objectFields = computed(() => {
   if (props.modelValue.type === FieldDataType.OBJECT) {
-    return Object.keys(props.modelValue.properties || {}).map(f => ({ id: f, ...props.modelValue.properties![f] }));
+    for (const k of Object.keys(props.modelValue.properties || {})) {
+      if (!objectFieldOrder.value.includes(k)) {
+        objectFieldOrder.value.push(k);
+      }
+    }
+    return objectFieldOrder.value
+      .filter(f => Object.hasOwn(props.modelValue.properties as object, f))
+      .map(f => ({ id: f, ...props.modelValue.properties![f] }));
   } else {
     return [];
   }
@@ -385,12 +395,14 @@ function updateComboboxSuggestion(action: string, suggestionIdx: number, val?: a
   emit('update:modelValue', newObj);
 }
 function updateObject(action: string, fieldId?: string, val?: FieldDefinitionWithId) {
-  const newObj = { ...props.modelValue, properties: { ...props.modelValue.properties } };
+  const newObj = { ...props.modelValue, properties: { ...props.modelValue.properties! } };
   if (action === "update") {
     delete newObj.properties![fieldId!];
     newObj.properties![val!.id] = omit(val!, ['id']);
+    objectFieldOrder.value = objectFieldOrder.value.map(f => f === fieldId ? val!.id : f);
   } else if (action === "delete") {
     newObj.properties = omit(newObj.properties, [fieldId!]);
+    objectFieldOrder.value = objectFieldOrder.value.filter(f => f !== fieldId);
   } else if (action === 'add') {
     if (!val) {
       val = {
@@ -399,6 +411,7 @@ function updateObject(action: string, fieldId?: string, val?: FieldDefinitionWit
         label: 'New Field',
         required: true,
         spellcheck: false,
+        pattern: null,
         default: null,
         origin: FieldOrigin.CUSTOM,
       };
@@ -407,6 +420,7 @@ function updateObject(action: string, fieldId?: string, val?: FieldDefinitionWit
       val.id = uniqueName('new_field', Object.keys(newObj.properties));
     }
     newObj.properties[val.id] = omit(val, ['id']);
+    objectFieldOrder.value.push(val.id);
   }
 
   emit('update:modelValue', newObj);