diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue index 90a29cc8e..607017ecf 100644 --- a/client/components/app/Appbar.vue +++ b/client/components/app/Appbar.vue @@ -97,6 +97,9 @@ + + + @@ -105,7 +108,8 @@ export default { data() { return { totalEntities: 0, - showProfileDropdown: false + showProfileDropdown: false, + showApplyTagsModal: false } }, computed: { @@ -198,6 +202,14 @@ export default { action: 'rescan' }) + // Add Edit Tags option + if (this.userCanUpdate) { + options.push({ + text: 'Edit Tags', + action: 'apply-tags' + }) + } + // The limit of 50 is introduced because of the URL length. Each id has 36 chars, so 36 * 40 = 1440 // + 40 , separators = 1480 chars + base path 280 chars = 1760 chars. This keeps the URL under 2000 chars even with longer domains if (this.selectedMediaItems.length <= 40) { @@ -244,6 +256,8 @@ export default { this.batchRescan() } else if (action === 'download') { this.batchDownload() + } else if (action === 'apply-tags') { + this.batchApplyTagsClick() } }, async batchRescan() { @@ -394,6 +408,16 @@ export default { batchAutoMatchClick() { this.$store.commit('globals/setShowBatchQuickMatchModal', true) }, + batchApplyTagsClick() { + this.showApplyTagsModal = true + }, + tagsApplied() { + // Clear selection and refresh the bookshelf + this.$store.commit('globals/resetSelectedMediaItems', []) + this.$eventBus.$emit('bookshelf_clear_selection') + // Optionally refresh the current page to show updated tags + this.$eventBus.$emit('bookshelf_refresh') + }, logout() { this.showProfileDropdown = false diff --git a/client/components/modals/BatchApplyTagsModal.vue b/client/components/modals/BatchApplyTagsModal.vue new file mode 100644 index 000000000..2df18f3b1 --- /dev/null +++ b/client/components/modals/BatchApplyTagsModal.vue @@ -0,0 +1,162 @@ + + + \ No newline at end of file diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue index bf0d1ec99..67e126d5a 100644 --- a/client/components/ui/MultiSelect.vue +++ b/client/components/ui/MultiSelect.vue @@ -138,7 +138,8 @@ export default { }, setInputWidth() { setTimeout(() => { - var value = this.$refs.input.value + if (!this.$refs.input) return + var value = this.$refs.input.value || '' var len = value.length * 7 + 24 this.$refs.input.style.width = len + 'px' this.recalcMenuPos()