diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue index 0ba7ae383b6..27d48c271da 100644 --- a/resources/js/components/assets/Browser/Browser.vue +++ b/resources/js/components/assets/Browser/Browser.vue @@ -198,10 +198,12 @@ @@ -635,6 +637,12 @@ export default { this.loadAssets(); }, + assetCreated(id) { + this.closeAssetEditor(); + this.autoselect(id); + this.loadAssets(); + }, + clearShift() { this.shifting = false; }, @@ -945,21 +953,25 @@ export default { uploadCompleted(asset) { if (this.autoselectUploads) { - this.sortColumn = 'last_modified'; - this.sortDirection = 'desc'; - - if (this.maxFiles === 1) { - this.selectedAssets.splice(0, this.selectedAssets.length, asset.id); - } else if (!this.reachedSelectionLimit) { - this.selectedAssets.push(asset.id); - } - this.$emit('selections-updated', this.selectedAssets); + this.autoselect(asset.id); } this.loadAssets(); this.$toast.success(__(':file uploaded', { file: asset.basename })); }, + autoselect(id) { + this.sortColumn = 'last_modified'; + this.sortDirection = 'desc'; + + if (this.maxFiles === 1) { + this.selectedAssets.splice(0, this.selectedAssets.length, id); + } else if (!this.reachedSelectionLimit) { + this.selectedAssets.push(id); + } + this.$emit('selections-updated', this.selectedAssets); + }, + uploadError(upload, uploads) { this.uploads = uploads; this.$toast.error(upload.errorMessage); diff --git a/resources/js/tests/components/assets/Editor.test.js b/resources/js/tests/components/assets/Editor.test.js index f3faa95caa9..5cfafb0ee0f 100644 --- a/resources/js/tests/components/assets/Editor.test.js +++ b/resources/js/tests/components/assets/Editor.test.js @@ -1,6 +1,7 @@ import { expect, test, vi } from 'vitest'; import Editor from '@/components/assets/Editor/Editor.vue'; import Asset from '@/components/fieldtypes/assets/Asset'; +import Browser from '@/components/assets/Browser/Browser.vue'; function keydown(key, target, modifier) { const component = { @@ -60,6 +61,30 @@ test('keeps crop copies in the asset field', () => { expect(asset.closeEditor).toHaveBeenCalled(); }); +test.each([ + [1, ['assets::crop.png']], + [2, ['assets::source.png', 'assets::crop.png']], +])('selects crop copies in the asset selector when max files is %s', (maxFiles, selections) => { + const browser = { + maxFiles, + editedAssetId: 'assets::source.png', + selectedAssets: ['assets::source.png'], + reachedSelectionLimit: false, + $emit: vi.fn(), + $nextTick: (callback) => callback(), + $refs: { listing: { refresh: vi.fn() } }, + }; + + Object.entries(Browser.methods).forEach(([name, method]) => (browser[name] = method.bind(browser))); + + browser.assetCreated('assets::crop.png'); + + expect(browser.editedAssetId).toBeNull(); + expect(browser.selectedAssets).toEqual(selections); + expect(browser.$emit).toHaveBeenCalledWith('selections-updated', selections); + expect(browser.$refs.listing.refresh).toHaveBeenCalled(); +}); + function navigate(method, { dirty = true, saving = false, save = () => Promise.resolve() } = {}) { const component = { saving,