About portal

src/app/shared/models/aboutPortal.model.ts

@@ -1,13 +1,24 @@
-export class AboutPortal {
-  id: string;
-  title: string;
-  sectionName: string;
+export class AboutPortalItem {
+  id?: string;
+  sectionName?: string;
   description: string;
+  aboutPortalId?: string;
 
-  constructor(info, id?) {
+  constructor(info, id?, aboutPortalId?) {
     this.id = id;
-    this.title = info.title;
     this.sectionName = info.sectionName;
     this.description = info.description;
+    this.aboutPortalId = aboutPortalId;
+  }
+}
+export class AboutPortal {
+  id?: string;
+  title?: string;
+  aboutPortalItems: AboutPortalItem [];
+
+  constructor(title: string, portalItem: AboutPortalItem[], id?) {
+    this.id = id;
+    this.title = title;
+    this.aboutPortalItems = portalItem;
   }
 }

src/app/shared/models/techAdmin.model.ts

@@ -1,9 +1,5 @@
-export class TechAdmin {
+export interface TechAdmin {
   id?: string;
-  userId?: number;
-
-  constructor(info) {
-    this.id = info.id;
-    this.userId = info.userId;
-  }
+  role: string;
+  isRegistered: boolean;
 }

src/app/shared/services/portal/portal.service.ts

@@ -15,12 +15,12 @@ export class PortalService {
    * @param aboutPortal: AboutPortal
    */
    updateInfoAboutPortal(aboutPortal: AboutPortal): Observable<object> {
-    return this.http.put('/api/v1/InformationAboutPortal/Update', aboutPortal);
+    return this.http.put('/api/v1/AboutPortal/Update', aboutPortal);
   }
   /**
    * This method get information about Portal from the database.
    */
    getInfoAboutPortal(): Observable<AboutPortal> {
-    return this.http.get<AboutPortal>('/api/v1/InformationAboutPortal/Get');
+    return this.http.get<AboutPortal>('/api/v1/AboutPortal/Get');
   }
 }

src/app/shared/services/tech-admin/tech-admin.service.spec.ts

@@ -1,3 +1,4 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 
 import { TechAdminService } from './tech-admin.service';
@@ -6,7 +7,9 @@ describe('TechAdminService', () => {
   let service: TechAdminService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ]
+    });
     service = TestBed.inject(TechAdminService);
   });
 

src/app/shared/services/tech-admin/tech-admin.service.ts

@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { TechAdmin } from '../../models/techAdmin.model';
@@ -7,18 +8,12 @@ import { TechAdmin } from '../../models/techAdmin.model';
 })
 export class TechAdminService {
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
  /**
   * This method get TechAdmin by id
-  * !!But we need to change this function to get actual data from backend
   */
   getProfile(): Observable<TechAdmin> {
-    return Observable.create(observer => {
-      setTimeout(() => {
-        observer.next({id:"id45nhb", userId: 95});
-      }, 1000);
-    })
+    return this.http.get<TechAdmin>(`/api/v1/Admin/GetProfile`);
   }
-
 }

src/app/shell/admin-tools/platform/about-edit/about-edit.component.html

@@ -3,13 +3,29 @@
     <div class="create-form-header" fxLayout="column" fxLayoutAlign="center center">
       <h3 class="wrapper-title">РЕДАГУВАННЯ ПРО ПОРТАЛ</h3>
     </div>
+
+    <form [formGroup]="AboutFormGroup" fxLayout="column" fxLayoutAlign="center space-between" class="step">
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <label class="step-label"> Заголовок </label>
+        <i class="material-icons status-info-icon" (click)="isActiveHeaderInfoButton=!isActiveHeaderInfoButton"
+        [ngClass]="isActiveHeaderInfoButton ? 'activeInfoBtn' : 'inactiveInfoBtn'">info_outline</i>
+      </div>
+      <mat-form-field>
+        <input matInput class="step-input" type="text" formControlName="title">
+      </mat-form-field>
+      <app-validation-hint-for-input type="validTextField"
+        [invalid]="AboutFormGroup.get('title').invalid && AboutFormGroup.get('title').touched"
+        [forbiddenCharacter]="AboutFormGroup.get('title').errors?.pattern?.requiredPattern">
+      </app-validation-hint-for-input>
+    </form>
+
     <div fxLayout="column" fxLayoutAlign="center center">
       <ng-container>
-        <app-about-form *ngFor="let form of AboutFormArray.controls" [AboutFormGroup]="form"
-          [index]="AboutFormArray.controls.indexOf(form)" [aboutFormAmount]="AboutFormArray.controls.length"
+        <app-about-form *ngFor="let form of AboutPortalItemArray.controls" [AboutItemFormGroup]="form"
+          [index]="AboutPortalItemArray.controls.indexOf(form)" [aboutFormAmount]="AboutPortalItemArray.controls.length"
           (deleteForm)="onDeleteForm($event)"></app-about-form>
       </ng-container>
-      <button class="btn-add" mat-button (click)="addAboutForm()">
+      <button *ngIf="amountOfSections < 10" class="btn-add" mat-button (click)="addAboutForm()">
         <mat-icon class="mat-icon-add">add</mat-icon>Додати ще один розділ
       </button>
     </div>

src/app/shell/admin-tools/platform/about-edit/about-edit.component.scss

@@ -1,9 +1,22 @@
+@import "src/app/shared/styles/create-form.scss";
 @import "src/app/shared/styles/create-form-wrapper.scss";
-@import "src/app/shared/styles/buttons.scss";
+@import "src/app/shared/styles/validation-form.scss";
 .wrapper{
   padding: 1rem 5rem;
   margin-bottom: 2rem;
   &-title{
     text-align: center;
   }
+}
+
+.activeInfoBtn {
+  color: #3849f9;
+}
+.inactiveInfoBtn {
+  color: #AAAAAA;
+}
+.status-info-icon {
+  cursor: pointer;
+  margin: auto 0.5rem;
+  font-size: 16px;
 }

src/app/shell/admin-tools/platform/about-edit/about-edit.component.spec.ts

@@ -1,11 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgxsModule } from '@ngxs/store';
 import { AboutEditComponent } from './about-edit.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('AboutEditComponent', () => {
   let component: AboutEditComponent;
@@ -15,14 +18,18 @@ describe('AboutEditComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         NgxsModule.forRoot([]),
+        MatFormFieldModule,
+        MatInputModule,
         ReactiveFormsModule,
         MatButtonModule,
         MatIconModule,
-        RouterTestingModule
+        RouterTestingModule,
+        BrowserAnimationsModule
       ],
       declarations: [ 
         AboutEditComponent,
-        MockAboutFormComponent
+        MockAboutFormComponent,
+        MockValidationHintForInputComponent
       ]
     })
     .compileComponents();
@@ -44,7 +51,16 @@ describe('AboutEditComponent', () => {
   template: ''
 })
 class MockAboutFormComponent {
-  @Input() AboutFormGroup: FormGroup;
+  @Input() AboutItemFormGroup: FormGroup;
   @Input() index: number;
   @Input() aboutFormAmount: number;
 }
+@Component({
+  selector: 'app-validation-hint-for-input',
+  template: ''
+})
+class MockValidationHintForInputComponent {
+  @Input() type: string;
+  @Input() invalid: boolean;
+  @Input() forbiddenCharacter: string;
+}

src/app/shell/admin-tools/platform/about-edit/about-edit.component.ts

@@ -2,11 +2,11 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
-import { filter, takeUntil, takeWhile } from 'rxjs/operators';
+import { takeUntil, takeWhile } from 'rxjs/operators';
 import { Constants } from 'src/app/shared/constants/constants';
 import { TEXT_REGEX } from 'src/app/shared/constants/regex-constants';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
-import { AboutPortal } from 'src/app/shared/models/aboutPortal.model';
+import { AboutPortal, AboutPortalItem } from 'src/app/shared/models/aboutPortal.model';
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
 import { UpdateInfoAboutPortal } from 'src/app/shared/store/admin.actions';
 import { AdminState } from 'src/app/shared/store/admin.state';
@@ -21,7 +21,13 @@ import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actio
 })
 export class AboutEditComponent implements OnInit, OnDestroy {
 
-  AboutFormArray = new FormArray([]);
+  AboutPortalItemArray = new FormArray([]);
+
+  amountOfSections = 0;
+
+  isActiveHeaderInfoButton = false;
+
+  AboutFormGroup: FormGroup;
 
   @Select(AppState.isDirtyForm)
   isDirtyForm$: Observable<boolean>;
@@ -41,13 +47,24 @@ export class AboutEditComponent implements OnInit, OnDestroy {
     private navigationBarService: NavigationBarService) { }
 
   ngOnInit(): void {
+    this.AboutFormGroup = this.fb.group({
+      image: new FormControl(''),
+      title: new FormControl('', [Validators.pattern(TEXT_REGEX)]),
+    });
+
     this.aboutPortal$
     .pipe(
-      filter((aboutPortal: AboutPortal) => !!aboutPortal),
       takeUntil(this.destroy$),
     ).subscribe((aboutPortal: AboutPortal) => {
         this.infoAboutPortal = aboutPortal;
-        (this.infoAboutPortal) ? this.AboutFormArray.push(this.newForm(this.infoAboutPortal)) : this.AboutFormArray.push(this.newForm());
+        if (this.infoAboutPortal) {
+          this.infoAboutPortal.aboutPortalItems
+          .forEach((item) => this.AboutPortalItemArray.push(this.newForm(item)));
+          this.AboutFormGroup.controls['title'].setValue(this.infoAboutPortal.title);
+          this.amountOfSections = this.infoAboutPortal.aboutPortalItems.length;
+        } else {
+          this.AboutPortalItemArray.push(this.newForm());
+        } 
       });
     this.store.dispatch(new AddNavPath(this.navigationBarService.creatNavPaths(
       { name: NavBarName.AdminTools, isActive: false, disable: false },
@@ -59,12 +76,10 @@ export class AboutEditComponent implements OnInit, OnDestroy {
   /**
    * This method creates new FormGroup
    */
-  private newForm(aboutPortal?: AboutPortal): FormGroup {
+  private newForm(aboutPortalItem?: AboutPortalItem): FormGroup {
     const aboutEditFormGroup = this.fb.group({
-      image: new FormControl(''),
-      title: new FormControl('', [Validators.pattern(TEXT_REGEX)]),
       sectionName: new FormControl('', [Validators.pattern(TEXT_REGEX)]),
-      description: new FormControl('', [Validators.maxLength(Constants.MAX_DESCRIPTION_ABOUT_LENGTH), Validators.required]),
+      description: new FormControl('', [Validators.required, Validators.maxLength(Constants.MAX_DESCRIPTION_ABOUT_LENGTH)]),
     });
 
     aboutEditFormGroup.valueChanges
@@ -75,7 +90,7 @@ export class AboutEditComponent implements OnInit, OnDestroy {
         this.store.dispatch(new MarkFormDirty(true));
       });
 
-      aboutPortal && aboutEditFormGroup.patchValue(aboutPortal, { emitEvent: false });
+      aboutPortalItem && aboutEditFormGroup.patchValue(aboutPortalItem, { emitEvent: false });
 
       return aboutEditFormGroup;
   }
@@ -84,34 +99,39 @@ export class AboutEditComponent implements OnInit, OnDestroy {
    * This method creates new FormGroup adds new FormGroup to the FormArray
    */
    addAboutForm(): void {
-    this.AboutFormArray.push(this.newForm());
+    this.amountOfSections++;
+    this.AboutPortalItemArray.push(this.newForm());
   }
 
   /**
    * This method delete FormGroup from the FormArray by index
    * @param index
    */
    onDeleteForm(index: number): void {
-    this.AboutFormArray.removeAt(index);
+    this.amountOfSections--;
+    this.AboutPortalItemArray.removeAt(index);
   }
 
   onSubmit(): void {
-    if (this.AboutFormArray.invalid) {
-      this.checkValidationAboutFormArray();
+    if (this.AboutPortalItemArray.invalid) {
+      this.checkValidationAboutFormArray(this.AboutPortalItemArray);
+    } else if (this.AboutFormGroup.invalid) {
+      this.checkValidation(this.AboutFormGroup);
     } else {
-      this.AboutFormArray.controls.forEach((form: FormGroup) => {
-        const aboutPortal: AboutPortal = new AboutPortal(form.value);
-        this.store.dispatch(new UpdateInfoAboutPortal(aboutPortal));
+      let aboutPortalItemArray = [];
+      this.AboutPortalItemArray.controls.forEach((form: FormGroup) => {
+        aboutPortalItemArray.push(new AboutPortalItem(form.value))
       });
+      const aboutPortal: AboutPortal = new AboutPortal(this.AboutFormGroup.value.title, aboutPortalItemArray);
+      this.store.dispatch(new UpdateInfoAboutPortal(aboutPortal));
     }
   }
-
   /**
-   * This method marks each control of form in the array of forms in AboutFormArray as touched
+   * This method marks each control of form in the array of forms in formArray as touched
    */
-   private checkValidationAboutFormArray(): void {
-    Object.keys(this.AboutFormArray.controls).forEach(key => {
-      this.checkValidation(<FormGroup>this.AboutFormArray.get(key));
+   private checkValidationAboutFormArray(formArray: FormArray): void {
+    Object.keys(formArray.controls).forEach(key => {
+      this.checkValidation(<FormGroup>formArray.get(key));
     });
   }
 

src/app/shell/admin-tools/platform/about-edit/about-form/about-form.component.html

@@ -1,19 +1,6 @@
-<form [formGroup]="AboutFormGroup" fxLayout="column" fxLayoutAlign="center space-between" class="step"
+<form [formGroup]="AboutItemFormGroup" fxLayout="column" fxLayoutAlign="center space-between" class="step"
 [ngClass]="(aboutFormAmount > 1) ? 'step-border' : ''">
 
-  <div fxLayout="row" fxLayoutAlign="start center">
-    <label class="step-label"> Заголовок </label>
-    <i class="material-icons status-info-icon" (click)="isActiveHeaderInfoButton=!isActiveHeaderInfoButton"
-    [ngClass]="isActiveHeaderInfoButton ? 'activeInfoBtn' : 'inactiveInfoBtn'">info_outline</i>
-  </div>
-  <mat-form-field>
-    <input matInput class="step-input" type="text" formControlName="title">
-  </mat-form-field>
-  <app-validation-hint-for-input type="validTextField"
-    [invalid]="AboutFormGroup.get('title').invalid && AboutFormGroup.get('title').touched"
-    [forbiddenCharacter]="AboutFormGroup.get('title').errors?.pattern?.requiredPattern">
-  </app-validation-hint-for-input>
-
   <div fxLayout="row" fxLayoutAlign="start center">
     <label class="step-label"> Назва розділу </label>
     <i class="material-icons status-info-icon" (click)="isActiveSectionInfoButton=!isActiveSectionInfoButton"
@@ -23,14 +10,14 @@
     <input matInput class="step-input" type="text" formControlName="sectionName">
   </mat-form-field>
   <app-validation-hint-for-input type="validTextField"
-    [invalid]="AboutFormGroup.get('sectionName').invalid && AboutFormGroup.get('sectionName').touched"
-    [forbiddenCharacter]="AboutFormGroup.get('sectionName').errors?.pattern?.requiredPattern">
+    [invalid]="AboutItemFormGroup.get('sectionName').invalid && AboutItemFormGroup.get('sectionName').touched"
+    [forbiddenCharacter]="AboutItemFormGroup.get('sectionName').errors?.pattern?.requiredPattern">
   </app-validation-hint-for-input>
 
   <div class="step-label-combined">
     <label class="step-label"> Опис <span class="step-required">*</span></label>
     <label class="step-characters-count">
-      {{AboutFormGroup.get('description').value.length}}/{{constants.MAX_DESCRIPTION_ABOUT_LENGTH}}</label>
+      {{AboutItemFormGroup.get('description').value.length}}/{{constants.MAX_DESCRIPTION_ABOUT_LENGTH}}</label>
   </div>
   <mat-form-field appearance="none">
     <div class="wrapper-border">
@@ -39,10 +26,10 @@
     </div>
   </mat-form-field>
   <app-validation-hint-for-input type="requiredField"
-    [invalid]="AboutFormGroup.get('description').invalid && AboutFormGroup.get('description').touched">
+    [invalid]="AboutItemFormGroup.get('description').invalid && AboutItemFormGroup.get('description').touched">
   </app-validation-hint-for-input>
   <div fxLayout="row" fxLayoutAlign="center" *ngIf="aboutFormAmount > 1">
-    <button class="btn-reset" type="reset" mat-button (click)="delete()">
+    <button class="btn-reset" type="reset" mat-button (click)="onDelete()">
       <mat-icon class="mat-icon-delete">delete</mat-icon>Вилучити дані
     </button>
   </div>