apostrophe 3.17.0 → 3.18.0

package/modules/@apostrophecms/schema/index.js

@@ -1012,12 +1012,12 @@ module.exports = {
           // so consider that too
           const withType = field.name.replace(/^_/, '').replace(/s$/, '');
           if (!_.find(self.apos.doc.managers, { name: withType })) {
-            fail('withType property is missing. Hint: it must match the "name" property of a doc type. Or omit it and give your relationship the same name as the other type, with a leading _ and optional trailing s.');
+            fail('withType property is missing. Hint: it must match the name of a doc type module. Or omit it and give your relationship the same name as the other type, with a leading _ and optional trailing s.');
           }
           field.withType = withType;
         }
         if (!field.withType) {
-          fail('withType property is missing. Hint: it must match the "name" property of a doc type.');
+          fail('withType property is missing. Hint: it must match the name of a doc type module.');
         }
         if (Array.isArray(field.withType)) {
           _.each(field.withType, function (type) {
@@ -1025,6 +1025,18 @@ module.exports = {
           });
         } else {
           lintType(field.withType);
+          const withTypeManager = self.apos.doc.getManager(field.withType);
+          field.editor = field.editor || withTypeManager.options.relationshipEditor;
+          field.postprocessor = field.postprocessor || withTypeManager.options.relationshipPostprocessor;
+          field.editorLabel = field.editorLabel || withTypeManager.options.relationshipEditorLabel;
+          field.editorIcon = field.editorIcon || withTypeManager.options.relationshipEditorIcon;
+
+          if (!field.schema && !Array.isArray(field.withType)) {
+            const fieldsOption = withTypeManager.options.relationshipFields;
+            const fields = fieldsOption && fieldsOption.add;
+            field.fields = fields && klona(fields);
+            field.schema = self.fieldsToArray(`Relationship field ${field.name}`, field.fields);
+          }
         }
         if (field.schema && !field.fieldsStorage) {
           field.fieldsStorage = field.name.replace(/^_/, '') + 'Fields';
@@ -1204,52 +1216,7 @@ module.exports = {
           options.alterFields(schema);
         }
 
-        // always make sure there is a default group
-        let groups = [ {
-          name: defaultGroup.name,
-          label: defaultGroup.label,
-          fields: _.map(schema, 'name')
-        } ];
-
-        // if we are getting arrangeFields and it's not empty
-        if (options.arrangeFields && options.arrangeFields.length > 0) {
-          // if it's full of strings, use them for the default group
-          if (_.isString(options.arrangeFields[0])) {
-            groups[0].fields = options.arrangeFields; // if it's full of objects, those are groups, so use them
-          } else if (_.isPlainObject(options.arrangeFields[0])) {
-            // reset the default group's fields, but keep it around,
-            // in case they have fields they forgot to put in a group
-            groups[0].fields = [];
-            groups = groups.concat(options.arrangeFields);
-          }
-        }
-
-        // If there is a later group with the same name, the later
-        // one wins and the earlier is forgotten. Otherwise you can't
-        // ever toss a field out of a group without putting it into
-        // another one, which makes it impossible to un-group a
-        // field and have it appear outside of tabs in the interface.
-        //
-        // A reconfigured group is ordered to the bottom of the list
-        // of groups again, which has the intended effect if you
-        // arrange all of the groups in your module config. However
-        // it comes before any groups with the `last: true` flag that
-        // were not reconfigured. Reconfiguring a group without that
-        // flag clears it.
-
-        const newGroups = [];
-        _.each(groups, function (group) {
-          const index = _.findIndex(newGroups, { name: group.name });
-          if (index !== -1) {
-            newGroups.splice(index, 1);
-          }
-          let i = _.findIndex(newGroups, { last: true });
-          if (i === -1) {
-            i = groups.length;
-          }
-          newGroups.splice(i, 0, group);
-        });
-        groups = newGroups;
+        const groups = self.composeGroups(schema, options.arrangeFields);
 
         // all fields in the schema will end up in this variable
         let newSchema = [];
@@ -1349,6 +1316,56 @@ module.exports = {
         return schema;
       },
 
+      composeGroups (schema, arrangeFields) {
+        // always make sure there is a default group
+        let groups = [ {
+          name: defaultGroup.name,
+          label: defaultGroup.label,
+          fields: _.map(schema, 'name')
+        } ];
+
+        // if we are getting arrangeFields and it's not empty
+        if (arrangeFields && arrangeFields.length > 0) {
+          // if it's full of strings, use them for the default group
+          if (_.isString(arrangeFields[0])) {
+            groups[0].fields = arrangeFields; // if it's full of objects, those are groups, so use them
+          } else if (_.isPlainObject(arrangeFields[0])) {
+            // reset the default group's fields, but keep it around,
+            // in case they have fields they forgot to put in a group
+            groups[0].fields = [];
+            groups = groups.concat(arrangeFields);
+          }
+        }
+
+        // If there is a later group with the same name, the later
+        // one wins and the earlier is forgotten. Otherwise you can't
+        // ever toss a field out of a group without putting it into
+        // another one, which makes it impossible to un-group a
+        // field and have it appear outside of tabs in the interface.
+        //
+        // A reconfigured group is ordered to the bottom of the list
+        // of groups again, which has the intended effect if you
+        // arrange all of the groups in your module config. However
+        // it comes before any groups with the `last: true` flag that
+        // were not reconfigured. Reconfiguring a group without that
+        // flag clears it.
+
+        const newGroups = [];
+        _.each(groups, function (group) {
+          const index = _.findIndex(newGroups, { name: group.name });
+          if (index !== -1) {
+            newGroups.splice(index, 1);
+          }
+          let i = _.findIndex(newGroups, { last: true });
+          if (i === -1) {
+            i = groups.length;
+          }
+          newGroups.splice(i, 0, group);
+        });
+
+        return newGroups;
+      },
+
       // Recursively set moduleName property of the field and any subfields,
       // as might be found in array or object fields. `module` is an actual module
       setModuleName(field, module) {
@@ -1693,7 +1710,6 @@ module.exports = {
         }
         const find = options.find;
         const builders = options.builders || {};
-        const hints = options.hints || {};
         const getCriteria = options.getCriteria || {};
         await method(items, idsStorage, fieldsStorage, objectField, ids => {
           const idsCriteria = {};
@@ -1712,8 +1728,6 @@ module.exports = {
           // Builders hardcoded as part of this relationship's options don't
           // require any sanitization
           query.applyBuilders(builders);
-          // Hints, on the other hand, must be sanitized
-          query.applyBuildersSafely(hints);
           return query.toArray();
         }, self.apos.doc.toAposDocId);
       },
@@ -1854,8 +1868,7 @@ module.exports = {
 
               const options = {
                 find: find,
-                builders: { relationships: withRelationshipsNext[relationship._dotPath] || false },
-                hints: {}
+                builders: { relationships: withRelationshipsNext[relationship._dotPath] || false }
               };
               const subname = relationship.name + ':' + type;
               const _relationship = _.assign({}, relationship, {
@@ -1871,13 +1884,6 @@ module.exports = {
               if (_relationship.buildersByType && _relationship.buildersByType[type]) {
                 _.extend(options.builders, _relationship.buildersByType[type]);
               }
-              if (_relationship.hints) {
-                _.extend(options.hints, _relationship.hints);
-              }
-              if (_relationship.hintsByType && _relationship.hintsByType[type]) {
-                _.extend(options.hints, _relationship.hints);
-                _.extend(options.hints, _relationship.hintsByType[type]);
-              }
               await self.apos.util.recursionGuard(req, `${_relationship.type}:${_relationship.withType}`, () => {
                 // Allow options to the getter to be specified in the schema,
                 return self.fieldTypes[_relationship.type].relate(req, _relationship, _objects, options);
@@ -1912,8 +1918,7 @@ module.exports = {
 
           const options = {
             find: find,
-            builders: { relationships: withRelationshipsNext[relationship._dotPath] || false },
-            hints: {}
+            builders: { relationships: withRelationshipsNext[relationship._dotPath] || false }
           };
 
           // Allow options to the get() method to be
@@ -1921,9 +1926,6 @@ module.exports = {
           if (relationship.builders) {
             _.extend(options.builders, relationship.builders);
           }
-          if (relationship.hints) {
-            _.extend(options.hints, relationship.hints);
-          }
 
           // Allow options to the getter to be specified in the schema
           await self.apos.util.recursionGuard(req, `${relationship.type}:${relationship.withType}`, () => {
@@ -2479,25 +2481,24 @@ module.exports = {
           return idsStorageFields[name] || name;
         }
       },
-      groupsToArray(groups) {
+      groupsToArray(groups = {}) {
         return Object.keys(groups).map(name => ({
           name,
           ...groups[name]
         }));
       },
-      fieldsToArray(context, fields) {
+      fieldsToArray(context, fields = {}) {
         const result = [];
         for (const name of Object.keys(fields)) {
           const field = {
             name,
             ...fields[name]
           };
+          const fieldTypesWithSchemas = [ 'object', 'array', 'relationship' ];
           // TODO same for relationship schemas but they are being refactored in another PR
-          if ((field.type === 'object') || (field.type === 'array') || (field.type === 'relationship')) {
-            if (field.type !== 'relationship') {
-              if (!field.fields) {
-                throw new Error(`${context}: the subfield ${name} requires a 'fields' property, with an 'add' subproperty containing its own fields.`);
-              }
+          if (fieldTypesWithSchemas.includes(field.type)) {
+            if (field.type !== 'relationship' && !field.fields) {
+              throw new Error(`${context}: the subfield ${name} requires a 'fields' property, with an 'add' subproperty containing its own fields.`);
             }
             if (field.fields) {
               if (!field.fields.add) {
@@ -2507,11 +2508,16 @@ module.exports = {
                   throw new Error(`${context}: the subfield ${name} must have a 'fields' property with an 'add' subproperty containing its own fields.`);
                 }
               }
-              field.schema = self.fieldsToArray(context, field.fields.add || {});
+
+              field.schema = self.compose({
+                addFields: self.fieldsToArray(context, field.fields.add),
+                arrangeFields: self.groupsToArray(field.fields.group)
+              });
             }
           }
           result.push(field);
         }
+
         return result;
       },
       // Array "managers" currently offer just a schema property, for parallelism

package/modules/@apostrophecms/schema/ui/apos/components/AposInputArea.vue

@@ -22,6 +22,7 @@
           :id="next._id"
           :field-id="field._id"
           :field="field"
+          :generation="generation"
           @changed="changed"
         />
       </div>
@@ -37,6 +38,15 @@ import cuid from 'cuid';
 export default {
   name: 'AposInputArea',
   mixins: [ AposInputMixin ],
+  props: {
+    generation: {
+      type: Number,
+      required: false,
+      default() {
+        return null;
+      }
+    }
+  },
   data () {
     return {
       next: this.value.data || this.getEmptyValue(),

package/modules/@apostrophecms/schema/ui/apos/components/AposInputObject.vue

@@ -14,6 +14,7 @@
             :schema="field.schema"
             :trigger-validation="triggerValidation"
             :utility-rail="false"
+            :generation="generation"
             v-model="schemaInput"
             ref="schema"
           />
@@ -25,13 +26,21 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
-import { klona } from 'klona';
 
 export default {
   name: 'AposInputObject',
   mixins: [ AposInputMixin ],
+  props: {
+    generation: {
+      type: Number,
+      required: false,
+      default() {
+        return null;
+      }
+    }
+  },
   data () {
-    const next = this.value ? this.value.data : (this.field.def || {});
+    const next = this.getNext();
     return {
       schemaInput: {
         data: next
@@ -42,6 +51,12 @@ export default {
   watch: {
     schemaInput() {
       this.next = this.schemaInput.data;
+    },
+    generation() {
+      this.next = this.getNext();
+      this.schemaInput = {
+        data: this.next
+      };
     }
   },
   methods: {
@@ -49,6 +64,10 @@ export default {
       if (this.schemaInput.hasErrors) {
         return 'invalid';
       }
+    },
+    // Return next at mount or when generation changes
+    getNext() {
+      return this.value ? this.value.data : (this.field.def || {});
     }
   }
 };
@@ -64,4 +83,4 @@ export default {
   .apos-input-object ::v-deep .apos-schema .apos-field {
     margin-bottom: 30px;
   }
-</style>
+</style>

package/modules/@apostrophecms/schema/ui/apos/components/AposInputRelationship.vue

@@ -43,6 +43,8 @@
           :value="next"
           :disabled="field.readOnly"
           :has-relationship-schema="!!field.schema"
+          :editor-label="field.editorLabel"
+          :editor-icon="field.editorIcon"
         />
         <AposSearchList
           :list="searchList"
@@ -57,6 +59,7 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import { klona } from 'klona';
 
 export default {
   name: 'AposInputRelationship',
@@ -64,18 +67,21 @@ export default {
   emits: [ 'input' ],
   data () {
     const next = (this.value && Array.isArray(this.value.data))
-      ? this.value.data : (this.field.def || []);
+      ? klona(this.value.data) : (klona(this.field.def) || []);
+
+    // Remember relationship subfield values even if a document
+    // is temporarily deselected, easing the user's pain if they
+    // inadvertently deselect something for a moment
+    const subfields = Object.fromEntries(
+      (next || []).filter(doc => doc._fields)
+        .map(doc => [ doc._id, doc._fields ])
+    );
+
     return {
       searchTerm: '',
       searchList: [],
       next,
-      // Remember relationship subfield values even if a document
-      // is temporarily deselected, easing the user's pain if they
-      // inadvertently deselect something for a moment
-      subfields: Object.fromEntries((this.next || [])
-        .filter(doc => doc._fields)
-        .map(doc => [ doc._id, doc._fields ])
-      ),
+      subfields,
       disabled: false,
       searching: false,
       choosing: false,
@@ -129,18 +135,16 @@ export default {
       }
     }
   },
+  mounted () {
+    this.checkLimit();
+  },
   methods: {
     validate(value) {
+      this.checkLimit();
+
       if (this.field.required && !value.length) {
         return { message: 'required' };
       }
-      if (this.limitReached) {
-        this.searchTerm = 'Limit reached!';
-        this.disabled = true;
-      } else {
-        this.searchTerm = '';
-        this.disabled = false;
-      }
 
       if (this.field.min && this.field.min > value.length) {
         return { message: `minimum of ${this.field.min} required` };
@@ -148,31 +152,54 @@ export default {
 
       return false;
     },
+    checkLimit() {
+      if (this.limitReached) {
+        this.searchTerm = 'Limit reached!';
+      } else if (this.searchTerm === 'Limit reached!') {
+        this.searchTerm = '';
+      }
+
+      this.disabled = !!this.limitReached;
+    },
     updateSelected(items) {
       this.next = items;
     },
     async input () {
-      if (!this.searching) {
-        if (this.searchTerm.length) {
-          this.searching = true;
-          const list = await apos.http.get(`${apos.modules[this.field.withType].action}?autocomplete=${this.searchTerm}`, {
-            busy: false,
-            draft: true
-          });
-          // filter items already selected
-          this.searchList = list.results.filter(item => {
-            return !this.next.map(i => i._id).includes(item._id);
-          }).map(item => {
-            return {
-              ...item,
-              disabled: this.disableUnpublished && !item.lastPublishedAt
-            };
-          });
-          this.searching = false;
-        } else {
-          this.searchList = [];
-        }
+      if (this.searching) {
+        return;
+      }
+
+      if (!this.searchTerm.length) {
+        this.searchList = [];
+        return;
+      }
+
+      const qs = {
+        autocomplete: this.searchTerm
+      };
+
+      if (this.field.withType === '@apostrophecms/image') {
+        apos.bus.$emit('piece-relationship-query', qs);
       }
+
+      this.searching = true;
+      const list = await apos.http.get(
+        apos.modules[this.field.withType].action,
+        {
+          busy: false,
+          draft: true,
+          qs
+        }
+      );
+      // filter items already selected
+      this.searchList = list.results
+        .filter(item => !this.next.map(i => i._id).includes(item._id))
+        .map(item => ({
+          ...item,
+          disabled: this.disableUnpublished && !item.lastPublishedAt
+        }));
+
+      this.searching = false;
     },
     handleFocusOut() {
       // hide search list when click outside the input
@@ -198,11 +225,15 @@ export default {
       }
     },
     async editRelationship (item) {
-      const result = await apos.modal.execute('AposRelationshipEditor', {
+      const editor = this.field.editor || 'AposRelationshipEditor';
+
+      const result = await apos.modal.execute(editor, {
         schema: this.field.schema,
+        item,
         title: item.title,
         value: item._fields
       });
+
       if (result) {
         const index = this.next.findIndex(_item => _item._id === item._id);
         this.$set(this.next, index, {
@@ -210,6 +241,11 @@ export default {
           _fields: result
         });
       }
+    },
+    getEditRelationshipLabel () {
+      if (this.field.editor === 'AposImageRelationshipEditor') {
+        return 'apostrophe:editImageAdjustments';
+      }
     }
   }
 };

package/modules/@apostrophecms/schema/ui/apos/components/AposInputSelect.vue

@@ -7,26 +7,13 @@
     :display-options="displayOptions"
   >
     <template #body>
-      <div class="apos-input-wrapper">
-        <select
-          class="apos-input apos-input--select" :id="uid"
-          @change="change($event.target.value)"
-          :disabled="field.readOnly"
-        >
-          <option
-            v-for="choice in choices" :key="JSON.stringify(choice.value)"
-            :value="JSON.stringify(choice.value)"
-            :selected="choice.value === value.data"
-          >
-            {{ $t(choice.label) }}
-          </option>
-        </select>
-        <AposIndicator
-          icon="menu-down-icon"
-          class="apos-input-icon"
-          :icon-size="20"
-        />
-      </div>
+      <AposSelect
+        :icon="icon"
+        :choices="choices"
+        :disabled="field.readOnly"
+        :selected="value.data"
+        @change="change"
+      />
     </template>
   </AposInputWrapper>
 </template>
@@ -105,9 +92,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.apos-input-icon {
-  @include apos-transition();
-}
-</style>

package/modules/@apostrophecms/schema/ui/apos/components/AposInputString.vue

@@ -172,6 +172,14 @@ export default {
         if ((s == null) || (s === '')) {
           return s;
         } else {
+          // The native parse float converts 3.0 to 3 and makes
+          // next to become integer. In theory we don't need parseFloat
+          // as the value is natively guarded by the browser 'number' type.
+          // However we need a float value sent to the backend
+          // and we force that when focus is lost.
+          if (this.focus && `${s}`.match(/\.[0]*$/)) {
+            return s;
+          }
           return parseFloat(s);
         }
       } else {

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

@@ -1,5 +1,26 @@
 <!--
-  AposSchema takes an array of fields with their values, renders their inputs, and emits their `input` events
+  AposSchema takes an array of fields (`schema`), renders their inputs,
+  and emits a new object with a `value` subproperty and a `hasErrors`
+  subproperty via the input event whenever the value of a field
+  or subfield changes.
+
+  At mount time the fields are initialized from the subproperties of the
+  `value.data` prop.
+
+  For performance reasons, this component is not strictly v-model compliant.
+  While all changes will emit an outgoing `input` event, the
+  incoming `value` prop only updates the fields in three situations:
+
+  1. At mount time, to set the initial values of the fields.
+
+  2. When `value.data._id` changes (an entirely different document is in play).
+
+  3. When the optional prop `generation` changes to a new number. This
+  prop is also passed on to the individual input field components.
+
+  If you need to force an update from the calling component, increment the
+  `generation` prop. This should be done only if the value has changed for
+  an external reason.
 -->
 <template>
   <div class="apos-schema">
@@ -20,6 +41,7 @@
         :server-error="fields[field.name].serverError"
         :doc-id="docId"
         :ref="field.name"
+        :generation="generation"
       />
     </div>
   </div>
@@ -35,6 +57,13 @@ export default {
       type: Object,
       required: true
     },
+    generation: {
+      type: Number,
+      required: false,
+      default() {
+        return null;
+      }
+    },
     schema: {
       type: Array,
       required: true
@@ -135,22 +164,23 @@ export default {
     schema() {
       this.populateDocData();
     },
-    value: {
-      deep: true,
-      handler(newVal, oldVal) {
-        // The doc might be swapped out completely in cases such as the media
-        // library editor. Repopulate the fields if that happens.
-        if (
-          // If the fieldState had been cleared and there's new populated data
-          (!this.fieldState._id && newVal.data._id) ||
-          // or if there *is* active fieldState, but the new data is a new doc
-          (this.fieldState._id && newVal.data._id !== this.fieldState._id.data)
-        ) {
-          // repopulate the schema.
-          this.populateDocData();
-        }
+    'value.data._id'(_id) {
+      // The doc might be swapped out completely in cases such as the media
+      // library editor. Repopulate the fields if that happens.
+      if (
+        // If the fieldState had been cleared and there's new populated data
+        (!this.fieldState._id && _id) ||
+        // or if there *is* active fieldState, but the new data is a new doc
+        (this.fieldState._id && _id !== this.fieldState._id.data)
+      ) {
+        // repopulate the schema.
+        this.populateDocData();
       }
     },
+    generation() {
+      // repopulate the schema.
+      this.populateDocData();
+    },
     conditionalFields(newVal, oldVal) {
       for (const field in oldVal) {
         if (!this.fieldState[field] || (newVal[field] === oldVal[field]) || !this.fieldState[field].ranValidation) {