Changeset c205cc4 for src/Clients/Angular/finki-chattery/src/app/modules/questioning

Timestamp:

10/27/21 21:29:11 (3 years ago)

Author:

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

Branches:

dev

Children:

32cd040

Parents:

d2b1fa6

Message:

Ask question finishing touches

Location:

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

Files:

• components/ask-question/ask-question.component.html (modified) (4 diffs)
• components/ask-question/ask-question.component.scss (modified) (1 diff)
• components/ask-question/ask-question.component.ts (modified) (3 diffs)
• components/questioning-general/questioning-general.component.ts (modified) (2 diffs)
• components/questions-preview-general/questions-preview-general.component.ts (modified) (1 diff)
• services/questioning-api.service.ts (modified) (1 diff)

src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/ask-question/ask-question.component.html

@@ -1 +1 @@
 <form class="example-container" [formGroup]="questionFormGroup">
-  <mat-form-field class="full-width" appearance="standard" appHandleInputFormErrors>
-    <mat-label>STAVI TRANSLATE</mat-label>
+  <mat-form-field class="full-width margin-bottom-sm" appearance="fill" appHandleInputFormErrors>
+    <mat-label>{{ 'ask-question-question-title' | translate }}</mat-label>
     <input matInput [formControl]="titleForm" />
   </mat-form-field>
@@ -7 +7 @@
   <editor
     matInput
+    class="margin-bottom-sm"
     [formControl]="textForm"
     [init]="{
+      apiKey: 'fx28x0d64jeufa35u7mcd80fgveayg5c4ap9gnr6posehzny',
       menubar: false,
       plugins: [
@@ -16 +18 @@
       ],
       toolbar:
-        'undo redo | formatselect | bold italic backcolor | \
+        'undo redo | formatselect | bold italic backcolor | code | \
         alignleft aligncenter alignright alignjustify | \
         bullist numlist outdent indent | removeformat | help'
@@ -22 +24 @@
   ></editor>
   <mat-error *ngIf="textForm?.touched && textForm?.errors?.required">{{ 'not-found' | translate }}</mat-error>
-  <mat-error *ngIf="textForm?.touched && textForm?.errors?.maxlength">STAVI TRANSL ATE MAX LENGTH</mat-error>
+  <mat-error *ngIf="textForm?.touched && textForm?.errors?.maxlength">{{
+    'error-message-max-length' | translate: { maxlength: textForm?.errors?.maxlength?.requiredLength }
+  }}</mat-error>
 
-  <mat-form-field class="full-width" appearance="standard" appHandleInputFormErrors>
-    <mat-label>STAVI TRANSLATE</mat-label>
+  <mat-form-field class="full-width margin-bottom-sm" appearance="fill" appHandleInputFormErrors>
+    <mat-label>{{ 'ask-question-categories' | translate }}</mat-label>
     <mat-select [formControl]="categoriesForm" multiple>
-      <mat-option *ngFor="let category of categoriesList" [value]="category.uid">{{ category.name }}</mat-option>
+      <mat-option *ngFor="let category of categoriesList$ | async" [value]="category.uid">{{ category.translatedName }}</mat-option>
     </mat-select>
   </mat-form-field>
 
   <app-button [disabled]="questionFormGroup.invalid" [buttonType]="ButtonType.CallToAction" (action)="askQuestion()">
-    {{ 'not-found' | translate }}
+    {{ 'ask-question-ask-button' | translate }}
   </app-button>
 </form>

src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/ask-question/ask-question.component.scss

@@ -1 @@
-.full-width {
-  width: 100%;
-}

src/Clients/Angular/finki-chattery/src/app/modules/questioning/components/ask-question/ask-question.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 
+import { CategoryFacadeService } from 'src/app/core/state/category-facade.service';
 import { ButtonType } from 'src/app/shared-app/components/generic/button/button.models';
-import { CategoryViewModel } from 'src/app/shared-app/models';
 import { AskQuestionRequest } from '../../models/questioning-request.models';
 import { QuestioningApiService } from '../../services/questioning-api.service';
@@ -16 +17 @@
   public textForm = new FormControl('', [Validators.required, Validators.maxLength(4000)]);
   public categoriesForm = new FormControl([]);
-
   public questionFormGroup: FormGroup;
   public ButtonType = ButtonType;
+  public categoriesList$ = this.categoriesFacade.getCategories();
 
-  // TODO: PULL FROM ENDPOINT OR FROM STORE (BETTER FROM STORE)
-  public categoriesList: CategoryViewModel[] = [
-    new CategoryViewModel('123', 'test'),
-    new CategoryViewModel('345', 'test 2'),
-    new CategoryViewModel('345', 'test 3'),
-    new CategoryViewModel('345', 'test 4'),
-    new CategoryViewModel('345', 'test 5')
-  ];
-
-  constructor(private api: QuestioningApiService) {
+  constructor(private api: QuestioningApiService, private categoriesFacade: CategoryFacadeService, private router: Router) {
     this.questionFormGroup = new FormGroup({
       title: this.titleForm,
@@ -41 +33 @@
   public askQuestion(): void {
     const body = new AskQuestionRequest(this.titleForm.value, this.textForm.value, this.categoriesForm.value);
-    this.api.askQuestion(body).subscribe(() => {});
+    this.api.askQuestion(body).subscribe((questionUid) => {
+      this.router.navigateByUrl(`questioning/${questionUid}`);
+    });
   }
 }

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

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
+import { CategoryFacadeService } from 'src/app/core/state/category-facade.service';
 
 @Component({
@@ -7 +8 @@
 })
 export class QuestioningGeneralComponent implements OnInit {
-  constructor() {}
+  constructor(private categoriesFacade: CategoryFacadeService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.categoriesFacade.fetchCategories();
+  }
 }

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

@@ -17 +17 @@
   questionsSortByForm = new FormControl(PreviewQuestionsOrderEnum.Latest);
 
-  constructor(private categoriesFacade: CategoryFacadeService, private questionFacade: QuestionFacadeService, private router: Router) {}
+  constructor(private questionFacade: QuestionFacadeService, private router: Router) {}
 
   ngOnInit(): void {
-    this.categoriesFacade.fetchCategories();
     this.questionFacade.fetchPreviewQuestions(PreviewQuestionsOrderEnum.Latest);
     this.questionsSortByForm.valueChanges.subscribe((value: PreviewQuestionsOrderEnum) => {

src/Clients/Angular/finki-chattery/src/app/modules/questioning/services/questioning-api.service.ts

@@ -13 +13 @@
   }
 
-  askQuestion(body: AskQuestionRequest): Observable<void> {
+  askQuestion(body: AskQuestionRequest): Observable<string> {
     return this.post('v1/questions', body);
   }