Pro 8087 aspect ratio image widget (#5036)

* share code between AposTheme mixin and composable
* moves the postprocess logic at the input relationship level because it makes more sense and live preview works
* in AposEditorMixin, postprocess method does nothing anymore
* moves postprocess logic in piece-type ui lib folder (no vue related)
* adds warning in empty function postprocess

Author: ValJed

CHANGELOG.md

@@ -9,13 +9,17 @@
 * `apos.doc.edit` now accepts an optional `values` object as the final parameter, containing initial values for some or all fields. This is supported only when editing existing documents.
 * When specifying a modal name to be executed, developers may now register "transformers" to be invoked first, using pipe syntax. For example, the modal name `aposSectionTemplateLibraryWidgetToDoc|AposDocEditor` will invoke the transformer `aposSectionTemplateLibraryWidgetToDoc` with the original props, and pass the returned result to `AposDocEditor`. Note that transformers are awaited. Transformers are registered in frontend admin UI code by passing a name and a function to `apos.ui.addTransformer`.
 * Adds quick image upload UI to `@apostrophecms/image-widget`.
+* Makes autocropping work when uploading or selecting images from the new quick image upload UI.
 
 ### Fixes
 
 * The `?render-areas=1` API feature now correctly disregards areas in separate documents loaded via relationship fields. Formerly their presence resulted in an error, not a rendering.
 * Make conditional fields work in Image Editor.
 * Importing a custom icon from an npm module using a `~` path per the admin UI now works per the documentation, as long as the Vue component used for the icon is structured like those found in `@apostrophecms/vue-material-design-icons`.
 * The `button: true` flag works again for piece module utility operations. Previously the button appeared but did not trigger the desired operation.
+* Fixes the widget data being cloned to be saved before the `postprocess` method being called, which leads to a loss of data in `AposWidgetEditor` (like the autocrop data).
+* In editors like `AposWidgetEditor` relationships are now post processed after they are updated in `AposInputRelationship` only for the relationship that has been updated. 
+It allows live preview to work well with it, it also avoids complexity and fixes updated data not being properly synced between the editor and the `AposSchema`.
 
 ### Changes
 

modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -637,7 +637,6 @@ export default {
 
       let doc;
       try {
-        await this.postprocess();
         doc = await requestMethod(route, {
           busy: true,
           body,

modules/@apostrophecms/image-widget/ui/apos/components/AposImageWidget.vue

@@ -24,11 +24,11 @@ import { klona } from 'klona';
 import {
   computed, watch
 } from 'vue';
-import { useAposWidget } from 'Modules/@apostrophecms/widget-type/composables/AposWidget';
-import aposWidgetProps from 'Modules/@apostrophecms/widget-type/composables/AposWidgetProps';
+import { useAposWidget } from 'Modules/@apostrophecms/widget-type/composables/AposWidget.js';
+import aposWidgetProps from 'Modules/@apostrophecms/widget-type/composables/AposWidgetProps.js';
+import { postprocessRelationships } from 'Modules/@apostrophecms/piece-type/lib/postprocessRelationships.js';
 
 const props = defineProps(aposWidgetProps);
-
 const imgModuleOptions = apos.modules['@apostrophecms/image'];
 const widgetModuleOptions = apos.modules[`${props.type}-widget`];
 const accept = imgModuleOptions.schema.find(field => field.name === 'attachment').accept;
@@ -79,10 +79,13 @@ async function selectFromManager() {
   apos.area.widgetOptions = apos.area.widgetOptions.slice(1);
 
   if (selectedImg) {
-    emit('update', {
+    const widgetData = {
       ...props.modelValue,
       _image: [ selectedImg ]
-    });
+    };
+    await postprocessRelationships(widgetModuleOptions.schema, widgetData, props.options);
+
+    emit('update', widgetData);
   }
 }
 
@@ -171,31 +174,30 @@ async function upload(files = []) {
       },
       draft: true
     });
-
-    const formData = new window.FormData();
+    const formData = new FormData();
     formData.append('file', file);
 
     // Make an async request to upload the image.
     const attachment = await apos.http.post('/api/v1/@apostrophecms/attachment/upload', {
       busy: true,
       body: formData
     });
-
     const imageData = Object.assign(emptyDoc, {
       title: attachment.title,
       attachment
     });
-
     const imgPiece = await apos.http.post(imgModuleOptions.action, {
       busy: true,
       body: imageData,
       draft: true
     });
-
-    emit('update', {
+    const widgetData = {
       ...props.modelValue,
       _image: [ imgPiece ]
-    });
+    };
+    await postprocessRelationships(widgetModuleOptions.schema, widgetData, props.options);
+
+    emit('update', widgetData);
   } catch (e) {
     const msg = e.body?.message ? e.body.message : this.$t('apostrophe:uploadError');
     await apos.notify(msg, {

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

@@ -215,60 +215,15 @@ export default {
     },
     triggerValidate() {
       this.triggerValidation = true;
-      this.$nextTick(async () => {
+      this.$nextTick(() => {
         this.triggerValidation = false;
       });
     },
-    // Perform any postprocessing required by direct or nested schema fields
-    // before the object can be saved
     async postprocess() {
-      // Relationship fields may have postprocessors (e.g. autocropping)
-      const relationships = findRelationships(this.schema, this.docFields.data);
-      for (const relationship of relationships) {
-        if (!(relationship.value && relationship.field.postprocessor)) {
-          continue;
-        }
-        const withType = relationship.field.withType;
-        const module = apos.modules[withType];
-        relationship.context[relationship.field.name] = (await apos.http.post(`${module.action}/${relationship.field.postprocessor}`, {
-          qs: {
-            aposMode: 'draft'
-          },
-          body: {
-            relationship: relationship.value,
-            // Pass the options of the widget currently being edited, some
-            // postprocessors need these
-            // (e.g. autocropping cares about widget aspectRatio)
-            widgetOptions: apos.area.widgetOptions[0]
-          },
-          busy: true
-        })).relationship;
-      }
-      function findRelationships(schema, object) {
-        let relationships = [];
-        for (const field of schema) {
-          if (field.type === 'relationship') {
-            relationships.push({
-              context: object,
-              field,
-              value: object[field.name]
-            });
-          } else if (field.type === 'array') {
-            for (const value of (object[field.name] || [])) {
-              relationships = [
-                ...relationships,
-                findRelationships(field.schema, value)
-              ];
-            }
-          } else if (field.type === 'object') {
-            relationships = [
-              ...relationships,
-              findRelationships(field.schema, object[field.name] || {})
-            ];
-          }
-        }
-        return relationships;
-      }
+      // eslint-disable-next-line no-console
+      console.warn(
+        'The function postprocess from AposEditorMixin does not do anything anymore.\nRelationship postprocessing is made at input level in AposInputRelationship and in some cases globally like in AposImageWidget.'
+      );
     }
   }
 };

modules/@apostrophecms/piece-type/ui/apos/lib/postprocessRelationships.js

@@ -0,0 +1,68 @@
+// Perform any postprocessing required by direct or nested schema fields
+// before the object can be saved
+export async function postprocessRelationships(schema, data, widgetOptions) {
+  // Relationship fields may have postprocessors (e.g. autocropping)
+  const relationships = findRelationships(schema, data);
+
+  for (const {
+    value, field, context
+  } of relationships) {
+    context[field.name] = await getPostprocessedRelationship(
+      value,
+      field,
+      widgetOptions
+    );
+  }
+}
+
+export async function getPostprocessedRelationship(
+  value,
+  field,
+  widgetOptions
+) {
+  if (!field.postprocessor || !value) {
+    return value;
+  }
+  const mod = apos.modules[field.withType];
+  const response = await apos.http.post(`${mod.action}/${field.postprocessor}`, {
+    qs: {
+      aposMode: 'draft'
+    },
+    body: {
+      relationship: value,
+      // Pass the options of the widget currently being edited, some
+      // postprocessors need these
+      // (e.g. autocropping cares about widget aspectRatio)
+      widgetOptions
+    },
+    busy: true
+  });
+
+  return response.relationship;
+}
+
+function findRelationships(schema, object) {
+  let relationships = [];
+  for (const field of schema) {
+    if (field.type === 'relationship') {
+      relationships.push({
+        context: object,
+        field,
+        value: object[field.name]
+      });
+    } else if (field.type === 'array') {
+      for (const value of (object[field.name] || [])) {
+        relationships = [
+          ...relationships,
+          findRelationships(field.schema, value)
+        ];
+      }
+    } else if (field.type === 'object') {
+      relationships = [
+        ...relationships,
+        findRelationships(field.schema, object[field.name] || {})
+      ];
+    }
+  }
+  return relationships;
+}

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

@@ -1,6 +1,7 @@
 import { klona } from 'klona';
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
 import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
+import { getPostprocessedRelationship } from 'Modules/@apostrophecms/piece-type/lib/postprocessRelationships.js';
 
 export default {
   name: 'AposInputRelationship',
@@ -89,7 +90,7 @@ export default {
         customFields: [ 'help' ]
       };
     },
-    chooserComponent () {
+    chooserComponent() {
       return apos.modules[this.field.withType].components.managerModal;
     },
     disableUnpublished() {
@@ -107,8 +108,11 @@ export default {
 
       return widgetOptions.minSize || [];
     },
-    duplicate () {
+    duplicate() {
       return this.modelValue?.duplicate ? 'apos-input--error' : null;
+    },
+    widgetOptions() {
+      return apos.area.widgetOptions[0];
     }
   },
   watch: {
@@ -152,8 +156,12 @@ export default {
 
       this.disabled = !!this.limitReached;
     },
-    updateSelected(items) {
-      this.next = items;
+    async updateSelected(items) {
+      this.next = await getPostprocessedRelationship(
+        items,
+        this.field,
+        this.widgetOptions
+      );
     },
     async search(qs) {
       const action = apos.modules[this.field.withType].action;
@@ -269,6 +277,9 @@ export default {
         this.updateSelected(result);
       }
     },
+    getDefault() {
+      return newInstance(this.field.schema);
+    },
     async editRelationship (item) {
       const editor = this.field.editor || 'AposRelationshipEditor';
 
@@ -279,19 +290,24 @@ export default {
         'model-value': item._fields
       });
 
-      if (result) {
-        this.next = this.next.map((rel) => {
-          return rel._id === item._id
-            ? {
-              ...item,
-              _fields: result
-            }
-            : rel;
-        });
+      if (!result) {
+        return;
       }
-    },
-    getDefault() {
-      return newInstance(this.field.schema);
+
+      const updatedItems = this.next.map((rel) => {
+        return rel._id === item._id
+          ? {
+            ...item,
+            _fields: result
+          }
+          : rel;
+      });
+
+      this.next = await getPostprocessedRelationship(
+        updatedItems,
+        this.field,
+        this.widgetOptions
+      );
     }
   }
 };

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

@@ -265,7 +265,7 @@ export default {
         this.$emit('reset');
       });
     },
-    updateNextAndEmit() {
+    async updateNextAndEmit() {
       if (!this.schemaReady) {
         return;
       }
@@ -296,6 +296,9 @@ export default {
             )
           ) {
             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];

modules/@apostrophecms/ui/ui/apos/composables/AposTheme.js

@@ -1,11 +1,12 @@
 import { computed } from 'vue';
 
-export function useAposTheme () {
-  const themeClass = computed(() => {
-    const classes = [];
-    classes.push(`apos-theme--primary-${window.apos.ui.theme.primary}`);
-    return classes;
-  });
-
+export function useAposTheme() {
+  const themeClass = computed(_themeClass);
   return { themeClass };
 };
+
+export function _themeClass() {
+  const classes = [];
+  classes.push(`apos-theme--primary-${window.apos.ui.theme.primary}`);
+  return classes;
+}

modules/@apostrophecms/ui/ui/apos/mixins/AposThemeMixin.js

@@ -1,12 +1,11 @@
+import { _themeClass } from '../composables/AposTheme.js';
+
 // Provides computed classes for decorating top-level Apos vue apps with a UI
 // theme
-
 export default {
   computed: {
     themeClass() {
-      const classes = [];
-      classes.push(`apos-theme--primary-${window.apos.ui.theme.primary}`);
-      return classes;
+      return _themeClass();
     }
   }
 };