👌 IMPROVE: use local event bus instead of component ref to pass event…

… to child component

Signed-off-by: Jonas Sulzer <jonas@violoncello.ch>

src/components/Composer.vue

@@ -123,7 +123,7 @@
 			></TextEditor>
 		</div>
 		<div class="composer-actions">
-			<ComposerAttachments ref="composerAttachments" v-model="attachments" @upload="onAttachmentsUploading" />
+			<ComposerAttachments v-model="attachments" :bus="bus" @upload="onAttachmentsUploading" />
 			<div class="composer-actions-right">
 				<p class="composer-actions-draft">
 					<span v-if="savingDraft === true" id="draft-status">{{ t('mail', 'Saving draft …') }}</span>
@@ -278,6 +278,7 @@ export default {
 			selectCc: this.cc,
 			selectBcc: this.bcc,
 			editorPlainText: this.isPlainText,
+			bus: new Vue(),
 		}
 	},
 	computed: {
@@ -358,10 +359,10 @@ export default {
 			this.saveDraftDebounced(this.getMessageData())
 		},
 		onAddLocalAttachment() {
-			this.$refs.composerAttachments.onAddLocalAttachment()
+			this.bus.$emit('onAddLocalAttachment')
 		},
 		onAddCloudAttachment() {
-			this.$refs.composerAttachments.onAddCloudAttachment()
+			this.bus.$emit('onAddCloudAttachment')
 		},
 		onAutocomplete(term) {
 			if (term === undefined || term === '') {

src/components/ComposerAttachments.vue

@@ -55,6 +55,10 @@ export default {
 			type: Array,
 			required: true,
 		},
+		bus: {
+			type: Object,
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -73,6 +77,10 @@ export default {
 			return ((uploaded / total) * 100).toFixed(1)
 		},
 	},
+	created() {
+		this.bus.$on('onAddLocalAttachment', this.onAddLocalAttachment)
+		this.bus.$on('onAddCloudAttachment', this.onAddCloudAttachment)
+	},
 	methods: {
 		onAddLocalAttachment() {
 			this.$refs.localAttachments.click()