From ce43748c38fb3d07f2d608660bd20e381e5c8d58 Mon Sep 17 00:00:00 2001
From: Yeganathan S <hilariousengineer@protonmail.com>
Date: Tue, 18 Jul 2023 23:37:17 +0530
Subject: [PATCH 1/4] Fix broken bulkEditTags and refactor logic of the
 component

---
 .../list/member-list-bulk-update-tags.vue     | 136 ------------------
 .../components/list/member-list-table.vue     |   3 +-
 .../components/list/member-list-toolbar.vue   |   9 +-
 .../modules/tag/components/tag-popover.vue    | 102 +++++++------
 4 files changed, 67 insertions(+), 183 deletions(-)
 delete mode 100644 frontend/src/modules/member/components/list/member-list-bulk-update-tags.vue

diff --git a/frontend/src/modules/member/components/list/member-list-bulk-update-tags.vue b/frontend/src/modules/member/components/list/member-list-bulk-update-tags.vue
deleted file mode 100644
index 59b3dd0516..0000000000
--- a/frontend/src/modules/member/components/list/member-list-bulk-update-tags.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div class="relative inline-flex">
-    <app-tag-popover
-      v-model="bulkEditTagsModel"
-      pretitle="Multiple members"
-      :visible="bulkEditTags"
-      :loading="loading"
-      @cancel="cancelBulkUpdateTags"
-      @submit="doBulkUpdateTagsWithConfirm"
-    />
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex';
-import { mapActions as mapActionsPinia } from 'pinia';
-import { FormSchema } from '@/shared/form/form-schema';
-import AppTagPopover from '@/modules/tag/components/tag-popover.vue';
-import { MemberService } from '@/modules/member/member-service';
-import { useMemberStore } from '@/modules/member/store/pinia';
-import { MemberModel } from '../../member-model';
-
-const { fields } = MemberModel;
-const formSchema = new FormSchema([fields.tags]);
-
-export default {
-  name: 'AppMemberListBulkUpdateTags',
-
-  components: {
-    AppTagPopover,
-  },
-
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    selectedRows: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  data() {
-    return {
-      bulkEditTags: false,
-      bulkEditTagsModel: [],
-      bulkEditTagsInCommon: [],
-    };
-  },
-
-  watch: {
-    modelValue: {
-      async handler(newValue) {
-        if (newValue) {
-          await this.prepareBulkUpdateTags();
-        }
-      },
-    },
-  },
-
-  methods: {
-    ...mapActions({
-      doBulkUpdateMembersTags:
-        'member/doBulkUpdateMembersTags',
-    }),
-    ...mapActionsPinia(useMemberStore, ['fetchMembers']),
-
-    async doBulkUpdateTagsWithConfirm() {
-      try {
-        this.$emit('update:modelValue', false);
-        this.bulkEditTags = false;
-
-        const payload = [...this.selectedRows].reduce((acc, item) => {
-          const memberToUpdate = { ...item };
-          const tagsToKeep = item.tags.filter(
-            (tag) => this.bulkEditTagsInCommon.filter((t) => t.id === tag.id).length === 0
-              && this.bulkEditTagsModel.filter((t) => t.id === tag.id).length === 0,
-          );
-
-          memberToUpdate.tags = [...tagsToKeep, ...this.bulkEditTagsModel];
-          acc.push(
-            formSchema.cast({
-              id: memberToUpdate.id,
-              tags: memberToUpdate.tags,
-            }),
-          );
-          return acc;
-        }, []);
-        await MemberService.updateBulk(payload);
-        await this.fetchMembers({
-          reload: true,
-        });
-      } catch (error) {
-        // no
-      }
-      return null;
-    },
-
-    prepareBulkUpdateTags() {
-      this.bulkEditTagsModel = this.selectedRows.reduce(
-        (acc, item, index) => {
-          let { tags } = formSchema.initialValues({
-            tags: item.tags,
-          });
-          if (index > 0) {
-            tags = tags.filter(
-              (tag) => acc.filter((t) => t.id === tag.id).length
-                > 0,
-            );
-          }
-          return tags;
-        },
-        [],
-      );
-      this.bulkEditTagsInCommon = [
-        ...this.bulkEditTagsModel,
-      ];
-      this.bulkEditTags = true;
-    },
-
-    cancelBulkUpdateTags() {
-      this.bulkEditTagsModel = [];
-      this.bulkEditTagsInCommon = [];
-      this.$emit('update:modelValue', false);
-      this.bulkEditTags = false;
-    },
-  },
-};
-</script>
diff --git a/frontend/src/modules/member/components/list/member-list-table.vue b/frontend/src/modules/member/components/list/member-list-table.vue
index 0fd152ded4..5c60eb94ce 100644
--- a/frontend/src/modules/member/components/list/member-list-table.vue
+++ b/frontend/src/modules/member/components/list/member-list-table.vue
@@ -391,7 +391,8 @@
       </div>
     </div>
     <app-member-merge-dialog v-model="isMergeDialogOpen" />
-    <app-tag-popover v-model="isEditTagsDialogOpen" @reload="fetchMembers({ reload: true })" />
+    <!-- TODO: ask joana why the popover is added here, apparently this causes a weird bug -->
+    <!-- <app-tag-popover v-model="isEditTagsDialogOpen" @reload="fetchMembers({ reload: true })" /> -->
   </div>
 </template>
 
diff --git a/frontend/src/modules/member/components/list/member-list-toolbar.vue b/frontend/src/modules/member/components/list/member-list-toolbar.vue
index 9137f08fe0..9d2777cc3b 100644
--- a/frontend/src/modules/member/components/list/member-list-toolbar.vue
+++ b/frontend/src/modules/member/components/list/member-list-toolbar.vue
@@ -95,10 +95,9 @@
       </template>
     </el-dropdown>
 
-    <app-member-list-bulk-update-tags
-      v-model="bulkTagsUpdateVisible"
-      :selected-rows="selectedMembers"
-    />
+    <app-tag-popover v-model="bulkTagsUpdateVisible"
+      @reload="fetchMembers({ reload: true })" />
+
   </div>
 </template>
 
@@ -120,7 +119,7 @@ import {
   getEnrichmentMax,
   showEnrichmentLoadingMessage,
 } from '@/modules/member/member-enrichment';
-import AppMemberListBulkUpdateTags from '@/modules/member/components/list/member-list-bulk-update-tags.vue';
+import AppTagPopover from '@/modules/tag/components/tag-popover.vue';
 import AppSvg from '@/shared/svg/svg.vue';
 
 const { currentUser, currentTenant } = mapGetters('auth');
diff --git a/frontend/src/modules/tag/components/tag-popover.vue b/frontend/src/modules/tag/components/tag-popover.vue
index f6fc2076b7..7f6e6b6660 100644
--- a/frontend/src/modules/tag/components/tag-popover.vue
+++ b/frontend/src/modules/tag/components/tag-popover.vue
@@ -1,36 +1,18 @@
 <template>
-  <app-dialog
-    v-if="computedVisible"
-    v-model="computedVisible"
-    title="Edit tags"
-    :pre-title="modelValue?.displayName ?? ''"
-  >
+  <app-dialog v-if="computedVisible" v-model="computedVisible" title="Edit tags">
     <template #content>
       <div class="px-6 pb-6">
         <form v-if="modelValue" class="tags-form">
-          <app-tag-autocomplete-input
-            v-model="form"
-            :fetch-fn="fields.tags.fetchFn"
-            :mapper-fn="fields.tags.mapperFn"
-            :create-if-not-found="true"
-            placeholder="Type to search/create tags"
-          />
+          <app-tag-autocomplete-input v-model="bulkEditTagsModel" :fetch-fn="fields.tags.fetchFn"
+            :mapper-fn="fields.tags.mapperFn" :create-if-not-found="true" placeholder="Type to search/create tags" />
         </form>
       </div>
 
-      <div
-        class="bg-gray-50 rounded-b-md flex items-center justify-end py-4 px-6"
-      >
-        <el-button
-          class="btn btn--bordered btn--md mr-3"
-          @click="computedVisible = false"
-        >
+      <div class="bg-gray-50 rounded-b-md flex items-center justify-end py-4 px-6">
+        <el-button class="btn btn--bordered btn--md mr-3" @click="handleCancel">
           Cancel
         </el-button>
-        <el-button
-          class="btn btn--primary btn--md"
-          @click="handleSubmit"
-        >
+        <el-button class="btn btn--primary btn--md" @click="handleSubmit">
           Submit
         </el-button>
       </div>
@@ -42,9 +24,17 @@
 import { MemberModel } from '@/modules/member/member-model';
 import AppDialog from '@/shared/dialog/dialog.vue';
 import AppTagAutocompleteInput from '@/modules/tag/components/tag-autocomplete-input.vue';
+import { FormSchema } from '@/shared/form/form-schema';
 import { mapActions } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useMemberStore } from '@/modules/member/store/pinia';
+
+const memberStore = useMemberStore();
+const { selectedMembers } = storeToRefs(memberStore);
 
 const { fields } = MemberModel;
+const formSchema = new FormSchema([fields.tags]);
+
 
 export default {
   name: 'AppTagPopover',
@@ -52,17 +42,17 @@ export default {
 
   props: {
     modelValue: {
-      type: Object,
-      default: () => null,
+      type: Boolean,
+      default: () => false,
     },
   },
   emits: ['reload', 'update:modelValue'],
 
   data() {
     return {
-      changed: false,
       loading: false,
-      form: [],
+      bulkEditTagsModel: [],
+      bulkEditTagsInCommon: [],
     };
   },
 
@@ -72,20 +62,19 @@ export default {
     },
     computedVisible: {
       get() {
-        return this.modelValue !== null;
+        return this.modelValue;
       },
       set() {
-        this.$emit('update:modelValue', null);
+        this.$emit('update:modelValue', false);
       },
     },
   },
 
   watch: {
     modelValue: {
-      immediate: true,
-      handler(member) {
-        if (member) {
-          this.form = member.tags;
+      async handler(newValue) {
+        if (newValue) {
+          await this.prepareBulkUpdateTags();
         }
       },
     },
@@ -93,20 +82,51 @@ export default {
 
   methods: {
     ...mapActions({
-      doUpdate: 'member/doUpdate',
+      doBulkUpdateMembersTags:
+        'member/doBulkUpdateMembersTags',
     }),
+
+    prepareBulkUpdateTags() {
+      this.bulkEditTagsModel = selectedMembers.value.reduce(
+        (acc, item, index) => {
+          let { tags } = formSchema.initialValues({
+            tags: item.tags,
+          });
+          if (index > 0) {
+            tags = tags.filter(
+              (tag) => acc.filter((t) => t.id === tag.id).length
+                > 0,
+            );
+          }
+          return tags;
+        },
+        [],
+      );
+      this.bulkEditTagsInCommon = [
+        ...this.bulkEditTagsModel,
+      ];
+    },
+
     async handleSubmit() {
       this.loading = true;
-      await this.doUpdate({
-        id: this.modelValue.id,
-        values: {
-          tags: this.form.map((tag) => tag.id),
-        },
+
+      await this.doBulkUpdateMembersTags({
+        members: [...selectedMembers.value],
+        tagsInCommon: this.bulkEditTagsInCommon,
+        tagsToSave: this.bulkEditTagsModel,
       });
+
       this.loading = false;
       this.computedVisible = false;
-      this.$emit('reload');
+      this.$emit('reload', true);
+      return null;
     },
+
+    handleCancel() {
+      this.bulkEditTagsModel = [];
+      this.bulkEditTagsInCommon = [];
+      this.computedVisible = false;
+    }
   },
 };
 </script>

From 84a7c70133ce3c67bacaacda146ca9561ea82313 Mon Sep 17 00:00:00 2001
From: Yeganathan S <hilariousengineer@protonmail.com>
Date: Wed, 19 Jul 2023 00:01:31 +0530
Subject: [PATCH 2/4] Remove comments from code

---
 .../src/modules/member/components/list/member-list-table.vue   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/modules/member/components/list/member-list-table.vue b/frontend/src/modules/member/components/list/member-list-table.vue
index 5c60eb94ce..0fd152ded4 100644
--- a/frontend/src/modules/member/components/list/member-list-table.vue
+++ b/frontend/src/modules/member/components/list/member-list-table.vue
@@ -391,8 +391,7 @@
       </div>
     </div>
     <app-member-merge-dialog v-model="isMergeDialogOpen" />
-    <!-- TODO: ask joana why the popover is added here, apparently this causes a weird bug -->
-    <!-- <app-tag-popover v-model="isEditTagsDialogOpen" @reload="fetchMembers({ reload: true })" /> -->
+    <app-tag-popover v-model="isEditTagsDialogOpen" @reload="fetchMembers({ reload: true })" />
   </div>
 </template>
 

From d14db1f595dd9182fc95a69ee5665d0f20f900f3 Mon Sep 17 00:00:00 2001
From: Yeganathan S <hilariousengineer@protonmail.com>
Date: Wed, 19 Jul 2023 18:46:30 +0530
Subject: [PATCH 3/4] Fix edit tags when we click Edit tags in one member row

---
 .../components/list/member-list-table.vue     | 12 +++++--
 .../components/view/member-view-header.vue    |  6 ++--
 .../modules/tag/components/tag-popover.vue    | 35 +++++++++++--------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/frontend/src/modules/member/components/list/member-list-table.vue b/frontend/src/modules/member/components/list/member-list-table.vue
index 0fd152ded4..8ce14c9382 100644
--- a/frontend/src/modules/member/components/list/member-list-table.vue
+++ b/frontend/src/modules/member/components/list/member-list-table.vue
@@ -354,7 +354,7 @@
                     }"
                     class="block"
                   >
-                    <app-tag-list :member="scope.row" @edit="isEditTagsDialogOpen = scope.row" />
+                    <app-tag-list :member="scope.row" @edit="handleEditTagsDialog(scope.row)" />
                   </router-link>
                 </template>
               </el-table-column>
@@ -391,7 +391,7 @@
       </div>
     </div>
     <app-member-merge-dialog v-model="isMergeDialogOpen" />
-    <app-tag-popover v-model="isEditTagsDialogOpen" @reload="fetchMembers({ reload: true })" />
+    <app-tag-popover v-model="isEditTagsDialogOpen" :member="editTagMember" @reload="fetchMembers({ reload: true })" />
   </div>
 </template>
 
@@ -431,7 +431,8 @@ const isTableHovered = ref(false);
 const isCursorDown = ref(false);
 
 const isMergeDialogOpen = ref(null);
-const isEditTagsDialogOpen = ref(null);
+const isEditTagsDialogOpen = ref(false);
+const editTagMember = ref(null);
 
 const props = defineProps({
   hasIntegrations: {
@@ -518,6 +519,11 @@ document.onmouseup = () => {
   isCursorDown.value = false;
 };
 
+function handleEditTagsDialog(member) {
+  isEditTagsDialogOpen.value = true;
+  editTagMember.value = member;
+}
+
 function doChangeSort(sorter) {
   filters.value.order = {
     prop: sorter.prop,
diff --git a/frontend/src/modules/member/components/view/member-view-header.vue b/frontend/src/modules/member/components/view/member-view-header.vue
index 4ab0576904..8e46f42c82 100644
--- a/frontend/src/modules/member/components/view/member-view-header.vue
+++ b/frontend/src/modules/member/components/view/member-view-header.vue
@@ -71,8 +71,8 @@
 
     <div class="absolute inset-x-0 bottom-0 rounded-b-md bg-gray-50 p-6 mt-9">
       <div class="text-sm">
-        <app-tags :long="true" :member="member" @edit="isEditTagsDialogOpen = member" />
-        <app-tag-popover v-model="isEditTagsDialogOpen" />
+        <app-tags :long="true" :member="member" @edit="isEditTagsDialogOpen = true" />
+        <app-tag-popover v-model="isEditTagsDialogOpen" :member="member"  />
       </div>
     </div>
   </div>
@@ -100,7 +100,7 @@ defineProps({
   },
 });
 
-const isEditTagsDialogOpen = ref(null);
+const isEditTagsDialogOpen = ref(false);
 
 const formattedInformation = (value, type) => {
   // Show dash for empty information
diff --git a/frontend/src/modules/tag/components/tag-popover.vue b/frontend/src/modules/tag/components/tag-popover.vue
index 7f6e6b6660..24f7f2545e 100644
--- a/frontend/src/modules/tag/components/tag-popover.vue
+++ b/frontend/src/modules/tag/components/tag-popover.vue
@@ -1,9 +1,9 @@
 <template>
-  <app-dialog v-if="computedVisible" v-model="computedVisible" title="Edit tags">
+  <app-dialog v-if="computedVisible" v-model="computedVisible" title="Edit tags"  :pre-title="member?.displayName ?? ''">
     <template #content>
       <div class="px-6 pb-6">
         <form v-if="modelValue" class="tags-form">
-          <app-tag-autocomplete-input v-model="bulkEditTagsModel" :fetch-fn="fields.tags.fetchFn"
+          <app-tag-autocomplete-input v-model="editTagsModel" :fetch-fn="fields.tags.fetchFn"
             :mapper-fn="fields.tags.mapperFn" :create-if-not-found="true" placeholder="Type to search/create tags" />
         </form>
       </div>
@@ -45,14 +45,18 @@ export default {
       type: Boolean,
       default: () => false,
     },
+    member: {
+      type: Object,
+      default: () => null,
+    },
   },
   emits: ['reload', 'update:modelValue'],
 
   data() {
     return {
       loading: false,
-      bulkEditTagsModel: [],
-      bulkEditTagsInCommon: [],
+      editTagsModel: [],
+      editTagsInCommon: [],
     };
   },
 
@@ -68,13 +72,16 @@ export default {
         this.$emit('update:modelValue', false);
       },
     },
+    membersToUpdate() {
+      return this.member ? [this.member]: selectedMembers.value;
+    },
   },
 
   watch: {
     modelValue: {
       async handler(newValue) {
         if (newValue) {
-          await this.prepareBulkUpdateTags();
+          await this.prepareUpdateTags();
         }
       },
     },
@@ -86,8 +93,8 @@ export default {
         'member/doBulkUpdateMembersTags',
     }),
 
-    prepareBulkUpdateTags() {
-      this.bulkEditTagsModel = selectedMembers.value.reduce(
+    prepareUpdateTags() {
+      this.editTagsModel = this.membersToUpdate.reduce(
         (acc, item, index) => {
           let { tags } = formSchema.initialValues({
             tags: item.tags,
@@ -102,8 +109,8 @@ export default {
         },
         [],
       );
-      this.bulkEditTagsInCommon = [
-        ...this.bulkEditTagsModel,
+      this.editTagsInCommon = [
+        ...this.editTagsModel,
       ];
     },
 
@@ -111,9 +118,9 @@ export default {
       this.loading = true;
 
       await this.doBulkUpdateMembersTags({
-        members: [...selectedMembers.value],
-        tagsInCommon: this.bulkEditTagsInCommon,
-        tagsToSave: this.bulkEditTagsModel,
+        members: [...this.membersToUpdate],
+        tagsInCommon: this.editTagsInCommon,
+        tagsToSave: this.editTagsModel,
       });
 
       this.loading = false;
@@ -123,8 +130,8 @@ export default {
     },
 
     handleCancel() {
-      this.bulkEditTagsModel = [];
-      this.bulkEditTagsInCommon = [];
+      this.editTagsModel = [];
+      this.editTagsInCommon = [];
       this.computedVisible = false;
     }
   },

From 7f17805e5a1dd0268d5b3ec4cbf8299ea0731e75 Mon Sep 17 00:00:00 2001
From: Yeganathan S <hilariousengineer@protonmail.com>
Date: Wed, 19 Jul 2023 20:24:40 +0530
Subject: [PATCH 4/4] Add toaster for successful and error while updating tags

---
 frontend/src/modules/member/store/actions.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/modules/member/store/actions.js b/frontend/src/modules/member/store/actions.js
index dc447e4d24..afd713fe12 100644
--- a/frontend/src/modules/member/store/actions.js
+++ b/frontend/src/modules/member/store/actions.js
@@ -109,9 +109,11 @@ export default {
         return acc;
       }, []);
       const updatedMembers = await MemberService.updateBulk(payload);
+      Message.success('Tags updated successfully');
       commit('BULK_UPDATE_MEMBERS_TAGS_SUCCESS', updatedMembers);
     } catch (error) {
       Errors.handle(error);
+      Message.error('There was an error updating tags');
     }
   },