add locale picker

Author: haroun

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## UNRELEASED
+
+### Adds
+
+* Add locale picker in the page and piece manager modals.
+
+### Fixes
+
+### Changes
+
 ## 4.22.0 (2025-10-01)
 
 ### Adds

modules/@apostrophecms/doc-type/ui/apos/components/AposDocLocalePicker.vue

@@ -20,6 +20,7 @@
         :forbidden="forbidden"
         :forbidden-tooltip="forbiddenTooltip"
         :is-open="isOpen"
+        :hide-localized="hideLocalized"
         @switch-locale="switchLocale"
       />
     </AposContextMenu>
@@ -51,6 +52,10 @@ const props = defineProps({
   isModified: {
     type: Boolean,
     required: true
+  },
+  hideLocalized: {
+    type: Boolean,
+    default: false
   }
 });
 

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

@@ -89,6 +89,11 @@ export default {
     },
     manuallyPublished() {
       return this.moduleOptions.localized && !this.moduleOptions.autopublish;
+    },
+    showLocalePicker() {
+      return Object.keys(window.apos.i18n.locales).length > 1 &&
+        this.moduleOptions.localized !== false &&
+        !this.modalData.hasContextLocale;
     }
   },
   mounted() {

modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue

@@ -21,6 +21,18 @@
         @click="confirmAndCancel"
       />
     </template>
+    <template
+      v-if="showLocalePicker"
+      #localeDisplay
+    >
+      <AposDocLocalePicker
+        :locale="modalData.locale"
+        :module-options="moduleOptions"
+        :is-modified="false"
+        :hide-localized="true"
+        @switch-locale="switchLocale"
+      />
+    </template>
     <template #primaryControls>
       <AposUtilityOperations
         :module-options="moduleOptions"

modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js

@@ -1,10 +1,12 @@
 // Pages manager (tree) modal business logic.
 
+import { mapActions } from 'pinia';
+import { klona } from 'klona';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposArchiveMixin from 'Modules/@apostrophecms/ui/mixins/AposArchiveMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
-import { klona } from 'klona';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 import { debounce, asyncTaskQueue } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
@@ -67,7 +69,8 @@ export default {
       allPiecesSelection: {
         isSelected: false,
         total: 0
-      }
+      },
+      localeSwitched: this.modalData.hasContextLocale
     };
   },
   computed: {
@@ -171,6 +174,7 @@ export default {
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
   methods: {
+    ...mapActions(useModalStore, [ 'updateModalData' ]),
     async create() {
       const doc = await apos.modal.execute(this.moduleOptions.components.editorModal, {
         moduleName: this.moduleName,
@@ -573,15 +577,27 @@ export default {
       }
       if (
         docIds ||
-        !doc.aposLocale ||
-        doc.aposLocale.split(':')[0] === this.modalData.locale
+        !doc.aposLocale || // TODO: check localeSwitched?
+        doc.aposLocale.split(':')[0] === this.modalData.locale // TODO: check localeSwitched?
       ) {
         await this.getPages();
         this.getAllPagesTotal();
         if (action === 'archive') {
           this.checked = this.checked.filter(checkedId => doc._id !== checkedId);
         }
       }
+    },
+    async switchLocale({ locale, localized }) {
+      this.updateModalData(this.modalData.id, { locale });
+      this.localeSwitched = locale !== apos.i18n.locale;
+
+      this.currentPage = 1;
+
+      await this.getPages();
+      this.getAllPagesTotal();
+      this.headers = this.computeHeaders();
+
+      this.setCheckedDocs([]);
     }
   }
 };

modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -22,6 +22,18 @@
         @click="confirmAndCancel"
       />
     </template>
+    <template
+      v-if="showLocalePicker"
+      #localeDisplay
+    >
+      <AposDocLocalePicker
+        :locale="modalData.locale"
+        :module-options="moduleOptions"
+        :is-modified="false"
+        :hide-localized="true"
+        @switch-locale="switchLocale"
+      />
+    </template>
     <template #primaryControls>
       <AposUtilityOperations
         :module-options="moduleOptions"
@@ -132,7 +144,7 @@
 </template>
 
 <script>
-import { mapState } from 'pinia';
+import { mapActions, mapState } from 'pinia';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
@@ -177,11 +189,12 @@ export default {
       allPiecesSelection: {
         isSelected: false,
         total: 0
-      }
+      },
+      localeSwitched: this.modalData.hasContextLocale
     };
   },
   computed: {
-    ...mapState(useModalStore, [ 'activeModal' ]),
+    ...mapState(useModalStore, [ 'activeModal', 'updateModalData' ]),
     moduleOptions() {
       return window.apos.modules[this.moduleName];
     },
@@ -281,6 +294,7 @@ export default {
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
   methods: {
+    ...mapActions(useModalStore, [ 'updateModalData' ]),
     async create() {
       await this.edit(null);
     },
@@ -560,8 +574,8 @@ export default {
       }
       if (
         docIds ||
-        !doc.aposLocale ||
-        doc.aposLocale.split(':')[0] === this.modalData.locale
+        !doc.aposLocale || // TODO: check localeSwitched?
+        doc.aposLocale.split(':')[0] === this.modalData.locale // TODO: check localeSwitched?
       ) {
         await this.managePieces();
         await this.manageAllPiecesTotal();
@@ -570,6 +584,18 @@ export default {
           this.checked = this.checked.filter(checkedId => !ids.includes(checkedId));
         }
       }
+    },
+    async switchLocale({ locale, localized }) {
+      this.updateModalData(this.modalData.id, { locale });
+      this.localeSwitched = locale !== apos.i18n.locale;
+
+      this.currentPage = 1;
+
+      await this.managePieces();
+      await this.manageAllPiecesTotal();
+      this.headers = this.computeHeaders();
+
+      this.setCheckedDocs([]);
     }
   }
 };

modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue

@@ -46,13 +46,17 @@
             ({{ locale.name }})
           </span>
           <span
+            v-if="hideLocalized"
             class="apos-locale-picker__localized"
             :class="{ 'apos-state-is-localized': isLocalized(locale) }"
           />
         </button>
       </li>
     </ul>
-    <div class="apos-locales-picker__available">
+    <div
+      v-if="hideLocalized"
+      class="apos-locales-picker__available"
+    >
       <p class="apos-locales-picker__available-desc">
         {{ $t('apostrophe:documentExistsInLocales') }}
       </p>
@@ -93,6 +97,10 @@ const props = defineProps({
   isOpen: {
     type: Boolean,
     default: false
+  },
+  hideLocalized: {
+    type: Boolean,
+    default: false
   }
 });