Communication: Add FAQ search bar

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 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

@@ -4,7 +4,6 @@ import { map } from 'rxjs/operators';
 import { 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 { SearchComponent } from 'app/shared/search/search.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, SearchComponent],
 })
 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;
 
+    searchValue = '';
+
     readonly ButtonType = ButtonType;
 
     // Icons
@@ -92,4 +93,8 @@ export class CourseFaqComponent implements OnInit, OnDestroy {
     private applyFilters(): void {
         this.filteredFaqs = this.faqService.applyFilters(this.activeFilters, this.faqs);
     }
+
+    setSearchValue(searchValue: string) {
+        this.searchValue = searchValue;
+    }
 }

src/main/webapp/app/shared/search/search.component.html

@@ -0,0 +1,19 @@
+<form [formGroup]="filterForm">
+    <div class="input-group rounded-3">
+        <input
+            id="search"
+            type="text"
+            class="form-control rounded-3 border"
+            formControlName="searchFilter"
+            placeholder="{{ 'artemisApp.course.exercise.search.searchPlaceholder' | artemisTranslate }}"
+            aria-label="Search Field"
+            aria-describedby="search-field"
+            (keyup)="setSearchValue(filterForm.value.searchFilter)"
+        />
+        <div class="position-relative my-auto mn-icon-field">
+            <button class="btn btn-primary btn-md ms-3" (click)="applySearch(this.searchValue)">
+                <fa-icon [icon]="faMagnifyingGlass" />
+            </button>
+        </div>
+    </div>
+</form>

src/main/webapp/app/shared/search/search.component.scss

@@ -0,0 +1,4 @@
+.mn-icon-field {
+    margin-left: -3.5rem !important;
+    z-index: 10;
+}

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

@@ -0,0 +1,31 @@
+import { Component, output } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { faMagnifyingGlass, faTimes } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+    selector: 'jhi-search',
+    templateUrl: './search.component.html',
+    styleUrls: ['./search.component.scss'],
+    standalone: true,
+    imports: [ReactiveFormsModule, ArtemisSharedModule],
+})
+export class SearchComponent {
+    faMagnifyingGlass = faMagnifyingGlass;
+    faTimes = faTimes;
+
+    searchValue: string;
+    newSearchEvent = output<string>();
+
+    filterForm: FormGroup = new FormGroup({
+        searchFilter: new FormControl<string>(''),
+    });
+
+    setSearchValue(searchValue: string) {
+        this.searchValue = searchValue;
+    }
+
+    applySearch(searchValue: string) {
+        this.newSearchEvent.emit(searchValue);
+    }
+}