Pro 8230 improve schema (#5044)

* no updateNextAndEmit when inputs update, watch changes instead
* upgrades vue version
* simplifies AposSchema, improves perfs

Author: ValJed

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## UNRELEASED
+
+### Changes
+
+* Refactors complex logic from `AposSchema` that handle data updates to simplifies it.
+
 ## 4.22.0 (2025-10-01)
 
 ### Adds

modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js

@@ -181,7 +181,7 @@ export default {
     async handleSaveError(e, { fallback }) {
       // eslint-disable-next-line no-console
       console.error(e);
-      if (e.body && e.body.data && e.body.data.errors) {
+      if (e.body?.data?.errors) {
         const serverErrors = {};
         let first;
         e.body.data.errors.forEach(e => {

modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -52,7 +52,6 @@
         :server-error="fields[field.name].serverError"
         :doc-id="docId"
         :generation="generation"
-        @update:model-value="updateNextAndEmit"
         @update-doc-data="onUpdateDocData"
         @validate="emitValidate()"
       />

modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js

@@ -1,4 +1,3 @@
-import { detectFieldChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
 import { getConditionTypesObject } from '../lib/conditionalFields';
 
 export default {
@@ -130,9 +129,6 @@ export default {
               ...item,
               required
             },
-            value: {
-              data: this.modelValue.data[item.name]
-            },
             serverError: this.serverErrors && this.serverErrors[item.name],
             modifiers: this.computeModifiers(item)
           }
@@ -167,6 +163,13 @@ export default {
     }
   },
   watch: {
+    fieldState: {
+      deep: 2,
+      handler() {
+        this.updateNextAndEmit();
+      },
+      flush: 'post'
+    },
     schema() {
       this.populateDocData();
     },
@@ -211,6 +214,7 @@ export default {
   created() {
     this.populateDocData();
   },
+
   methods: {
     emitValidate() {
       this.$emit('validate');
@@ -269,53 +273,18 @@ export default {
       if (!this.schemaReady) {
         return;
       }
-      const oldHasErrors = this.next.hasErrors;
-      // destructure these for non-linked comparison
-      const oldFieldState = { ...this.next.fieldState };
-      const newFieldState = { ...this.fieldState };
-
-      let changeFound = false;
-
       this.next.hasErrors = false;
-      this.next.fieldState = { ...this.fieldState };
-
       this.schema
         .filter(field => this.displayComponent(field))
         .forEach(field => {
           if (this.fieldState[field.name].error) {
             this.next.hasErrors = true;
           }
-          // This simply check if a field has changed since it has been
-          // instantiated
-          if (
-            this.fieldState[field.name].data !== undefined &&
-            detectFieldChange(
-              field,
-              this.next.data[field.name],
-              this.fieldState[field.name].data
-            )
-          ) {
-            changeFound = true;
-
-            // fieldState never gets the relationships postprocessed data
-            // that's why it gets seen as different than next all the time
-            this.next.data[field.name] = this.fieldState[field.name].data;
-          } else {
-            this.next.data[field.name] = this.modelValue.data[field.name];
-          }
+          this.next.data[field.name] = this.fieldState[field.name].data;
         });
-      if (
-        oldHasErrors !== this.next.hasErrors ||
-        oldFieldState !== newFieldState
-      ) {
-        // Otherwise the save button may never unlock
-        changeFound = true;
-      }
 
-      if (changeFound) {
-        // ... removes need for deep watch at parent level
-        this.$emit('update:model-value', { ...this.next });
-      }
+      this.next.fieldState = { ...this.fieldState };
+      this.$emit('update:model-value', { ...this.next });
     },
     displayComponent({ name, hidden = false }) {
       if (hidden === true) {

modules/@apostrophecms/schema/ui/apos/logic/AposSubform.js

@@ -109,13 +109,14 @@ export default {
       this.docFields = value;
       this.evaluateConditions();
     },
-    async submit() {
+    submit() {
       this.triggerValidation = true;
-      this.$nextTick(async () => {
+      this.$nextTick(() => {
         if (this.docFields.hasErrors) {
           this.triggerValidation = false;
           return;
         }
+
         this.$emit('submit', {
           name: this.subform.name,
           values: this.docFields.data

package.json

@@ -124,7 +124,7 @@
     "underscore.string": "^3.3.4",
     "uploadfs": "^1.25.1",
     "void-elements": "^3.1.0",
-    "vue": "^3.3.8",
+    "vue": "^3.5.20",
     "vue-advanced-cropper": "^2.8.8",
     "vue-loader": "^17.1.0",
     "vue-style-loader": "^4.1.3",