Merge pull request #11 from szymonpoltorak/search

Search

todo-app-frontend/src/app/core/enums/RouterPaths.ts

@@ -24,4 +24,5 @@ export enum RouterPaths {
     COLLABORATORS_DIRECT = "/home/collaborators",
 
     SEARCH_DIRECT = "/home/search",
+    SEARCH_PATH = "search",
 }

todo-app-frontend/src/app/pages/home/collaborators/collaborator/collaborator.component.html

@@ -8,7 +8,11 @@
         </div>
     </div>
 
-    <button (click)="emitRemoveCollaboratorEvent()" mat-mini-fab color="warn">
+    <button *ngIf="isAlreadyCollaborator" (click)="emitRemoveCollaboratorEvent()" mat-mini-fab color="warn">
         <mat-icon>remove</mat-icon>
     </button>
+
+    <button *ngIf="!isAlreadyCollaborator" (click)="emitAddCollaboratorEvent()" mat-mini-fab color="accent">
+        <mat-icon>add</mat-icon>
+    </button>
 </div>

todo-app-frontend/src/app/pages/home/collaborators/collaborator/collaborator.component.ts

@@ -8,9 +8,15 @@ import { Collaborator } from "@core/data/home/Collaborator";
 })
 export class CollaboratorComponent {
     @Input() collaborator !: Collaborator;
+    @Input() isAlreadyCollaborator: boolean = false;
+    @Output() readonly addCollaboratorEvent: EventEmitter<Collaborator> = new EventEmitter<Collaborator>();
     @Output() readonly removeCollaboratorEvent: EventEmitter<number> = new EventEmitter<number>();
 
     emitRemoveCollaboratorEvent(): void {
         this.removeCollaboratorEvent.emit(this.collaborator.collaboratorId);
     }
+
+    emitAddCollaboratorEvent(): void {
+        this.addCollaboratorEvent.emit(this.collaborator);
+    }
 }

todo-app-frontend/src/app/pages/home/collaborators/collaborators.component.html

@@ -49,6 +49,7 @@ <h1>Menu</h1>
             <mat-list>
                 <app-collaborator *ngFor="let collaborator of collaborators$ | async"
                                   (removeCollaboratorEvent)="removeCollaborator($event)"
+                                  [isAlreadyCollaborator]="true"
                                   [collaborator]="collaborator">
                 </app-collaborator>
             </mat-list>

todo-app-frontend/src/app/pages/home/collaborators/collaborators.module.ts

@@ -32,6 +32,9 @@ import { MatListModule } from "@angular/material/list";
         MatToolbarModule,
         MatCardModule,
         MatListModule
+    ],
+    exports: [
+        CollaboratorComponent
     ]
 })
 export class CollaboratorsModule {

todo-app-frontend/src/app/pages/home/groups/groups.component.html

@@ -20,7 +20,7 @@ <h1>Menu</h1>
                 Collaborators
             </button>
 
-            <button (click)="changeToGroupsView()" class="menu-option" extended mat-fab>
+            <button (click)="changeToSearchView()" class="menu-option" extended mat-fab>
                 <mat-icon>search</mat-icon>
                 Search
             </button>

todo-app-frontend/src/app/pages/home/home-routing.module.ts

@@ -18,6 +18,11 @@ const routes: Routes = [
         loadChildren: () => import("./collaborators/collaborators.module")
             .then(module => module.CollaboratorsModule)
     },
+    {
+        path: RouterPaths.SEARCH_PATH,
+        loadChildren: () => import("./search/search.module")
+            .then(module => module.SearchModule)
+    },
     {
         path: RouterPaths.PROFILE_PATH,
         loadChildren: () => import("./profile/profile.module")

todo-app-frontend/src/app/pages/home/search/search-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RouterPaths } from "@enums/RouterPaths";
+import { SearchComponent } from "./search.component";
+
+const routes: Routes = [
+    {
+        path: RouterPaths.CURRENT_PATH,
+        component: SearchComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class SearchRoutingModule {
+}

todo-app-frontend/src/app/pages/home/search/search.component.html

@@ -0,0 +1,80 @@
+<mat-drawer-container autosize class="home-container">
+    <mat-drawer #drawer class="sidenav" mode="push">
+        <h1>Menu</h1>
+
+        <mat-divider></mat-divider>
+
+        <section class="button-column">
+            <button (click)="changeToProfileView()" class="menu-option" extended mat-fab>
+                <mat-icon>person</mat-icon>
+                Profile
+            </button>
+
+            <button (click)="changeToGroupsView()" class="menu-option" extended mat-fab>
+                <mat-icon>list</mat-icon>
+                Groups
+            </button>
+
+            <button (click)="changeToCollaboratorsView()" class="menu-option" extended mat-fab>
+                <mat-icon>group</mat-icon>
+                Collaborators
+            </button>
+
+            <button (click)="changeToGroupsView()" class="menu-option" extended mat-fab>
+                <mat-icon>search</mat-icon>
+                Search
+            </button>
+
+            <button (click)="logoutUser()" class="menu-option" extended mat-fab>
+                <mat-icon>logout</mat-icon>
+                Logout
+            </button>
+        </section>
+    </mat-drawer>
+
+    <mat-toolbar class="navbar" color="primary">
+        <button (click)="drawer.toggle()" aria-label="Menu button" class="menu-icon" mat-icon-button>
+            <mat-icon>menu</mat-icon>
+        </button>
+
+        <span>ToDo</span>
+    </mat-toolbar>
+
+    <div class="center-container">
+        <mat-card class="search-container">
+            <div class="search-bar">
+                <mat-form-field class="search-input">
+                    <mat-label>Find Collaborators</mat-label>
+
+                    <input matInput
+                           placeholder="Example Name"
+                           type="text"
+                           [formControl]="suggestionControl"
+                           [matAutocomplete]="searchSuggestions">
+
+                    <mat-autocomplete autoActiveFirstOption #searchSuggestions="matAutocomplete">
+                        <mat-option *ngFor="let suggestion of suggestions$ | async" [value]="suggestion">
+                            {{ suggestion }}
+                        </mat-option>
+                    </mat-autocomplete>
+                </mat-form-field>
+
+                <button (click)="findCollaboratorByName()"
+                        type="submit"
+                        class="search-submit-button"
+                        color="primary"
+                        mat-mini-fab>
+                    <mat-icon>search</mat-icon>
+                </button>
+            </div>
+
+            <mat-list>
+                <app-collaborator *ngFor="let collaborator of visibleCollaborators$ | async"
+                                  (addCollaboratorEvent)="addNewCollaborator($event)"
+                                  [isAlreadyCollaborator]="false"
+                                  [collaborator]="collaborator">
+                </app-collaborator>
+            </mat-list>
+        </mat-card>
+    </div>
+</mat-drawer-container>

todo-app-frontend/src/app/pages/home/search/search.component.scss

@@ -0,0 +1,23 @@
+@import "../sidebar";
+
+.search-container {
+    margin-top: 3em;
+    margin-bottom: 3em;
+    min-width: 60em;
+    min-height: 50em;
+    padding: 2em;
+}
+
+.search-input {
+    width: 100%;
+}
+
+.search-bar {
+    display: flex;
+    justify-content: space-between;
+    gap: 2em;
+}
+
+.search-submit-button {
+    margin-top: 0.5em;
+}

todo-app-frontend/src/app/pages/home/search/search.component.ts

@@ -0,0 +1,82 @@
+import { Component, OnInit } from '@angular/core';
+import { SideMenuActions } from "@core/interfaces/home/SideMenuActions";
+import { map, Observable, of, startWith, Subject, takeUntil } from "rxjs";
+import { AuthService } from "@core/services/auth/auth.service";
+import { SideMenuService } from "@core/services/home/side-menu.service";
+import { FormControl } from "@angular/forms";
+import { Collaborator } from "@core/data/home/Collaborator";
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.scss']
+})
+export class SearchComponent implements SideMenuActions, OnInit {
+    private destroyLogout$: Subject<void> = new Subject<void>();
+    private options !: string[];
+    suggestionControl: FormControl = new FormControl<any>("");
+    suggestions$ !: Observable<string[]>;
+    visibleCollaborators$ !: Observable<Collaborator[]>;
+
+    constructor(private authService: AuthService,
+                private sideMenuService: SideMenuService) {
+    }
+
+    changeToGroupsView(): void {
+        this.sideMenuService.changeToGroupsView();
+    }
+
+    changeToProfileView(): void {
+        this.sideMenuService.changeToProfileView();
+    }
+
+    changeToCollaboratorsView(): void {
+        this.sideMenuService.changeToCollaboratorsView();
+    }
+
+    changeToSearchView(): void {
+        this.sideMenuService.changeToSearchView();
+    }
+
+    logoutUser(): void {
+        this.authService.logoutUser()
+            .pipe(takeUntil(this.destroyLogout$))
+            .subscribe(() => this.sideMenuService.logoutUser());
+    }
+
+    ngOnInit(): void {
+        this.options = ["Szymon Kowalski", "Janusz Balcerzak", "Tomasz Kopernik", "Jacek Krakowski", "Szymon Wlodarczyk"];
+
+        this.suggestions$ = this.suggestionControl.valueChanges.pipe(
+            startWith(""),
+            map((option: string) => this.filterValues(option || ""))
+        );
+    }
+
+    private filterValues(value: string): string[] {
+        const filterValue: string = value.toLowerCase();
+
+        return this.options.filter((option: string) => option.toLowerCase().includes(filterValue));
+    }
+
+    findCollaboratorByName(): void {
+        let i: number = 0;
+
+        const collaborators: Collaborator[] = this.filterValues(this.suggestionControl.value).map(
+            (name: string): Collaborator => {
+                return {
+                  fullName: name,
+                  username: `${name.replace(" ", "").toLowerCase()}@mail.com`,
+                  collaboratorId: i++
+                };
+            }
+        );
+        console.log(collaborators);
+
+        this.visibleCollaborators$ = of(collaborators);
+    }
+
+    addNewCollaborator(event: Collaborator): void {
+        console.log(event);
+    }
+}

todo-app-frontend/src/app/pages/home/search/search.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SearchRoutingModule } from './search-routing.module';
+import { SearchComponent } from "./search.component";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCardModule } from "@angular/material/card";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatIconModule } from "@angular/material/icon";
+import { MatListModule } from "@angular/material/list";
+import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatInputModule } from "@angular/material/input";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { ReactiveFormsModule } from "@angular/forms";
+import { CollaboratorsModule } from "../collaborators/collaborators.module";
+
+
+@NgModule({
+    declarations: [
+        SearchComponent
+    ],
+    imports: [
+        CommonModule,
+        SearchRoutingModule,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        MatInputModule,
+        MatAutocompleteModule,
+        ReactiveFormsModule,
+        CollaboratorsModule
+    ]
+})
+export class SearchModule {
+}