From 3530404534b257ca881f6dc41c26addc1c83094c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 7 Aug 2024 20:01:07 +0530
Subject: [PATCH] feat: allow multiple prop in inbox filters

---
 .../reports/components/Filters/Inboxes.vue    | 44 ++++++++++---------
 .../specs/Filters/FiltersInboxes.spec.js      |  4 +-
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
index 1119cacd6..650aa9cda 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue
@@ -1,26 +1,27 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, onMounted, defineEmits } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-export default {
-  name: 'ReportsFiltersInboxes',
-  data() {
-    return {
-      selectedOption: null,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'inboxes/getInboxes',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('inboxes/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('inboxFilterSelection', this.selectedOption);
-    },
+// add prop for multiple selector
+defineProps({
+  multiple: {
+    type: Boolean,
+    default: false,
   },
+});
+
+const emit = defineEmits(['inboxFilterSelection']);
+const store = useStore();
+const options = useMapGetter('inboxes/getInboxes');
+
+const selectedOption = ref(null);
+
+onMounted(() => {
+  store.dispatch('inboxes/get');
+});
+
+const handleInput = () => {
+  emit('inboxFilterSelection', selectedOption.value);
 };
 </script>
 
@@ -32,6 +33,7 @@ export default {
       :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
       label="name"
       track-by="id"
+      :multiple="multiple"
       :options="options"
       :option-height="24"
       :show-labels="false"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
index 50a87e979..279e92c04 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js
@@ -56,7 +56,9 @@ describe('ReportsFiltersInboxes.vue', () => {
     const selectedInbox = { id: 1, name: 'Inbox 1' };
     wrapper.setData({ selectedOption: selectedInbox });
 
-    wrapper.vm.handleInput();
+    wrapper
+      .findComponent({ name: 'multiselect' })
+      .vm.$emit('input', selectedInbox);
 
     expect(wrapper.emitted('inboxFilterSelection')).toBeTruthy();
     expect(wrapper.emitted('inboxFilterSelection')[0]).toEqual([selectedInbox]);