Feature/ys page info loading #1503 (#1533)

* loading

* remove extra changes

* fixed of get in rules page

* commit after review

* remove acync dublication in the templates

src/app/shell/admin-tools/platform/platform-info/info-card/info-card.component.html

@@ -14,7 +14,7 @@ <h4>{{portalItem.sectionName}}</h4>
       </div>
     </div>
   </ng-container>
-    
+
   <ng-template #noInfoTmpl>
     <div class="config" fxLayout="column" fxLayoutAlign="center center">
       <a routerLink="edit" class="config_edit-icon" [routerLink]="['./update', type, '']">

src/app/shell/admin-tools/platform/platform-info/regulations-info.component.ts

@@ -1,9 +1,10 @@
+import { AdminState } from 'src/app/shared/store/admin.state';
 import { AdminTabsTitle } from 'src/app/shared/enum/enumUA/tech-admin/admin-tabs';
-import { Select } from '@ngxs/store';
-import { Component } from '@angular/core';
 import { CompanyInformation } from 'src/app/shared/models/сompanyInformation.model';
-import { AdminState } from 'src/app/shared/store/admin.state';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
+import { Select } from '@ngxs/store';
+
 @Component({
   selector: 'app-regulations-info',
   template: '<app-info-card [type]="lawsAndRegulations" [platformInfo]="LawsAndRegulations$ | async"></app-info-card>',
@@ -13,6 +14,8 @@ export class RegulationsInfoComponent {
 
   @Select(AdminState.LawsAndRegulations)
   LawsAndRegulations$: Observable<CompanyInformation>;
+  @Select(AdminState.isLoading)
+  isLoading$: Observable<boolean>;
 
   constructor() {}
 

src/app/shell/info/about/about.component.html

@@ -1,20 +1,18 @@
-<div *ngIf="(platformInformation$ | async)?.companyInformationItems.length; else noInfo">
-  <div class="info-content">
-    <div>
-      <h2 class="info-title">{{ (platformInformation$ | async).title }}</h2>
-    </div>
-    <div class="info-text">
-      <div *ngFor="let item of (platformInformation$ | async)?.companyInformationItems">
-        <p><strong>{{ item.sectionName }}</strong></p>
-        <p>{{ item.description }}</p>
+<ng-container *ngIf="!(isLoading$ | async)">
+  <div *ngIf="(platformInformation$ | async)?.companyInformationItems.length; else noInfo">
+    <div class="info-content">
+      <div>
+        <h2 class="info-title">{{ platformInformation?.title }}</h2>
+      </div>
+      <div class="info-text">
+        <div *ngFor="let item of platformInformation?.companyInformationItems">
+          <p><strong>{{ item.sectionName }}</strong></p>
+          <p>{{ item.description }}</p>
+        </div>
       </div>
-      <p>
-        Ваші пропозиції по покращенню роботи сервісу можна надсилати:<a href="mailto:pozashkillia@gmail.com"
-          target="_blank"><span class="info-link"> Pozashkillia@gmail.com</span></a>
-      </p>
     </div>
   </div>
-</div>
-<ng-template #noInfo>
-  <div class="info-no-content">Інформації поки немає</div>
-</ng-template>
+  <ng-template #noInfo>
+    <div class="info-no-content">Інформації поки немає</div>
+  </ng-template>
+</ng-container>

src/app/shell/info/about/about.component.ts

@@ -3,23 +3,31 @@ import {
   DeleteNavPath,
 } from 'src/app/shared/store/navigation.actions';
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { Select, Store } from '@ngxs/store';
 
 import { AdminState } from 'src/app/shared/store/admin.state';
 import { CompanyInformation } from 'src/app/shared/models/сompanyInformation.model';
 import { GetAboutPortal } from 'src/app/shared/store/admin.actions';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
-import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent implements OnInit, OnDestroy {
-@Select(AdminState.AboutPortal)
-platformInformation$: Observable<CompanyInformation>;
+  @Select(AdminState.AboutPortal)
+  platformInformation$: Observable<CompanyInformation>;
+  @Select(AdminState.isLoading)
+  isLoading$: Observable<boolean>;
+
+  platformInformation: CompanyInformation;
+
+  private destroy$: Subject<boolean> = new Subject<boolean>();
+
   constructor(private store: Store, private navigationBarService: NavigationBarService) {}
 
   ngOnInit(): void {
@@ -28,11 +36,15 @@ platformInformation$: Observable<CompanyInformation>;
         this.navigationBarService.createOneNavPath({ name: NavBarName.AboutPortal, isActive: false, disable: true })
       )
     );
-    this.store
-      .dispatch(new GetAboutPortal());
+    this.store.dispatch(new GetAboutPortal());
+    this.platformInformation$.pipe(takeUntil(this.destroy$)).subscribe(
+      (info: CompanyInformation) => this.platformInformation = info
+    );
   }
 
   ngOnDestroy(): void {
     this.store.dispatch(new DeleteNavPath());
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
   }
 }

src/app/shell/info/info.component.html

@@ -1,6 +1,6 @@
 <div class="info_wrapper">
-  <div class="info">
-    <img class="info-picture" src="assets/images/header-about.png">
-  </div>
-  <router-outlet></router-outlet>
+    <div class="info">
+      <img class="info-picture" src="assets/images/header-about.png">
+    </div>
+    <router-outlet></router-outlet>
 </div>

src/app/shell/info/info.component.ts

@@ -6,7 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./info.component.scss']
 })
 export class InfoComponent {
-
   constructor() { }
-
 }

src/app/shell/info/rules/rules.component.html

@@ -1,20 +1,18 @@
-<div *ngIf="(platformRules$ | async)?.companyInformationItems.length; else noInfo">
-  <div class="info-content">
-    <div>
-      <h2 class="info-title">{{ (platformRules$ | async)?.title }}</h2>
-    </div>
-    <div class="info-text">
-      <div *ngFor="let item of (platformRules$ | async)?.companyInformationItems">
-        <p><strong>{{ item.sectionName }}</strong></p>
-        <p>{{ item.description }}</p>
+<ng-container *ngIf="!(isLoading$ | async)">
+  <div *ngIf="platformRules?.companyInformationItems.length; else noInfo">
+    <div class="info-content">
+      <div>
+        <h2 class="info-title">{{ platformRules?.title }}</h2>
+      </div>
+      <div class="info-text">
+        <div *ngFor="let item of platformRules?.companyInformationItems">
+          <p><strong>{{ item.sectionName }}</strong></p>
+          <p>{{ item.description }}</p>
+        </div>
       </div>
-      <p>
-        Ваші пропозиції по покращенню роботи сервісу можна надсилати:<a href="mailto:pozashkillia@gmail.com"
-          target="_blank"><span class="info-link"> Pozashkillia@gmail.com</span></a>
-      </p>
     </div>
   </div>
-</div>
-<ng-template #noInfo>
-  <div class="info-no-content">Інформації поки немає</div>
-</ng-template>
+  <ng-template #noInfo>
+    <div class="info-no-content">Інформації поки немає</div>
+  </ng-template>
+</ng-container>

src/app/shell/info/rules/rules.component.ts

@@ -1,23 +1,31 @@
 import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actions';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { Select, Store } from '@ngxs/store';
 
 import { AdminState } from 'src/app/shared/store/admin.state';
 import { CompanyInformation } from 'src/app/shared/models/сompanyInformation.model';
 import { GetLawsAndRegulations } from 'src/app/shared/store/admin.actions';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
-import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-rules',
   templateUrl: './rules.component.html',
   styleUrls: ['./rules.component.scss'],
 })
 
-export class RulesComponent {
+export class RulesComponent implements OnInit, OnDestroy  {
   @Select(AdminState.LawsAndRegulations)
   platformRules$: Observable<CompanyInformation>;
+  @Select(AdminState.isLoading)
+  isLoading$: Observable<boolean>;
+
+  platformRules: CompanyInformation;
+
+  private destroy$: Subject<boolean> = new Subject<boolean>();
+
   constructor(private store: Store, private navigationBarService: NavigationBarService) {}
 
   ngOnInit(): void {
@@ -26,9 +34,15 @@ export class RulesComponent {
         this.navigationBarService.createOneNavPath({ name: NavBarName.LawsAndRegulations, isActive: false, disable: true })
       )
     );
+    this.store.dispatch(new GetLawsAndRegulations());
+    this.platformRules$.pipe(takeUntil(this.destroy$)).subscribe(
+      (rules: CompanyInformation) => this.platformRules = rules
+    );
   }
 
   ngOnDestroy(): void {
     this.store.dispatch(new DeleteNavPath());
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
   }
 }

src/app/shell/info/support/support.component.html

@@ -1,29 +1,18 @@
-<div *ngIf="(platformSupport$ | async)?.companyInformationItems.length; else noInfo">
-  <div class="support-content">
-    <div>
-      <h2 class="support-title">{{ (platformSupport$ | async).title }}</h2>
-    </div>
-    <div class="support-text">
-      <div *ngFor="let item of (platformSupport$ | async)?.companyInformationItems">
-        <p><strong>{{ item.sectionName }}</strong></p>
-        <p>{{ item.description }}</p>
+<ng-container *ngIf="!(isLoading$ | async)">
+  <div *ngIf="platformSupport?.companyInformationItems.length; else noInfo">
+    <div class="support-content">
+      <div>
+        <h2 class="support-title">{{ platformSupport.title }}</h2>
+      </div>
+      <div class="support-text">
+        <div *ngFor="let item of platformSupport?.companyInformationItems">
+          <p><strong>{{ item.sectionName }}</strong></p>
+          <p>{{ item.description }}</p>
+        </div>
       </div>
-      <p class="support-contact"> У разі технічних питань писати на:
-        <a class="support-link" href="mailto:pozashkillia@gmail.com" target="_blank">
-          pozashkillia@gmail.com
-        </a>
-      </p>
-      <p class="support-contact"> У разі будь яких інших питань звертатися на:
-        <a class="support-link" href="mailto:pozashkillyainfo@gmail.com" target="_blank">
-          pozashkillyainfo@gmail.com
-        </a>
-      </p>
-      <p class="support-contact"> Або за телефоном:
-        <a class="support-link" href="tel:+380977777777" alt="Телефон +380977777777">+38(097) 777 7 777</a>
-      </p>
     </div>
   </div>
-</div>
-<ng-template #noInfo>
-  <div class="info-no-content">Інформації поки немає</div>
-</ng-template>
+  <ng-template #noInfo>
+    <div class="info-no-content">Інформації поки немає</div>
+  </ng-template>
+</ng-container>

src/app/shell/info/support/support.component.ts

@@ -1,13 +1,14 @@
 import { AddNavPath, DeleteNavPath } from 'src/app/shared/store/navigation.actions';
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { Select, Store } from '@ngxs/store';
 
 import { AdminState } from 'src/app/shared/store/admin.state';
 import { CompanyInformation } from 'src/app/shared/models/сompanyInformation.model';
 import { GetSupportInformation } from 'src/app/shared/store/admin.actions';
 import { NavBarName } from 'src/app/shared/enum/navigation-bar';
 import { NavigationBarService } from 'src/app/shared/services/navigation-bar/navigation-bar.service';
-import { Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-support',
@@ -17,6 +18,12 @@ import { Observable } from 'rxjs';
 export class SupportComponent implements OnInit, OnDestroy {
   @Select(AdminState.SupportInformation)
   platformSupport$: Observable<CompanyInformation>;
+  @Select(AdminState.isLoading)
+  isLoading$: Observable<boolean>;
+
+  platformSupport: CompanyInformation;
+
+  private destroy$: Subject<boolean> = new Subject<boolean>();
 
   constructor(private store: Store, public navigationBarService: NavigationBarService ) { }
 
@@ -27,9 +34,16 @@ export class SupportComponent implements OnInit, OnDestroy {
       )
     );
     this.store.dispatch(new GetSupportInformation());
+    this.platformSupport$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(
+        (support: CompanyInformation) => this.platformSupport = support
+      );
   }
 
   ngOnDestroy(): void {
     this.store.dispatch(new DeleteNavPath());
+    this.destroy$.next(true);
+    this.destroy$.unsubscribe();
   }
 }

src/app/shell/personal-cabinet/shared-cabinet/user-config/user-config-edit/user-config-edit.component.ts

@@ -78,7 +78,7 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
 
   addNavPath(): void {
     const userRole = this.store.selectSnapshot<Role>(RegistrationState.role);
-    const subRole  = this.store.selectSnapshot<Role>(RegistrationState.subrole);
+    const subRole = this.store.selectSnapshot<Role>(RegistrationState.subrole);
     const personalCabinetTitle = Util.getPersonalCabinetTitle(userRole, subRole);
 
     this.store.dispatch(
@@ -104,4 +104,4 @@ export class UserConfigEditComponent extends CreateFormComponent implements OnIn
     const user = new User(this.userEditFormGroup.value, this.user.id);
     this.store.dispatch(new UpdateUser(user));
   }
-}
+}