Fix: Session admin's user story filter affects the filter of the members #734

frontend/src/components/UserStories.vue

@@ -3,25 +3,25 @@
     <div v-if="userStories.length > 0 || filterActive" class="w-100 d-flex justify-content-left">
       <b-input-group>
         <b-input-group-prepend>
-          <b-input-group-text><BIconSearch id="searchIcon"></BIconSearch></b-input-group-text>
+          <b-input-group-text><BIconSearch id="searchIcon" /></b-input-group-text>
         </b-input-group-prepend>
         <b-input
           id="search"
           v-model="input"
           type="text"
           :placeholder="t('page.session.before.userStories.placeholder.searchUserStories')"
-          @input="swapPriority"
+          @input="filterStories"
         />
       </b-input-group>
     </div>
     <b-card-group id="userStoryBlock" class="my-2 overflow-auto">
       <b-list-group-item
-        v-for="(story, index) of userStories"
+        v-for="(story, index) in displayedStories"
         id="userStoryRow"
         :key="index"
-        :active="index === selectedStoryIndex"
+        :active="getOriginalIndex(index) === selectedStoryIndex"
         class="w-100 p-1 d-flex justify-content-left"
-        :style="index === selectedStoryIndex ? 'border-width: 3px;' : ''"
+        :style="getOriginalIndex(index) === selectedStoryIndex ? 'border-width: 3px;' : ''"
         @mouseover="hover = index"
         @mouseleave="hover = null"
         @click="setUserStoryAsActive(index)"
@@ -31,16 +31,12 @@
           variant="primary"
           :class="story.isActive ? 'selectedStory' : 'outlineColorStory'"
           size="sm"
-          @click="
-            markUserStory(index);
-            $event.target.blur();
-          "
         >
           <b-img id="userStoryPicture" :src="require('@/assets/ActiveUserStory.png')" />
         </b-button>
 
         <b-button
-          v-else-if="hostSelectedStoryIndex === index && !showEditButtons"
+          v-else-if="hostSelectedStoryIndex === getOriginalIndex(index) && !showEditButtons"
           size="sm"
           variant="success"
           disabled
@@ -164,98 +160,90 @@ export default defineComponent({
   },
   data() {
     return {
-      selectedStoryIndex: null as unknown,
-      sideBarOpen: false,
+      selectedStoryIndex: null as number | null,
       userStories: [] as Array<UserStory>,
-      hover: null,
+      hover: null as number | null,
       input: "",
       filterActive: false,
       savedStories: [] as Array<UserStory>,
+      filteredStories: [] as Array<{ story: UserStory; originalIndex: number }>,
       generatedUUIDs: new Set<number>(),
       showPrivacyModal: false,
       showUserStorySplitModal: false,
       splittedUserStoriesData: [] as Array<UserStory>,
     };
   },
+  computed: {
+    displayedStories() {
+      return this.filterActive ? this.filteredStories.map((item) => item.story) : this.userStories;
+    },
+  },
   watch: {
-    initialStories() {
-      this.userStories = this.initialStories as Array<UserStory>;
+    initialStories: {
+      immediate: true,
+      handler(newStories) {
+        this.userStories = newStories;
+        this.savedStories = newStories;
+        this.filterStories();
+      },
     },
-    hostSelectedStoryIndex() {
-      this.selectedStoryIndex = this.hostSelectedStoryIndex;
-      this.$emit("selectedStory", this.selectedStoryIndex);
+    hostSelectedStoryIndex(newIndex) {
+      this.selectedStoryIndex = newIndex;
+      this.$emit("selectedStory", newIndex);
     },
   },
   mounted() {
     this.userStories = this.initialStories as Array<UserStory>;
     this.splittedUserStoriesData = this.splittedUserStories;
+    this.displayedStories = this.initialStories as Array<UserStory>;
   },
   methods: {
-    setUserStoryAsActive(index) {
-      if (index >= this.userStories.length) {
-        console.log("Pressed after deletion");
+    getOriginalIndex(index: number) {
+      if (this.filterActive && index >= 0 && index < this.filteredStories.length) {
+        return this.filteredStories[index].originalIndex;
       } else {
-        this.selectedStoryIndex = index;
-        this.$emit("selectedStory", index);
-        this.publishChanges(index, false);
+        return index;
       }
     },
+    setUserStoryAsActive(index: number) {
+      const originalIndex = this.getOriginalIndex(index);
+      this.selectedStoryIndex = originalIndex;
+      this.$emit("selectedStory", originalIndex);
+    },
     addUserStory() {
-      const story: UserStory = {
+      const newStory: UserStory = {
         id: this.storyMode === "US_JIRA" ? null : this.generateNumericUUID().toString(),
         title: "",
         description: "",
         estimation: null,
         isActive: false,
       };
-      this.userStories.push(story);
+      this.userStories.push(newStory);
       this.setUserStoryAsActive(this.userStories.length - 1);
     },
-    swapPriority: function () {
+    filterStories() {
       if (!this.filterActive) {
         this.savedStories = this.userStories;
       }
       this.userStories = this.savedStories;
-      if (this.input !== "") {
-        const filteredUserStories: UserStory[] = [];
-        this.userStories.forEach((userStory) => {
-          if (userStory.title.toLowerCase().includes(this.input.toLowerCase())) {
-            filteredUserStories.push(userStory);
-          }
-        });
-        if (filteredUserStories.length > 0) {
-          this.filterActive = true;
-          this.userStories = filteredUserStories;
-        } else {
-          this.filterActive = true;
-          this.userStories = [];
-        }
+      if (this.input) {
+        const filteredUserStories = this.userStories
+          .map((story, index) => ({ story, originalIndex: index }))
+          .filter(({ story }) => story.title.toLowerCase().includes(this.input.toLowerCase()));
+        this.filterActive = true;
+        this.filteredStories = filteredUserStories;
+        this.userStories = filteredUserStories.map((item) => item.story);
       } else {
         this.filterActive = false;
         this.userStories = this.savedStories;
       }
     },
-    deleteStory(index) {
-      this.publishChanges(index, true);
-    },
-    publishChanges(index, remove) {
-      if (this.userStories[index] !== undefined) {
-        if (this.userStories[index].title !== "" || remove) {
-          this.$emit("userStoriesChanged", { us: this.userStories, idx: index, doRemove: remove });
-        }
-      }
+    deleteStory(index: number) {
+      const originalIndex = this.getOriginalIndex(index);
+      this.publishChanges(originalIndex, true);
     },
-    markUserStory(index) {
-      const stories = this.userStories.map((s) => ({
-        id: s.id,
-        title: s.title,
-        description: s.description,
-        estimation: s.estimation,
-        isActive: false,
-      }));
-      stories[index].isActive = true;
-      this.userStories = stories;
-      this.publishChanges(index, false);
+    publishChanges(index: number, remove: boolean) {
+      this.$emit("userStoriesChanged", { us: this.savedStories, idx: index, doRemove: remove });
     },
     generateNumericUUID() {
       let uuid: number;