Changeset 77cfe5b


Ignore:
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:
11 edited

Legend:

Unmodified
Added
Removed
  • src/Clients/Angular/finki-chattery/src/app/core/state/question-facade.service.ts

    r2025810 r77cfe5b  
    22import { Injectable } from '@angular/core';
    33import { Action, Store } from '@ngrx/store';
    4 import { Observable, throwError } from 'rxjs';
     4import { Observable, Subject, throwError } from 'rxjs';
    55import { catchError, filter, map } from 'rxjs/operators';
    66
     
    2525})
    2626export class QuestionFacadeService {
     27  private questionSearchedSubject = new Subject<any>();
     28
    2729  effectWorking$: Observable<boolean | HttpErrorResponse>;
    2830
     
    4143      })
    4244    );
     45  }
     46
     47  public questionSearched(): Observable<void> {
     48    return this.questionSearchedSubject.asObservable();
    4349  }
    4450
     
    8187  public searchQuestions(searchText: string, categories: string[]): void {
    8288    this.dispatchEffect(new GetSearchQuestions(searchText, categories));
     89    this.questionSearchedSubject.next(Math.random());
    8390  }
    8491
  • src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-preview-general/questions-preview-general.component.html

    r2025810 r77cfe5b  
    1 <app-search-question (searched)="routeToSearch()"></app-search-question>
    21<div class="margin-x-lg">
    32  <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

    r2025810 r77cfe5b  
    22import { FormControl } from '@angular/forms';
    33import { Router } from '@angular/router';
    4 import { CategoryFacadeService } from 'src/app/core/state/category-facade.service';
    54import { QuestionFacadeService } from 'src/app/core/state/question-facade.service';
    65import { CategoryStateViewModel, PreviewQuestionsOrderEnum } from 'src/app/shared-app/models';
     
    3029      }
    3130    });
     31
     32    this.questionFacade.questionSearched().subscribe(() => {
     33      this.router.navigateByUrl('questioning/search');
     34    });
    3235  }
    3336
     
    3538    this.router.navigateByUrl(`questioning/${uid}`);
    3639  }
    37 
    38   routeToSearch(): void {
    39     this.router.navigateByUrl(`questioning/search`);
    40   }
    4140}
  • src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/questions-search/questions-search.component.html

    r2025810 r77cfe5b  
    1 <app-search-question></app-search-question>
    21<div class="margin-x-lg">
    32  <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

    r2025810 r77cfe5b  
    11<mat-toolbar>
    2   <span>FinkiChattery</span>
    3   <span class="right"></span>
    4   <app-button class="margin-y-xs" *ngIf="auth.isStudent()" (action)="askQuestion()" [buttonType]="ButtonType.CallToAction">{{
    5     'header-ask-question' | translate
    6   }}</app-button>
    7   <app-button class="margin-y-xs" *ngIf="auth.isLoggedIn()" (action)="logout()" [buttonType]="ButtonType.Basic">{{
    8     'header-logout' | translate
    9   }}</app-button>
     2  <mat-toolbar-row>
     3    <span class="cursor" (click)="navigateFromLogo()">FinkiChattery</span>
     4    <span class="right"></span>
     5
     6    <app-button class="margin-y-xs" *ngIf="auth.isStudent()" (action)="askQuestion()" [buttonType]="ButtonType.CallToAction">{{
     7      'header-ask-question' | translate
     8    }}</app-button>
     9    <app-button class="margin-y-xs" *ngIf="auth.isLoggedIn()" (action)="logout()" [buttonType]="ButtonType.Basic">{{
     10      'header-logout' | translate
     11    }}</app-button>
     12  </mat-toolbar-row>
     13  <mat-toolbar-row *ngIf="auth.isStudent()">
     14    <app-search-question class="search-questions"></app-search-question>
     15  </mat-toolbar-row>
    1016</mat-toolbar>
  • src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.scss

    r2025810 r77cfe5b  
    22  flex: 1 1 auto;
    33}
     4
     5.search-questions {
     6  width: 60%;
     7  margin: auto;
     8}
     9
     10@media only screen and (max-width: 600px) {
     11  .search-questions {
     12    width: 100%;
     13    margin: 0;
     14  }
     15}
  • src/Clients/Angular/finki-chattery/src/app/shared-app/components/generic/header/header.component.ts

    r2025810 r77cfe5b  
    2323    this.router.navigateByUrl('questioning/ask');
    2424  }
     25
     26  navigateFromLogo(): void {
     27    if (this.auth.isStudent()) {
     28      this.router.navigateByUrl('questioning/preview');
     29    }
     30  }
    2531}
  • src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.html

    r2025810 r77cfe5b  
    1 <mat-card>
    2   <mat-card-content>
    3     <mat-form-field class="full-width" appearance="fill" appHandleInputFormErrors>
     1<mat-expansion-panel [(expanded)]="isExpanded">
     2  <mat-expansion-panel-header>
     3    <mat-form-field class="full-width" appearance="standard">
    44      <input
    55        [placeholder]="'questions-preview-find-question' | translate"
     
    77        autocomplete="off"
    88        [formControl]="questionSearchFormContor"
    9         (keydown)="searchQuestionsKeyboard($event)"
     9        (keydown.Space)="$event.stopPropagation()"
    1010      />
    11       <mat-icon matSuffix>search</mat-icon>
    1211    </mat-form-field>
    13     <mat-form-field class="full-width" appearance="fill">
    14       <mat-select
    15         [formControl]="questionCategoriesFormContor"
    16         multiple
    17         [placeholder]="'questions-preview-find-question-categories' | translate"
    18       >
    19         <mat-option *ngFor="let category of categories$ | async" [value]="category.uid">{{ category.translatedName }}</mat-option>
    20       </mat-select>
    21     </mat-form-field>
    22   </mat-card-content>
    23   <mat-card-actions>
    24     <app-button [buttonType]="ButtonType.CallToAction" [disabled]="questionSearchFormContor.invalid" (action)="searchQuestions()">{{
    25       'questions-search' | translate
    26     }}</app-button>
    27   </mat-card-actions>
    28 </mat-card>
     12  </mat-expansion-panel-header>
     13  <mat-form-field appearance="standard" class="margin-right-md">
     14    <mat-select
     15      [formControl]="questionCategoriesFormContor"
     16      multiple
     17      [placeholder]="'questions-preview-find-question-categories' | translate"
     18    >
     19      <mat-option *ngFor="let category of categories$ | async" [value]="category.uid">{{ category.translatedName }}</mat-option>
     20    </mat-select>
     21  </mat-form-field>
     22  <app-button [buttonType]="ButtonType.CallToAction" [disabled]="questionSearchFormContor.invalid" (action)="searchQuestions()">{{
     23    'questions-search' | translate
     24  }}</app-button>
     25</mat-expansion-panel>
  • src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.scss

    r2025810 r77cfe5b  
     1mat-form-field {
     2  font-size: initial !important;
     3}
     4
     5mat-expansion-panel {
     6  z-index: 1;
     7}
  • src/Clients/Angular/finki-chattery/src/app/shared-app/components/question/search-question/search-question.component.ts

    r2025810 r77cfe5b  
    1 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
     1import { Component, OnInit } from '@angular/core';
    22import { FormControl, Validators } from '@angular/forms';
    33
     
    1212})
    1313export class SearchQuestionComponent implements OnInit {
    14   @Output() searched = new EventEmitter();
    15 
    1614  ButtonType = ButtonType;
    1715  questionSearchFormContor = new FormControl('', [Validators.required, Validators.maxLength(250)]);
    1816  questionCategoriesFormContor = new FormControl();
    1917  categories$ = this.categoriesFacade.getCategories();
     18  isExpanded = false;
    2019
    2120  constructor(private categoriesFacade: CategoryFacadeService, private questionsFacade: QuestionFacadeService) {}
     
    2322  ngOnInit(): void {}
    2423
    25   public searchQuestionsKeyboard(event: KeyboardEvent): void {
    26     if (event.code === 'enter') {
    27       this.searchQuestions();
    28     }
    29   }
    30 
    3124  public searchQuestions(): void {
     25    this.isExpanded = false;
    3226    this.questionsFacade.searchQuestions(this.questionSearchFormContor.value, this.questionCategoriesFormContor.value);
    33     this.searched.emit();
     27    this.questionSearchFormContor.reset();
     28    this.questionCategoriesFormContor.reset();
    3429  }
    3530}
  • src/Clients/Angular/finki-chattery/src/app/shared-material/shared-material.module.ts

    r2025810 r77cfe5b  
    2525import { MatBadgeModule } from '@angular/material/badge';
    2626import { MatStepperModule } from '@angular/material/stepper';
     27import { MatExpansionModule } from '@angular/material/expansion';
    2728
    2829@NgModule({
     
    5152    MatButtonToggleModule,
    5253    MatBadgeModule,
    53     MatStepperModule
     54    MatStepperModule,
     55    MatExpansionModule
    5456  ],
    5557  exports: [
     
    7678    MatButtonToggleModule,
    7779    MatBadgeModule,
    78     MatStepperModule
     80    MatStepperModule,
     81    MatExpansionModule
    7982  ]
    8083})
Note: See TracChangeset for help on using the changeset viewer.