apostrophe 3.63.3 → 4.1.0

package/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue

@@ -27,8 +27,8 @@
             <AposButton
               type="default"
               label="apostrophe:cancel"
-              @click="close"
               :modifiers="[ 'block' ]"
+              @click="close"
             />
           </div>
         </template>
@@ -49,12 +49,12 @@
               class="apos-wizard__step apos-wizard__step-select-content"
             >
               <AposInputRadio
+                v-model="wizard.values.toLocalize"
                 :field="{
                   name: 'toLocalize',
                   label: 'apostrophe:selectContentToLocalize',
                   choices: toLocalizeChoices
                 }"
-                v-model="wizard.values.toLocalize"
               />
               <p class="apos-wizard__help-text">
                 <AposIndicator
@@ -71,20 +71,20 @@
               class="apos-wizard__step apos-wizard__step-select-locales"
             >
               <AposButton
-                v-on="{ click: allSelected ? deselectAll : selectAll }"
                 class="apos-locale-select-all"
                 :label="allSelected
                   ? $t('apostrophe:deselectAll')
                   : $t('apostrophe:selectAll')"
                 type="quiet"
                 :modifiers="[ 'inline' ]"
+                v-on="{ click: allSelected ? deselectAll : selectAll }"
               />
               <AposInputString
+                ref="searchInput"
                 v-model="searchValue"
                 :field="searchField"
-                @input="updateFilter"
                 class="apos-locales-filter"
-                ref="searchInput"
+                @update:model-value="updateFilter"
               />
               <transition-group
                 tag="ul"
@@ -98,12 +98,12 @@
                 >
                   <AposButton
                     type="primary"
-                    @click.prevent="removeLocale(loc)"
                     class="apos-locale-button"
                     :modifiers="[ 'small' ]"
                     icon="close-icon"
                     :icon-size="12"
                     :label="loc.label"
+                    @click.prevent="removeLocale(loc)"
                   />
                 </li>
               </transition-group>
@@ -136,13 +136,13 @@
                       ({{ loc.name }})
                     </span>
                     <span
+                      v-apos-tooltip="isLocalized(loc)
+                        ? 'Localized'
+                        : 'Not Yet Localized'"
                       class="apos-locale-localized"
                       :class="{
                         'apos-state-is-localized': isLocalized(loc),
                       }"
-                      v-apos-tooltip="isLocalized(loc)
-                        ? 'Localized'
-                        : 'Not Yet Localized'"
                     />
                   </span>
                 </li>
@@ -155,9 +155,9 @@
             >
               <ul class="apos-selected-locales">
                 <li
-                  class="apos-locale-item--selected"
                   v-for="loc in selectedLocales"
                   :key="loc.name"
+                  class="apos-locale-item--selected"
                 >
                   <AposButton
                     type="primary"
@@ -184,6 +184,7 @@
                 </p>
 
                 <AposInputRadio
+                  v-model="wizard.values.relatedDocSettings"
                   :field="{
                     name: 'relatedDocSettings',
                     choices: [
@@ -198,13 +199,11 @@
                       },
                     ],
                   }"
-                  v-model="wizard.values.relatedDocSettings"
                 />
-
                 <AposInputCheckboxes
                   v-if="relatedDocTypes.length"
-                  :field="relatedDocTypesField"
                   v-model="wizard.values.relatedDocTypesToLocalize"
+                  :field="relatedDocTypesField"
                 />
                 <p v-else class="apos-wizard__help-text">
                   <AposIndicator
@@ -216,6 +215,46 @@
                   {{ $t('apostrophe:noNewRelatedDocuments') }}
                 </p>
               </div>
+              <div v-if="translationEnabled" class="apos-wizard__translation">
+                <p class="apos-wizard__translation-title">
+                  <AposTranslationIndicator :size="18" />
+                  <span class="apos-wizard__translation-title-text">
+                    {{ $t('apostrophe:automaticTranslationSettings') }}
+                  </span>
+                </p>
+                <AposCheckbox
+                  v-model="wizard.values.translateContent.data"
+                  :field="{ name: 'translate' }"
+                  :choice="{
+                    value: wizard.values.translateContent.data,
+                    label: $t('apostrophe:automaticTranslationCheckbox')
+                  }"
+                  data-apos-test="localizationTranslationCheck"
+                />
+
+                <div v-if="translationErrMsg">
+                  <!-- eslint-disable vue/no-v-html -->
+                  <p
+                    class="apos-wizard__translation-error"
+                    data-apos-test="localizationTranslationErr"
+                    v-html="translationErrMsg"
+                  />
+                  <!-- eslint-disable vue/no-v-html -->
+                  <AposButton
+                    v-if="translationShowRetry"
+                    label="apostrophe:retry"
+                    :modifiers="['quiet', 'no-motion']"
+                    data-apos-test="localizationTranslationRetry"
+                    @click="retryTranslationCheck()"
+                  />
+                </div>
+                <div
+                  v-else-if="translationShowLoader"
+                  class="apos-wizard__translation-spinner"
+                >
+                  <AposSpinner />
+                </div>
+              </div>
             </fieldset>
           </form>
         </template>
@@ -230,19 +269,19 @@
           <AposButton
             v-else
             type="primary"
-            @click="goToNext()"
             icon="arrow-right-icon"
             :modifiers="['icon-right']"
             :disabled="!complete() || wizard.busy"
             :icon-size="12"
             label="apostrophe:next"
+            @click="goToNext()"
           />
           <AposButton
             v-if="!isFirstStep()"
             type="default"
             :disabled="wizard.busy"
-            @click="goToPrevious()"
             label="apostrophe:back"
+            @click="goToPrevious()"
           />
         </template>
       </AposModalBody>
@@ -339,7 +378,10 @@ export default {
           toLocalize: { data: 'thisDocAndRelated' },
           toLocales: { data: this.locale ? [ this.locale ] : [] },
           relatedDocSettings: { data: 'localizeNewRelated' },
-          relatedDocTypesToLocalize: { data: [] }
+          relatedDocTypesToLocalize: { data: [] },
+          translateContent: { data: false },
+          translateTargets: { data: [] },
+          translateProvider: { data: apos.translation.providers[0]?.name || null }
         }
       },
       fullDoc: this.doc,
@@ -370,7 +412,11 @@ export default {
           value: 'relatedDocsOnly',
           label: 'apostrophe:relatedDocsOnly'
         }
-      ]
+      ],
+      translationEnabled: apos.modules['@apostrophecms/translation'].enabled,
+      translationErrMsg: null,
+      translationShowRetry: false,
+      translationShowLoader: false
     };
   },
   computed: {
@@ -429,7 +475,7 @@ export default {
     },
     visibleSections() {
       const self = this;
-      const result = Object.entries(this.wizard.sections).filter(([ name, section ]) => {
+      const result = Object.entries(this.wizard.sections).filter(([ _, section ]) => {
         return section.if ? section.if.bind(self)() : true;
       }).map(([ name, section ]) => {
         return {
@@ -464,6 +510,9 @@ export default {
     'wizard.values.toLocalize.data'() {
       this.updateRelatedDocs();
     },
+    async 'wizard.values.translateContent.data'(value) {
+      await this.checkAvailableTranslations(value);
+    },
     selectedLocales() {
       this.updateRelatedDocs();
     },
@@ -517,6 +566,13 @@ export default {
     },
     goToPrevious() {
       this.wizard.step = this.previousStepName;
+      this.uncheckTranslate();
+    },
+    uncheckTranslate() {
+      this.wizard.values.translateContent.data = false;
+      this.wizard.values.translateTargets.data = [];
+      this.translationErrMsg = null;
+      this.translationShowRetry = false;
     },
     goToNext() {
       this.goTo(this.nextStepName);
@@ -545,16 +601,26 @@ export default {
       return !!this.localized[locale.name];
     },
     selectAll() {
-      this.wizard.values.toLocales.data = this.locales.filter(locale => !this.isCurrentLocale(locale) && this.canEditLocale(locale));
+      this.wizard.values.toLocales.data = this.locales
+        .filter(locale => !this.isCurrentLocale(locale) && this.canEditLocale(locale));
     },
     deselectAll() {
       this.wizard.values.toLocales.data = [];
     },
     toggleLocale(locale) {
-      if (!this.isSelected(locale) && !this.isCurrentLocale(locale) && this.canEditLocale(locale)) {
-        this.wizard.values.toLocales.data.push(locale);
+      if (
+        !this.isSelected(locale) &&
+        !this.isCurrentLocale(locale) &&
+          this.canEditLocale(locale)
+      ) {
+        this.wizard.values.toLocales.data = [
+          ...this.wizard.values.toLocales.data,
+          locale
+        ];
+
       } else if (this.isSelected(locale)) {
-        this.wizard.values.toLocales.data = this.wizard.values.toLocales.data.filter(l => l !== locale);
+        this.wizard.values.toLocales.data = this.wizard.values.toLocales.data
+          .filter(l => l !== locale);
       }
       // Reset search filter
       if (this.filteredLocales.length < 2) {
@@ -652,6 +718,10 @@ export default {
                 toLocale: locale.name,
                 update: (doc._id === this.fullDoc._id) || !(this.wizard.values.relatedDocSettings.data === 'localizeNewRelated')
               },
+              qs: {
+                aposTranslateTargets: this.wizard.values.translateTargets.data,
+                aposTranslateProvider: this.wizard.values.translateProvider.data
+              },
               busy: true
             });
 
@@ -788,7 +858,11 @@ export default {
         // never be considered "related" to other pages simply because
         // of navigation links, the feature is meant for pieces that feel more like
         // part of the document being localized)
-        return related.filter(doc => apos.modules[doc.type].relatedDocument !== false);
+        // We also remove non localized content like users
+        return related.filter(doc => {
+          return apos.modules[doc.type].relatedDocument !== false &&
+            apos.modules[doc.type].localized !== false;
+        });
       }
     },
     async updateRelatedDocs() {
@@ -822,6 +896,77 @@ export default {
       }
       this.relatedDocs = relatedDocs;
       this.wizard.busy = status;
+    },
+    wait(time) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, time);
+      });
+    },
+    async retryTranslationCheck() {
+      await this.checkAvailableTranslations(false);
+      this.translationShowLoader = true;
+      await this.wait(500);
+      await this.checkAvailableTranslations(true);
+      this.translationShowLoader = false;
+    },
+    async checkAvailableTranslations(value) {
+      if (!value) {
+        this.translationErrMsg = null;
+        this.translationShowRetry = false;
+        this.wizard.values.translateTargets.data = [];
+        return;
+      }
+      const [ sourceLocale ] = this.doc.aposLocale.split(':');
+      const targets = this.wizard.values.toLocales.data;
+
+      let response;
+      try {
+        response = await apos.http.get(`${apos.translation.action}/languages`, {
+          qs: {
+            provider: this.wizard.values.translateProvider.data,
+            source: [ sourceLocale ],
+            target: targets.map(({ name }) => name)
+          }
+        });
+      } catch (err) {
+        console.error('An error happened while getting available languages: ', err);
+        this.wizard.values.translateTargets.data = [];
+        this.translationErrMsg = this.$t('apostrophe:automaticTranslationErrMsg');
+        this.translationShowRetry = true;
+        return;
+      }
+
+      const unavailableSource = !response.source[0].supported;
+      const unavailableTargetsLabels = response.target
+        .filter(({ supported }) => !supported)
+        .map(({ code }) => targets.find((locale) => locale.name === code)?.label || code);
+
+      if (unavailableSource) {
+        const sourceLabel = this.moduleOptions.locales[sourceLocale]?.label;
+        this.translationErrMsg = this.$t('apostrophe:automaticTranslationSourceErrMsg', { source: sourceLabel });
+        this.wizard.values.translateTargets.data = [];
+        return;
+      }
+
+      if (unavailableTargetsLabels.length) {
+        const isPlural = unavailableTargetsLabels.length > 1;
+        this.translationErrMsg = this.$t(
+          `apostrophe:automaticTranslationTargetErrMsg${isPlural ? '_plural' : ''}`,
+          { targets: unavailableTargetsLabels.join(', ') }
+        );
+      }
+
+      if (unavailableTargetsLabels.length >= targets.length) {
+        this.wizard.values.translateTargets.data = [];
+        return;
+      }
+
+      this.wizard.values.translateTargets.data = response.target
+        .filter(({ supported }) => supported)
+        .map(({ code }) => code);
+
     }
   }
 };
@@ -831,7 +976,7 @@ export default {
 .apos-i18n-localize {
   @include type-base;
 
-  ::v-deep .apos-modal__inner {
+  :deep(.apos-modal__inner) {
     $width: 565px;
     $vertical-spacing: 95px;
     $horizontal-spacing: calc(calc(100vw - #{$width}) / 2);
@@ -843,20 +988,20 @@ export default {
     height: calc(100vh - #{$vertical-spacing * 2});
   }
 
-  ::v-deep .apos-modal__main--with-left-rail {
+  :deep(.apos-modal__main--with-left-rail) {
     grid-template-columns: 30% 70%;
   }
 
-  ::v-deep .apos-modal__body-inner {
+  :deep(.apos-modal__body-inner) {
     padding: $spacing-triple $spacing-triple $spacing-double;
   }
 
-  ::v-deep .apos-wizard__content .apos-modal__body-footer {
+  :deep(.apos-wizard__content .apos-modal__body-footer) {
     flex-direction: row-reverse;
     border-top: 1px solid var(--a-base-9);
   }
 
-  ::v-deep .apos-busy__spinner {
+  :deep(.apos-busy__spinner) {
     display: inline-block;
   }
 }
@@ -890,7 +1035,7 @@ export default {
   border: none;
 }
 
-::v-deep .apos-field--toLocalize {
+:deep(.apos-field--toLocalize) {
   margin-bottom: $spacing-triple;
 }
 
@@ -901,7 +1046,7 @@ export default {
   font-weight: 400;
   color: var(--a-base-3);
 
-  ::v-deep .material-design-icon {
+  :deep(.material-design-icon) {
     position: relative;
     top: 3px;
     color: var(--a-base-5);
@@ -944,7 +1089,7 @@ export default {
   }
 }
 
-.apos-locale-button ::v-deep .apos-button {
+.apos-locale-button :deep(.apos-button) {
   font-size: var(--a-type-small);
 }
 
@@ -1011,9 +1156,12 @@ export default {
   }
 }
 
+.apos-wizard__step  :deep(.apos-field--relatedDocTypesToLocalize) {
+  margin-top: $spacing-triple;
+}
 .apos-wizard__step {
-  .apos-field__wrapper:not(:last-of-type) {
-    margin-bottom: $spacing-triple;
+  .apos-field__wrapper {
+    margin-bottom: $spacing-double;
   }
 }
 
@@ -1056,4 +1204,32 @@ export default {
 .apos-locale-name {
   text-transform: uppercase;
 }
+
+.apos-wizard__translation {
+  margin-top: 30px;
+}
+
+.apos-wizard__translation-title {
+  @include type-label;
+
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--a-base-8);
+  padding-bottom: 8px;
+}
+
+.apos-wizard__translation-title-text {
+  margin-left: 7px;
+}
+
+.apos-wizard__translation-error {
+  @include type-label;
+  color: var(--a-danger);
+}
+
+.apos-wizard__translation-spinner {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
 </style>

package/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalizeErrors.vue

@@ -27,7 +27,7 @@
             {{ docType(item.doc) }}
           </span>
         </div>
-        <div class="apos-confirm__notification-detail" v-if="item.detail">
+        <div v-if="item.detail" class="apos-confirm__notification-detail">
           {{ $t(item.detail) }}
         </div>
       </div>
@@ -36,8 +36,8 @@
 </template>
 
 <script>
-import CheckIcon from 'vue-material-design-icons/Check.vue';
-import CancelIcon from 'vue-material-design-icons/Cancel.vue';
+import CheckIcon from '@apostrophecms/vue-material-design-icons/Check.vue';
+import CancelIcon from '@apostrophecms/vue-material-design-icons/Cancel.vue';
 
 export default {
   name: 'AposI18nLocalizeErrors',

package/modules/@apostrophecms/image/ui/apos/components/AposImageCropper.vue

@@ -1,15 +1,15 @@
 <template>
   <div
     class="apos-image-cropper"
-    @click="onImageClick"
     :style="{
       height: cropperHeight
     }"
+    @click="onImageClick"
   >
     <span
-      class="apos-image-focal-point"
       ref="focalPoint"
       v-apos-tooltip="'apostrophe:focalPoint'"
+      class="apos-image-focal-point"
       @mousedown="onFocalPointMouseDown"
     />
     <cropper
@@ -18,13 +18,13 @@
         ? attachment._urls.uncropped.original
         : attachment._urls.original"
       :debounce="0"
-      @ready="onCropperReady"
-      @change="onCropperChange"
       :default-size="defaultSize"
       :default-position="defaultPosition"
       :stencil-props="stencilProps"
       :min-width="minSize[0]"
       :min-height="minSize[1]"
+      @ready="onCropperReady"
+      @change="onCropperChange"
     />
   </div>
 </template>
@@ -127,7 +127,7 @@ export default {
       left: this.docFields.data.left
     };
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$refs.focalPoint.removeEventListener('mousedown', this.onFocalPointMouseDown);
     window.removeEventListener('resize', this.onScreenResizeDebounced);
   },

package/modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue

@@ -65,12 +65,12 @@
               </label>
               <input
                 :value="docFields.data.width"
-                @input="inputWidth"
-                @blur="blurInput"
                 class="apos-input apos-input--text"
                 type="number"
                 :min="minWidth"
                 :max="maxWidth"
+                @input="inputWidth"
+                @blur="blurInput"
               >
             </div>
             <div class="apos-field">
@@ -79,12 +79,12 @@
               </label>
               <input
                 :value="docFields.data.height"
-                @input="inputHeight"
-                @blur="blurInput"
                 class="apos-input apos-input--text"
                 type="number"
                 :min="minHeight"
                 :max="maxHeight"
+                @input="inputHeight"
+                @blur="blurInput"
               >
             </div>
           </div>
@@ -122,7 +122,7 @@ export default {
       type: Array,
       default: () => ([])
     },
-    value: {
+    modelValue: {
       type: Object,
       default: null
     },
@@ -141,7 +141,7 @@ export default {
     const minSize = this.getMinSize();
 
     return {
-      original: this.value,
+      original: this.modelValue,
       docFields: {
         data: this.setDataValues()
       },

package/modules/@apostrophecms/image/ui/apos/components/AposMediaManager.vue

@@ -6,20 +6,25 @@
 
 <template>
   <AposModal
-    :modal="modal" :modal-title="modalTitle"
+    :modal="modal"
+    :modal-title="modalTitle"
     class="apos-media-manager"
-    @inactive="modal.active = false" @show-modal="modal.showModal = true"
-    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @esc="confirmAndCancel"
+    @no-modal="$emit('safe-close')"
   >
     <template v-if="relationshipField" #secondaryControls>
       <AposButton
-        type="default" label="apostrophe:cancel"
+        type="default"
+        label="apostrophe:cancel"
         @click="confirmAndCancel"
       />
     </template>
     <template v-else #secondaryControls>
       <AposButton
-        type="default" label="apostrophe:exit"
+        type="default"
+        label="apostrophe:exit"
         @click="confirmAndCancel"
       />
     </template>
@@ -68,22 +73,22 @@
         <template #bodyMain>
           <AposMediaManagerDisplay
             ref="display"
+            v-model:checked="checked"
             :accept="accept"
             :items="items"
             :module-options="moduleOptions"
+            :max-reached="maxReached()"
+            :options="{
+              disableUnchecked: maxReached(),
+              hideCheckboxes: !relationshipField
+            }"
             @edit="updateEditing"
-            v-model="checked"
             @select="select"
             @select-series="selectSeries"
             @select-another="selectAnother"
             @upload-started="uploading = true"
             @upload-complete="completeUploading"
             @create-placeholder="createPlaceholder"
-            :max-reached="maxReached()"
-            :options="{
-              disableUnchecked: maxReached(),
-              hideCheckboxes: !relationshipField
-            }"
           />
         </template>
       </AposModalBody>
@@ -100,13 +105,15 @@
             :selected="selected"
             :is-modified="isModified"
             :module-labels="moduleLabels"
-            @back="updateEditing(null)" @saved="updateMedia"
+            @back="updateEditing(null)"
+            @saved="updateMedia"
             @modified="editorModified"
           />
           <AposMediaManagerSelections
-            :items="selected"
-            @clear="clearSelected" @edit="updateEditing"
             v-show="!editing"
+            :items="selected"
+            @clear="clearSelected"
+            @edit="updateEditing"
           />
         </div>
       </AposModalRail>
@@ -233,7 +240,7 @@ export default {
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
   },
-  destroyed() {
+  unmounted() {
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
@@ -451,7 +458,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.apos-media-manager ::v-deep .apos-media-manager-toolbar {
+.apos-media-manager :deep(.apos-media-manager-toolbar) {
   z-index: $z-index-manager-toolbar;
   position: relative;
 }