Merge pull request #2388 from gradido/2380-Community-tab-change-must-close-conversation-window

fix(frontend): close all open collapse by change tabs in community

frontend/src/components/Contributions/ContributionList.vue

@@ -3,6 +3,7 @@
     <div class="list-group" v-for="item in items" :key="item.id">
       <contribution-list-item
         v-bind="item"
+        @closeAllOpenCollapse="$emit('closeAllOpenCollapse')"
         :contributionId="item.id"
         :allContribution="allContribution"
         @update-contribution-form="updateContributionForm"

frontend/src/components/Contributions/ContributionListItem.spec.js

@@ -132,6 +132,16 @@ describe('ContributionListItem', () => {
           expect(wrapper.emitted('delete-contribution')).toBeFalsy()
         })
       })
+
+      describe('updateState', () => {
+        beforeEach(async () => {
+          await wrapper.vm.updateState()
+        })
+
+        it('emit update-state', () => {
+          expect(wrapper.vm.$emit('update-state')).toBeTruthy()
+        })
+      })
     })
   })
 })

frontend/src/components/Contributions/ContributionListItem.vue

@@ -32,6 +32,7 @@
               v-if="!['CONFIRMED', 'DELETED'].includes(state) && !allContribution"
               class="pointer ml-5"
               @click="
+                $emit('closeAllOpenCollapse'),
                   $emit('update-contribution-form', {
                     id: id,
                     contributionDate: contributionDate,
@@ -54,7 +55,7 @@
                 v-b-toggle="collapsId"
                 icon="chat-dots"
                 class="h2 mr-5"
-                @click="getListContributionMessages"
+                @click="$emit('closeAllOpenCollapse'), getListContributionMessages"
               ></b-icon>
             </div>
           </div>
@@ -64,7 +65,7 @@
             v-if="state === 'IN_PROGRESS'"
             v-b-toggle="collapsId"
             variant="warning"
-            @click="getListContributionMessages"
+            @click="$emit('closeAllOpenCollapse'), getListContributionMessages"
           >
             {{ $t('contribution.alert.answerQuestion') }}
           </b-button>

frontend/src/pages/Community.vue

@@ -2,7 +2,7 @@
   <div class="community-page">
     <div>
       <b-tabs v-model="tabIndex" content-class="mt-3" align="center">
-        <b-tab :title="$t('community.submitContribution')">
+        <b-tab :title="$t('community.submitContribution')" @click="closeAllOpenCollapse">
           <contribution-form
             @set-contribution="setContribution"
             @update-contribution="updateContribution"
@@ -39,6 +39,7 @@
             </b-alert>
           </div>
           <contribution-list
+            @closeAllOpenCollapse="closeAllOpenCollapse"
             :items="items"
             @update-list-contributions="updateListContributions"
             @update-contribution-form="updateContributionForm"
@@ -49,7 +50,7 @@
             :pageSize="pageSize"
           />
         </b-tab>
-        <b-tab :title="$t('navigation.community')">
+        <b-tab :title="$t('navigation.community')" @click="closeAllOpenCollapse">
           <b-alert show dismissible fade variant="secondary" class="text-dark">
             <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
             <p>
@@ -112,6 +113,13 @@ export default {
     }
   },
   methods: {
+    closeAllOpenCollapse() {
+      // console.log('Community closeAllOpenCollapse ')
+      // console.log('closeAllOpenCollapse', this.$el.querySelectorAll('.collapse.show'))
+      this.$el.querySelectorAll('.collapse.show').forEach((value) => {
+        this.$root.$emit('bv::toggle::collapse', value.id)
+      })
+    },
     setContribution(data) {
       this.$apollo
         .mutate({