Changeset 77cfe5b

Timestamp:

10/28/21 18:07:12 (3 years ago)

Author:

Стојков Марко <mst@…>

Branches:

dev

Children:

806f4ee

Parents:

2025810

Message:

Search is in navbar

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, throwError } from 'rxjs';
+import { Observable, Subject, throwError } from 'rxjs';
 import { catchError, filter, map } from 'rxjs/operators';
 
@@ -25 +25 @@
 })
 export class QuestionFacadeService {
+  private questionSearchedSubject = new Subject<any>();
+
   effectWorking$: Observable<boolean | HttpErrorResponse>;
 
@@ -41 +43 @@
       })
     );
+  }
+
+  public questionSearched(): Observable<void> {
+    return this.questionSearchedSubject.asObservable();
   }
 
@@ -81 +87 @@
   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';
@@ -30 +29 @@
       }
     });
+
+    this.questionFacade.questionSearched().subscribe(() => {
+      this.router.navigateByUrl('questioning/search');
+    });
   }
 
@@ -35 +38 @@
     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>
-  <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-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>
 </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-card>
-  <mat-card-content>
-    <mat-form-field class="full-width" appearance="fill" appHandleInputFormErrors>
+<mat-expansion-panel [(expanded)]="isExpanded">
+  <mat-expansion-panel-header>
+    <mat-form-field class="full-width" appearance="standard">
       <input
         [placeholder]="'questions-preview-find-question' | translate"
@@ -7 +7 @@
         autocomplete="off"
         [formControl]="questionSearchFormContor"
-        (keydown)="searchQuestionsKeyboard($event)"
+        (keydown.Space)="$event.stopPropagation()"
       />
-      <mat-icon matSuffix>search</mat-icon>
     </mat-form-field>
-    <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>
+  </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>

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, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, OnInit } 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) {}
@@ -23 +22 @@
   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.searched.emit();
+    this.questionSearchFormContor.reset();
+    this.questionCategoriesFormContor.reset();
   }
 }

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({
@@ -51 +52 @@
     MatButtonToggleModule,
     MatBadgeModule,
-    MatStepperModule
+    MatStepperModule,
+    MatExpansionModule
   ],
   exports: [
@@ -76 +78 @@
     MatButtonToggleModule,
     MatBadgeModule,
-    MatStepperModule
+    MatStepperModule,
+    MatExpansionModule
   ]
 })