fix conditional fields in image editor

Author: Etienne Laurent

modules/@apostrophecms/image/index.js

@@ -104,10 +104,19 @@ module.exports = {
         fileGroup: 'images',
         required: true
       },
+      showAlt: {
+        type: 'boolean',
+        label: 'Show Alt?',
+        def: false
+      },
       alt: {
         type: 'string',
         label: 'apostrophe:altText',
-        help: 'apostrophe:altTextHelp'
+        help: 'apostrophe:altTextHelp',
+        if: {
+          'getOrdersCount()': 10,
+          showAlt: true
+        }
       },
       credit: {
         type: 'string',
@@ -131,6 +140,7 @@ module.exports = {
         fields: [
           'attachment',
           'title',
+          'showAlt',
           'alt',
           '_tags',
           'credit',
@@ -399,6 +409,12 @@ module.exports = {
   },
   methods(self) {
     return {
+      async getOrdersCount(req, { docId }) {
+        // simulates API response takes 500ms
+        await new Promise(resolve => setTimeout(resolve, 2500));
+        return 9;
+      },
+
       // This method is available as a template helper: apos.image.first
       //
       // Find the first image attachment referenced within an object that may

modules/@apostrophecms/image/ui/apos/components/AposMediaManagerEditor.vue

@@ -87,6 +87,7 @@
         :trigger-validation="triggerValidation"
         :doc-id="docFields.data._id"
         :following-values="followingValues()"
+        :conditional-fields="conditionalFields"
         :server-errors="serverErrors"
         @validate="triggerValidate"
         @reset="$emit('modified', false)"
@@ -231,6 +232,7 @@ export default {
     'docFields.data': {
       deep: true,
       handler(newData, oldData) {
+        this.evaluateConditions();
         this.$nextTick(() => {
           // If either old or new state are an empty object, it's not
           // "modified."
@@ -252,13 +254,14 @@ export default {
         }
       }
     },
-    media(newVal) {
-      this.updateActiveDoc(newVal);
+    async media(newVal) {
+      await this.updateActiveDoc(newVal);
     }
   },
-  mounted() {
+  async mounted() {
     this.generateLipKey();
     this.$emit('modified', false);
+
   },
   methods: {
     moreMenuHandler(item) {
@@ -271,6 +274,8 @@ export default {
       this.restoreOnly = !!this.activeMedia.archived;
       this.original = klona(newMedia);
       this.docFields.data = klona(newMedia);
+      this.evaluateConditions();
+      await this.evaluateExternalConditions();
       this.generateLipKey();
       await this.unlock();
       // Distinguish between an actual doc and an empty placeholder
@@ -402,7 +407,7 @@ export default {
         }
 
         await this.cancel();
-        this.updateActiveDoc(this.activeMedia);
+        await this.updateActiveDoc(this.activeMedia);
       }
       apos.bus.$emit('admin-menu-click', {
         itemName: '@apostrophecms/i18n:localize',

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

@@ -78,7 +78,7 @@ export default {
     async evaluateExternalConditions() {
       this.externalConditionsResults = await evaluateExternalConditions(
         this.schema,
-        this.docId || this.docFields?.data?._docId,
+        this.docId || this.docFields?.data?._docId || this.docFields?.data?._id,
         this.$t
       );
     },
@@ -162,7 +162,10 @@ export default {
     },
 
     evaluateConditions() {
+      console.log('evaluateConditions', this.schema, this.docFields.data, this.externalConditionsResults);
+      console.trace();
       this.conditionalFields = this.getConditionalFields();
+      console.log('conditionalFields', this.conditionalFields);
     },
 
     // Overridden by components that split the fields into several AposSchemas

modules/@apostrophecms/schema/ui/apos/lib/conditionalFields.js

@@ -14,17 +14,20 @@ export const getConditionTypesObject = () => Object
 // `docId` - the current docId (from prop or context)
 // `$t` - the i18n function (usually `this.$t`)
 export async function evaluateExternalConditions(schema, docId, $t) {
+  console.log('evaluateExternalConditions', schema, docId);
   const externalConditionsResults = getConditionTypesObject();
 
   for (const field of schema) {
     for (const conditionType of conditionTypes) {
+      console.log(field[conditionType]);
       if (field[conditionType]) {
         const externalConditionKeys = Object
           .entries(field[conditionType])
           .flatMap((entry) => getExternalConditionKeys(entry, conditionType))
           .filter(Boolean);
 
         const uniqExternalConditionKeys = [ ...new Set(externalConditionKeys) ];
+        console.log('uniqExternalConditionKeys', uniqExternalConditionKeys);
 
         try {
           const promises = uniqExternalConditionKeys
@@ -51,6 +54,7 @@ export async function evaluateExternalConditions(schema, docId, $t) {
       }
     }
   }
+  console.log('externalConditionsResults', externalConditionsResults);
   return externalConditionsResults;
 
   function getExternalConditionKeys([ key, val ], conditionType) {
@@ -66,6 +70,7 @@ export async function evaluateExternalConditions(schema, docId, $t) {
 }
 
 export async function evaluateExternalCondition(conditionKey, fieldId, docId) {
+  console.log('XHR');
   const { result } = await apos.http.get(
     `${apos.schema.action}/evaluate-external-condition`,
     {
@@ -115,6 +120,7 @@ export function getConditionalFields(
   values,
   externalConditionsResults
 ) {
+  console.log('getConditionalFields', schema, values, externalConditionsResults);
   const result = getConditionTypesObject();
 
   for (const field of schema) {
@@ -130,6 +136,7 @@ export function getConditionalFields(
     }
   }
 
+  console.log('result', result);
   return result;
 
   // Handle external conditions as a voter function.