[6.x] Fix asset editor prev/next buttons and "Edit Image" button in Bard (#14728)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: joshuablum

resources/js/components/assets/Editor/Editor.vue

@@ -157,8 +157,8 @@
                         </ui-badge>
                     </div>
                     <div class="flex items-center space-x-3 rtl:space-x-reverse">
-                        <ui-button icon="chevron-left" @click="navigateToPreviousAsset" v-tooltip="__('Previous Asset')" />
-                        <ui-button icon="chevron-right" @click="navigateToNextAsset" v-tooltip="__('Next Asset')" />
+                        <ui-button v-if="showNavigation" icon="chevron-left" @click="navigateToPreviousAsset" v-tooltip="__('Previous Asset')" />
+                        <ui-button v-if="showNavigation" icon="chevron-right" @click="navigateToNextAsset" v-tooltip="__('Next Asset')" />
                         <ui-button variant="primary" icon="save" @click="saveAndClose" v-if="!readOnly" :text="__('Save')" />
                     </div>
                 </div>
@@ -239,6 +239,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        showNavigation: {
+            type: Boolean,
+            default: true,
+        },
         allowDeleting: {
             type: Boolean,
             default() {

resources/js/components/fieldtypes/assets/Asset.js

@@ -16,11 +16,16 @@ export default {
             type: Boolean,
             default: true,
         },
+        siblings: {
+            type: Array,
+            default: () => [],
+        },
     },
 
     data() {
         return {
             editing: false,
+            editingId: null,
         };
     },
 
@@ -73,9 +78,10 @@ export default {
 
         edit() {
             if (this.readOnly) return;
-            if (this.asset.invalid) return;
+            if (this.asset?.invalid) return;
 
             this.editing = true;
+            this.editingId = this.asset?.id ?? null;
         },
 
         remove() {
@@ -98,6 +104,7 @@ export default {
 
         closeEditor() {
             this.editing = false;
+            this.editingId = null;
         },
 
         assetSaved(asset) {
@@ -108,10 +115,28 @@ export default {
         actionCompleted(successful, response) {
             if (successful === false) return;
             const id = response.ids[0] || null;
-            if (id && id !== this.asset.id) {
-                this.$emit('id-changed', id);
+            if (id && id !== this.editingId) {
+                this.$emit('id-changed', this.editingId, id);
             }
             this.closeEditor();
         },
+
+        navigateToPrevious() {
+            const index = this.siblings.findIndex((asset) => asset.id === this.editingId);
+            if (index <= 0) return;
+
+            const previousId = this.siblings[index - 1].id;
+            this.editingId = null;
+            this.$nextTick(() => (this.editingId = previousId));
+        },
+
+        navigateToNext() {
+            const index = this.siblings.findIndex((asset) => asset.id === this.editingId);
+            if (index === -1 || index >= this.siblings.length - 1) return;
+
+            const nextId = this.siblings[index + 1].id;
+            this.editingId = null;
+            this.$nextTick(() => (this.editingId = nextId));
+        },
     },
 };

resources/js/components/fieldtypes/assets/AssetRow.vue

@@ -57,9 +57,12 @@
                 />
 
                 <asset-editor
-                    v-if="editing"
-                    :id="asset.id"
+                    v-if="editingId"
+                    :id="editingId"
                     :allow-deleting="false"
+                    :show-navigation="siblings.length > 1"
+                    @previous="navigateToPrevious"
+                    @next="navigateToNext"
                     @closed="closeEditor"
                     @saved="assetSaved"
                     @action-completed="actionCompleted"

resources/js/components/fieldtypes/assets/AssetTile.vue

@@ -9,9 +9,12 @@
         :title="asset.invalid ? invalidLabel : label"
     >
         <asset-editor
-            v-if="editing"
-            :id="asset.id"
+            v-if="editingId"
+            :id="editingId"
             :allow-deleting="false"
+            :show-navigation="siblings.length > 1"
+            @previous="navigateToPrevious"
+            @next="navigateToNext"
             @closed="closeEditor"
             @saved="assetSaved"
             @action-completed="actionCompleted"

resources/js/components/fieldtypes/assets/AssetsFieldtype.vue

@@ -116,13 +116,14 @@
                                 v-for="asset in assets"
                                 :key="asset.id"
                                 :asset="asset"
+                                :siblings="assets"
                                 :read-only="isReadOnly"
                                 :show-filename="config.show_filename"
                                 :show-set-alt="showSetAlt"
                                 :checkerboard-mode="checkerboardMode"
                                 @updated="assetUpdated"
                                 @removed="assetRemoved"
-                                @id-changed="idChanged(asset.id, $event)"
+                                @id-changed="idChanged"
                             >
                             </asset-tile>
                         </div>
@@ -156,12 +157,13 @@
                                         v-for="asset in assets"
                                         :key="asset.id"
                                         :asset="asset"
+                                        :siblings="assets"
                                         :read-only="isReadOnly"
                                         :show-filename="config.show_filename"
                                         :show-set-alt="showSetAlt"
                                         @updated="assetUpdated"
                                         @removed="assetRemoved"
-                                        @id-changed="idChanged(asset.id, $event)"
+                                        @id-changed="idChanged"
                                     />
                                 </tbody>
                             </sortable-list>

resources/js/components/fieldtypes/bard/Image.vue

@@ -55,6 +55,7 @@
                 :id="assetId"
                 :showToolbar="false"
                 :allow-deleting="false"
+                :show-navigation="false"
                 @closed="closeEditor"
                 @saved="editorAssetSaved"
                 @actionCompleted="actionCompleted"