apostrophe 3.53.0 → 3.55.0

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

@@ -0,0 +1,262 @@
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import { klona } from 'klona';
+
+export default {
+  name: 'AposInputRelationship',
+  mixins: [ AposInputMixin ],
+  emits: [ 'input' ],
+  data () {
+    const next = (this.value && Array.isArray(this.value.data))
+      ? 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,
+      subfields,
+      disabled: false,
+      searching: false,
+      choosing: false,
+      relationshipSchema: null
+    };
+  },
+  computed: {
+    limitReached() {
+      return this.field.max === this.next.length;
+    },
+    pluralLabel() {
+      return apos.modules[this.field.withType].pluralLabel;
+    },
+    // TODO get 'Search' server for better i18n
+    placeholder() {
+      return this.field.placeholder || {
+        key: 'apostrophe:searchDocType',
+        type: this.$t(this.pluralLabel)
+      };
+    },
+    // TODO get 'Browse' for better i18n
+    browseLabel() {
+      return {
+        key: 'apostrophe:browseDocType',
+        type: this.$t(this.pluralLabel)
+      };
+    },
+    suggestion() {
+      return {
+        disabled: true,
+        tooltip: false,
+        icon: false,
+        classes: [ 'suggestion' ],
+        title: this.$t(this.field.suggestionLabel),
+        help: this.$t({
+          key: this.field.suggestionHelp || 'apostrophe:relationshipSuggestionHelp',
+          type: this.$t(this.pluralLabel)
+        }),
+        customFields: [ 'help' ]
+      };
+    },
+    hint() {
+      return {
+        disabled: true,
+        tooltip: false,
+        icon: 'binoculars-icon',
+        iconSize: 35,
+        classes: [ 'hint' ],
+        title: this.$t('apostrophe:relationshipSuggestionNoResults'),
+        help: this.$t({
+          key: this.field.browse
+            ? 'apostrophe:relationshipSuggestionSearchAndBrowse'
+            : 'apostrophe:relationshipSuggestionSearch',
+          type: this.$t(this.pluralLabel)
+        }),
+        customFields: [ 'help' ]
+      };
+    },
+    chooserComponent () {
+      return apos.modules[this.field.withType].components.managerModal;
+    },
+    disableUnpublished() {
+      return apos.modules[this.field.withType].localized;
+    },
+    buttonModifiers() {
+      const modifiers = [ 'small' ];
+      if (this.modifiers.includes('no-search')) {
+        modifiers.push('block');
+      }
+      return modifiers;
+    },
+    minSize() {
+      const [ widgetOptions = {} ] = apos.area.widgetOptions;
+
+      return widgetOptions.minSize || [];
+    },
+    duplicate () {
+      return this.value.duplicate ? 'apos-input--error' : null;
+    }
+  },
+  watch: {
+    next(after, before) {
+      for (const doc of before) {
+        this.subfields[doc._id] = doc._fields;
+      }
+      for (const doc of after) {
+        if (Object.keys(doc._fields || {}).length) {
+          continue;
+        }
+        doc._fields = this.field.schema && (this.subfields[doc._id]
+          ? this.subfields[doc._id]
+          : this.getDefault());
+      }
+    }
+  },
+  mounted () {
+    this.checkLimit();
+  },
+  methods: {
+    validate(value) {
+      this.checkLimit();
+
+      if (this.field.required && !value.length) {
+        return { message: 'required' };
+      }
+
+      if (this.field.min && this.field.min > value.length) {
+        return { message: `minimum of ${this.field.min} required` };
+      }
+
+      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 search(qs) {
+      if (this.field.suggestionLimit) {
+        qs.perPage = this.field.suggestionLimit;
+      }
+      if (this.field.suggestionSort) {
+        qs.sort = this.field.suggestionSort;
+      }
+      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
+        }
+      );
+
+      const removeSelectedItem = item => !this.next.map(i => i._id).includes(item._id);
+      const formatItems = item => ({
+        ...item,
+        disabled: this.disableUnpublished && !item.lastPublishedAt
+      });
+
+      const results = (list.results || [])
+        .filter(removeSelectedItem)
+        .map(formatItems);
+
+      const suggestion = !qs.autocomplete && this.suggestion;
+      const hint = (!qs.autocomplete || !results.length) && this.hint;
+
+      this.searchList = [ suggestion, ...results, hint ].filter(Boolean);
+      this.searching = false;
+    },
+    async input () {
+      if (this.searching) {
+        return;
+      }
+
+      const trimmed = this.searchTerm.trim();
+      const qs = trimmed.length
+        ? {
+          autocomplete: trimmed
+        }
+        : {};
+
+      await this.search(qs);
+    },
+    handleFocusOut() {
+      // hide search list when click outside the input
+      // timeout to execute "@select" method before
+      setTimeout(() => {
+        this.searchList = [];
+      }, 200);
+    },
+    watchValue () {
+      this.error = this.value.error;
+      // Ensure the internal state is an array.
+      this.next = Array.isArray(this.value.data) ? this.value.data : [];
+    },
+    async choose () {
+      const result = await apos.modal.execute(this.chooserComponent, {
+        title: this.field.label || this.field.name,
+        moduleName: this.field.withType,
+        chosen: this.next,
+        relationshipField: this.field
+      });
+      if (result) {
+        this.updateSelected(result);
+      }
+    },
+    async editRelationship (item) {
+      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, {
+          ...this.next[index],
+          _fields: result
+        });
+      }
+    },
+    getEditRelationshipLabel () {
+      if (this.field.editor === 'AposImageRelationshipEditor') {
+        return 'apostrophe:editImageAdjustments';
+      }
+    },
+    getDefault() {
+      const object = {};
+      this.field.schema.forEach(field => {
+        if (field.name.startsWith('_')) {
+          return;
+        }
+        // Using `hasOwn` here, not simply checking if `field.def` is truthy
+        // so that `false`, `null`, `''` or `0` are taken into account:
+        const hasDefaultValue = Object.hasOwn(field, 'def');
+        object[field.name] = hasDefaultValue
+          ? klona(field.def)
+          : null;
+      });
+      return object;
+    }
+  }
+};

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

@@ -0,0 +1,41 @@
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import AposInputChoicesMixin from 'Modules/@apostrophecms/schema/mixins/AposInputChoicesMixin';
+
+export default {
+  name: 'AposInputSelect',
+  mixins: [ AposInputMixin, AposInputChoicesMixin ],
+  props: {
+    icon: {
+      type: String,
+      default: 'menu-down-icon'
+    }
+  },
+  data() {
+    return {
+      next: (this.value.data == null) ? null : this.value.data,
+      choices: []
+    };
+  },
+  computed: {
+    classes () {
+      return [ this.value.duplicate && 'apos-input--error' ];
+    }
+  },
+  methods: {
+    validate(value) {
+      if (this.field.required && (value === null)) {
+        return 'required';
+      }
+
+      if (value && !this.choices.find(choice => choice.value === value)) {
+        return 'invalid';
+      }
+
+      return false;
+    },
+    change(value) {
+      // Allows expression of non-string values
+      this.next = this.choices.find(choice => choice.value === value).value;
+    }
+  }
+};

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

@@ -0,0 +1,278 @@
+// NOTE: This is a temporary component, copying AposInputString. Base modules
+// already have `type: 'slug'` fields, so this is needed to avoid distracting
+// errors.
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import sluggo from 'sluggo';
+import debounce from 'debounce-async';
+import { klona } from 'klona';
+
+export default {
+  name: 'AposInputSlug',
+  mixins: [ AposInputMixin ],
+  emits: [ 'return' ],
+  data() {
+    return {
+      conflict: false,
+      isArchived: null,
+      originalSlugPartsLength: null
+    };
+  },
+  computed: {
+    tabindex () {
+      return this.field.disableFocus ? '-1' : '0';
+    },
+    type () {
+      if (this.field.type) {
+        return this.field.type;
+      } else {
+        return 'text';
+      }
+    },
+    classes () {
+      return [ 'apos-input', 'apos-input--text', 'apos-input--slug' ];
+    },
+    wrapperClasses () {
+      return [ 'apos-input-wrapper' ].concat(this.localePrefix ? [ 'apos-input-wrapper--with-prefix' ] : []);
+    },
+    icon () {
+      if (this.error) {
+        return 'circle-medium-icon';
+      } else if (this.field.icon) {
+        return this.field.icon;
+      } else {
+        return null;
+      }
+    },
+    prefix () {
+      return this.field.prefix || '';
+    },
+    localePrefix() {
+      return this.field.page && apos.i18n.locales[apos.i18n.locale].prefix;
+    }
+  },
+  watch: {
+    followingValues: {
+      // We are usually interested in followingValue.title, but a
+      // secondary slug field could be configured to watch
+      // one or more other fields
+      deep: true,
+      handler(newValue, oldValue) {
+        const newClone = klona(newValue);
+        const oldClone = klona(oldValue);
+
+        // Track whether the slug is archived for prefixing.
+        this.isArchived = newValue.archived;
+        // We only want the string properties to build the slug itself.
+        delete newClone.archived;
+        delete oldClone.archived;
+
+        oldValue = Object.values(oldClone).join(' ');
+        newValue = Object.values(newClone).join(' ');
+
+        if (this.compatible(oldValue, this.next) && !newValue.archived) {
+          // If this is a page slug, we only replace the last section of the slug.
+          if (this.field.page) {
+            let parts = this.next.split('/');
+            parts = parts.filter(part => part.length > 0);
+            if ((!this.originalSlugPartsLength && parts.length) || (this.originalSlugPartsLength && parts.length === (this.originalSlugPartsLength - 1))) {
+              // Remove last path component so we can replace it
+              parts.pop();
+            }
+            parts.push(this.slugify(newValue, { componentOnly: true }));
+            if (parts[0].length) {
+              // TODO: handle page archives.
+              this.next = `/${parts.join('/')}`;
+            }
+          } else {
+            this.next = this.slugify(newValue);
+          }
+        }
+      }
+    }
+  },
+  async mounted() {
+    this.debouncedCheckConflict = debounce(() => this.checkConflict(), 250);
+    if (this.next.length) {
+      await this.debouncedCheckConflict();
+    }
+    this.originalSlugPartsLength = this.next.split('/').length;
+  },
+  methods: {
+    async watchNext() {
+      this.next = this.slugify(this.next);
+      this.validateAndEmit();
+      try {
+        await this.debouncedCheckConflict();
+      } catch (e) {
+        if (e === 'canceled') {
+          // That's fine
+        } else {
+          throw e;
+        }
+      }
+    },
+    validate(value) {
+      if (this.conflict) {
+        return {
+          name: 'conflict',
+          message: 'apostrophe:slugInUse'
+        };
+      }
+      if (this.field.required) {
+        if (!value.length) {
+          return 'required';
+        }
+      }
+      if (this.field.min) {
+        if (value.length && (value.length < this.field.min)) {
+          return 'min';
+        }
+      }
+      if (this.field.max) {
+        if (value.length && (value.length > this.field.max)) {
+          return 'max';
+        }
+      }
+      return false;
+    },
+    compatible(title, slug) {
+      if ((typeof title) !== 'string') {
+        title = '';
+      }
+      if (this.field.page) {
+        const matches = slug.match(/[^/]+$/);
+        slug = (matches && matches[0]) || '';
+      }
+      return ((title === '') && (slug === `${this.prefix}`)) ||
+        this.slugify(title) === this.slugify(slug);
+    },
+    // if componentOnly is true, we are slugifying just one component of
+    // a slug as part of following the title field, and so we do *not*
+    // want to allow slashes (when editing a page) or set a prefix.
+    slugify(s, { componentOnly = false } = {}) {
+      const options = {
+        def: ''
+      };
+
+      if (this.field.page && !componentOnly) {
+        options.allow = '/';
+      }
+
+      let preserveDash = false;
+      // When you are typing a slug it feels wrong for hyphens you typed
+      // to disappear as you go, so if the last character is not valid in a slug,
+      // restore it after we call sluggo for the full string
+      if (this.focus && s.length && (sluggo(s.charAt(s.length - 1), options) === '')) {
+        preserveDash = true;
+      }
+
+      s = sluggo(s, options);
+      if (preserveDash) {
+        s += '-';
+      }
+
+      if (this.field.page && !componentOnly) {
+        if (!this.followingValues?.title) {
+          const nextParts = this.next.split('/');
+          if (s === nextParts[nextParts.length - 1]) {
+            s = '';
+            if (this.originalSlugPartsLength === nextParts.length) {
+              nextParts.pop();
+            }
+            this.next = nextParts.join('/');
+          }
+        }
+        if (!s.charAt(0) !== '/') {
+          s = `/${s}`;
+        }
+        s = s.replace(/\/+/g, '/');
+        if (s !== '/') {
+          s = s.replace(/\/$/, '');
+        }
+        if (!this.followingValues?.title && s.length) {
+          s += '/';
+        }
+      }
+
+      if (!componentOnly) {
+        s = this.setPrefix(s);
+      }
+
+      return s;
+    },
+    setPrefix (slug) {
+      // Get a fresh clone of the slug.
+      let updated = slug;
+      const archivedRegexp = new RegExp(`^deduplicate-[a-z0-9]+-${this.prefix}`);
+
+      // Prefix if the slug doesn't start with the prefix OR if its archived
+      // and it doesn't start with the dedupe+prefix pattern.
+      if (
+        !updated.startsWith(this.prefix) ||
+        (this.isArchived && !updated.match(archivedRegexp))
+      ) {
+        let archivePrefix = '';
+        // If archived, remove the dedupe pattern to add again later.
+        if (this.isArchived) {
+          archivePrefix = updated.match(/^deduplicate-[a-z0-9]+-/);
+          updated = updated.replace(archivePrefix, '');
+        }
+
+        if (this.prefix.startsWith(updated)) {
+          // If they delete the `-`, and the prefix is `recipe-`,
+          // we want to restore `recipe-`, not set it to `recipe-recipe`
+          updated = this.prefix;
+        } else {
+          // Make sure we're not double prefixing archived slugs.
+          updated = updated.startsWith(this.prefix) ? updated : this.prefix + updated;
+        }
+        // Reapply the dedupe pattern if archived. If being restored from the
+        // doc editor modal it will momentarily be tracked as archived but
+        // without not have the archive prefix, so check that too.
+        updated = this.isArchived && archivePrefix ? `${archivePrefix}${updated}` : updated;
+      }
+
+      return updated;
+    },
+    async checkConflict() {
+      let slug;
+      try {
+        slug = this.next;
+        if (slug.length) {
+          await apos.http.post(`${apos.doc.action}/slug-taken`, {
+            body: {
+              slug,
+              _id: this.docId
+            },
+            draft: true
+          });
+          // Still relevant?
+          if (slug === this.next) {
+            this.conflict = false;
+            this.validateAndEmit();
+          } else {
+            // Can ignore it, another request
+            // probably already in-flight
+          }
+        }
+      } catch (e) {
+        // 409: Conflict (slug in use)
+        if (e.status === 409) {
+          // Still relevant?
+          if (slug === this.next) {
+            this.conflict = true;
+            this.validateAndEmit();
+          } else {
+            // Can ignore it, another request
+            // probably already in-flight
+          }
+        } else {
+          throw e;
+        }
+      }
+    },
+    passFocus() {
+      this.$refs.input.focus();
+    }
+  }
+};