added back user search funtionality in typescript

chatto/.gitignore

@@ -29,7 +29,8 @@ build/
 
 ### VS Code ###
 .vscode/
+../vscode/
 
 src/main/javascript/node_modules
 config/
-/home/rohan/git/chatto-spring/chatto/src/main/resources/static/js/bundle.js
+src/main/resources/static/js/bundle.js

chatto/src/main/javascript/ts/src/main.ts

@@ -18,11 +18,17 @@ import * as log from 'loglevel';
 import { EncryptionService } from "./service/EncryptionService";
 import { SJCLEncryptionService } from "./service/SJCLEncryptionService";
 import { MessageCipherDTO } from "./dto/MessageCipherDTO";
+import { SearchService } from "./service/SearchService";
+import { FuseSearchService } from "./service/FuseSearchService";
+import { ChatMessageDTO } from "./dto/ChatMessageDTO";
 // var markdownit = require('markdown-it');
 // var md = new markdownit();
 
 
-const userBox = document.getElementById('contacts-box');
+const usersListElement = document.getElementById('contacts-box');
+const userSearchButton = document.getElementById('user-search');
+const userSearchInputElement = document.getElementById('user-search-term')
+const userSearchCancelButton = document.getElementById('user-search-cancel')
 
 log.setLevel("TRACE")
 
@@ -31,7 +37,7 @@ const chatModel = new ChatModel();
 const userModel = new UserModel();
 // const userModel = ModelFactory.createModel("USER");
 // @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
-const userView = new UserView(userModel, chatModel, userBox);
+const userView = new UserView(userModel, chatModel, usersListElement, userSearchInputElement, userSearchButton, userSearchCancelButton);
 
 // console.log(userBox);
 
@@ -77,4 +83,7 @@ console.log(encryptionService.decrypt("password", messageCipherDTO));
 
 Handlebars.registerHelper('avatar', function() {
     return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
-});
+});
+
+const testList: ChatMessageDTO[] = [];
+const cmSearchService: SearchService<ChatMessageDTO> = new FuseSearchService(["userName"]);

chatto/src/main/javascript/ts/src/model/UserModel.ts

@@ -14,10 +14,22 @@ export class UserModel implements Subject {
   * type, etc.).
   */
     private readonly observers: Observer[] = [];
-    private state: ActiveUserViewModel[] | undefined;
+
+   
+    private _activeUsersList: ActiveUserViewModel[] | undefined;
     // @ts-ignore: Cannot find name 'hostAddress'.
 
     constructor() { }
+
+     /**
+     * Getter activeUsersList
+     * @return {ActiveUserViewModel[] }
+     */
+	public get activeUsersList(): ActiveUserViewModel[] | undefined {
+		return this._activeUsersList;
+    }
+    
+    
     /**
      * The subscription management methods.
      */
@@ -38,12 +50,12 @@ export class UserModel implements Subject {
     public notify(): void {
         console.log('Subject: Notifying observers...');
         for (const observer of this.observers) {
-            observer.update(this.state);
+            observer.update(this._activeUsersList);
         }
     }
 
     public someBusinessMethod(activeuserList: ActiveUserViewModel[]): void {
-        this.state = activeuserList;
+        this._activeUsersList = activeuserList;
         this.helperMethod();
         console.log(`Subject: My state has just changed`);
         console.log(activeuserList);
@@ -61,7 +73,7 @@ export class UserModel implements Subject {
                 // sessionStorage.setItem('activeUsers', JSON.stringify(data));
                 // console.log(sessionStorage.getItem('activeUsers'));
                 console.log(`Subject: received ajax active users`);
-                this.state = data;
+                this._activeUsersList = data;
                 this.notify();
             })
         }

chatto/src/main/javascript/ts/src/service/FuseSearchService.ts

@@ -0,0 +1,31 @@
+import { SearchService } from "./SearchService";
+// import * as Fuse from 'fuse.js';
+import Fuse = require('fuse.js');
+
+export class FuseSearchService<T> implements SearchService<T> {
+    // private readonly _fuse: Fuse<T, Object>;
+    private readonly _params: Fuse.FuseOptions<T>;
+
+    constructor(keys: string[], params: Fuse.FuseOptions<T> = {
+        shouldSort: true,
+        threshold: 0.01,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        // keys: [
+        //     "userName",
+        // ]
+    }) {
+        this._params = params;
+        this._params.keys = keys;
+        // this._fuse = new Fuse(list, this._params);
+    }
+
+    search<T>(list: T[], searchTerm: string): T[] {
+        const fuse = new Fuse<T, Fuse.FuseOptions<any>>(list, this._params);
+        // fuse.search(searchTerm);
+        return fuse.search(searchTerm) as T[];
+    }
+
+}

chatto/src/main/javascript/ts/src/service/SearchService.ts

@@ -0,0 +1,3 @@
+export interface SearchService<T> {
+    search<T>(list: T[], pattern: string): T[];
+}

chatto/src/main/javascript/ts/src/view/UserView.ts

@@ -8,20 +8,33 @@ import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
 import { ChatModel } from "../model/ChatModel";
 import log = require("loglevel");
 import * as DOMPurify from "dompurify";
+import { SearchService } from "../service/SearchService";
+import { FuseSearchService } from "../service/FuseSearchService";
+import { UserModel } from "../model/UserModel";
 
 export class UserView implements Observer {
-    private readonly _model: Model;
+    private readonly _model: UserModel;
     private readonly _chatModel: ChatModel;
-    private readonly _element: HTMLElement;
+    private readonly _usersListElement: HTMLElement;
+    private readonly _userSearchInputElement: HTMLInputElement;
+    private readonly _userSearchButton: HTMLElement;
+    private readonly _userSearchCancelButton: HTMLElement;
+    private readonly _searchService: SearchService<ActiveUserViewModel>;
     // private userBoxes: any[] =  [];
 
 
-    constructor(model: Model, chatModel: ChatModel, element: HTMLElement) {
+    constructor(model: UserModel, chatModel: ChatModel, usersListElement: HTMLElement,
+        userSearchInputElement: HTMLInputElement, userSearchButton: HTMLElement, userSearchCancelButton: HTMLElement) {
         this._model = model;
         this._chatModel = chatModel;
-        this._element = element;
-    }
+        this._usersListElement = usersListElement;
+        this._userSearchInputElement = userSearchInputElement;
+        this._userSearchButton = userSearchButton
+        this._searchService = new FuseSearchService(["userName"]);
+        this._userSearchCancelButton = userSearchCancelButton;
 
+        this.addSearchEventListeners();
+    }
 
 
 
@@ -32,13 +45,15 @@ export class UserView implements Observer {
             html += template(element);
         });
         // this._element.innerHTML = html;
-        $(this._element).html(DOMPurify.sanitize(html));
+        $(this._usersListElement).html(DOMPurify.sanitize(html));
         this.addUserCallBacks();
-        console.log(this._element.innerHTML);
+        console.log(this._usersListElement.innerHTML);
     }
 
-    private helper(): void {
-
+    private addSearchEventListeners(): void {
+        this.addSearchButtonEL();
+        this.addSearchCancelEL();
+        this.addSearchInputEL();
     }
 
     private addUserCallBacks(): void {
@@ -74,8 +89,7 @@ export class UserView implements Observer {
         // Add the active class to the current/clicked button
         else if (current.length == 0) {
             let elem = document.getElementById('passphrase-initial') as any;
-            if(elem == null)
-            {
+            if (elem == null) {
                 log.error('passphraseInput element reference is null');
                 return;
             }
@@ -104,4 +118,44 @@ export class UserView implements Observer {
         el.className += " active";
     }
 
+    private addSearchButtonEL() {
+        this._userSearchButton.addEventListener('submit', (e) => {
+            e.preventDefault();
+            // log.trace(temp);
+            const searchTerm = this._userSearchInputElement.value;
+            log.debug("search term value = " + searchTerm);
+            const list = this._model.activeUsersList;
+            log.debug("active users");
+            log.debug(list);
+            if (list == null) {
+                log.error("Users list is null");
+                return;
+            }
+            let searchResult = this._searchService.search(list, searchTerm);
+            this.update(searchResult);
+            log.debug(searchResult);
+        })
+    }
+
+    private addSearchInputEL() {
+        this._userSearchInputElement.addEventListener('input', (e) => {
+            e.preventDefault();
+            if (this._userSearchInputElement.value.length < 2) {
+                log.debug("inputted")
+                this._userSearchCancelButton.hidden = false;
+            }
+        })
+    }
+
+    private addSearchCancelEL() {
+        this._userSearchCancelButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this._userSearchInputElement.value = "";
+            this._userSearchCancelButton.hidden = true;
+            let list = this._model.activeUsersList;
+            // @ts-ignore
+            this.update(list)
+        })
+    }
+
 }