apostrophe 3.53.0 → 3.55.0

package/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js

@@ -0,0 +1,361 @@
+import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
+import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+import cuid from 'cuid';
+import { klona } from 'klona';
+import { get } from 'lodash';
+import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
+
+export default {
+  name: 'AposArrayEditor',
+  mixins: [
+    AposModifiedMixin,
+    AposEditorMixin
+  ],
+  props: {
+    items: {
+      required: true,
+      type: Array
+    },
+    field: {
+      required: true,
+      type: Object
+    },
+    serverError: {
+      type: Object,
+      default: null
+    },
+    docId: {
+      type: String,
+      default: null
+    },
+    parentFollowingValues: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: [ 'modal-result', 'safe-close' ],
+  data() {
+    // Automatically add `_id` to default items
+    const items = this.items.map(item => ({
+      ...item,
+      _id: item._id || cuid()
+    }));
+
+    return {
+      currentId: null,
+      currentDoc: null,
+      modal: {
+        active: false,
+        type: 'overlay',
+        showModal: false
+      },
+      modalTitle: {
+        key: 'apostrophe:editType',
+        type: this.$t(this.field.label)
+      },
+      titleFieldChoices: null,
+      // If we don't clone, then we're making
+      // permanent modifications whether the user
+      // clicks save or not
+      next: klona(items),
+      original: klona(items),
+      triggerValidation: false,
+      minError: false,
+      maxError: false,
+      cancelDescription: 'apostrophe:arrayCancelDescription'
+    };
+  },
+  computed: {
+    moduleOptions() {
+      return window.apos.schema || {};
+    },
+    itemError() {
+      return this.currentDoc && this.currentDoc.hasErrors;
+    },
+    valid() {
+      return !(this.minError || this.maxError || this.itemError);
+    },
+    maxed() {
+      return (this.field.max !== undefined) && (this.next.length >= this.field.max);
+    },
+    schema() {
+      // For AposDocEditorMixin
+      return (this.field.schema || []).filter(field => apos.schema.components.fields[field.type]);
+    },
+    countLabel() {
+      return this.$t('apostrophe:numberAdded', {
+        count: this.next.length
+      });
+    },
+    // Here in the array editor we use effectiveMin to factor in the
+    // required property because there is no other good place to do that,
+    // unlike the input field wrapper which has a separate visual
+    // representation of "required".
+    minLabel() {
+      if (this.effectiveMin) {
+        return this.$t('apostrophe:minUi', {
+          number: this.effectiveMin
+        });
+      } else {
+        return false;
+      }
+    },
+    maxLabel() {
+      if ((typeof this.field.max) === 'number') {
+        return this.$t('apostrophe:maxUi', {
+          number: this.field.max
+        });
+      } else {
+        return false;
+      }
+    },
+    effectiveMin() {
+      if (this.field.min) {
+        return this.field.min;
+      } else if (this.field.required) {
+        return 1;
+      } else {
+        return 0;
+      }
+    },
+    currentDocServerErrors() {
+      let serverErrors = null;
+      ((this.serverError && this.serverError.data && this.serverError.data.errors) || []).forEach(error => {
+        const [ _id, fieldName ] = error.path.split('.');
+        if (_id === this.currentId) {
+          serverErrors = serverErrors || {};
+          serverErrors[fieldName] = error;
+        }
+      });
+      return serverErrors;
+    }
+  },
+  async mounted() {
+    this.modal.active = true;
+    if (this.next.length) {
+      this.select(this.next[0]._id);
+    }
+    if (this.serverError && this.serverError.data && this.serverError.data.errors) {
+      const first = this.serverError.data.errors[0];
+      const [ _id, name ] = first.path.split('.');
+      await this.select(_id);
+      const aposSchema = this.$refs.schema;
+      await this.nextTick();
+      aposSchema.scrollFieldIntoView(name);
+    }
+    this.titleFieldChoices = await this.getTitleFieldChoices();
+  },
+  methods: {
+    async select(_id) {
+      if (this.currentId === _id) {
+        return;
+      }
+      if (await this.validate(true, false)) {
+        // Force the array editor to totally reset to avoid in-schema
+        // animations when switching (e.g., the relationship input).
+        this.currentDocToCurrentItem();
+        this.currentId = null;
+        await this.nextTick();
+        this.currentId = _id;
+        this.currentDoc = {
+          hasErrors: false,
+          data: this.next.find(item => item._id === _id)
+        };
+        this.triggerValidation = false;
+      }
+    },
+    update(items) {
+      // Take care to use the same items in order to avoid
+      // losing too much state inside draggable, otherwise
+      // drags fail
+      this.next = items.map(item => this.next.find(_item => item._id === _item._id));
+      if (this.currentId) {
+        if (!this.next.find(item => item._id === this.currentId)) {
+          this.currentId = null;
+          this.currentDoc = null;
+        }
+      }
+      this.updateMinMax();
+    },
+    currentDocUpdate(currentDoc) {
+      this.currentDoc = currentDoc;
+    },
+    async add() {
+      if (await this.validate(true, false)) {
+        const item = this.newInstance();
+        item._id = cuid();
+        this.next.push(item);
+        this.select(item._id);
+        this.updateMinMax();
+      }
+    },
+    updateMinMax() {
+      let minError = false;
+      let maxError = false;
+      if (this.effectiveMin) {
+        if (this.next.length < this.effectiveMin) {
+          minError = true;
+        }
+      }
+      if (this.field.max !== undefined) {
+        if (this.next.length > this.field.max) {
+          maxError = true;
+        }
+      }
+      this.minError = minError;
+      this.maxError = maxError;
+    },
+    async submit() {
+      if (await this.validate(true, true)) {
+        this.currentDocToCurrentItem();
+        for (const item of this.next) {
+          item.metaType = 'arrayItem';
+          item.scopedArrayName = this.field.scopedArrayName;
+        }
+        this.$emit('modal-result', this.next);
+        this.modal.showModal = false;
+      }
+    },
+    currentDocToCurrentItem() {
+      if (!this.currentId) {
+        return;
+      }
+      const currentIndex = this.next.findIndex(item => item._id === this.currentId);
+      this.next[currentIndex] = this.currentDoc.data;
+    },
+    getFieldValue(name) {
+      return this.currentDoc.data[name];
+    },
+    isModified() {
+      if (this.currentId) {
+        const currentIndex = this.next.findIndex(item => item._id === this.currentId);
+        if (detectDocChange(this.schema, this.next[currentIndex], this.currentDoc.data)) {
+          return true;
+        }
+      }
+      if (this.next.length !== this.original.length) {
+        return true;
+      }
+      for (let i = 0; (i < this.next.length); i++) {
+        if (this.next[i]._id !== this.original[i]._id) {
+          return true;
+        }
+        if (detectDocChange(this.schema, this.next[i], this.original[i])) {
+          return true;
+        }
+      }
+      return false;
+    },
+    async validate(validateItem, validateLength) {
+      if (validateItem) {
+        this.triggerValidation = true;
+      }
+      await this.nextTick();
+      if (validateLength) {
+        this.updateMinMax();
+      }
+      if (
+        (validateLength && (this.minError || this.maxError)) ||
+        (validateItem && (this.currentDoc && this.currentDoc.hasErrors))
+      ) {
+        await apos.notify('apostrophe:resolveErrorsFirst', {
+          type: 'warning',
+          icon: 'alert-circle-icon',
+          dismiss: true
+        });
+        return false;
+      } else {
+        return true;
+      }
+    },
+    // Awaitable nextTick
+    nextTick() {
+      return new Promise((resolve, reject) => {
+        this.$nextTick(() => {
+          return resolve();
+        });
+      });
+    },
+    newInstance() {
+      const instance = {};
+      for (const field of this.schema) {
+        if (field.def !== undefined) {
+          instance[field.name] = klona(field.def);
+        }
+      }
+      return instance;
+    },
+    label(item) {
+      let candidate;
+      if (this.field.titleField) {
+
+        // Initial field value
+        candidate = get(item, this.field.titleField);
+
+        // If the titleField references a select input, use the
+        // select label as the slat label, rather than the value.
+        if (this.titleFieldChoices) {
+          const choice = this.titleFieldChoices.find(choice => choice.value === candidate);
+          if (choice && choice.label) {
+            candidate = choice.label;
+          }
+        }
+
+      } else if (this.schema.find(field => field.name === 'title') && (item.title !== undefined)) {
+        candidate = item.title;
+      }
+      if ((candidate == null) || candidate === '') {
+        for (let i = 0; (i < this.next.length); i++) {
+          if (this.next[i]._id === item._id) {
+            candidate = `#${i + 1}`;
+            break;
+          }
+        }
+      }
+      return candidate;
+    },
+    withLabels(items) {
+      const result = items.map(item => ({
+        ...item,
+        title: this.label(item)
+      }));
+      return result;
+    },
+    async getTitleFieldChoices() {
+      // If the titleField references a select input, get it's choices
+      // to use as labels for the slat UI
+
+      let choices = null;
+      const titleField = this.schema.find(field => field.name === this.field.titleField);
+
+      // The titleField is a select
+      if (titleField?.choices) {
+
+        // Choices are provided by a method
+        if (typeof titleField.choices === 'string') {
+          const action = `${this.moduleOptions.action}/choices`;
+          try {
+            const result = await apos.http.get(
+              action,
+              {
+                qs: {
+                  fieldId: titleField._id
+                }
+              }
+            );
+            if (result && result.choices) {
+              choices = result.choices;
+            }
+          } catch (e) {
+            console.error(this.$t('apostrophe:errorFetchingTitleFieldChoicesByMethod', { name: titleField.name }));
+          }
+
+        // Choices are a normal, hardcoded array
+        } else if (Array.isArray(titleField.choices)) {
+          choices = titleField.choices;
+        }
+      }
+      return choices;
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputArea.js

@@ -0,0 +1,89 @@
+
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+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(),
+      error: false,
+      // This is just meant to be sufficient to prevent unintended collisions
+      // in the UI between id attributes
+      uid: Math.random()
+    };
+  },
+  computed: {
+    editorComponent() {
+      return window.apos.area.components.editor;
+    },
+    choices() {
+      const result = [];
+
+      let widgets = this.field.options.widgets || {};
+      if (this.field.options.groups) {
+        for (const group of Object.entries(this.field.options.groups)) {
+          widgets = {
+            ...widgets,
+            ...group.widgets
+          };
+        }
+      }
+
+      for (const [ name, options ] of Object.entries(widgets)) {
+        result.push({
+          name,
+          label: options.addLabel || apos.modules[`${name}-widget`].label
+        });
+      }
+      return result;
+    }
+  },
+  methods: {
+    getEmptyValue() {
+      return {
+        metaType: 'area',
+        _id: cuid(),
+        items: []
+      };
+    },
+    watchValue () {
+      this.error = this.value.error;
+      this.next = this.value.data || this.getEmptyValue();
+    },
+    validate(value) {
+      if (this.field.required) {
+        if (!value.items.length) {
+          return 'required';
+        }
+      }
+      if (this.field.min) {
+        if (value.items.length && (value.items.length < this.field.min)) {
+          return 'min';
+        }
+      }
+      if (this.field.max) {
+        if (value.items.length && (value.items.length > this.field.max)) {
+          return 'max';
+        }
+      }
+      return false;
+    },
+    changed($event) {
+      this.next = {
+        ...this.next,
+        items: $event.items
+      };
+    }
+  }
+};

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputArray.js

@@ -0,0 +1,257 @@
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import AposInputFollowingMixin from 'Modules/@apostrophecms/schema/mixins/AposInputFollowingMixin.js';
+import AposInputConditionalFieldsMixin from 'Modules/@apostrophecms/schema/mixins/AposInputConditionalFieldsMixin.js';
+
+import cuid from 'cuid';
+import { klona } from 'klona';
+import { get } from 'lodash';
+import draggable from 'vuedraggable';
+
+export default {
+  name: 'AposInputArray',
+  components: { draggable },
+  mixins: [
+    AposInputMixin,
+    AposInputFollowingMixin,
+    AposInputConditionalFieldsMixin
+  ],
+  props: {
+    generation: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    const next = this.getNext();
+    const data = {
+      next,
+      items: modelItems(next, this.field)
+    };
+    return data;
+  },
+  computed: {
+    // required by the conditional fields mixin
+    schema() {
+      return this.field.schema;
+    },
+    alwaysExpand() {
+      return alwaysExpand(this.field);
+    },
+    listId() {
+      return `sortableList-${cuid()}`;
+    },
+    dragOptions() {
+      return {
+        disabled: !this.field.draggable || this.field.readOnly || this.next.length <= 1,
+        ghostClass: 'apos-is-dragging',
+        handle: '.apos-drag-handle'
+      };
+    },
+    itemLabel() {
+      return this.field.itemLabel
+        ? {
+          key: 'apostrophe:addType',
+          type: this.$t(this.field.itemLabel)
+        }
+        : 'apostrophe:addItem';
+    },
+    editLabel() {
+      return {
+        key: 'apostrophe:editType',
+        type: this.$t(this.field.label)
+      };
+    },
+    effectiveError() {
+      const error = this.error || this.serverError;
+      // Server-side errors behave differently
+      const name = error?.name || error;
+      if (name === 'invalid') {
+        // Always due to a subproperty which will display its own error,
+        // don't confuse the user
+        return false;
+      }
+      return error;
+    }
+  },
+  watch: {
+    generation() {
+      this.next = this.getNext();
+      this.items = modelItems(this.next, this.field);
+    },
+    items: {
+      deep: true,
+      handler() {
+        const erroneous = this.items.filter(item => item.schemaInput.hasErrors);
+        if (erroneous.length) {
+          erroneous.forEach(item => {
+            if (!item.open) {
+              // Make errors visible
+              item.open = true;
+            }
+          });
+        } else {
+          const next = this.items.map(item => ({
+            ...item.schemaInput.data,
+            _id: item._id,
+            metaType: 'arrayItem',
+            scopedArrayName: this.field.scopedArrayName
+          }));
+          this.next = next;
+        }
+        // Our validate method was called first before that of
+        // the subfields, so remedy that by calling again on any
+        // change to the subfield state during validation
+        if (this.triggerValidation) {
+          this.validateAndEmit();
+        }
+      }
+    }
+  },
+  async created() {
+    if (this.field.inline) {
+      await this.evaluateExternalConditions();
+    }
+  },
+  methods: {
+    validate(value) {
+      if (this.items.find(item => item.schemaInput.hasErrors)) {
+        return 'invalid';
+      }
+      if (this.field.required && !value.length) {
+        return 'required';
+      }
+      if (this.field.min && value.length < this.field.min) {
+        return 'min';
+      }
+      if (this.field.max && value.length > this.field.max) {
+        return 'max';
+      }
+      if (value.length && this.field.fields && this.field.fields.add) {
+        const [ uniqueFieldName, uniqueFieldSchema ] = Object.entries(this.field.fields.add).find(([ , subfield ]) => subfield.unique) || [];
+        if (uniqueFieldName) {
+          const duplicates = this.next
+            .map(item =>
+              Array.isArray(item[uniqueFieldName])
+                ? item[uniqueFieldName].map(i => i._id).sort().join('|')
+                : item[uniqueFieldName])
+            .filter((item, index, array) => array.indexOf(item) !== index);
+
+          if (duplicates.length) {
+            duplicates.forEach(duplicate => {
+              this.items.forEach(item => {
+                uniqueFieldSchema.type === 'relationship'
+                  ? item.schemaInput.data[uniqueFieldName] && item.schemaInput.data[uniqueFieldName].forEach(datum => {
+                    item.schemaInput.fieldState[uniqueFieldName].duplicate = duplicate.split('|').find(i => i === datum._id);
+                  })
+                  : item.schemaInput.fieldState[uniqueFieldName].duplicate = item.schemaInput.data[uniqueFieldName] === duplicate;
+              });
+            });
+
+            return {
+              name: 'duplicate',
+              message: `${this.$t('apostrophe:duplicateError')} ${this.$t(uniqueFieldSchema.label) || uniqueFieldName}`
+            };
+          }
+        }
+      }
+      return false;
+    },
+    async edit() {
+      const result = await apos.modal.execute('AposArrayEditor', {
+        field: this.field,
+        items: this.next,
+        serverError: this.serverError,
+        docId: this.docId,
+        parentFollowingValues: this.followingValues
+      });
+      if (result) {
+        this.next = result;
+      }
+    },
+    getNext() {
+      // Next should consistently be an array.
+      return (this.value && Array.isArray(this.value.data))
+        ? this.value.data : (this.field.def || []);
+    },
+    disableAdd() {
+      return this.field.max && (this.items.length >= this.field.max);
+    },
+    remove(_id) {
+      this.items = this.items.filter(item => item._id !== _id);
+    },
+    add() {
+      const _id = cuid();
+      this.items.push({
+        _id,
+        schemaInput: {
+          data: this.newInstance()
+        },
+        open: alwaysExpand(this.field)
+      });
+      this.openInlineItem(_id);
+    },
+    newInstance() {
+      const instance = {};
+      for (const field of this.field.schema) {
+        if (field.def !== undefined) {
+          instance[field.name] = klona(field.def);
+        }
+      }
+      return instance;
+    },
+    getLabel(id, index) {
+      const titleField = this.field.titleField || null;
+      const item = this.items.find(item => item._id === id);
+      return get(item.schemaInput.data, titleField) || `Item ${index + 1}`;
+    },
+    openInlineItem(id) {
+      this.items.forEach(item => {
+        item.open = (item._id === id) || this.alwaysExpand;
+      });
+    },
+    closeInlineItem(id) {
+      this.items.forEach(item => {
+        item.open = this.alwaysExpand;
+      });
+    },
+    getFollowingValues(item) {
+      return this.computeFollowingValues(item.schemaInput.data);
+    },
+    // Retrieve table heading fields from the schema, based on the currently
+    // opened item. Available only when the field style is `table`.
+    visibleSchema() {
+      if (this.field.style !== 'table') {
+        return this.schema;
+      }
+      const currentItem = this.items.find(item => item.open) || this.items[this.items.length - 1];
+      const conditions = this.conditionalFields(currentItem?.schemaInput?.data || {});
+      return this.schema.filter(
+        field => conditions[field.name] !== false
+      );
+    }
+  }
+};
+
+function modelItems(items, field) {
+  return items.map(item => {
+    const open = alwaysExpand(field);
+    return {
+      _id: item._id || cuid(),
+      schemaInput: {
+        data: item
+      },
+      open
+    };
+  });
+}
+
+function alwaysExpand(field) {
+  if (!field.inline) {
+    return false;
+  }
+  if (field.inline.alwaysExpand === undefined) {
+    return field.schema.length < 3;
+  }
+  return field.inline.alwaysExpand;
+}