Communication: Add FAQ search bar

src/main/webapp/app/faq/faq.service.ts

@@ -137,4 +137,16 @@ export class FaqService {
             return categories.some((category) => filteredCategory.has(category!));
         }
     }
+
+    hasSearchTokens(faq: Faq, searchTerm: string) {
+        if (searchTerm == '') {
+            return true;
+        }
+        const tokens = searchTerm.split(' ');
+        if (tokens) {
+            let faqText = faq.questionTitle + ' ' + faq.questionAnswer;
+            faqText = faqText.toLowerCase();
+            return tokens.every((token) => faqText.includes(token.toLowerCase()));
+        }
+    }
 }

src/main/webapp/app/overview/course-faq/course-faq.component.html

@@ -1,6 +1,7 @@
 <div>
-    <div class="input-group mb-2 rounded-3 p-2 me-2 module-bg" style="display: flex; justify-content: end">
-        <div class="me-2" aria-label="Filter Dropdown" ngbDropdown>
+    <div class="input-group mb-2 rounded-3 p-2 me-2 module-bg d-flex justify-content-between">
+        <jhi-search-filter class="flex-grow-1" (newSearchEvent)="setSearchValue($event)" />
+        <div class="ms-2 me-2" aria-label="Filter Dropdown" ngbDropdown>
             <button class="btn" [ngClass]="{ 'btn-secondary': activeFilters.size === 0, 'btn-success': activeFilters.size > 0 }" ngbDropdownToggle id="filter-dropdown-button">
                 <fa-icon [icon]="faFilter" />
                 <span class="d-s-none d-md-inline" jhiTranslate="artemisApp.courseOverview.exerciseList.filter" [translateValues]="{ num: activeFilters.size }"></span>

src/main/webapp/app/overview/course-faq/course-faq.component.ts

@@ -1,10 +1,9 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs/operators';
-import { Subject, Subscription } from 'rxjs';
+import { debounceTime, map } from 'rxjs/operators';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { ButtonType } from 'app/shared/components/button.component';
-import { SidebarData } from 'app/types/sidebar';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { CourseFaqAccordionComponent } from 'app/overview/course-faq/course-faq-accordion-component';
@@ -16,14 +15,15 @@ import { FaqCategory } from 'app/entities/faq-category.model';
 import { loadCourseFaqCategories } from 'app/faq/faq.utils';
 import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component';
 import { onError } from 'app/shared/util/global.utils';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 @Component({
     selector: 'jhi-course-faq',
     templateUrl: './course-faq.component.html',
     styleUrls: ['../course-overview.scss', 'course-faq.component.scss'],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [ArtemisSharedComponentModule, ArtemisSharedModule, CourseFaqAccordionComponent, CustomExerciseCategoryBadgeComponent],
+    imports: [ArtemisSharedComponentModule, ArtemisSharedModule, CourseFaqAccordionComponent, CustomExerciseCategoryBadgeComponent, SearchFilterComponent],
 })
 export class CourseFaqComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();
@@ -36,10 +36,11 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
     existingCategories: FaqCategory[];
     activeFilters = new Set<string>();
 
-    sidebarData: SidebarData;
     hasCategories = false;
     isCollapsed = false;
 
+    searchInput = new BehaviorSubject<string>('');
+
     readonly ButtonType = ButtonType;
 
     // Icons
@@ -56,6 +57,9 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
             this.loadFaqs();
             this.loadCourseExerciseCategories(this.courseId);
         });
+        this.searchInput.pipe(debounceTime(500)).subscribe((searchTerm: string) => {
+            this.defineSearchedAndFilteredFaq(searchTerm);
+        });
     }
 
     private loadCourseExerciseCategories(courseId: number) {
@@ -86,10 +90,25 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
 
     toggleFilters(category: string) {
         this.activeFilters = this.faqService.toggleFilter(category, this.activeFilters);
-        this.applyFilters();
+        this.defineSearchedAndFilteredFaq(this.searchInput.getValue());
     }
 
     private applyFilters(): void {
         this.filteredFaqs = this.faqService.applyFilters(this.activeFilters, this.faqs);
     }
+
+    private applySearch(searchTerm: string) {
+        this.filteredFaqs = this.filteredFaqs.filter((faq) => {
+            return this.faqService.hasSearchTokens(faq, searchTerm);
+        });
+    }
+
+    setSearchValue(searchValue: string) {
+        this.searchInput.next(searchValue);
+    }
+
+    defineSearchedAndFilteredFaq(searchTerm: string) {
+        this.applyFilters();
+        this.applySearch(searchTerm);
+    }
 }

src/main/webapp/app/shared/search-filter/search-filter.component.ts

@@ -1,11 +1,14 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { faMagnifyingGlass, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 @Component({
     selector: 'jhi-search-filter',
     templateUrl: './search-filter.component.html',
     styleUrls: ['./search-filter.component.scss'],
+    standalone: true,
+    imports: [ArtemisSharedModule],
 })
 export class SearchFilterComponent {
     faMagnifyingGlass = faMagnifyingGlass;

src/main/webapp/app/shared/shared.module.ts

@@ -27,7 +27,6 @@ import { StickyPopoverDirective } from 'app/shared/sticky-popover/sticky-popover
 import { ConfirmEntityNameComponent } from 'app/shared/confirm-entity-name/confirm-entity-name.component';
 import { DetailOverviewNavigationBarComponent } from 'app/shared/detail-overview-navigation-bar/detail-overview-navigation-bar.component';
 import { ScienceDirective } from 'app/shared/science/science.directive';
-import { SearchFilterComponent } from './search-filter/search-filter.component';
 
 @NgModule({
     imports: [ArtemisSharedLibsModule, ArtemisSharedCommonModule, ArtemisSharedPipesModule, RouterModule],
@@ -56,7 +55,6 @@ import { SearchFilterComponent } from './search-filter/search-filter.component';
         AssessmentWarningComponent,
         StickyPopoverDirective,
         ScienceDirective,
-        SearchFilterComponent,
     ],
     exports: [
         ArtemisSharedLibsModule,
@@ -87,7 +85,6 @@ import { SearchFilterComponent } from './search-filter/search-filter.component';
         CompetencySelectionComponent,
         StickyPopoverDirective,
         ScienceDirective,
-        SearchFilterComponent,
     ],
 })
 export class ArtemisSharedModule {}

src/main/webapp/app/shared/sidebar/sidebar.module.ts

@@ -16,6 +16,7 @@ import { SidebarCardDirective } from 'app/shared/sidebar/sidebar-card.directive'
 import { ConversationOptionsComponent } from 'app/shared/sidebar/conversation-options/conversation-options.component';
 import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component';
 import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
+import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
 
 @NgModule({
     imports: [
@@ -28,6 +29,7 @@ import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
         SubmissionResultStatusModule,
         SidebarCardDirective,
         ArtemisExamSharedModule,
+        SearchFilterComponent,
     ],
     declarations: [
         SidebarAccordionComponent,

src/test/javascript/spec/component/overview/course-faq/course-faq.component.spec.ts

@@ -22,8 +22,8 @@ import { FaqCategory } from 'app/entities/faq-category.model';
 function createFaq(id: number, category: string, color: string): Faq {
     const faq = new Faq();
     faq.id = id;
-    faq.questionTitle = 'questionTitle';
-    faq.questionAnswer = 'questionAnswer';
+    faq.questionTitle = 'questionTitle ' + id;
+    faq.questionAnswer = 'questionAnswer ' + id;
     faq.categories = [new FaqCategory(category, color)];
     return faq;
 }
@@ -84,6 +84,9 @@ describe('CourseFaqs', () => {
                     applyFilters: () => {
                         return [faq2, faq3];
                     },
+                    hasSearchTokens: () => {
+                        return true;
+                    },
                 }),
             ],
         })
@@ -125,6 +128,20 @@ describe('CourseFaqs', () => {
         expect(courseFaqComponent.filteredFaqs).toEqual([faq2, faq3]);
     });
 
+    it('should search through already filtered array', () => {
+        const searchSpy = jest.spyOn(faqService, 'hasSearchTokens');
+        const applyFilterSpy = jest.spyOn(faqService, 'applyFilters');
+        courseFaqComponent.setSearchValue('questionTitle');
+        courseFaqComponent.defineSearchedAndFilteredFaq(courseFaqComponent.searchInput.getValue());
+        expect(applyFilterSpy).toHaveBeenCalledOnce();
+        expect(searchSpy).toHaveBeenCalledTimes(2);
+        expect(searchSpy).toHaveBeenCalledWith(faq2, 'questionTitle');
+        expect(searchSpy).toHaveBeenCalledWith(faq3, 'questionTitle');
+        expect(courseFaqComponent.filteredFaqs).toHaveLength(2);
+        expect(courseFaqComponent.filteredFaqs).not.toContain(faq1);
+        expect(courseFaqComponent.filteredFaqs).toEqual([faq2, faq3]);
+    });
+
     it('should catch error if no categories are found', () => {
         alertServiceStub = jest.spyOn(alertService, 'error');
         const error = { status: 404 };

src/test/javascript/spec/service/faq.service.spec.ts

@@ -205,5 +205,14 @@ describe('Faq Service', () => {
             const convertedCategory = FaqService.stringifyFaqCategories(faq2);
             expect(convertedCategory).toEqual(['{"color":"red","category":"testing"}']);
         });
+
+        it('should return if all tokens exist in FAQ title or answer', () => {
+            const faq1 = new Faq();
+            faq1.questionTitle = 'Title';
+            faq1.questionAnswer = 'Answer';
+
+            expect(service.hasSearchTokens(faq1, 'title answer')).toBeTrue();
+            expect(service.hasSearchTokens(faq1, 'title answer missing')).toBeFalse();
+        });
     });
 });