[Monitor & Library | develop]: [Bug fix] Refactor code for showing help button or not.

1. quick-contact.service.ts: Initialize display to true (assume it is not intersecting, otherwise in pages without this section, it can't be initialized correctly).
2. home.component.ts: Removed field "showQuickContact" | In constructor set quickContactService.setDisplay(false) | Refactor intersectionObserver.
3. app-routing.module.ts: In "contact-us" route, set data: {hasQuickContact: false}.
4. app.component.ts: Updated checks for <quick-contact> | Added public showQuickContact: boolean; to be initialized by layoutService.hasQuickContact.
This commit is contained in:
Konstantina Galouni 2023-07-06 15:28:53 +03:00
parent cab7d72843
commit b6de9c6d70
4 changed files with 26 additions and 21 deletions

View File

@ -27,7 +27,8 @@ const routes: Routes = [
},
{
path: 'contact-us',
loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule),
data: {hasQuickContact: false}
},
{
path: 'get-started',

View File

@ -1,4 +1,4 @@
import {Component, ElementRef, ViewChild} from '@angular/core';
import {ChangeDetectorRef, Component, ElementRef, ViewChild} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
@ -21,6 +21,7 @@ import {QuickContactComponent} from "./openaireLibrary/sharedComponents/quick-co
import {AlertModal} from "./openaireLibrary/utils/modal/alert";
import {StakeholderEntities} from './openaireLibrary/monitor/entities/stakeholder';
import {ResourcesService} from "./openaireLibrary/monitor/services/resources.service";
import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
@Component({
selector: 'app-root',
@ -60,7 +61,7 @@ import {ResourcesService} from "./openaireLibrary/monitor/services/resources.ser
</cookie-law>
<bottom #bottom *ngIf="properties && showMenu" id="bottom" [grantAdvance]="false"
[properties]="properties"></bottom>
<quick-contact #quickContact *ngIf="bottomNotIntersecting && displayQuickContact && contactForm"
<quick-contact #quickContact *ngIf="bottomNotIntersecting && displayQuickContact && showQuickContact && contactForm"
(sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending" [images]="images" [contact]="'Help'"
[organizationTypes]="organizationTypes"
@ -80,6 +81,7 @@ export class AppComponent {
header: Header;
logoPath: string = 'assets/common-assets/logo-services/monitor/';
/* Contact */
public showQuickContact: boolean;
public bottomNotIntersecting: boolean;
public displayQuickContact: boolean; // intersecting with specific section in home page
public showGetStarted: boolean = true;
@ -102,16 +104,13 @@ export class AppComponent {
private router: Router, private stakeholderService: StakeholderService, private smoothScroll: SmoothScroll,
private userManagementService: UserManagementService,
private quickContactService: QuickContactService,
private layoutService: LayoutService,
private fb: UntypedFormBuilder,
private emailService: EmailService,
private resourcesService: ResourcesService) {
private resourcesService: ResourcesService,
private cdr: ChangeDetectorRef) {
this.subscriptions.push(router.events.forEach((event) => {
if (event instanceof NavigationEnd) {
if (event.url === '/contact-us') {
this.quickContactService.setDisplay(false);
} else if (event.url !== '/contact-us' && (!this.bottomNotIntersecting || !this.displayQuickContact)) {
this.quickContactService.setDisplay(true);
}
this.showGetStarted = event.url !== '/get-started';
}
@ -136,8 +135,17 @@ export class AppComponent {
this.buildMenu();
this.reset();
}));
this.subscriptions.push(this.layoutService.hasQuickContact.subscribe(hasQuickContact => {
if(this.showQuickContact !== hasQuickContact) {
this.showQuickContact = hasQuickContact;
this.cdr.detectChanges();
}
}));
this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
this.displayQuickContact = display;
if(this.displayQuickContact !== display) {
this.displayQuickContact = display;
this.cdr.detectChanges();
}
}));
}
@ -151,7 +159,10 @@ export class AppComponent {
let intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
// if (entry.isIntersecting && this.showQuickContact) {
this.bottomNotIntersecting = !entry.isIntersecting;
if(this.bottomNotIntersecting !== (!entry.isIntersecting)) {
this.bottomNotIntersecting = !entry.isIntersecting;
this.cdr.detectChanges();
}
});
}, options);
intersectionObserver.observe(this.bottom.nativeElement);

View File

@ -66,8 +66,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
public softwareSize: any = null;
public otherSize: any = null;
public fundersSize: any = null;
public showQuickContact: boolean = true;
@ViewChild('AlertModal') modal;
private errorMessages: ErrorMessagesComponent;
private subscriptions = [];
private mutationObserver: MutationObserver;
@ -102,6 +100,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
this.errorMessages = new ErrorMessagesComponent();
this.status = this.errorCodes.LOADING;
this.isServer = isPlatformServer(this.platform);
this.quickContactService.setDisplay(false);
}
public ngOnInit() {
@ -161,13 +160,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv
};
let intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting && this.showQuickContact) {
this.showQuickContact = false;
this.quickContactService.setDisplay(this.showQuickContact);
} else if (!entry.isIntersecting && !this.showQuickContact) {
this.showQuickContact = true;
this.quickContactService.setDisplay(this.showQuickContact);
}
this.quickContactService.setDisplay(!entry.isIntersecting);
});
}, options);
if(this.contact) {

@ -1 +1 @@
Subproject commit 76cb586ebd44c3b6aef3cf29ddc21b944398e26d
Subproject commit 8b14aaf325c4c18691be36a89dca882b945d8eb0