Fix broken bulkEditTags and refactor logic of the component

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,

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');

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

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"  :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="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="editTagsModel" :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,16 +24,28 @@
 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',
   components: { AppTagAutocompleteInput, AppDialog },
 
   props: {
     modelValue: {
+      type: Boolean,
+      default: () => false,
+    },
+    member: {
       type: Object,
       default: () => null,
     },
@@ -60,9 +54,9 @@ export default {
 
   data() {
     return {
-      changed: false,
       loading: false,
-      form: [],
+      editTagsModel: [],
+      editTagsInCommon: [],
     };
   },
 
@@ -72,41 +66,74 @@ export default {
     },
     computedVisible: {
       get() {
-        return this.modelValue !== null;
+        return this.modelValue;
       },
       set() {
-        this.$emit('update:modelValue', null);
+        this.$emit('update:modelValue', false);
       },
     },
+    membersToUpdate() {
+      return this.member ? [this.member]: selectedMembers.value;
+    },
   },
 
   watch: {
     modelValue: {
-      immediate: true,
-      handler(member) {
-        if (member) {
-          this.form = member.tags;
+      async handler(newValue) {
+        if (newValue) {
+          await this.prepareUpdateTags();
         }
       },
     },
   },
 
   methods: {
     ...mapActions({
-      doUpdate: 'member/doUpdate',
+      doBulkUpdateMembersTags:
+        'member/doBulkUpdateMembersTags',
     }),
+
+    prepareUpdateTags() {
+      this.editTagsModel = this.membersToUpdate.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.editTagsInCommon = [
+        ...this.editTagsModel,
+      ];
+    },
+
     async handleSubmit() {
       this.loading = true;
-      await this.doUpdate({
-        id: this.modelValue.id,
-        values: {
-          tags: this.form.map((tag) => tag.id),
-        },
+
+      await this.doBulkUpdateMembersTags({
+        members: [...this.membersToUpdate],
+        tagsInCommon: this.editTagsInCommon,
+        tagsToSave: this.editTagsModel,
       });
+
       this.loading = false;
       this.computedVisible = false;
-      this.$emit('reload');
+      this.$emit('reload', true);
+      return null;
     },
+
+    handleCancel() {
+      this.editTagsModel = [];
+      this.editTagsInCommon = [];
+      this.computedVisible = false;
+    }
   },
 };
 </script>