add pipe folder and neue search bar

package.json

@@ -28,6 +28,7 @@
     "@ngx-translate/core": "^10.0.2",
     "@ngx-translate/http-loader": "^4.0.0",
     "@stomp/ng2-stompjs": "^7.2.0",
+    "angular-material": "^1.2.2",
     "angular-tag-cloud-module": "^5.3.0",
     "angularx-qrcode": "^11.0.0",
     "chart.js": "^2.7.3",

src/app/app.module.ts

@@ -63,6 +63,8 @@ import { TagCloudComponent } from './components/shared/tag-cloud/tag-cloud.compo
 import { MatDialogModule } from '@angular/material/dialog';
 import {TagCloudModule} from 'angular-tag-cloud-module';
 import {SpacyService} from './services/http/spacy.service';
+// import { SearchFilterPipe } from './pipe/search-filter.pipe'; // TODO: delete line
+
 
 export function dialogClose(dialogResult: any) {
 }
@@ -99,7 +101,9 @@ export function initializeApp(appConfig: AppConfig) {
     DemoEnComponent,
     HelpEnComponent,
     OverlayComponent,
-    TagCloudComponent
+    TagCloudComponent,
+//    SearchFilterPipe, //TODO: delete line
+
   ],
   imports: [
     MatomoModule,
@@ -175,6 +179,9 @@ export function initializeApp(appConfig: AppConfig) {
       useValue: []
     }
   ],
+  exports: [
+    // SearchFilterPipe // TODO: delete line
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/components/participant/participant.module.ts

@@ -25,8 +25,10 @@ import { MarkdownModule } from 'ngx-markdown';
     }),
     MarkdownModule
   ],
+  exports: [
+  ],
   declarations: [
-    RoomParticipantPageComponent
+    RoomParticipantPageComponent,
   ]
 })
 export class ParticipantModule {

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html

@@ -5,6 +5,18 @@
     </mat-card>
 
     <div align="end">
+          <mat-form-field class="example-full-width">
+             <input
+                    [formControl]="control"
+                    [matAutocomplete]="auto"
+                    (input)="searchComments()" [(ngModel)]="searchInput" class="toolbar-search" type="text" matInput>
+             <mat-placeholder>Search</mat-placeholder>
+             <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
+          </mat-form-field>
+        <mat-autocomplete #auto="matAutocomplete">
+        </mat-autocomplete>
+          <!--mat-autocomplete #auto="matAutoComplete"></mat-autocomplete-->
+
       <button  mat-button [matMenuTriggerFor]="sortMenu" mat-ripple>
         <mat-icon>sort</mat-icon>
       </button>
@@ -12,6 +24,7 @@
 
     <mat-menu #sortMenu>
       <button mat-menu-item (click)="sortQuestions(sortModeEnum.ALPHABETIC)">
+
         <mat-icon>sort_by_alpha</mat-icon>
         {{'topic-cloud-dialog.sort-Alpha' | translate}} </button>
       <button mat-menu-item (click)="sortQuestions(sortModeEnum.QUESTIONSCOUNT)">
@@ -22,10 +35,11 @@
     <mat-accordion>
       <mat-expansion-panel (opened)="panelOpenState = true"
                            (closed)="panelOpenState = false"
-                           *ngFor="let keyword of keywords">
+                           *ngFor="let keyword of keywordsSubject | async | searchFilter: searchInput">
         <mat-expansion-panel-header class="color">
           <mat-panel-title [ngClass]="{'edit-keyword': editedKeyword}">
             {{keyword.keyword}}
+
           </mat-panel-title>
           <mat-panel-description>
             {{keyword.questions.length}}

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts

@@ -7,6 +7,13 @@ import { AuthenticationService } from '../../../../services/http/authentication.
 import { UserRole } from '../../../../models/user-roles.enum';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../../services/util/language.service';
+import {FormControl} from "@angular/forms";
+import { SearchFilterPipe } from '../../../../pipe/search-filter.pipe';
+import { EventService } from '../../../../services/util/event.service';
+import {startWith, map, filter} from 'rxjs/operators';
+import {BehaviorSubject, Observable} from "rxjs";
+
+
 
 @Component({
   selector: 'app-topic-cloud-administration',
@@ -25,6 +32,24 @@ export class TopicCloudAdministrationComponent implements OnInit {
   sortModeEnum: typeof SortMode = SortMode; // needed for use in template
   editedKeyword:boolean = false;
 
+  keywordsSubject: BehaviorSubject<Keyword[]> = new BehaviorSubject<Keyword[]>([]);
+
+  // public searchFilter: any = '';
+
+  control=new FormControl();
+  searchInput = '';
+  search = false;
+  hideKeyWordList=true;
+  newkey:Keyword[];
+
+
+  searchPlaceholder = '';
+
+
+
+
+
+
   keywords: Keyword[] = [
     {
       keywordID: 1,
@@ -109,12 +134,14 @@ export class TopicCloudAdministrationComponent implements OnInit {
               }
 
   ngOnInit(): void {
+    this.keywordsSubject.next(this.keywords);
     this.translateService.use(localStorage.getItem('currentLang'));
     this.checkIfUserIsModOrCreator();
     this.checkIfThereAreQuestions();
     this.sortQuestions();
   }
 
+
   sortQuestions(sortMode?: SortMode) {
     if (sortMode !== undefined) {
       this.sortMode = sortMode;
@@ -167,11 +194,20 @@ export class TopicCloudAdministrationComponent implements OnInit {
   }
 
   deleteKeyword(id: number): void{
+
+
     this.keywords.map(keyword => {
-      if (keyword.keywordID == id)
-          this.keywords.splice(this.keywords.indexOf(keyword, 0), 1);
+      if (keyword.keywordID == id) {
+        console.log("before" , this.keywords);
+        //console.log( this.keywords.splice(this.keywords.indexOf(keyword, 0), 1));
+        this.keywords.splice(this.keywords.indexOf(keyword, 0), 1);
+        console.log("after" , this.keywords);
+
+      }
     });
     if (this.keywords.length == 0) {
+      //console.log(this.cloudDialogRef.close());
+    //  this.keywords=this.newkey;
       this.cloudDialogRef.close();
     }
   }
@@ -203,6 +239,35 @@ export class TopicCloudAdministrationComponent implements OnInit {
       }
     })
   }
+  searchComments(): void {
+    this.search = true;
+    if (this.searchInput) {
+      if (this.searchInput.length > 1) {
+        for (let keyword of this.keywords) {
+
+         this.keywords= this.keywords
+            .filter(c => this.checkIfIncludesKeyWord(c.keyword, this.searchInput));
+        }
+      } else if (this.searchInput.length === 0 ) {
+        this.hideKeyWordList = false;
+      }
+    }
+  }
+
+  checkIfIncludesKeyWord(body: string, keyword: string) {
+    return body.toLowerCase().includes(keyword.toLowerCase());
+  }
+
+  private _filter(value: string): Keyword[] {
+    const filterValue = this._normalizeValue(value);
+
+    return this.keywords.filter(key => this._normalizeValue(key.keyword).includes(filterValue));
+  }
+
+  private _normalizeValue(value: string): string {
+
+    return value.toLowerCase().replace(/\s/g, '');
+  }
 }
 
 export enum SortMode {

src/app/components/shared/comment-list/comment-list.component.ts

@@ -98,6 +98,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   fromNow: number;
   moderatorIds: string[];
 
+
   constructor(
     private commentService: CommentService,
     private translateService: TranslateService,
@@ -471,6 +472,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
       this.currentFilter = '';
       this.sortComments(this.currentSort);
       return;
+
     }
     this.filteredComments = this.commentsFilteredByTime.filter(c => {
       switch (type) {

src/app/components/shared/shared.module.ts

@@ -33,6 +33,7 @@ import { TagCloudModule } from 'angular-tag-cloud-module';
 import { TopicCloudConfirmDialogComponent } from './_dialogs/topic-cloud-confirm-dialog/topic-cloud-confirm-dialog.component';
 import { TopicCloudAdministrationComponent } from './_dialogs/topic-cloud-administration/topic-cloud-administration.component';
 import { TopicDialogCommentComponent } from './dialog/topic-dialog-comment/topic-dialog-comment.component';
+import { SearchFilterPipe } from '../../pipe/search-filter.pipe';
 
 @NgModule({
   imports: [
@@ -43,7 +44,7 @@ import { TopicDialogCommentComponent } from './dialog/topic-dialog-comment/topic
     ArsModule,
     MarkdownModule,
     QRCodeModule,
-    TagCloudModule
+    TagCloudModule,
   ],
   declarations: [
     RoomJoinComponent,
@@ -70,7 +71,8 @@ import { TopicDialogCommentComponent } from './dialog/topic-dialog-comment/topic
     MotdMessageComponent,
     TopicCloudConfirmDialogComponent,
     TopicCloudAdministrationComponent,
-    TopicDialogCommentComponent
+    TopicDialogCommentComponent,
+    SearchFilterPipe
   ],
   exports: [
     RoomJoinComponent,
@@ -85,7 +87,8 @@ import { TopicDialogCommentComponent } from './dialog/topic-dialog-comment/topic
     PresentCommentComponent,
     CommentComponent,
     DialogActionButtonsComponent,
-    UserBonusTokenComponent
+    UserBonusTokenComponent,
+    SearchFilterPipe
   ]
 })
 export class SharedModule {

src/app/pipe/search-filter.pipe.spec.ts

+import { SearchFilterPipe } from './search-filter.pipe';
+
+describe('SearchFilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SearchFilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipe/search-filter.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'searchFilter'
+})
+
+
+export class SearchFilterPipe implements PipeTransform {
+
+  // TOO: import a specific type Keyword for safety
+  transform(value: any[], args?: any): any[] {
+    if(!value) return null;
+    if(!args) return value;
+
+    args = args.toLowerCase();
+
+    console.log("Filtering ", value, "after", args)
+
+    return value.filter(function(data){
+      return data.keyword.toLowerCase().includes(args);
+    });
+  }
+
+}