feat(admin-ui): Add language switcher to Country & Zone list views

vendure-ecommerce · Nov 24, 2021 · 7552fae · 7552fae
1 parent 3c32fb2
commit 7552fae
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 11 deletions.
diff --git a/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html b/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html
@@ -7,6 +7,11 @@
             [placeholder]="'settings.search-country-by-name' | translate"
             class="search-input"
         />
+        <vdr-language-selector
+            [availableLanguageCodes]="availableLanguages$ | async"
+            [currentLanguageCode]="contentLanguage$ | async"
+            (languageCodeChange)="setLanguage($event)"
+        ></vdr-language-selector>
     </vdr-ab-left>
 
     <vdr-ab-right>
@@ -32,7 +37,7 @@
         <td class="left align-middle">{{ country.name }}</td>
         <td class="left align-middle">
             <a [routerLink]="['/settings', 'zones', { contents: zone.id }]" *ngFor="let zone of country.zones">
-            <vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip>
+                <vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip>
             </a>
         </td>
         <td class="left align-middle">

diff --git a/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.ts b/packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.ts
@@ -6,8 +6,10 @@ import {
     DeletionResult,
     GetCountryList,
     GetZones,
+    LanguageCode,
     ModalService,
     NotificationService,
+    ServerConfigService,
     Zone,
 } from '@vendure/admin-ui/core';
 import { combineLatest, EMPTY, Observable, Subject } from 'rxjs';
@@ -23,24 +25,39 @@ export class CountryListComponent implements OnInit, OnDestroy {
     searchTerm = new FormControl('');
     countriesWithZones$: Observable<Array<GetCountryList.Items & { zones: GetZones.Zones[] }>>;
     zones$: Observable<GetZones.Zones[]>;
+    availableLanguages$: Observable<LanguageCode[]>;
+    contentLanguage$: Observable<LanguageCode>;
 
     private countries: GetCountryList.Items[] = [];
-    private destroy$ = new Subject();
+    private destroy$ = new Subject<void>();
+    private refresh$ = new Subject<void>();
 
     constructor(
         private dataService: DataService,
         private notificationService: NotificationService,
         private modalService: ModalService,
+        private serverConfigService: ServerConfigService,
     ) {}
 
     ngOnInit() {
-        const countries$ = this.searchTerm.valueChanges.pipe(
-            startWith(null),
-            switchMap(term => this.dataService.settings.getCountries(999, 0, term).stream$),
-            tap(data => (this.countries = data.countries.items)),
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage);
+
+        const countries$ = combineLatest(
+            this.contentLanguage$,
+            this.searchTerm.valueChanges.pipe(startWith(null)),
+        ).pipe(
+            map(([__, term]) => term),
+            switchMap(term => this.dataService.settings.getCountries(999, 0, term).single$),
+            tap(data => {
+                this.countries = data.countries.items;
+            }),
             map(data => data.countries.items),
         );
+
         this.zones$ = this.dataService.settings.getZones().mapStream(data => data.zones);
+
         this.countriesWithZones$ = combineLatest(countries$, this.zones$).pipe(
             map(([countries, zones]) => {
                 return countries.map(country => ({
@@ -49,13 +66,19 @@ export class CountryListComponent implements OnInit, OnDestroy {
                 }));
             }),
         );
+
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
     }
 
     ngOnDestroy() {
-        this.destroy$.next();
+        this.destroy$.next(undefined);
         this.destroy$.complete();
     }
 
+    setLanguage(code: LanguageCode) {
+        this.dataService.client.setContentLanguage(code).subscribe();
+    }
+
     deleteCountry(countryId: string) {
         this.modalService
             .dialog({

diff --git a/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html b/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html
@@ -1,5 +1,11 @@
 <vdr-action-bar>
-    <vdr-ab-left> </vdr-ab-left>
+    <vdr-ab-left>
+            <vdr-language-selector
+                [availableLanguageCodes]="availableLanguages$ | async"
+                [currentLanguageCode]="contentLanguage$ | async"
+                (languageCodeChange)="setLanguage($event)"
+            ></vdr-language-selector>
+        </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="zone-list"></vdr-action-bar-items>
         <button

diff --git a/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.ts b/packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.ts
@@ -2,15 +2,16 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    Country,
     DataService,
     DeletionResult,
     GetZones,
+    LanguageCode,
     ModalService,
     NotificationService,
+    ServerConfigService,
 } from '@vendure/admin-ui/core';
 import { combineLatest, EMPTY, Observable, of } from 'rxjs';
-import { distinctUntilChanged, map, mapTo, startWith, switchMap, tap } from 'rxjs/operators';
+import { distinctUntilChanged, map, mapTo, switchMap, tap } from 'rxjs/operators';
 
 import { AddCountryToZoneDialogComponent } from '../add-country-to-zone-dialog/add-country-to-zone-dialog.component';
 import { ZoneDetailDialogComponent } from '../zone-detail-dialog/zone-detail-dialog.component';
@@ -25,6 +26,8 @@ export class ZoneListComponent implements OnInit {
     activeZone$: Observable<GetZones.Zones | undefined>;
     zones$: Observable<GetZones.Zones[]>;
     members$: Observable<GetZones.Members[]>;
+    availableLanguages$: Observable<LanguageCode[]>;
+    contentLanguage$: Observable<LanguageCode>;
     selectedMemberIds: string[] = [];
 
     constructor(
@@ -33,10 +36,12 @@ export class ZoneListComponent implements OnInit {
         private modalService: ModalService,
         private route: ActivatedRoute,
         private router: Router,
+        private serverConfigService: ServerConfigService,
     ) {}
 
     ngOnInit(): void {
-        this.zones$ = this.dataService.settings.getZones().mapStream(data => data.zones);
+        const zonesQueryRef = this.dataService.settings.getZones().ref;
+        this.zones$ = zonesQueryRef.valueChanges.pipe(map(data => data.data.zones));
         const activeZoneId$ = this.route.paramMap.pipe(
             map(pm => pm.get('contents')),
             distinctUntilChanged(),
@@ -49,6 +54,15 @@ export class ZoneListComponent implements OnInit {
                 }
             }),
         );
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage)
+            .pipe(tap(() => zonesQueryRef.refetch()));
+    }
+
+    setLanguage(code: LanguageCode) {
+        this.dataService.client.setContentLanguage(code).subscribe();
     }
 
     create() {