Changes in / [806f4ee:2025810]

Location:

src/Clients/Angular/finki-chattery/src/app

Files:

• core/state/question-facade.service.ts (modified) (4 diffs)
• modules/questioning/components/questions-preview-general/questions-preview-general.component.html (modified) (1 diff)
• modules/questioning/components/questions-preview-general/questions-preview-general.component.ts (modified) (3 diffs)
• modules/questioning/components/questions-search/questions-search.component.html (modified) (1 diff)
• shared-app/components/generic/header/header.component.html (modified) (1 diff)
• shared-app/components/generic/header/header.component.scss (modified) (1 diff)
• shared-app/components/generic/header/header.component.ts (modified) (1 diff)
• shared-app/components/question/search-question/search-question.component.html (modified) (2 diffs)
• shared-app/components/question/search-question/search-question.component.scss (modified) (1 diff)
• shared-app/components/question/search-question/search-question.component.ts (modified) (3 diffs)
• shared-material/shared-material.module.ts (modified) (3 diffs)

src/Clients/Angular/finki-chattery/src/app/core/state/question-facade.service.ts

@@ -2 +2 @@
 import { Injectable } from '@angular/core';
 import { Action, Store } from '@ngrx/store';
-import { Observable, Subject, throwError } from 'rxjs';
+import { Observable, throwError } from 'rxjs';
 import { catchError, filter, map } from 'rxjs/operators';
 
@@ -25 +25 @@
 })
 export class QuestionFacadeService {
-  private questionSearchedSubject = new Subject<any>();
-
   effectWorking$: Observable<boolean | HttpErrorResponse>;
 
@@ -43 +41 @@
       })
     );
-  }
-
-  public questionSearched(): Observable<void> {
-    return this.questionSearchedSubject.asObservable();
   }
 
@@ -87 +81 @@
   public searchQuestions(searchText: string, categories: string[]): void {
     this.dispatchEffect(new GetSearchQuestions(searchText, categories));
-    this.questionSearchedSubject.next(Math.random());
   }
 

src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.html

@@ +1 @@
+<app-search-question (searched)="routeToSearch()"></app-search-question>
 <div class="margin-x-lg">
   <h1 class="mat-headline">{{ 'questions-preview' | translate }}</h1>

src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.ts

@@ -2 +2 @@
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
+import { CategoryFacadeService } from 'src/app/core/state/category-facade.service';
 import { QuestionFacadeService } from 'src/app/core/state/question-facade.service';
 import { CategoryStateViewModel, PreviewQuestionsOrderEnum } from 'src/app/shared-app/models';
@@ -29 +30 @@
       }
     });
-
-    this.questionFacade.questionSearched().subscribe(() => {
-      this.router.navigateByUrl('questioning/search');
-    });
   }
 
@@ -38 +35 @@
     this.router.navigateByUrl(`questioning/${uid}`);
   }
+
+  routeToSearch(): void {
+    this.router.navigateByUrl(`questioning/search`);
+  }
 }

src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-search/questions-search.component.html

@@ +1 @@
+<app-search-question></app-search-question>
 <div class="margin-x-lg">
   <h1 class="mat-headline">{{ 'questions-search-title' | translate: { searchQuery: (searchQuestionsQuery$ | async)?.text } }}</h1>

src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.html

@@ -1 +1 @@
 <mat-toolbar>
-  <mat-toolbar-row>
-    <span class="cursor" (click)="navigateFromLogo()">FinkiChattery</span>
-    <span class="right"></span>
-
-    <app-button class="margin-y-xs" *ngIf="auth.isStudent()" (action)="askQuestion()" [buttonType]="ButtonType.CallToAction">{{
-      'header-ask-question' | translate
-    }}</app-button>
-    <app-button class="margin-y-xs" *ngIf="auth.isLoggedIn()" (action)="logout()" [buttonType]="ButtonType.Basic">{{
-      'header-logout' | translate
-    }}</app-button>
-  </mat-toolbar-row>
-  <mat-toolbar-row *ngIf="auth.isStudent()">
-    <app-search-question class="search-questions"></app-search-question>
-  </mat-toolbar-row>
+  <span>FinkiChattery</span>
+  <span class="right"></span>
+  <app-button class="margin-y-xs" *ngIf="auth.isStudent()" (action)="askQuestion()" [buttonType]="ButtonType.CallToAction">{{
+    'header-ask-question' | translate
+  }}</app-button>
+  <app-button class="margin-y-xs" *ngIf="auth.isLoggedIn()" (action)="logout()" [buttonType]="ButtonType.Basic">{{
+    'header-logout' | translate
+  }}</app-button>
 </mat-toolbar>

src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.scss

@@ -2 +2 @@
   flex: 1 1 auto;
 }
-
-.search-questions {
-  width: 60%;
-  margin: auto;
-}
-
-@media only screen and (max-width: 600px) {
-  .search-questions {
-    width: 100%;
-    margin: 0;
-  }
-}

src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.ts

@@ -23 +23 @@
     this.router.navigateByUrl('questioning/ask');
   }
-
-  navigateFromLogo(): void {
-    if (this.auth.isStudent()) {
-      this.router.navigateByUrl('questioning/preview');
-    }
-  }
 }

src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.html

@@ -1 @@
-<mat-expansion-panel [(expanded)]="isExpanded">
-  <mat-expansion-panel-header>
-    <mat-form-field class="full-width" appearance="standard">
+<mat-card>
+  <mat-card-content>
+    <mat-form-field class="full-width" appearance="fill" appHandleInputFormErrors>
       <input
         [placeholder]="'questions-preview-find-question' | translate"
@@ -7 +7 @@
         autocomplete="off"
         [formControl]="questionSearchFormContor"
-        (keydown.Space)="$event.stopPropagation()"
+        (keydown)="searchQuestionsKeyboard($event)"
       />
+      <mat-icon matSuffix>search</mat-icon>
     </mat-form-field>
-  </mat-expansion-panel-header>
-  <mat-form-field appearance="standard" class="margin-right-md">
-    <mat-select
-      [formControl]="questionCategoriesFormContor"
-      multiple
-      [placeholder]="'questions-preview-find-question-categories' | translate"
-    >
-      <mat-option *ngFor="let category of categories$ | async" [value]="category.uid">{{ category.translatedName }}</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <app-button [buttonType]="ButtonType.CallToAction" [disabled]="questionSearchFormContor.invalid" (action)="searchQuestions()">{{
-    'questions-search' | translate
-  }}</app-button>
-</mat-expansion-panel>
+    <mat-form-field class="full-width" appearance="fill">
+      <mat-select
+        [formControl]="questionCategoriesFormContor"
+        multiple
+        [placeholder]="'questions-preview-find-question-categories' | translate"
+      >
+        <mat-option *ngFor="let category of categories$ | async" [value]="category.uid">{{ category.translatedName }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </mat-card-content>
+  <mat-card-actions>
+    <app-button [buttonType]="ButtonType.CallToAction" [disabled]="questionSearchFormContor.invalid" (action)="searchQuestions()">{{
+      'questions-search' | translate
+    }}</app-button>
+  </mat-card-actions>
+</mat-card>

src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.scss

@@ -1 @@
-mat-form-field {
-  font-size: initial !important;
-}
-
-mat-expansion-panel {
-  z-index: 1;
-}

src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.ts

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
@@ -12 +12 @@
 })
 export class SearchQuestionComponent implements OnInit {
+  @Output() searched = new EventEmitter();
+
   ButtonType = ButtonType;
   questionSearchFormContor = new FormControl('', [Validators.required, Validators.maxLength(250)]);
   questionCategoriesFormContor = new FormControl();
   categories$ = this.categoriesFacade.getCategories();
-  isExpanded = false;
 
   constructor(private categoriesFacade: CategoryFacadeService, private questionsFacade: QuestionFacadeService) {}
@@ -22 +23 @@
   ngOnInit(): void {}
 
+  public searchQuestionsKeyboard(event: KeyboardEvent): void {
+    if (event.code === 'enter') {
+      this.searchQuestions();
+    }
+  }
+
   public searchQuestions(): void {
-    this.isExpanded = false;
     this.questionsFacade.searchQuestions(this.questionSearchFormContor.value, this.questionCategoriesFormContor.value);
-    this.questionSearchFormContor.reset();
-    this.questionCategoriesFormContor.reset();
+    this.searched.emit();
   }
 }

src/Clients/Angular/finki-chattery/src/app/shared-material/shared-material.module.ts

@@ -25 +25 @@
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatStepperModule } from '@angular/material/stepper';
-import { MatExpansionModule } from '@angular/material/expansion';
 
 @NgModule({
@@ -52 +51 @@
     MatButtonToggleModule,
     MatBadgeModule,
-    MatStepperModule,
-    MatExpansionModule
+    MatStepperModule
   ],
   exports: [
@@ -78 +76 @@
     MatButtonToggleModule,
     MatBadgeModule,
-    MatStepperModule,
-    MatExpansionModule
+    MatStepperModule
   ]
 })