Fix broken bulkEditTags and refactor logic of the component (#1137)

CrowdDotDev · Jul 19, 2023 · 02e382e · 02e382e
1 parent 337f230
commit 02e382e
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 186 deletions.
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
diff --git 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/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/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/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');
     }
   },