From 572ee78b746df6957ff3118a3df84d7a4d700f53 Mon Sep 17 00:00:00 2001 From: Giacomo Barbalinardo Date: Tue, 24 Sep 2024 15:53:32 +0200 Subject: [PATCH] feat: observe for/and change langauge from outside --- angular.json | 3 ++ projects/ngx-cookie-consent/package.json | 2 +- .../lib/ngx-cookie-consent.component.spec.ts | 3 ++ .../ngx-cookie-consent.service.spec.ts | 5 +++ .../ngx-cookie-consent.service.ts | 14 +++++- .../ngx-cookie-eventbus.service.spec.ts | 32 ++++++++++++++ .../ngx-cookie-eventbus.service.ts | 22 ++++++++++ .../ngx-cookie-manager.service.spec.ts | 43 +++++++++++++++---- .../ngx-cookie-manager.service.ts | 28 +++++++++++- src/app/pages/home/home.component.html | 7 +++ src/app/pages/home/home.component.ts | 24 ++++++++--- 11 files changed, 165 insertions(+), 18 deletions(-) create mode 100644 projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.spec.ts create mode 100644 projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.ts diff --git a/angular.json b/angular.json index 03207aa..43f3e04 100644 --- a/angular.json +++ b/angular.json @@ -136,5 +136,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/projects/ngx-cookie-consent/package.json b/projects/ngx-cookie-consent/package.json index 2c56679..5abbc3f 100644 --- a/projects/ngx-cookie-consent/package.json +++ b/projects/ngx-cookie-consent/package.json @@ -1,6 +1,6 @@ { "name": "@localia/ngx-cookie-consent", - "version": "3.0.0", + "version": "3.1.0", "description": "Angular module to display a cookie consent banner without other dependencies.", "author": "Giacomo Barbalinardo ", "license": "MIT", diff --git a/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.spec.ts b/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.spec.ts index d1a166a..8271af7 100644 --- a/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.spec.ts +++ b/projects/ngx-cookie-consent/src/lib/ngx-cookie-consent.component.spec.ts @@ -5,6 +5,7 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angul import { NgxCookieConsentService } from './services/ngx-cookie-consent/ngx-cookie-consent.service'; import { NavigationEnd, Router, RouterEvent } from '@angular/router'; import { Subject } from 'rxjs'; +import { NgxCookieEventbusService } from './services/ngx-cookie-eventbus/ngx-cookie-eventbus.service'; describe('NgxCookieConsentComponent', () => { let component: NgxCookieConsentComponent; @@ -221,6 +222,8 @@ describe('NgxCookieConsentComponent', () => { spyOn(consentServiceMock, 'setLanguage').and.returnValue(); component.dropDownOpen = true; + + component.switchLanguage('en'); expect(consentServiceMock.setLanguage).toHaveBeenCalledWith('en'); diff --git a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.spec.ts b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.spec.ts index 2a74881..28265f3 100644 --- a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.spec.ts +++ b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.spec.ts @@ -3,6 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { NgxCookieConsentService } from './ngx-cookie-consent.service'; import { NgxLanguageService } from '../ngx-language/ngx-language.service'; import { NgxCookieService } from '../ngx-cookie/ngx-cookie.service'; +import { NgxCookieEventbusService } from '../ngx-cookie-eventbus/ngx-cookie-eventbus.service'; describe('NgxCookieConsentService', () => { let service: NgxCookieConsentService; @@ -76,11 +77,15 @@ describe('NgxCookieConsentService', () => { }); it('should set the language', () => { + const eventbusService = TestBed.inject(NgxCookieEventbusService); + spyOn(eventbusService.languageUpdatedSubject, 'next').and.returnValue(); + spyOn(service, 'setConfig').and.returnValue(); service.setLanguage('de'); expect(service.activeLang).toEqual('de'); expect(service.setConfig).toHaveBeenCalledWith('defaultLanguage', 'de'); + expect(eventbusService.languageUpdatedSubject.next).toHaveBeenCalledWith('de'); }); it('should set a config value', () => { diff --git a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.ts b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.ts index cc858ce..c155500 100644 --- a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.ts +++ b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-consent/ngx-cookie-consent.service.ts @@ -3,20 +3,29 @@ import { NgxCookieConsentConfigService } from '../../config/ngx-cookie-consent-c import { NgxCookieService } from '../ngx-cookie/ngx-cookie.service'; import { NgxLanguageService } from '../ngx-language/ngx-language.service'; import { NgxCookieManagerService } from '../ngx-cookie-manager/ngx-cookie-manager.service'; +import { NgxCookieEventbusService } from '../ngx-cookie-eventbus/ngx-cookie-eventbus.service'; +import { Subscription } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class NgxCookieConsentService { + private langChangedSubscription: Subscription; activeLang = 'en'; constructor( private cookieManagerService: NgxCookieManagerService, private cookieService: NgxCookieService, private cookieConsentConfig: NgxCookieConsentConfigService, - private languageService: NgxLanguageService + private languageService: NgxLanguageService, + private cookieEventbusService: NgxCookieEventbusService, ) { this.activeLang = this.getConfig('defaultLanguage'); + this.langChangedSubscription = this.cookieEventbusService.languageChanged$.subscribe({ + next: () => { + this.activeLang = this.getConfig('defaultLanguage'); + } + }); } getTranslation(key: string, translationLang?: string): string { @@ -47,6 +56,9 @@ export class NgxCookieConsentService { setLanguage(lang: string): void { this.activeLang = lang; this.setConfig('defaultLanguage', lang); + console.log('test'); + this.cookieEventbusService.languageUpdatedSubject.next(lang); + console.log('test2'); } setConfig(key: string, value: string): void { diff --git a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.spec.ts b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.spec.ts new file mode 100644 index 0000000..7b3ebb1 --- /dev/null +++ b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.spec.ts @@ -0,0 +1,32 @@ +import { TestBed } from '@angular/core/testing'; + +import { NgxCookieEventbusService } from './ngx-cookie-eventbus.service'; + +describe('NgxCookieEventbusService', () => { + let service: NgxCookieEventbusService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NgxCookieEventbusService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should have languageChangedSubject', () => { + expect(service.languageChangedSubject).toBeTruthy(); + }); + + it('should have languageChanged$', () => { + expect(service.languageChanged$).toBeTruthy(); + }); + + it('should have languageUpdatedSubject', () => { + expect(service.languageUpdatedSubject).toBeTruthy(); + }); + + it('should have languageUpdated$', () => { + expect(service.languageUpdated$).toBeTruthy(); + }); +}); diff --git a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.ts b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.ts new file mode 100644 index 0000000..7be7b8a --- /dev/null +++ b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-eventbus/ngx-cookie-eventbus.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class NgxCookieEventbusService { + public languageChangedSubject: Subject; + public languageChanged$: Observable; + + public languageUpdatedSubject: Subject; + public languageUpdated$: Observable; + + + constructor() { + this.languageChangedSubject = new Subject(); + this.languageChanged$ = this.languageChangedSubject.asObservable(); + + this.languageUpdatedSubject = new Subject(); + this.languageUpdated$ = this.languageUpdatedSubject.asObservable(); + } +} diff --git a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.spec.ts b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.spec.ts index d01a206..89b5a5a 100644 --- a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.spec.ts +++ b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.spec.ts @@ -3,14 +3,41 @@ import { TestBed } from '@angular/core/testing'; import { NgxCookieManagerService } from './ngx-cookie-manager.service'; describe('NgxCookieManagerService', () => { - let service: NgxCookieManagerService; + let service: NgxCookieManagerService; - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(NgxCookieManagerService); - }); + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NgxCookieManagerService); + }); - it('should be created', () => { - expect(service).toBeTruthy(); - }); + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should return default language', () => { + spyOn((service as any), 'getConfig').and.returnValue('en'); + expect(service.getDisplayLanguage()).toEqual('en'); + }); + + it('should update default language', () => { + spyOn((service as any), 'getConfig').and.returnValue(['en', 'de']); + spyOn((service as any), 'setConfig'); + spyOn(service['cookieEventbusService'].languageChangedSubject, 'next'); + + service.updateDisplayLanguage('de'); + + expect(service['setConfig']).toHaveBeenCalledWith('defaultLanguage', 'de'); + expect(service['cookieEventbusService'].languageChangedSubject.next).toHaveBeenCalledWith(true); + }); + + it('should not update default language', () => { + spyOn((service as any), 'getConfig').and.returnValue(['en', 'de']); + spyOn((service as any), 'setConfig'); + spyOn(service['cookieEventbusService'].languageChangedSubject, 'next'); + + service.updateDisplayLanguage('fr'); + + expect(service['setConfig']).not.toHaveBeenCalled(); + expect(service['cookieEventbusService'].languageChangedSubject.next).not.toHaveBeenCalled(); + }); }); diff --git a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.ts b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.ts index 013e9e5..ce2bff5 100644 --- a/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.ts +++ b/projects/ngx-cookie-consent/src/lib/services/ngx-cookie-manager/ngx-cookie-manager.service.ts @@ -1,23 +1,32 @@ import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { NgxCookieService } from '../ngx-cookie/ngx-cookie.service'; import { NgxCookieConsentConfigService } from '../../config/ngx-cookie-consent-config.service'; +import { NgxCookieEventbusService } from '../ngx-cookie-eventbus/ngx-cookie-eventbus.service'; @Injectable({ providedIn: 'root' }) export class NgxCookieManagerService { cookieUpdated$ = new Subject<{name: string, state: boolean}>(); + languageChanged$: Observable; constructor( private cookieService: NgxCookieService, private cookieConsentConfig: NgxCookieConsentConfigService, - ) { } + private cookieEventbusService: NgxCookieEventbusService, + ) { + this.languageChanged$ = this.cookieEventbusService.languageUpdated$; + } private getConfig(key: string): any { return (this.cookieConsentConfig as any)[key]; } + private setConfig(key: string, value: string): void { + (this.cookieConsentConfig as any)[key] = value; + } + private getPrefixedCookieName(name: string): string { return this.getConfig('cookiePrefix') + name; } @@ -25,4 +34,19 @@ export class NgxCookieManagerService { getCookie(cookieName: string): boolean { return this.cookieService.get(this.getPrefixedCookieName(cookieName)) === true; } + + updateDisplayLanguage(locale: string): void { + const availableLanguages = this.getConfig('availableLanguages'); + + if (!availableLanguages.includes(locale)) { + return; + } + + this.setConfig('defaultLanguage', locale); + this.cookieEventbusService.languageChangedSubject.next(true); + } + + getDisplayLanguage(): string { + return this.getConfig('defaultLanguage'); + } } diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index d27e879..56fa402 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -3,6 +3,13 @@

home works!

This is just a demo-Page, choose the navigation to change the page.

+

+ Current language: {{ currentLanguage }} +

+ + + +
  • Home
    • diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 73acf06..c4b7dd6 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,15 +1,27 @@ import { Component, OnInit } from '@angular/core'; +import { NgxCookieManagerService } from 'projects/ngx-cookie-consent/src/public-api'; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { - constructor() { } + constructor( + private cookieManager: NgxCookieManagerService + ) { + } - ngOnInit(): void { - } + ngOnInit(): void { + } + + get currentLanguage(): string { + return this.cookieManager.getDisplayLanguage(); + } + + switchLanguage(lang: string): void { + this.cookieManager.updateDisplayLanguage(lang); + } }